FrontEnd(Vue, Javascript, JQuery) (24) 썸네일형 리스트형 Vue 웹 페이지 생성 순서 개인적으로 작성한 ToyProject1을 기준(기본 Vue 프로젝트 생성)으로 알아본다.처음이니까 어떻 돌아가는지나 보자 ※ 필자의 경우 네이버의 vibe가 vue의 참고 페이지로 삼았다. 순서대로 프로젝트 경로, main.js, App.vue, index.html이다. 제일 먼저 실행은 main.js부터 시작이다. 내가 이해한 방식으로 요약하자면"웹 페이지로 만들건데 store와 router라는 javascript import할 것이고, index.html 에 있는 id가 app인 곳에다가App.vue를 삽입(마운트) 할거야"다. 또한 3번 째 사진의 를 통해서 SAP를 구현하는 중요한 부분이다.router.js를 보자. (세세한 라이브러리나 함수같은 경우는 따로 정리할 것이다. 여기서는 기본틀만) .. Vue 기본 파일 분석 Vue의 기본 파일을 분석해봐야겠다 완벽하게 외우지는 못하겠지만 버벅대더라도 왜 하는지 좀 알고 해야겠다. 1) vue.config.js● 개발 서버 설정(내가 설정한 부분) : 개발 시 사용되는 로컬 서버의 포트 번호나 프록시 설정 등을 지정할 수 있다. 다음은 내가 설정한 Proxy Server이다. /api 로 들어오면 8080포트로 이동하라는 의미다. CORS 방지● 빌드 설정 : 프로덕션 빌드 시의 출력 경로, 파일명 규칙, CSS/JS 파일의 압축 여부 등을 설정할 수 있다. → .. SPA vs MPA - CSR vs SSR SPA(Single Page Application)- 하나의 페이지로만 구성되어 있어 CSR에 적합하다. 데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 새로고침 되지 않고 다른 페이지로 넘어가지 않는다. Vue, Angular, React 프레임워크로 만든 홈페이지들이 대부분 여기에 속한다. (ex. 네이버 - 바이브(Vibe)) 장점- 서버가 해야할 역할을 클라이언트 부담하므로, 서버 부담이 경감- 백엔드와 프론트 개발 영역을 명확하게 구분 단점- 초기 구동 속도가 느림 (처음 접속 시, 사이트 구성과 관련 없는 모든 리소스를 한 번에 다 받음)- 클라이언트에 중요 비즈니스 로직이 노출될 수 있음 MPA(Multiple Page Application)- 여러 개의 페이지로 이루어진 홈페이지이.. Vue 명령어 이번에 새롭게 vue를 이용한 사이드 프로젝트를 이용하면서 vue에 대한 흐름을 대략적이나마 이해하게 되었는데아직은 자유롭게 쓰는 느낌이 아니라 약간의 이해만 가지고 쓰는 느낌이 난다.... 명령어에 대해 복기하면서 공부한다. 차근차근 App.vue부터..App.vue- 루트 Component로써 웹이 실행되는데 가장 핵심적인 역할을 한다.- 전역 컴포넌트로써 하위 컴포넌트에 특별한 조치를 취하지 않는 이상 하위 컴포넌트에 영향을 간다. 현재 나의 App.vue와 vuex를 import한 store.js 코드 상태이다. 1. store.commit("setAccount", id);- 개인적인 공부 공간이기 때문에 다른 곳은 이해가 가고 이해됐으므로 Pass- setup()에 있는 store.commi.. JavaScript - Closure 정의 : 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. 이해가 안되므로 다음 그림과 함께 보자... 여기서 맨 처음의 lexical 환경은 전역으로 된다.그 이후 addOne을 실행할 경우에 addOne에 대한 새로운 lexical환경이 생기게 되는 것이다.즉, addOne이란 함수가 Lexical 환경을 참조하는 하위함수가 되는 걸로 이해했다. 만약 addOne(5)가 실행되게 되면 num=5의 값이 인자로 값이 있지만 one이라는 값은함수 안에는 없다. 결국 없으므로 상위에 있는 전역 Lexical에 있는 one=1이라는 값을 가져와서.. Vue 예약어(?) - 이해하고 외우자 Vue에 대해서 간단한 화면이나 data관련 예약어 정도는 알아야 한다. 상위 컴포넌트 ① import axios from 'axios' : Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. → 자동으로 JSON데이터 형식으로 변환 ( 그래서 npm install 이었구나 ) ※ Promise : 비동기 처리를 위한 패턴으로 ES6에서 도입되었다. 프로미스의 등장으로 전통적인 콜백 패턴의 단점을 보완할 수 있게 되었다. → Promise는 비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfilled, rejected) 정보를 .. Vue - package.json 우선 npm이란? npm(Node Package Manager)은 node.js를 위한 패키지 매니저이자, node.js를 위한 오픈소스 생태계이다.→ npm은 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하고 있다. 기본적으로 package.json은 문서이다.개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서→ (SpringFrameWork에서 사용하는 xml과 비슷한 역할을 하는 것으로 보인다.) ● 자신의 프로젝트가 의존하는 패키지의 리스트● 자신의 프로젝트의 버전을 명시● 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. 개발하는데 중요한 것은 개인적으로 dependencies하면 되지 않나 싶다 Node.js/Vue ==============================================================명령어 (내가 Vue프로젝트를 개발하기 위한 간단한 명령어들만 우선 기입)==============================================================Node.js는 기본적으로 최신 버전으로 설치하는 것이 가장 좋다. npm install -g @vue/cli→ vue를 사용할 수 있도록 하는 명령어이다. vue create 프레젝트명→ vue 프로젝트를 만드는 명령어이다. npm run serve→ vue를 local에서 실행시킬 수 있는 명령어이다. npm install axios→ http통신을 할 수 있도록 하기 위한 명령어이다. npm install .. 이전 1 2 3 다음
