한준호

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

■vertical align 오픈한 웹사이트에 css 문제가 생겼다. 번역에 따라 영역을 벗어나는 텍스트가 보였다. 1차 수정. 영역은 맞췄는데 정렬이 문제다. 수직 정렬을 하고 싶은데 무슨 짓을 해도 안됐다. 그런데? display: flex 를 넣으니 수직 중앙 정렬이 되었다.

■v-row hihi hihi v-row 안에 v-col을 넣으면 justify 속성이 먹지 않는다.

■Display Property {{ $t("Uopload Resume") }} 파일을 첨부할 수 있는 v-file-input 태그이다. 이는 다음과 같은 레이아웃을 가진다 다음과 같이 부트스트랩의 inline-block 속성을 추가한다면 다음과 같이 사용하는 공간 만큼 크기가 줄어들게 된다. getbootstrap.com/docs/4.0/utilities/display/ Display property Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some e..

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..

■ 부트스트랩 탄생 배경 웹 페이지 개발을 진행할 때 개발자 마다 개발 도구와 라이브러리가 다름으로 인해 생기는 conflict를 해결하기 위해 트위터의 개발자와 UI디자이너가 표준을 개발 이후 하나의 프레임워크로 발전했다. ■ 부트스트랩 각종 레이아웃, 버튼, 입력 폼 등의 디자인을 CSS와 Javascript로 만들어 놓았다. 각 디자인에 속해있는 모든 요소에 대한 파라매터를 내장하고 있기 때문에 개발자가 용도에 맞게 커스텀 할 수 있다. 또한 "그리드 시스템"을 사용하여 반응형 웹 디자인을 지원한다. bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인..

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