제네릭이란 타입을 함수의 파라미터처럼 사용하는 것을 의미한다. 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 특히 한 가지 타입보단 여러가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. text라는 파라미터를 받아 text를 반환하는 함수가 있다. 아래 함수는 제네릭 기본 문법이 적용된 형태이다. 파라미터와 리턴값 모두 전달받은 제네릭타입으로 제한한다. 함수를 호출하는 부분에서 타입을 같이 넘겨준다. 제네릭 값을 지정해 함수를 호출하게 되면 위와 같이 전달된 타입으로 정의된다. 의아한건 아직 제네릭 타입이 정해지지 않은 함수에서 length와 같은 메서드는 사용할 수 없다. (number가 올 수도 있기 때문) 그렇기에 위처럼 제네릭에 타입을 지정해 해결하는 방법인데, 문서에서 설명..

any & unknown any 타입의 경우 아무 자료나 집어넣을 수 있는 타입이다. 타입을 계속 바꿔도 에러가 나지 않는다. 막 사용하면 안 되는데 그럼 타입 관련 버그가 생길 경우 추적하기가 어렵고 타입스크립트를 쓸 이유가 없다. any와 비슷하게 모든 타입을 집어넣을 수 있는 unknown 타입이 있는데 any 타입과의 차이는 자료를 할당해도 타입은 그대로 unknown이다. 그래서 unknown타입의 변수를 타입이 지정된 다른 변수에 할당하게 되면 에러가 발생한다.(any는 안 그럼) 그래서 어떤 타입을 넣을지 모르겠는데 약간의 안정성을 도모하고 싶다면 any보단 unknown타입을 사용한다. + 타입스크립트는 언제나 확실한 걸 좋아한다. 지금 변경하려는 변수의 타입이 확실해야 연산을 수행한다. ..

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에서 제공하는..