PROJECTS

01\. 완성 페이지 엿보기⬆️ 첫 메인화면⬆️ 팀 소개 페이지⬆️ 멤버 소개 페이지 & 카드⬆️ 멤버 추가 카드⬆️ 멤버 추가 완료01\. 팀KEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안02\. 개인KEEP : 만족하는 부분PROBL

01\. search 기능 도전fetch와 async/await를 어찌저찌 사용하여 영화 데이터를 불러오는데 성공했다! (이 내용은 추후에 다루도록 하겠다.) 그리고 호기롭게 도전한 다음 과제, 바로 영화 검색이었다. 미리 만들어둔 input 태그에 검색 키워드를 넣으

01\. 영화 목록 더보기 기능 도전지난번에 영화 검색 기능에서 사용자가 검색어를 입력하면 검색용 API로 바꿔서 데이터를 fetch하는 것을 구현했다. 하지만 영화 목록에서는 Popular에 해당하는 20개의 영화 밖에 없는 것이 아쉬워서 이를 개선해보고자 했다.우선

01\. 북마크 추가해. 아니 추가하지마. 아니 삭제해... 이런 내마음 과연 몰까?미루고 미루던 북마크 기능을 드디어 도전하는 날이다. 구글링을 통해 만난 선배 개발자분들과 내 절친(aka 챗GPT)의 도움으로 localstorage를 사용해서 해당 영화 데이터를 배

01\. 어라? 왜 빈칸이세요?React에 첫발을 들이자마자 밀려오는 강의와 라이브세션과 과제에 허우적이며 React 첫 프로젝트를 시작되었다. 이번 프로젝트는 파리 올림픽 참여 국가와 메달 수를 입력받아 정렬하는 웹사이트를 제작해야한다. 강의에서 배운 React 컴포

🔽 Header : 이미지 슬라이드🔽 nav : 카테고리별 해당 영화카드 표시 / 스크롤 애니메이션🔽 더보기 기능 : api query param 조작 / 20개씩 추가🔽 모달창 : 해당 영화 정보 표시🔽 검색기능 : 검색 api 사용🔽 북마크 : 로컬스토리

01\. Query params를 사용한 디테일 페이지 기능 도전오늘 도전해 볼 기능은 Query params를 통한 동적 라우팅이다. 강의를 통해 path에 동적 라우팅을 주는 방법을 배웠지만, 이번 과제에서 queryString, 즉 Query params을 연습해

Styled-Components를 리팩토링하는 과정에서 Button를 재사용할 때, 상황에 맞게끔 width/height 값이 바뀌도록 수정해야했다.Button이 속성값에 맞게 잘 적용되었는데, console창에 warning이 떴다. 영어 울렁증이 순간 올라왔지만 찬

포켓몬 도감 페이지 프로젝트가 마무리되어 간다. Vercel로 배포하고 기대에 부푼 마음으로 페이지에 접속했다.엥 내 이미지 어디갔어요?🤨로컬에서 업로드한 이미지가 출력이 되지 않았다. url로 입력한 이미지는 정상적으로 출력되는걸 보니, 로컬 업로드 방식에서 문제가

금메달 수 정렬총메달 수 정렬ADD : 중복 국가 예외처리UPDATE : 존재하지 않은 국가 예외처리KEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안form 태그에 대한 활용도가 아쉽다. submit 이벤트를 활용하는 부분을 개선해보자.H

1. Team Project - 뉴스피드 프로젝트 TEA👂 01. 프로젝트 컨셉 TEA(Tutor's Ears Are)는 수강생들만을 위한 익명 커뮤니티 플랫폼입니다. 누구나 자유롭게 학습 꿀팁을 공유하고, 고민이나 다양한 이슈에 대해 소통할 수 있는 공간을 제공합

프로젝트가 끝나고 KPT 회고까지 작성했는데, 이제서야 트러블 슈팅을 쓰는 사람이 있다? 그건 바로 나! 팀프로젝트 일정 때문에 미뤄두었던 트러블 슈팅 내용을 다 잊어버리기 전에 미리 작성하고자한다.supabase에서 데이터를 가져올 때 사용할 함수는 재사용성이 있다고

이번 프로젝트에서는 styled-components가 아닌 심화주차에서 배운 Tailwind CSS로 UI 스타일링을 해야한다. 다행히 강의 내용과 발제 문서에 Tailwind CSS를 사용하는 방법에 대해 친절하게 설명되어있어, 그대로 따라해보았다.Tailwind C

포켓몬 사이트 바로가기HomeDexDetailCardToaseKEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안React 17버전 이상부터는 컴포넌트 모듈에 React를 import 하지 않아도 된다. 즉, 불필요한 코드이므로 제거하자!Re

이번 프로젝트에서 담당한 부분은 로그인/회원가입이다. 지난번 게시글, 댓글 CRUD를 구현했기 때문에, 이번에는 로그인/회원가입을 담당했다. 사실 오늘 회원가입/로그인 로직을 모두 구현하고, 내일까지 zustand를 활용해서 AuthContext 구현하는 것이 목표였는

MBTI 사이트 바로가기HomeTestMyPageResultsMyResult⬆️ 본인 계정이면 공유하기 버튼 표시 ⬆️ 로그아웃/타 계정이면 테스트 버튼 표시SignUpLogin반응형KEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안대부분의

1. 문제 발생🤯 01. 나 구글로 로그인할래 이번 팀프로젝트에서 로그인/회원가입 기능을 담당하면서, 꼭 구현해보고 싶었던 부분이 바로 소셜 로그인이었다. 구글이나 카카오를 통해 로그인이 되면 사용자 수가 폭발적으로 증가한다는 기사가 어렴풋이 기억이 났고, 최종 프

PINGER(핑거)는 지도를 활용한 혁신적인 구직 플랫폼으로, 공공기관 취업을 준비하는 구직자들을 위해 기획재정부 공공기관 채용정보 API와 카카오 맵 API를 활용하여 실시간 채용 리스트와 위치 정보를 제공합니다.단순한 채용 정보 제공을 넘어, 구직자는 해당 공고에

이번 프로젝트에서 Next.js와 TypeScript를 사용해보게 되었다. 아직 React도 낯선데... 벌써 Next.js에다 TypeScript까지? 프로젝트 시작과 동시에 또 막막함에 의욕이 사라졌지만, 어쩌겠는가. 해야지!이번에는 Riot Games API를 활

LOL 챔피언 사이트 바로가기HomeItemChampionChampion DetailRotation반응형KEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안메타데이터 활용이 아쉽다. 각 페이지별 메타데이터를 적극 활용해서 SEO 최적화, 접근