FrontEnd(Vue, Javascript, JQuery) (24) 썸네일형 리스트형 Web Browser 동작원리 Re 1) 브라우저는 DNS를 통해서 특정 IP를 특정한다.2) 브라우저는 서버에 요청을 하는데 여기서 3 way-handshake가 실행된다.3) 서버에 Http Request를 하고 Http Response를 통해 데이터를 받는다.4) 웹 표준화 기구인 W3C의 명세에 따라 HTML, CSS를 해석한다 → parsing5) 렌더링 엔진은 HTML을 parsing하여 DOM Tree를 생성6) HTML을 parsing하다가 css를 만나게 되면 HTML parsing을 멈추고 CSS parsing을 하여 CSSOM Tree 생성7) CSS parsing이 멈추면 다시 HTML을 다시 parsing8) HTML parsing을 하다가 JavaScript를 만나면 JavaScript엔진에게 제어 권한을 넘긴다... JavaScript 동작 원리 정작 JQuery, JavaScript쓰면서 동작 원리를 몰랐다. JavaScript동작 원리1) Stack에 간단한 프로그램이 실행된다.2) Stack에 있는 일이 다 처리된 후에 Queue에 Ajax, SetTimeOut, eventListener을 가져와서 Stack에 넣고 실행시킨다. ※ JavaScript의 경우 기본적으로 동기적으로 순서대로 실행시킨다. 그런데 예외적으로 Ajax, SetTimeOut,eventListener들은 비동기적으로 실행한다.→ Single Thread이다. Component name "Header" should always be multi-word 이전 프로젝트에서는 처음에 꼭 multiple-word가 아니어도 되도록 설정했었다. 그러나 ESLint 규칙 중 'vue/multi-word-component-names'는 Component의 이름을 단일 단어로 하면 안됐다. 이미지와 같이 multi-word로 바꾸니 해결됐다. [vue/no-multiple-template-root]The template root requires exactly one element 제목과 같은 에러가 났다. 원인은 다음과 같다.Vue.js에서 "The template root requires exactly one element."라는 에러가 발생하는 경우는 보통 Vue 컴포넌트의 템플릿에서 두 개 이상의 최상위 요소가 있는 경우이다. Vue는 각 컴포넌트의 템플릿이 하나의 루트 요소로만 구성되어야 한다고 요구합니다. 다음 그림을 보면 이해가 갈 것이다.img태그, Helloworld 태그가 있다. 그러므로 두 개의 최상위 요소가 있는 것이다. 저렇게 나오는 것이다.그냥 div 태그로 하나로 감싸면 최상위 태그는 div하나가 되기 때문에 해결된다. Parsing error: No Babel config file detected for C:\ToyProject2\savefront\babel.config.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint vue 프로젝트를 만드니 저런 에러가 떴다.우선 에러의 의미를 직역하자면 "babel.config.js 파일을 찾지 못해"라는 것이다. 근데 루트 경로에 분명히 babel.config.js가 있다. 원인은 다음과 같다. vue-eslint-parser 파서에 의해 발생. App.vue가 Babel에 처리하는 형식으로 변환되지 않아서 발생함.Babel : 최신 문법을 이전 버전의 브라우저에서도 동작할 수 있는 버전의 자바스크립트 코드로 변환해주는 도구ESLint : 자바스크립트 코드에서 잠재적인 오류를 찾고, 일관된 코딩 스타일을 유지하기 위한 정적 코드 분석 도구 주로 나와있는 해결 방법은 두 개다. 1) .eslintrc.js 다음 이미지로 예시를 들면서 설명하겠다. 프로젝트에 .js 파일을 새로 .. Vue3 디버깅 ToyProject1 하면서 우선 하나만 페이지 만들어보자는 생각으로 Debugging을 우선 생략하고console.log로 했다. 이게 더 바보같은 짓이었다... 하면 할수록 debugging 먼저 설정할 걸 후회했다. 일단 chrome에서 제공하는 vue component에 대한 이벤트나 데이터같은 정보를 아는 방법을 알아보자 1) Chrome에서 제공하는 devTools 설치하기 https://chromewebstore.google.com/?pli=1 로 들어간다. 그러고 vue를 검색하면 다음과 같은 이미지가나온다. 그 후 vue.js devtools를 설치한다. 2) 설치 후 개발자 도구(F12) 열기그러면 다음과 같은 그림이 나온다.왼쪽 상단 탭에 [ >> ] 에 [ Vue ] 를 클릭하면 .. [ Composition API ] vs [ Optional API ] 이전 글에서 Vue Import 예약어 관련해서 Composition API라는 말이 나왔다. Optional API먼저 Optional API를 알아보자. 주로 Vue2에서 쓰인다.컴포넌트의 속성, 메소드, 라이프사이클 훅 등을 객체 리터럴 형태로 정의할 수 있다.→ 객체 리터럴이란 중괄호({})를 사용하여 객체를 정의하고, 속성-쌍 (key-value) 형태로 프로퍼티를 구성하는 것이다. 다음 이미지가 예시이다. data 객체는 컴포넌트의 데이터 속성을 정의하고,methods 객체는 컴포넌트의 메소드를 정의한다.created는 Option API에서 사용하는 라이프사이클 중 하나이다. → 상당히 직관적이다. 각각의 역할이 무엇인지 직관적으로 알 수 있다. 그런데 저런 함수가 많아지면 .. vue, vue-router, vuex, axios ☏ 1) import Vue from 'vue' vue를 사용하는데 기본적인 API이다. 1 - MVVM 패턴Vue.js MVVM(Model-View-ViewModel) 패턴을 기반으로 한 프론트엔드 라이브러리이다.데이터 바인딩과 뷰 갱신을 효율적으로 관리하여 UI와 비즈니스 로직을 분리하는데 도움을 준다. 다음 이미지가 그 예시다. axios.post를 통해 해당 url을 통해 서버에 갔다와서 reactive라는 함수를 통해 state객체를 저장했다. 그 후, 2번 째 그림에 있는 state.form.email을 통해 사용자단에 동적으로 보여주는 것이다.결국 MVVM의 View-Model부분에 해당하는 데이터를 View단에서 처리하는 것이다. 2. 선언적 렌더링Vue.js는 HTML 템플릿을 사용하여 U.. 이전 1 2 3 다음
