싱이의 devlog

교내 캡스톤프로젝트을 하며 FE 역할을 맡게 되었다. 3인 1팀에서 혼자 FE 개발을 맡아 모든 일을 다 전담하게 되었다😮 프로젝트 스캐폴딩을 직접 해본 건 처음이었는데, 한 번 그 과정을 기록해보려 한다. 사용한 기술 스택은 다음과 같다. Yarn Berry Eslint & PrettierTailwindCSS배포는 Vercel (일단) Yarn Berry 활용하기 1. 프로젝트 생성먼저 yarn으로 넥제 프로젝트를 생성해줬다. 생성하고 나면 여러 질문들이 나오는데, 나는 권장해주는 설정들로 선택했다. (typescript, tailwind, eslint 등등.. 많은 옵션들이 나온다!)yarn create next-app ${project name} 2. yarn version 체크yarn 버전을 체..

이 글은 아래 로그인 기능에 관한 개념 정리글과 이어지는 글이다. 만약 로그인 기능과 관련된 필수 지식들을 톺아보고 싶다면 아래 글을 읽고 이 글을 읽는 걸 추천한다. [링크] 이 글은 프로젝트에서 눈물겨웠던 삽질기에 관한 내용이며, 때문에 두서가 없을 수도 있다. 그리고 무엇보다 결국 해결을 못한 슬픈 문제라 살짝 (아니 좀 많이) 속상하다🥺.. 해결을 못했더라도 기록을 하는 이유는 삽질을 하면서 배운 게 많기 때문이고, 다른 해결책도 찾았기 때문이다... 또로롱.. 간단하게 우리 팀 프로젝트의 로그인 기능을 설명하자면 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에 따라 적절한..

1. 왜 리액트인가? 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 유용 대부분 프레임워크들은 구조가 MVC, MVW이지만, 리액트는 View만 신경 쓰는 라이브러리 👉 컴포넌트 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 👉 렌더링 사용자 화면에 뷰를 보여주는 것 # 초기 렌더링 render() 함수 활용 > 컴포넌트를 정의하는 역할 뷰가 어떻게 생겼고, 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환함 render() 함수 실행 시 내부 컴포넌트들도 재귀적으로 렌더링 초기 렌더링 과정 최상위 컴포넌트 렌더링 > 정보들을 사용해 HTML 마크업 생성 > DOM 요소 안에 주입 2. 리액트 특징 👉 DOM(Document Object Model) 객체로 문서 구조를 표..

**본 글은 오픈SW프로젝트 수업의 과제용으로 작성된 글임을 참고 부탁드립니다. 1. 디버깅 전 우리가 구현한 웹사이트의 차별점 중 하나의 포인트는 바로 식당 별로 비건 메뉴 유무를 알릴 수 있는 '비건 딱지'이다. 학교 주변 음식점들을 타겟으로 하는 웹사이트이고, 학교 주변 식당들 중 비건 식당들도 꽤 많이 있는 편이였기에 비건 딱지를 붙이자는 아이디어를 내게 되었다. 하지만 이제 구현해놓은 화면을 백엔드와 연결을 하는 과정에서 비건 딱지를 선택적으로 붙이는 것을 구현해야 되었다. 기존 디버깅 전 화면의 모습이다. 화면을 본다면 치즈김치전을 파는 너스레라는 식당이 비건 식당이라고 되어있다 (...) 2. 디버깅 내용 맛집을 등록할 때부터 해당 맛집에 비건 메뉴가 있는지 유무를 사용자에게 입력 받았고, ..

보호되어 있는 글입니다.