[TIL] 190810

오늘 한 일

• 인프런 [Vue.js 완벽 가이드] 완강.
• 자바스크립트 노랭이 책 9장 [클라이언트 탐지] 요약본 1회독.

공부 내용

컴포넌트 디자인 패턴

• 컴포넌트 디자인 패턴은 총 4가지가 있다. common, slot, controlled, renderless
• common - 일반적인 컴포넌트 등록과 컴포넌트 데이터 통신 방식
• slot - 슬롯 속성을 이용하여 컴포넌트의 독립성과 확장성을 키운다. 예를 들어 부모 컴포넌트에서 마크업 확장 가능.
• controlled - 컨트롤 태그(체크박스나 라디오버튼 등)를 컴포넌트화할 때 유용(?) 결합력을 높이는 방법인데 사실 이부분은 아직 잘 모르겠다...
• renderless - render() 함수를 이용하여 템플릿 없이 스크립트 태그로만 렌더링하는 방식이다. 데이터 처리 컴포넌트에 유용(?)

Netlify를 이용한 서비스 배포

• vue cli를 통해 만든 애플리케이션은 npm run build 명령어로 빌드 할 수 있다.
• 빌드하고 나면 dist폴더에 스태틱 파일들이 담긴다.
• Netlify에 github 계정을 연동하고 내 특정 저장소를 연결한다. 그리고 Build Command(빌드 명령어)와 Publish directory(빌드된 파일 폴더)을 입력해준다.
• 빌드를 시작하면 로그가 찍히고 그걸 보고 에러를 찾을 수 있다.
• 또한 해당 git 저장소에 커밋을 하면 자동으로 새로운 배포 기록이 생성된다.
• SPA(싱글파일어플리케이션)의 경우, 사용자가 url을 입력했을 때 서버에서 처리할 수 없기 때문에 해당 서버에 설정을 추가해줘야 한다. (배포 사이트마다 설정 방식이 다르다. 여기에 각 서비스의 설정 방식이 나와있다.)
• .env 환경 변수 파일을 이용하여 옵션을 변경할 수 있는데, Vue CLI 3.0 부터는 웹팩 설정을 하지 않아도 해당 변수명 앞에 프리픽스로 'VUE_'를 붙여주면 어플리케이션에서 옵션명을 바로 사용할 수 있다.

클라이언트 탐지

• 클라이언트 탐지는 오랫동안 논란이 된 주제로, 브라우저마다 제공하는 기능과 명세가 다르기 때문에 발생하는 문제이다.
• 기능 탐지는 특정 브라우저 기능이 존재하는지 체크하는 방법으로 가장 우선시 해야하는 접근법이다. 브라우저 종류나 버전에 관계없이 해당 기능이 동작하는지만 알면 된다.
• 쿽스 탐지는 브라우저상의 버그를 피하기 위한 방법으로 해당 버그가 있는지 확인하는 방법이다.
• 브라우저 탐지는 userAgent(사용자 에이전트) 문자열을 통해 브라우저를 식별하는 방식으로 코드가 특정 브라우저에 의존하게 되므로 가장 마지막 선택으로 미뤄야 한다.
• 또한 브라우저 탐지를 위해 사용하는 userAgent 문자열은 브라우저의 역사에서 제조사들이 다른 브라우저인 것처럼 보이게 하려는 시도 때문에 대부분 mozila 문자열을 가지고 있고 점점 더 복잡한 문자열 체계를 가지게 된다.
• 놀라운 사실은 mozila의 어원이 넷스케이프가 최초의 브라우저 모자이크를 잡기위한 (모자이크 킬러)의 줄임말이었다는 사실.