Web FrameWork 인 Next js 에 대해서 다루어볼 차례가 됐다! Next.js 란? 리액트 기반 웹 프레임워크로서, React 를 확장해 다양한 기능을 제공한다. Next.js 에서 제공하는 대표적인 기능 다양한 렌더링 기법: CSR, SSR, SSG, ISR 라우팅: 파일(폴더) 기반 라우팅 Route Hand...

TypeScript 내의 기본 타입을 간단히 정리해보려고 한다! ⭕ ❌ Boolean 2 가지의 상태를 표현하고 싶을 경우 사용해주면 되겠다. 3 가지 이상을 표현하고 싶다면 enum 이나 string 을 쓰자! function isValidPassword(password: string): boolean { return pa...

이제 TypeScript 를 마주했다! 간단한 설치법 부터, 기본 설정과 관련해서 내용을 정리해보았다. TypeScript 란? 다음과 같이 JavaScript 가 가진 약점들을 보완하기 위해 등장했다. 런타임 시에 결정되는 변수 타입 약한 타입 체크 등 느슨한 규칙 JS의 단점을 알 수 있는 아래 얘시를 보자. const ...

이번 프로젝트에서 처음으로 네이버 지도 API 를 사용했는데, 이번 경험으로 카카오 맵만 사용하기로 했다. 그러면서 처음 접한 React 기능이 있어 같이 작성해보려고 한다.

내가 작성했던 코드도 한 번 회고해보는 시간을 가져보려고 한다! 개인적으로 정리해둘만한 부분을 선별해보았다. 프로젝트에서 내가 구현했던 기능 네이버 지도 API 활용해 좌표 기반으로 위치 표현하기 Page 내에서 사용하는 별도의 Header 를 만들어 홈 구장 위치를 전환할 수 있도록 설정 팀원 분이 작성해주신 TourAPI 호...

프로젝트 Github 링크1 맡은 일 프로젝트에서 지도 API 와 관광공사 TourAPI 를 사용했는데, 나는 이 두 가지를 조합해서 지도에 장소의 위치를 표시하는 일을 맡았다. 주요 기능 구단 별 홈 구장과 주변 업체들의 위치를 지도에 Marker 로 표시함. 관광공사 Tour API 를 통해 중심 좌표 기준으로 주변 업체들을...

Tanstack Query(구 React Query)는 서버 상태 관리 라이브러리다. 클라이언트 상태란? 클라이언트 측에서 관리하는 데이터다. 그 예시로는 세션 데이터, 캐시 데이터, 로컬 저장소가 있다. 세션 데이터: 현재 로그인한 유저 정보, 현재 페이지, 폼 입력값 등 캐시 데이터: 정적 리소스(이미지, 스크립트), API ...