Frontend

vue 공부를 시작하여 vue의 특징을 살펴보고 Vue의 프로젝트 생성 및 파일 구조를 알아 보았습니다.프론트엔트 개발을 쉽게하기 위한 javascript 프레임워크MVVM 패턴의 VM에 해당함Single Page Application(SPA)을 구축하는데 이용 가능함

Creation / Mounting / Updating / Destruction의 단계를 거침컴포넌트들을 초기화하는 단계이며 라이프 사이클 중 가장 처음 실행됨서버렌더링에서 지원함클라이언트나 서버 렌더에서 처리해야 할 일이 있으면 이 단계에서 진행컴포넌트들이 dom에

Template HTML,CSS 등 마크업 속성과 뷰 인스턴스에서 사용자가 볼 수 있는 html 형식으로 변환해주는 속성 Directive를 사용한다. Directive Vue 의 기능들을 사용하기 위해서 사용하는, HTML 태그 안에 들어가는 하나의 속성\ v-

코드가 작서된 순서대로 실행되는 것javaScript로 구성된 vue는 기본적으로 동기식 처리를 한다.코드가 작성된 순서와는 상관없이 지정된 순서에 의해 실행되는 것호출하는 함수가 많아질수록 코드의 의존성이 올라가며, 가독성과 효율성이 떨어진다.재귀함수와 같은 형태로,

독립적인 단위 모듈구현,명세화,패키지화,배포가 될 수 있어야 함하나의 컴포넌트는 하나 이상의 클래스로 구성될 수 있음page : 모든 구성요소를 포함하는 가장 큰 단위dialog : 대화상자header bar : 상단에 위치하면서 제목을 표시하고 페이지 이동과 관련된

컴포넌트를 정리해두고 클라이언트의 요청경로에 따라 컴포넌트를 불러와 페이지를 구성함vue-router 설치명령어 : npm install vue-routerrouter/index.jsmain.js

vue에서 다국어를 처리 할 때 사용 명령어 : npm install vue-i18n main.jslocalse/indexen.jsonko.jsonHelloWorld.vue

토큰, 세션 등 상태를 관리하는 라이브러리명령어 : npm install vuexstore/index.jsmain.jsHello.vue

필터는 전역에 선언되어 이 필터가 어떻게 동작하는지 확인하려면 해당 함수가 선언된 파일을 찾아봐야하지만 Computed를 사용하면 해당 컴포넌트내에 있어서 찾기 좋음필터를 걸고 싶을 때 사용HelloWorld.vue

데이터를 설명하는 데이터meta data를 정의하게 되면 브라우저나 검색 엔진, 다른 웹서비스에서 해당 웹페이지에 대한 meta data를 토대로 분석함인스타그램의 해시태그('+ 데이터를 표현하기 위한 목적데이터를 더 빨리 찾기 위한 목적(인덱스의 역활)html 메타

Client Side Rendering의 약자렌더링이 클라이언트에서 일어남서버에서 클라이언트에게 HTML와 JS를 보내주고 클라이언트는 그것을 받아 렌더링함페이지 이동 자연스럽고 빠름Server Side Rendering의 약자서버쪽에서 렌더링 준비를 끝마친 상태로 클

컴포넌트를 정리해두고 클라이언트의 요청경로에 따라 컴포넌트를 불러와 페이지를 구성함vue3.0부터는 vue-router가 아닌 vue-router@next를 설치 명령어 : npm install vue-router@nextrouter/index.jsmain.js

Nuxt는 파일 트리 구조를 기반으로 vue-router를 자동 생성해 줌이런 파일 구조를 가졌을 시 Nuxt에서 자동 변경된 vue-router파일 명에 \_를 붙여서 사용함이런 파일 구조를 가졌을 시 Nuxt에서 자동 변경된 vue-router

로그인/로그아웃 구현 중 서브 도메인이 다른 상황에 쿠키 값을 공유해야 하는 상황이 생겨 Cookie에 대해 알아보았다.