스나이퍼팩토리6 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - KT wiz 홈페이지 개선 프로젝트 2주차 회고 🍀 요약개발 일정 정리페이지 내부 탭 만들기API 연결 🍀 내용📌 개발 일정지난 주에 레이아웃을 만들면서 개선점을 도출했기 때문에, 이번주부터 api를 연결하면서 개선점을 반영하기로 했다. 특히 멘토님께서 야구 경기 데이터들을 시각화하는 것을 강조하셨기 때문에, Game탭 부터 api 연결을 시작했다.그래서 정리한 개발 일정은 다음과 같다.2주차: API 연결(Game 부분, Media 부분)3주차: API 연결(Player부분, Media부분)4주차: 중간발표 준비 및 코드 디테일 통일, 애니메이션 라이브러리 사용5주차: 새로운 기능 추가 - 챗봇, 라이브채팅 기능, 소셜로그인 6주차: 트러블 슈팅, 렌더링 최적화7주차: 배포 및 최종 발표 준비 📌 내가 맡은 부분1. 페이지 내부 탭 만들기본래.. 2024. 12. 19. [유데미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. [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 사전직무교육 1주차 학습 회고 -(2) React 프로젝트, Typescript 개요 🍀 What I Learned this week📌 자바스크립트 문법 🧷 자바스크립트는 프로토타입 기반 언어! 🧷 배열 🧷 this의 의미 🧷 콜백함수와 비동기 함수, 에러 핸들링 🧷 클래스📌 React 프로젝트: Vite + Shadcn UI를 활용, tailwind.css 사용 🧷 오픈 날씨 API를 활용한 리액트 대시보드 만들기 🧷 이미지 오픈 API를 통해 이미지 정보 조회 사이트 만들기📌 타입스크립트 개요 📌 React 프로젝트: Vite + Shadcn UI를 활용, tailwind.css 사용 프로젝트 초기 설정을 하는 방법은 다음 포스트에 있다. ⬇️⬇️https://blog.naver.com/weartstudio/223645181841 🧷 오픈 날.. 2024. 11. 17. [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 사전직무교육 1주차 학습 회고 -(1) 자바스크립트 문법 🍀 What I Learned this week📌 자바스크립트 문법 🧷 자바스크립트는 프로토타입 기반 언어! 🧷 배열 🧷 this의 의미 🧷 콜백함수와 비동기 함수, 에러 핸들링 🧷 클래스📌 React 프로젝트: Vite + Shadcn UI를 활용, tailwind.css 사용 🧷 오픈 날씨 API를 활용한 리액트 대시보드 만들기 🧷 이미지 오픈 API를 통해 이미지 정보 조회 사이트 만들기📌 타입스크립트 문법 📌 Javascript 문법 🧷 자바스크립트는 프로토타입 기반 언어이다.자바스크립트는 클래스라는 개념이 없다. 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. [확장성]//const fruits = ["사과", "바나나", ".. 2024. 11. 17. 이전 1 다음
