앞으로의 과제
- UI 디자인
- 기능별 state 정의
- 공통 컴포넌트 작성
- 컴포넌트 구조 작성
- story book..?
Keyword
- foundation: 모두 외우진 않더라도 어떤 것들이 필요하고 어떻게 작성하는지 알고 있어야겠다
eslint, stylelint, webpack, babel 등..
좋은 코드
- 원하는 결과를 얻을 수 있는 실행되는 코드
- side effect가 없는 코드
- 재사용이 가능한 코드
sw - 읽기 쉬운 코드
- 중복이 없는 코드
- 테스트가 용이한 코드
SSR과 CSR의 차이
SSR은 서버사이드 렌더링으로 서버에서 웹페이지 렌더링을 하여 처리한 데이터만 클라이언트로 넘겨줍니다
CSR은 클라이언트 사이드 렌더링으로 작성된 html/css/javascript 파일 자체를 넘겨주어 클라이언트 쪽에서 렌더링을 할 수 있도록 합니다
RESTful API
RESTful / REST는 HTTP 통신을 하기 위한 통신 규약입니다. RESTful / REST API는 통신 규약을 지킨 API를 의미합니다
CORS, 대응법
교차 출처 리소스 공유 (Cross-Origin-Resource Sharing)는 다른 출처의 자원에 접근할 수 있는 권한을 부여하는 것입니다. 현대의 웹은 단순히 문서를 제공하는 것이 아닌 웹 어플리케이션으로 불릴만큼 제공하는 정보의 양이 많고 복잡성이 증대되었기 때문에 상호 데이터를 주고 받는 경우가 빈번해졌습니다. 브라우저는 보안을 유지하기 위해 default로 다른 출처에 대한 권한을 막고, 서버에서 허용한 출처에 대해서만 접근 권한을 부여합니다. CORS는 브라우저 스펙입니다
CORS를 대응하기 위해서는 서버에서 Access-Control-Allow-Origin 헤더에 출처를 설정해주는 것입니다.
프론트엔드에서 CORS를 대응하는 방법은 webpack-dev-server에서 제공하는 proxy 기능을 설정하여 CORS를 우회할 수 있습니다
자바스크립트
-
var 선언과 window 객체
var로 변수를 생성하면 윈도우 객체에 프로퍼티로 저장됩니다. 윈도우 객체는 브라우저의 최상위 객체로 어디서든 접근 가능합니다. 때문에 전역 객체라고도 부릅니다.
전역 객체는 어디서든 접근이 가능합니다. -
블로킹 / 논 블로킹
블로킹은 함수 호출시 호출한 함수의 결과 값이 돌아올 동안 다른 작업을 하지 못하도록 막는 것이고
논 블로킹은 호출한 함수의 결과 값을 기다리지 않고 작업 흐름을 계속 이어가는 것입니다 -
화살표 함수
자바스크립트의 화살표 함수는 흔히 람다식이라고도 부르며 함수를 간략히 작성할 수 있다는 장점이 있습니다.
하지만 함수 내부에서 가리키고 있는 this의 값이 함수를 선언한 곳을 가리키게 되어 함수 내부에 this를 사용한다면 주의해야 합니다. 일반 함수 내부에서 선언한 this는 함수 자신을 가리킵니다.
css
- box-sizing: border-box;
border-box는 컨텐츠 크기 내부에 padding, margin의 크기를 설정하여 최종 사이즈를 컨텐츠 사이즈에 맞추지만 content-box는 컨텐츠 사이즈에 추가로 padding과 margin의 크기를 줍니다
content-box보다 크기를 쉽게 예상하고 조절가능하다.
border-box는 컨텐츠의 크기를 여백과 테두리까지 고려한다.
사이에 border와 padding 을 줘도 총 너비로 준 값을 그대로 유지한다.
- margin: 마진은 위아래 auto로 중앙 정렬이 되지 않는다
가치
없어져야 있었다는걸 깨닫게 돼
나의 오늘 하루가 누군가가 간절히 바라던
하루일지도 모른다
물론 그게 무슨 상관이겠나
그럼에도 그만큼 가치가 있다는 것이다
