본문 바로가기

next.js3

[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - KT wiz 홈페이지 개선 프로젝트 1주차 회고 🍀 요약프로젝트 셋팅 역할 분담레이아웃 작업🍀 내용 프로젝트는 선착순으로 폼을 제출한 순서대로 배정되었는데, 나는 이 프로그램에 참여하기 전부터 하고 싶었던 KT wiz 홈페이지 개선 프로젝트에 배정되었다!! (수 년 간의 폼림픽으로 다져진 경험이 빛을 발하는 순간)팀원 분들도 오프라인 교육장에서 가까운 자리에 앉아서 내적 친밀감이 있던 분들과 한 팀이 되어 기뻤다.ㅎㅎ 📌 프로젝트 셋팅기술 스택Framework React + ViteLanguageTypeScriptStylingTailwind CSS, Shadcn UI, GSAPAPI / StoreAxios, ZustandProject ManagementBiome, Husky 팀원 개개인의 개발 실력을 고려해서 스택을 정했다. Next 와 Reac.. 2024. 12. 17.
[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 사전직무교육 3주차 학습 회고 🍀 What I learned this week📌  Next.js와 Supabase를 이용한 TO-DO List 개발🧷 Supabase와 연동하여 TO-DO List의 CRUD 기능 구현🧷 사용자 정보와 TO-DO List를 연동하여 로그인, 로그아웃, 프로필 수정 기능 구현 📌  Next.js와 Supabase를 이용한 TO-DO List 개발  처음에 로그인 기능을 구현하기 전에는, todos와 board 테이블 2개를 생성하여 작업했다.todos: TO-DO 목록을 관리하는 테이블boards: 각 TO-DO 당 세부 내용 보드를 관리하는 테이블 로그인을 위해 Supabase에서 제공하는 Auth.users 테이블을 사용할 수 있었다. 회원가입을 하면 자동으로 여기에 row가 추가된다.  이.. 2024. 12. 10.
[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 사전직무교육 2주차 학습 회고 🍀 What I Learned this week📌 이미지 오픈 API를 통해 이미지 정보 조회 사이트 만들기 📌  Next.js와 Supabase를 이용한 TO-DO List 개발 이번주는 총 2개의 프로젝트를 진행하면서 React와 Next, 그리고 Typescript에 대해 자세히 배울 수 있었다.일주일 만에 2개나 프로젝트를 만들어서 어려웠지만 정말 배운 점이 많았다. 📌  이미지 오픈 API를 통해 이미지 정보 조회 사이트 만들기 구현한 기능🥯 Jotai 라이브러리의 store를 이용하여 API fetch Jotai 라이브러리란 ? 중앙집중식 상태관리 라이브러리props에 대한 depth가 너무 깊어지는 걸 막기 위해 사용한다.(데이터 추적 어려움)atom (=state) : 전역에서 쓰.. 2024. 11. 25.