항해9970 [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. [WIL-025] 토이 프로젝트 - WLW : WeLuvWine 와인 사이트 프로젝트 Week목표 : 05/05일~05/11일 토이프로젝트 WLW : WeLuvWine 와인 사이트 프로젝트 WLW : WeLuvWine 와인 사이트 프로젝트✅ 이번 주는 첫 협업 토이 프로젝트 주간이었다. 백엔드 Spring 4분과 프론트 React 2명, 총 6명이서 진행한 첫 프로젝트였으며 주제는 와인 사이트 정보를 크롤링 하여 만든 우리만의 와인 추천 및 리뷰 사이트이다. 결과물은 다음과 같다. - SA 보러 가기: https://www.notion.so/S-A-a3f56ee2319a4e50b8a78313e7511ff7 - Github : https://github.com/junvely/WeLuvWine-FE - Youtube 시연영상 : https://www.youtube.com/watch?v=dqB.. 2023. 5. 15. [TIL-024] 토이 프로젝트 협업 셋팅 Today목표 : 05/05일 토이프로젝트 협업 셋팅 백엔드와 프론트 협업 셋팅 ✅ 1. SA문서 작성 - 팀 내 규칙, 참고사항, 피드백, API명세, Sprint 및 task 할당, 타임테이블, 작업 상황 등 확인 - 노션 2. API 명세 작성 - 노션 3. 깃헙 셋팅 - organization repo 만들기 / 팀장 권한 부여하기 협업 시 주의할 점 ✅ 1. API 명세 - API 명세는 타입(자료형)까지 구체적으로 작성한다. - 구체적 예시도 포함한다. 2. response - Status Code별 상황을 함께 작성한다. => Status Code를 잘 활용하여 굳이 message가 없어도 한 눈에 에러를 파악할 수 있도록 한다. - 백엔드에서는 성공, 실패 시 message도 함께 전달한다.. 2023. 5. 6. [TIL-023] 쿠키 / 세션 / JWT토큰 Today목표 : 05/04일 React Lv4 과제(5) - 쿠키 / 세션 / JWT토큰 클라이언트에서 JWT 토큰 생성하기 ✅ 문제상황 오늘 과제에서는 토큰을 생성해 클라이언트에서 JSON서버를 이용하여 모든 로그인 과정을 처리하는 과제였다. 토큰 생성은 보통 서버측에서 이루어진다. 각 언어에 따라 라이브러리가 존재하여 어렵지 않게 토큰을 생성할 수 있다. ❗하지만 클라이언트에서 토큰을 생성하는 라이브러리는 사실상 찾기 힘들기 때문에 토큰 생성을 클라이언트에서 하기는 쉽지 않다. 토큰은 보통 서버측에서 발급해 주고 클라이언트에서는 발급된 토큰을 받아 로그인 처리나 사용자 정보를 요청하기 때문이다. 하지만 불가능한 것은 아니었다. 시도한점 Node.js에서 사용되는 jsonwebtoken 라이브러리를 .. 2023. 5. 5. [TIL-022] React Lv4 과제(4) - useMemo를 사용해 유효성 검사하기 Today목표 : 05/03일 React Lv4 과제(4) - useMemo 사용해보기 / 주의할점 JSON서버 사용시 문제점 ✅ ❗API 데이터 통신 시 id값을 비교하여 데이터를 가져올 때, 타입비교에 따른 에러 발생 문제상황 JSON 서버 DB에 저장된 id값이 문자열일경우 데이터를 찾아오지 못해 undefined가 발생했다. ===로 타입까지 비교하였을 때 발생한 문제였다. id값을 숫자타입으로 변경해 주면 문제가 없었다. 서버에서 같은 id를 가져와 비교하는데 왜 문제인지 이해가 안됐다. const getPostAxios = async (id) => { try { const { data } = await Axios.get("/posts"); const post = data.find((post) .. 2023. 5. 4. 이전 1 2 3 4 5 6 7 ··· 12 다음
