항해99/프로젝트19 [WIL-031] 클론 프로젝트 - Out Stagram 인스타그램 클론코딩 Week목표 : 05/13일~05/18일 클론 프로젝트 Out Stagram : 인스타그램 클론 코딩 Out Stagram : 인스타그램 클론 프로젝트✅ 오늘은 클론 프로젝트 주간에 정신이 없어서 작성하지 못했던 부분들을 다시 정리해보려고 한다. 클론 코딩 프로젝트 백엔드 Spring 4분과 프론트 React 2명, 총 6명이서 진행하였고 인스타그램 PC버을 클론 코딩하였다. 결과물은 다음과 같다. - SA 보러 가기: https://www.notion.so/S-A-13db4f79c12e4f94a6eee28669fec243 - Github : https://github.com/17-outstagram/frontend GitHub - 17-outstagram/frontend Contribute to 17-.. 2023. 5. 28. [TIL-30] 실전 프로젝트 - 카카오 지도 API 기능 구현 Today목표 : 05/27일 실전 프로젝트 : 카카오 지도 API 기능 구현 오늘은 카카오 Map API를 이용해 지도 기능을 구현했다. 어제 까지는 Nave map api를 사용해서 지도를 띄워보았는데, 몇 가지 이유로 Kakao Map API로 변경하기로 결정 했다. 1. Naver에 비해 Kakao가 api 사용법이 굉장히 친절하고 공식 문서가 잘 되어 있었다. 2. Naver에 비해 Kakao 지도의 UI가 더 선명한 느낌이 들었다. 3. 우리 프로젝트에서는 주소를 우선 검색 하고, 주소 리스트를 띄운 후, 주소에 대한 지도를 띄워 주고자 했었다. Naver에서는 해당 기능을 api 공식 문서에서 찾기가 힘들었다. 이에 비해 Kakao에서는 이 기능을 지원하는 것으로 확인하였고, Kakao의 공.. 2023. 5. 28. [TIL-29] 실전 프로젝트 - 카카오 로그인 기능 구현(불필요한 데이터 통신, ESLint 구문 에러들) Today목표 : 05/26일 실전 프로젝트 : 카카오 로그인 기능 구현 (useQuery 사용 미숙 에러들, ESLint 에러) 오늘은 카카오 로그인 기능 구현을 완료했다. 구현하는 와중에 useQuery 사용에 미숙하여 발생한 에러들을 기록해 보았다. 알게된점, ❗카카오 로그인 요청 useQuery에서, api에 인자를 보내며 호출하는데 3번의 데이터 통신 발생 문제상황 useQuery에서 code인자를 보내며 한 번 api를 호출했는데, 3번의 데이터 통신이 발생했다. 콜백으로 호출할 때 비동기 통신 처리를 안해서 그런 것으로 판단됐다. const { data, isError, isLoading } = useQuery('kakaoAuth', () => { authKakaoLogin(redirectC.. 2023. 5. 26. [TIL-28] 실전 프로젝트 - 로그인 기능 구현(ESLint 구문 에러들) Today목표 : 05/25일 실전 프로젝트 : 로그인 기능 구현(ESLint 에러) 로그인 기능을 구현하며 처음 맞닥뜨린 ESLint 구문 에러들을 정리해 보려고 한다. 알게된점, ❗1. ESLint airbnb => Assignment to function parameter 문제 상황 ESLint air bnb규칙에서는 함수의 매개변수에 재선언을 하는 것을 허용하지 않는 것 같다. 그 이유는 함수의 매개변수가 참조형인경우 같은 주소값을 가지고 있기때문에 원본 객체가 변경될 경우, 이후에 어떤 사이드 이펙트..? 예상치 못한 결과를 불러올 수 있기 때문인 것 같다. 다음은 해당 에러 관련 공식 문서다. no-param-reassign - ESLint - Pluggable JavaScript Linter.. 2023. 5. 26. [TIL-27] 실전 프로젝트 - 로그인 기능 구현(Intercepter, ESLint 에러) Today목표 : 05/24일 실전 프로젝트 : 로그인 기능 구현(Intercepter, ESLint 에러) 프로젝트 셋팅을 마치고, 디자인이 나오기 전까지 우선적으로 기능 구현을 할 수 있는 부분 부터 작업하기로 하여 로그인 기능 구현을 시작했다. 로그인 처리 과정에서 공부한 부분과 이 기능을 사용한 이유, ESLint 설정으로 인한 에러에 대해 정리해 보았다. 알게된점, 1. 내가 instance와 intercepter를 적용한 이유 ✅ - instance를 사용한 이유 1) axios마다 base url, content-type , token과 같은 헤더값 등 동일한 값 등의 처리를 줄이기 위해 2) api 호출할 때마다 반복되는, 중복되는 axios 인스턴스를 생성을 줄이기 위해 axios cre.. 2023. 5. 25. [TIL-26] 실전 프로젝트 - 프로젝트 셋팅(SCSS, ESLint, Prettier설정) Today목표 : 05/22일~05/23일 실전 프로젝트 : 프로젝트 셋팅(SCSS, ESLint, Prettier설정) 실전 프로젝트가 시작됐다. 6주간의 기간 동안 프론트2 백엔드3 디자이너1 으로 팀을 이뤄 하나의 프로젝트를 완성해야 한다. 같이 협업해야 하는 만큼 프로젝트를 잘 설계하고 사용할 stack들을 결정하는 것이 중요했다. 오늘은 프로젝트 셋팅에서 SCSS, ESLint, Prettier를 설정하였고, 궁금했던 부분들이나 이런 stack들을 사용한 이유를 정리해 보려고 한다. 알게된점, 1. SCSS사용시 yarn add node-sass 하는 이유 ✅ yarn add node-sass yarn add sass => node환경에서 sass 파일을 감시하여 컴파일 할 수 있도록 하기 위해.. 2023. 5. 25. 이전 1 2 3 4 다음
