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

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

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

이전 포스팅에서 Tanstack Query 를 사용하는 간단한 예시를 살펴보았다. useQuery() 를 통해 Read, useMutation() 을 이용해 Create 동작을 구현해보았다. 이후, invalidateQueries() 로 캐시 데이터에 변화가 생기면 이를 반영하도록 만들었다. 이것이 어떤 원리로 동작하는 걸까? SWR 이란? ...

로그인과 회원가입 등의 기능은 보안이 중요하다. 이를 위해, 인증과 인가, 쿠키, 토큰, JWT 에 대해 간단히 알아보자. 인증, 인가란? 인증(Authentication)이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 -> 일반적인 로그인 과정 인가(Authorization)이란, 인증을 받은 유저가 리소스에 ...

프로젝트 주제에 대해서 이야기를 나누었다. 1일 차에 구상한 서비스 형태는 개발 스터디 / 프로젝트를 모집하는 플랫폼이다. 기획 회의에서 레퍼런스로 삼은 페이지들은 다음과 같았다. 인프런 커뮤니티 중 팀 프로젝트 모집 게시판 Hola! 여담으로, Hola 는 튜터님의 지인이 운영하는 사이트라고 해서 좀 놀랐다..!...

오늘 한 것 예비군 다녀왔다 리액트 심화과정 axios, 인증, 인가 듣기