싱이의 devlog

이 글은 아래 로그인 기능에 관한 개념 정리글과 이어지는 글이다. 만약 로그인 기능과 관련된 필수 지식들을 톺아보고 싶다면 아래 글을 읽고 이 글을 읽는 걸 추천한다. [링크] 이 글은 프로젝트에서 눈물겨웠던 삽질기에 관한 내용이며, 때문에 두서가 없을 수도 있다. 그리고 무엇보다 결국 해결을 못한 슬픈 문제라 살짝 (아니 좀 많이) 속상하다🥺.. 해결을 못했더라도 기록을 하는 이유는 삽질을 하면서 배운 게 많기 때문이고, 다른 해결책도 찾았기 때문이다... 또로롱.. 간단하게 우리 팀 프로젝트의 로그인 기능을 설명하자면 1. 유저가 로그인을 하게 되면 JWT 토큰 방식으로 Access Token과 Refresh Token을 넘겨준다. 2. 서버는 Access Token은 API response body..

이번 팀 프로젝트에서 우리는 자체 로그인 기능을 구현해야했다. JWT 토큰 방식을 활용해 Access Token과 Refresh Token을 서버가 넘겨줬다. 그리고 프론트 단에서 토큰들을 쿠키🍪에 저장을 하는 방식으로 구현했다. 프로젝트 전에 동아리 과제를 하면서 시험적으로 프론트와 서버 사이에 토큰을 넘겨보는 작업을 해봤지만, 예상보다 순탄치 않았다. 원래 어떤 이슈를 겪었는지만 쓰려고 하다가 로그인 관련 개념들도 정리했더니 분량이 너무 길어졌다. 에러는 다음 글로 적어야징 👇Set-cookie 헤더로 넘어온 리프레시 토큰이 브라우저 쿠키에 저장이 되지 않아요!에 관한 삽질기👇 [링크] 🔐 본격적으로 들어가기 전에 로그인 구현에 대해 간단한 설명! 불과 몇달 전, 나는 여느 때와 다름없이 동아리 스터..

8월 4일, 세오스 데모데이를 끝으로 17기 공식 활동이 끝났다. 마감 당일까지도 프로젝트를 하면서 수정할 게 조금씩 나와서 끝까지 고생을 했는데 잘 배포도 하고 마무리되어서 정말 뿌듯했다. 동아리가 끝나고 미니엠티도 다녀온 후 근육통을 달며 프로젝트 회고 글을 한 번 작성해보려 한다!😎 우선 내가 참여한 프로젝트의 이름은 '바리바리'이다. 이는 자취생을 위한 한 끼 해결 반찬 픽업 서비스로, 평소 건강한 음식을 섭취하기 어려운 1인 가구에게 반찬 가게에서 당일 남은 재고를 판매해주는 서비스이다. 자취생들의 입장에서는 한 끼를 채울 수 있는 적절한 양의 반찬을 합리적인 가격으로 구매할 수 있고, 건강한 식습관을 유지할 수 있다. 더불어 반찬 가게 사장님들은 폐기 처분해야 하는 재고들을 판매할 수 있는 기..

본격적으로 바리바리 팀 개발이 시작되었다! 파트너와 협업 규칙에 대해서 얘기를 하면서, 빠른 작업 속도를 위해 PR 템플릿을 만들어 사용해보기로 하였다. 1. Pull Request Template이란? 깃허브를 통해 개발 프로젝트에 참여를 해보았다면, 커밋한 내역들에 대해 풀 리퀘스트를 날렸던 경험이 있을 것이다. 이때, 풀 리퀘스트를 날리게 된다면 다른 팀원들이 나의 코드를 리뷰할 수 있고, 그 과정에서 보완할 부분이나 코드의 변경 사항에 대해 모두가 알아둘 수 있다. Pull Request 템플릿을 설정해둔다면 풀 리퀘스트를 날릴 때 자동으로 템플릿을 불러와 PR을 날릴 수 있다. 따라서 풀리퀘 형식을 통일하므로서 작업 사항에 관한 이해를 돕고 개발을 빠르게 진행할 수 있다. 2. Pull Requ..

본론으로 들어가기 전 이번 과제 후기 본 내용을 시작해봅시다 후후 이번 과제는 첫 팀 과제였다! 프엔독기걸 민주랑 함께 과제를 하게 되었다 ㅎㅎ 첫 협업이라 맞춰갈 부분이 많았지만 2주 간 서로의 방식에 적응이 된 기분이었다.그리고 무엇보다 민주한테서 많이 배우기도 했다:) 리코일장인 민주초이 5, 6차에 거쳐 한 미션은 넷플릭스 클론 코딩이었다. [ 미션 목표 ] Next.js 사용법을 공부해봅니다. Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다. Git을 이용한 협업 방식에 익숙해집니다. [ 필수 요건 ] 결과화면의 상세 페이지와 검색 페이지를 구현합니다. 상세 페이지는 동적 라우팅을 이용해 구현합니다. 검색 페이지는 실시간 키워드 검색으로 구현합니다. Figma의 디자인을 그대로..

4주차 미션은 채팅방만 구현했던 3주차 미션에 이어 전체 메신저 어플을 구현해보는 미션이었다. 중간 고사가 끝나고 평소보다 조금 빠르게 과제를 시작했다..! (결론적으로 아주 좋았던 선택🥂) [미션 목표] React에서 Routing 구현 React에서 상태 관리를 하는 방법에 익숙해지기 SPA 개념 이해하고, 그에 따른 라우팅 구현 UI 컴포넌트 중복 줄여보기 코드 확장/재사용/리팩토링 하는 방법 이해하기 [필수 요건] 친구 목록 페이지, 채팅 목록 페이지, 설정 페이지 세 부분으로 구성하기 채팅 목록 클릭 시 채팅방으로 이동 친구 목록에서 친구 검색 기능 넣기 Custom Hooks 통해 중복 로직 줄이기 [Key Questions] 1. Routing 라우팅이란 사용자가 요청한 URL에 따라 적절한..