프론트엔드

useReducer

정의 useState의 대체 함수이다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환 - 공식 문서 const [state, dispatch] = useReducer(reducer, initialArg, init) 특징 redux의 reducer와 비슷하게 동작한다. 또한 init에 state 생성 함수를 전달함으로써 초기화 지연이 가능하다. dispatch의 회피 - Reducer Hook에서 현재 state와 같은 값을 반환하는 경우 자식을 리렌더링, effect 발생시키지 않고 이것들을 회피 활용 브라우저 상에서 이미지를 편집하는 서비스를 개발하고 있다. 배경 이미지를 설정하고, 다른 이미지나 텍스트를 삽..

Vanila Js로 사진첩 사이트 만들기

링크: https://programmers.co.kr/skill_check_assignments/100 개요 사진첩 사이트를 구현했다. 앱 기동시 root 디렉토리의 폴더,파일들이 렌더링되고 breadcrumb에 경로가 표시된다. 폴더를 클릭해서 해당 폴더를 볼 수 있고, 파일을 클릭시 이미지를 볼 수 있다. 이미지창은 ESC 혹은 이미지 밖 클릭 시 닫을 수 있다. breadcrumb의 경로를 클릭 시 해당 경로로 이동한다. 데이터 로딩 시에 로딩 UI가 보여지고 로딩이 끝나면 없어진다. 추가 요구사항 UI 요소는 컴포넌트화, 각 컴포넌트가 의존성을 지니지 말 것 API 호출 중 에러가 발생했을 때의 처리 , 사용자에게 인지시킬 것 ES6 모듈 형태로 작성 API 호출은 fetch로 , async aw..

Vanila Js로 SPA 만들기 - 리팩토링

링크 : https://hyunwoo12.tistory.com/3 기존 코드는 위에서 볼 수 있다. 위 링크의 리뷰한 사항을 바탕으로 리팩토링을 진행했다. 1,2) 라우팅 담당하는 부분을 기존 index.js 에서 router.js로 분리하기 router.js function Router() { this.route = () => { // 기존과 동일 } this.setUrl = (url) => { history.pushState(null, null, url); this.route(); } window.addEventListener('popstate', this.route) } const router = new Router(); export { router }; Router 함수를 따로 만들어서 분리했다...

재조정 (Reconciliation)

리액트 공식문서의 재조정(Reconciliation)을 읽고 정리해 봤다. 개요 리액트는 UI를 갱신할 때 (컴포넌트를 다시 그릴 때) 2가지 조건에 기반하여 두 개의 리액트 엘리먼트 트리를 비교하고 트리를 갱신한다. 1) 엘리먼트의 타입이 다르면 서로 다른 트리이다. 2) key가 같으면 같은 엘리먼트다 (변경하지 않는다). 이 2가지 조건에 기반하여 트리를 비교하면, 기존 O(n^3) 에서 O(n)으로 시간 복잡도를 줄일 수 있다. 비교 알고리즘 2개 트리를 비교할 때 root 엘리먼트부터 비교한다. 엘리먼트의 타입이 다른 경우 이전 트리를 버리고 완전 새로운 트리를 구축한다. 이전 트리와 연관된 모든 state는 사라진다. 자식 컴포넌트들의 state도 사라진다. ex) ...child도 똑같이 5..

Vanila Js로 SPA 만들기

링크: https://programmers.co.kr/skill_check_assignments/199 개요 Vanila JS를 사용해서 쇼핑몰 사이트를 구현했다. 상품 목록페이지에서 상품 목록을 조회할 수 있고, 상품을 클릭 시 해당 상품의 상세 페이지로 이동한다. 상품 상세페이지에서 상품의 상세 정보를 조회할 수 있고, 상품의 옵션을 선택한 후 주문하기를 클릭하여 장바구니에 담을 수 있다. 장바구니 페이지에서 장바구니 에 담은 상품들을 조회할 수 있고, 주문하기 버튼을 클릭하여 해당 상품들을 주문할 수 있다. 라우팅 기본 - 주소에 따라 다른 화면 보이기 먼저, 주소에 따른 앱 내부를 해당 페이지로 변경하는 render 함수를 만들었다. 그 다음에 location의 pathname을 활용해서 주소가 ..