본문 바로가기

전체 글89

[Vue.js] Vue (MVVM, Props와 Event, v-model) Vue란? Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크다. 표준 HTML, CSS, JavaScript를 기반으로 구축되며, 단순한 것부터 복잡한 것까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반의 프로그래밍 모델을 제공한다. 선언적 렌더링과 반응성 Vue에는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태를 기반으로 선언적 렌더링을 할 수 있으며, JavaScript 상태 변경을 추적하고, DOM 요소에 연결되어 변경이 발생하면 DOM을 효율적으로 자동 업데이트 하는 반응성이라는 두 가지 핵심 기능이 있다. 이를 바탕으로 Vue는 접근하기 쉽고(Approachable), 변하기 쉬우며(Versatile), 효율적이며(Performant),.. 2023. 5. 24.
[Vue.js] Vue의 Instance와 속성 Instance 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. Vue를 설치한 후, new 키워드로 Vue 생성자 함수를 호출해 새로운 인스턴스를 만들 수 있다. new Vue( ... ); Vue의 정보를 객체 상태로 넘겨주기만 하면 앱을 생성할 수 있다! 인스턴스 내부에는 여러 속성이 올 수도 있는데 자주 사용하는 속성들에 대해서 나열하면 다음과 같다. new Vue({ el: 인스턴스가 그려지는 화면의 시작점 (특정 html 태그) components: 화면에 표시할 요소 data: 뷰의 반응성이 반영된 데이터 속성 computed: 계산된 데이터 속성 methods: 화면의 동작과 이벤트 로직을 제어하는 메소드 created: 뷰의 라이프 사이클과 관련된 속성 watch: data에서.. 2023. 5. 24.
[Vue.js] Vue에서의 Virtual DOM DOM DOM이란 Document Object Model이라는 뜻으로 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. HTML 파일을 받으면 문자열을 파싱해서 DOM 트리로 만든다. 이 DOM 트리와 CSS로 만든 CSSOM 트리를 결합하여 Render 트리를 만들고 레이아웃과 페인팅 작업을 하면 비로소 우리의 화면이 우리의 눈에 보이게 된다. Virtual DOM JavaScript의 경우, DOM을 조작할 때마다 트리를 수정하여 레이아웃을 다시 그리고 리페인팅을 해야 한다. 이 과정이 반복되게 되면 비용이 커지게 되고 충분히 무거워질 수 있는 작업이 된다. 이때 등장한 것이 바로 Virtual DOM이다. Virtu.. 2023. 5. 24.
[Vue.js] Vue 시작하기 (CDN vs NPM vs CLI) 공식적으로 Vue를 설치하는 방법에는 크게 세 가지가 있다. 1. 직접 script에 추가하는 CDN 2. NPM을 이용한 설치 3. 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI 각각의 방법으로 직접 설치하여 비교해 보았다. 더보기 참고) package version node v16.17.0 npm v8.15.0 vue/cli v5.0.8 CDN CDN의 경우에는 직접 HTML에 script 한 줄을 추가하여 간편하게 Vue를 사용할 수 있다. 학습 목적으로 사용할 때는 위의 첫 번째 코드로 최신 버전을 사용할 수 있고, 프로덕션 환경인 경우에는 두 번째 코드처럼 특정 버전의 빌드 파일을 받을 수 있다. 적용하면 다음과 같이 script 내에서 Vue를 사용할 수 있다. NPM 공식 문서에 .. 2023. 5. 22.
[programmers] 불량 사용자 📝 [Lv2] 불량 사용자 👀 문제 설명 개발팀 내에서 이벤트 개발을 담당하고 있는 "무지"는 최근 진행된 카카오이모티콘 이벤트에 비정상적인 방법으로 당첨을 시도한 응모자들을 발견하였습니다. 이런 응모자들을 따로 모아 불량 사용자라는 이름으로 목록을 만들어서 당첨 처리 시 제외하도록 이벤트 당첨자 담당자인 "프로도" 에게 전달하려고 합니다. 이 때 개인정보 보호을 위해 사용자 아이디 중 일부 문자를 '*' 문자로 가려서 전달했습니다. 가리고자 하는 문자 하나에 '*' 문자 하나를 사용하였고 아이디 당 최소 하나 이상의 '*' 문자를 사용하였습니다. "무지"와 "프로도"는 불량 사용자 목록에 매핑된 응모자 아이디를 제재 아이디 라고 부르기로 하였습니다. 예를 들어, 이벤트에 응모한 전체 사용자 아이디 목록.. 2023. 5. 17.
[programmers] 야근 지수 2023.05.15 - [Study] - [algorithm] Max Heap 구현하기 [algorithm] Max Heap 구현하기 프로그래머스 기준 레벨이 3 정도 되면, Heap을 사용해야 하는 일이 생긴다. 하지만, 다른 언어와 달리 JavaScript에는 MaxHeap이 없기 때문에 직접 구현을 해서 사용해야 한다. 하나 만들어 둔 후, 문제 ktmihs.tistory.com 📝 [Lv3] 야근 지수 👀 문제 설명 회사원 Demi는 가끔은 야근을 하는데요, 야근을 하면 야근 피로도가 쌓입니다. 야근 피로도는 야근을 시작한 시점에서 남은 일의 작업량을 제곱하여 더한 값입니다. Demi는 N시간 동안 야근 피로도를 최소화하도록 일할 겁니다. Demi가 1시간 동안 작업량 1만큼을 처리할 수 있다고 .. 2023. 5. 16.

티스토리툴바