한준호

반응형 웹을 만들다 보면 브라우저 창의 높이, 넓이에 따라 사이즈를 조절해줘야 하는 경우가 생긴다. html태그에 ref를 통해 이름을 부여하고 window.addEventListener를 통해 mount될때마다 이벤트 리스너를 동작시켜 컴포넌트의 높이를 구하는 메소드를 호출한다. this.$refs를 통해 DOM에 직접 접근하여 기본적으로 제공되는 clientWidth, clientHeight를 통해 너비, 높이를 가져올 수 있다,

상황: 컴포넌트 간 데이터간 데이터 전송을 하는 과정에서 부모 컴포넌트 콘솔에는 데이터가 찍히는데 자식 컴포넌트에서 props가 먹지 않는 상황 data에 lesson을 객체로 초기화하고 REST api를 통해 lesson 객체를 초기화하였다. 콘솔까지 찍히는걸 확인했는데 자식에게 데이터 전달이 되지 않는다. 해결 1. lesson을 {}가 아니라 []또는 null로 초기화한다. 데이터형이 맞지 않음으로써 생기는 문제로 보인다. lessonId가 넘어가지 않는 문제는 아직 해결 못함

computed와 watch 가급적 computed를 사용할 것 computed는 선언형 방식이고, watch는 명령형 방식. 종속된 값이 변경되는것을 예상하여 미리 계산하여 선언해놓고 사용하는 방식이 computed 특정 데이터를 감시하고 변경에 대한 반응이 (함수 호출과 같은) 필요한 경우 watch computed가 유용한 경우 데이터의 변화에 따라서 화면에 계산된 값을 화면에 출력해야 하는 경우 캐싱이 필요한 경우, 입력값이 같을 경우 기존 캐시된 데이터를 사용하기 때문에 computed 구현체가 호출되지 않습니다. watch를 사용해야 하는 경우 단순한 계산 외에 비동기 처리 로직이 포함되는 경우 캐싱없이 매번 호출해야하는 경우 템플릿에 출력하지 않는 값의 변화를 관찰해야 할 경우 velog.i..

■DOM(Document Object Model) - 웹 페이지를 객체로 표현하는 모델. ■Dom은 어떻게 움직일까 1. 브라우저는 HTML Parser를 통해 HTML 태그를 파싱하여 돔 트리 를 구성한다. 또한 브라우저는 스타일 시트에서 CSS Parser를 통해 Css를 파싱하여 스타일 규칙 을 만들어낸다. 2. 돔 트리와 스타일 규칙이 합쳐져 렌더 트리 를 만들어낸다. 그런데 DOM에는 수 천개의 노드들이 존재하고 이에 대한 수정을 필요로 한다면? 브라우저의 속도가 현저히 낮아질 것이다. 현재 웹 개발은 DOM의 변경에 맞추어 렌더링도 여러번 하는 구조이다. 즉 DOM에 변경사항이 생겨서 DOM을 조작해야 한다면 모든 과정이 비용이다. 이런 이슈를 해결하기 위해 가상 DOM이 등장했다. ■가상 D..

■공통점 가상 DOM을 활용합니다. 반응적이고 조합 가능한 컴포넌트를 제공합니다. 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있습니다.(vuex, redux를 말하는 듯 하다) ■차이점 1 React에서는 모든 것이 JavaScript이다. JSX를 통해서 HTML을 구성하고, CSS도 JavaScript로 한다. *JSX : JavaScript에서 작동하는 선언적인 XML 유사 문법 반면 Vue는 고전적인 웹 기슬을 받아들여 HTML / JavaScript / CSS 따로 개발한다. (Vue에서도 렌더링 함수, JSX사용 가능) 2 React에서는 컴포넌트의 상태가 변경되면 모든 컴포넌트를 재 렌더링한다.(데이터 구조를 변경하여 방지할 수는 있다 - shou..

1. 웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 PC에서는 나눔고딕 폰트가 노출됩니다. 하지만 웹폰트를 사용하면, 나눔고딕 폰트 설치 유무와 상관 없이 나눔고딕 폰트가 노출됩니다. 2. 웹폰트 사용 방법 css파일 생성 후 @font-face { font-family: NanumSquareWeb; src: url(NanumSquareR.woff) format('woff') } 이후 프로젝트를 컴파일 하면 폰트가 변경됩니다. bold, light등 다양한 옵션을 지정할..