1. Coding Test
-
백준 문제풀기 (그리디[12/50] → 탐색[12/50] → 동적프로그래밍[11/50])
2. Live Academy
-
🛠가르치면서 거의 매일 교정하게 되는 영어 표현 "오랜만에" (예전 강의 리프레쉬) 🔗복습
-
💬"내가 걔한테 좀 심했나?" , "~하려고 했던 것 뿐인데" , "부모로서(형으로서) 잘 하다" , "내가 한 말 가지고 서운해 하더라" 🔗진도
3. Vanilla JS
-
How to Build a Kanban Board with JavaScript (No Frameworks)
- github push & docs 작성 & 리팩토링
-
쇼핑몰 SPA
-
기본적으로
location.href등을 이용해 URL 변경 처리를 하면, 브라우저는 해당 페이지로 이동하면서 페이지를 새로 불러오게 된다. -
history.pushState를 이용하면 URL만 업데이트하면서 웹 브라우저의 기본적인 페이지 이동 처리가 되는 것을 방지할 수 있다. -
window의
popstate이벤트를 통해 뒤로 가기나 앞으로 가기 등으로 브라우저의 URL이 변경된 경우를 감지할 수 있다. -
window.dispatchEvent(new CustomEvent({{커스텀 함수명}}, {{}}))을 사용해서 선언한 커스텀 이벤트를 발생할 수 있다. -
data-product-id로 custom attribute를 만들면.dataset.productId로 불러올 수 있다.
-
4. Interview
CORS
-
CORS는
Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. -
SOP(Same-Origin Policy)는“같은 출처에서만 리소스를 공유할 수 있다”라는 규칙을 가진 정책이다.스킴, 호스트, 포트가 동일하면 같은 출처라고 볼 수 있다 ex) https://evan-moon.github.io
-
출처를 비교하는 로직이 서버에 구현된 스펙이 아니라 브라우저에 구현되어 있는 스펙이다.
- 서버는 CORS를 위반하더라도 정상적으로 응답을 해주고, 응답의 파기 여부는 브라우저가 결정한다
-
CORS 해결법
- 백엔드에서 CORS관련 설정을 위한 세팅, 미들웨어 라이브러리를 통해
Access-Control-Allow-Origin: [https://evan.github.io](https://evan.github.io)식으로 출처를 명시해준다.
- 백엔드에서 CORS관련 설정을 위한 세팅, 미들웨어 라이브러리를 통해
- 프론트에서 웹팩과
webpack-dev-server를 사용하여 라이브러리가 제공하는 프록시 기능을 사용하면 아주 편하게 CORS 정책을 우회할 수 있다. 하지만 근본적인 문제 해결 방법이 아니기 때문에 결국 운영 환경에서 CORS 정책 위반 문제를 해결하기 위해서는 백엔드 개발자의 도움이 필요할 수 밖에 없다.
React LifeCycle
- 생성 될 때 (Mount)
- 업데이트 할 때 (Update)
- props or state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
- 제거 할 때 (Unmount)
shouldComponentUpdate (타이머 시작, 네트워크 요청)
- 메서드는 props나 state를 변경했을 때, 리렌더링을 할지 말지 결정하는 메서드
- 성능 최적화만을 위한 것이며 렌더링 목적을 방지하는 목적으로 사용하게된다면 버그로 이어질 수 있다.
componentDidMount (state나 리랜더링이 일어났을 때 해야할 동작,)
- 이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행한다.
- 함수형 Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다.
componentWillUnmount (타이머 제거, 네트워크 요청 취소)
- 이 메서드는 컴포넌트를 DOM에서 제거할 때 실행한다.
- 함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현할 수 있다.
⏱ Total study time - 7 hours 35 minutes
