Typescript window 개발환경 구축 nvm(node version manager) - Node.js의 여러 버전을 쉽게 설치할 수 있는 유용한 툴 설치 => https://github.com/coreybutler/nvm-windows/releases nvm-setup.exe 파일 다운로드 PowerShell에서 nvm install [설치할 노드 버전] PowerShell에서 nvm use [설치한 노드 버전] 명령을 실행하여 Node.js를 활성화 명렬프롬프트(cmd)에서 npm install typescript -g 컴파일러 & tsc 컴파일러란? 프로그래밍 언어로 작성된 소스 코드 => 다른 프로그래밍 언어로 변환하는 도구 변환 과정에서 컴파일러는 소스 코드의 구문과 구조를 검사하여 문제..

프로젝트의 post 기능을 하던 중 글을 작성하는 폼 안에서 지도의 검색기능을 추가했다. form속에 form이 있는 구조였는데 submit 이벤트가 발생했을 때 기본동작인 새로고침을 막는 게 안 됐다. 두 폼의 이벤트핸들러에서 preventDefault를 사용했지만 지도 검색을 했을 때 새로고침 됐다. 처음엔 이벤트버블링이 원인인 줄 알고 e.current != e.currentTarget 이런 식으로 조건도 부여해 봤지만 실패했다. 찾아보니 form안에 form을 사용하면 안됐다. 사용하더라도 onSumit 이벤트를 사용하면 상위의 form만 작동했다. 결국 자식요소의 form은 시멘틱적 요소로만 사용하고 onCick과 onKeyPress이벤트를 사용했다.

useEffect는 return jsx문 바로 위에 쓰는 걸 추천 => 코드의 실행순서 때문 html return하는 부분이 없으면 jsx 확장자는 붙이지 않는다. 깃을 사용해 협업하는 도중 여러 문제가 발생하는데 먼저 로컬과 리모트 브런치의 버전이 많이 차이 날 경우 push나 pull이 안되는 경우가 있다. 이럴 때 해결하는 방법은 로컬과 리모트 중 최신에 맞춰 대응한다. 로컬브런치가 최신인 경우 push를 --force옵션으로 강제로 밀어 넣는다. 리모트가 최신인 경우 git reset ---hard로 origin/리모트브랜치명 작업물을 갈아끼운다.(헤드 자체를 가져오는 것이기 때문에 작업한 로컬 브런치의 커밋이 지워질 수 있다) 위와 같은 에러를 방지하기 위해 깃허브에서 직접 내용을 수정하는 행위..

이번 팀프로젝트의 주제는 한국 여행지를 추천받을 수 있는 웹애플리케이션이다. 내가 맡은 역할은 kako map API를 사용해 지도를 통한 정보 검색, 제공이다. 단순히 지도를 가져오는 건 쉬웠다. 하지만 클릭으로 핀을 설정하고 해당 핀의 좌표를 주소로 변경하는 것 그리고 키워드를 검색하면 해당 스코프로 지도가 이동되는 걸 구현하는 부분이 어려웠다. 구현 과정을 적음으로서 복기해야겠다 먼저 카카오 디벨로퍼에서 api키를 발급받아 index의 script에 넣어준다. 지도를 구현하는 컴포넌트에서 윈도우 객체의 kakao를 선언 후 useEffect를 이용해 지도를 렌더링 한다. 그리고 클릭 이벤트와 검색 이벤트 핸들러를 각각 만들어 각 기능을 구현했다. 검색을 했을 때 해당 value로 api에서 제공하는..

리덕스 thunk를 통해 서버와의 통신과정에서 각 상황별로 컨트롤 할 수 있었다. 하지만 긴 보일러플레이트와 최적화되지 않은 라이브러리라는 단점이 있었다. react-query를 배우고나니 엄청 편했다. 두개를 배우고나니 의문점이 생겼다. 리액트 쿼리는 직접 서버와 통신해 데이터를 가져오고 변경도 가능하니 리덕스를 사용할 필요가 없었다. redux 와 thunk를 사용하는 것 또는 react-query를 사용하는 것 뭐를 선택해야 할까? redux는 전역 상태관리를 해주고 query는 전역서버상태를 관리해준다고 했다. 서버와 통신이 필요없는 클라이언트 사이드의 상태(모달상태 등)들은 redux를 통해 관리하고 서버와 데이터를 주고받는 서버 사이드(유저정보, post정보 등)는 query를 이용한다.

useEffect에 대한 개념이 혼동되었다. clean up function이라고 부르는 useEffect의 return값이 실행되는 시점이 언마운트되는 시점 이라고 생각했는데 어떤 문서엔 렌더링 될 때 useEffect 안의 내용이 실행되기 전에 return 값이 실행된다고 했다. 알고보니 dependency array(deps)의 값이 비어 있는 경우엔 언마운트 될 때 cleanup함수가 호출된다. deps에 특정값이 지정되어 있는 경우 언마운트시에 호출되고, update되기 직전에도 호출 된다. userEffect의 실행시점을 다시한번 살펴보면 deps에 빈배열이 들어가있는 경우엔 mount될 때만 실행된다. 아예 생략이 되어있는 경우엔 마운트 될 때와 컴포넌트가 리렌더링 될 때마다 호출된다. 어떤..