Project

영화 검색 UI 구현id 를 나타내는 alert 창 띄우기 코드 수정개인 과제 해설 리뷰로 알게된 점 정리지난 번에 이어 받아온 데이터를 활용해 영화 검색 ui를 구현을 해보려고 한다. 추가로 이전에 onclick으로 각각의 html코드에 attribute해서 id a

개인프로젝트로 인기 영화 리스팅 및 영화 검색 사이트를 제작하고 있다. TMDB의 오픈 API를 이용해 영화 데이터를 가져오고, 이를 이용해 화면에 영화 데이터를 띄우는 것을 구현해야한다.영화정보 오픈API인 TMDB(The Movie DB)에서 API문서를 가져온다.

팀과 팀원을 소개하는 미니 프로젝트를 진행 중이다. 레이아웃이 백프로 마음에 들지는 않았지만, 메인 화면 텍스트 레이아웃에 대해서 충분히 고민할 시간은 없어 일단 그대로 진행하기로 결정했다. 일단 내가 맡은 부분은 상세페이지 구현이었는데, 레이아웃까지는 익숙한 코드라

TIL : Today I Learned > - id 를 나타내는 alert 창 띄우기 코드 수정 개인 과제 해설 리뷰로 알게된 점 정리 추가로 이전에 onclick으로 각각의 html코드에 attribute해서 id alert창을 띄우는 방식을 수정해보려고 하는데,

개인과제에서 작성한 내배캠 인기영화 콜렉션을 발전시키는 팀 프로젝트팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전상세페이지 구현 + 상세페이지에서 메인페이지로 이동 기능까지상세 페이지 영화 리뷰 작성 기능 구현UX를 고려한 validation che

지난 번에 만들었던 댓글창 구현에 이어, 각 페이지별 파라미터값을 아이디값으로 쓸 수 있도록 파라미터 가져오는 방법을 알아봤다. 다음과 같은 URL에서 파라미터 부분의 값을 가져오고 싶을 때가 있다.URL의 쿼리 문자열에 대한 작업을 할수 있는 메서드 제공get(par

이전에 만들어뒀던 댓글 생성하는 기능에 이어 수정 및 삭제 기능도 추가로 구현해야 했다. 처음에는 댓글을 삭제하고 수정하는 함수를 어디에 넣어야할지 잘 가늠이 되지 않았는데, 튜터님께 조언을 구해 로직을 이해할 수 있었다.결국 댓글을 생성할 때 삭제되거나 수정된 댓글을

일주일동안 진행했던 팀프로젝트 최종 제출과 발표를 마무리하고, 튜터님께 피드백을 받아보았다.전체적인 피드백댓글을 작성할 때 required로만 유효성 검사를 넣었는데, 추후에는 사용자가 좀 더 쉽게 알 수 있도록 입력하지 않은 부분이 있을 때 alert창을 띄워 확인

⚙️ features : 구현해야 할 기능 UI 구현하기 Todo 추가 하기 Todo 삭제 하기 Todo 완료/취소 상태 변경하기 (진행중 ↔ 완료) 🔆 완성된 모습 컴포넌트 구조 App > Layout > ToDoContainer > Header, ToDoFor

처음에 새로운 리스트를 추가하는 함수를 작성하는 과정에서 setLists 함수 안에서 새로운 값을 넣어준 updatedLists를 만들고 이를 로컬스토리지에 저장 후 updatedLists를 리턴해주는 방식으로 작성했다. 인풋값이 로컬스토리지에 저장이 잘 됐지만 문제

월별 지출 연결해주기디테일 페이지 데이터 연결디테일 페이지 CRUD 구현처음에는 MonthList에서 상태관리를 해줬지만, Form에도 monthFiltered 데이터가 필요하여 Home 컴포넌트에서 useEffect와 useState로 달에 해당하는 데이터를 그려주는

Context API 리팩토링 Redux Toolkit 리팩토링

이 프로젝트는 React와 Supabase를 사용하여 맛집을 공유하고 리뷰를 작성할 수 있는 뉴스 피드 사이트입니다.프로젝트 소개(- 기능(- 폴더 구조(- 기술 스택(- 팀원 및 역할(이 프로젝트는 사용자들이 맛집을 공유하고, 다른 사용자의 리뷰를 확인하며, 자신만의

React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트이다. Outlet 컴포넌트는 라우팅 컴포넌트 내부에서 사용되며, 중첩된 자식 라우트가 렌더링되는 위치를 지정한다.v6에서 중첩 라우팅이 컴포넌트의 child

수파베이스 Auth 와 커스텀 테이블 연동 https://velog.io/@sanghyeon/supabase-Auth%EC%99%80-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%97%B0%EB%8F%99

처음에는 회원 가입한 유저와 로그인한 유저의 상태를 따로 관리해줘야한다고 생각했다. 아직 useState로 상태관리를 한다는 개념이 데이터를 저장하고 불러와 사용한다는 개념이랑 헷갈려서 그렇게 생각했던 것 같다.하지만 작성하다보니 구지 이 둘의 상태를 나눠서 관리할 필

useRef는 동기적으로 작동하고 useQuery로 데이터를 가져오는 것은 비동기적으로 작동하기 때문에 처음에 컴포넌트가 마운트 됐을 때 selectedExpense 값이 undefined가 되어 화면에 데이터를 그려주지 못하는 문제가 생겼다. 데이터를 성공적으로 가져

🔗 https://auth-accounting.vercel.app/ feedback App.js에서 accessToken이 localStorage에 있을때 Home으로 가면 로그인화면으로 이동하지 않도록 해보면 좋을것 같아요.\-> redux나 contex

프로젝트 명행복야구 (행복한 야구팬은 없다)소개야구 경기 영상과 구단/선수의 정보 등을 한곳에서 볼 수 있는 스포츠 서비스 입니다.내용유튜브 API를 사용하여 각 구단별 관련 영상을 보여줌야구 관련 키워드를 제공하여 주제별로 필터링된 영상 시청 가능날씨 정보를 제공하여

날씨 API 사이트 : OpenWeather API처음에는 기상청 API를 사용하려다가 OpenWeather API가 사용하는 방법이 더 잘 정리되어 있어 중간에 변경하기로 결정했다. 위도, 경도를 넣어서 데이터를 받아오는 방법도 있었지만, 도시 이름으로 받아오는 더

이전에 작성했던 로직은 도시 이름 데이터를 게임 스케줄 데이터에서 가져오는게 아니라, 별도로 관리해주고 있었기 때문에 로직 수정이 필요했다.이 때 여러 비동기 작업을 병렬로 처리하기 위해 Promise.all을 사용하는 로직도 있었지만 아직 사용법이 익숙하지 않아 fo

🔗 웹사이트 : https://outsourcing-project-two.vercel.app/🔗 깃허브 링크 : https://github.com/yeliinbb/outsourcing-project1\. 버셀 배포 후 로그인 오류문제점 : 깃허브

주제 : API 를 호출하고 받은 응답값을 화면에 보여주는 과정에서 타입스크립트를 사용해봅시다.사용 스택 : vite, react, typescript제공된 API 를 호출하는 로직을 작성하고 적절한 타입을 사용API 의 응답 값을 컴포넌트에서 useState 를 이용

불필요한 재렌더링 방지: onToggleSelect와 sortCountries 함수에 useCallback을 사용하여 불필요한 재렌더링을 방지useCallback 문법상태 추가: filteredCountries를 상태로 추가하여 UI 업데이트를 효율적으로 처리.useE

프로젝트 개요 필수 구현 사항 App router 기반, typescript 사용, tailwindcss 사용을 베이스로 한 Nextjs 14 버전으로 프로젝트 Layout 에서 Title, description 에 대한 Metadata 를 설정하고, 어플리케이션 전

프로젝트 명 : CyTunes 🎵소개한 줄 정리 : 음악 공유 커뮤니티로, 사용자들끼리 음악을 추천하고 확인할 수 있으며 검색을 통해 다른 사용자와 아티스트 그리고 노래를 찾아볼 수 있습니다.내용music community는 사용자들이 음악을 추천하고 확인할 수 있는

리프레시 했을 때 데이터 여러개 가져왔을 때 그 중에서 여러개 뽑아서 랜덤 보여줄 수 있도록api 동시에 보내도록 설계4개가 완료가 된 다음에 보여주도록온것들부터 먼저 -> 각각 컴포넌트ui에 “미리 듣기가 지원되지 않는 트랙입니다.” 보여주기호버 -> 메시지로 보여

1부터 9사이의 랜덤한 수 구하기Math.\*\*floor\*\*(Math.\*\*random\*\*() \* 10)

아티스트 페이지와 포스트 페이지에서 코멘트 기능을 한 번에 사용하기 위해 만든 커스텀 훅useComment.ts여러가지 API데이터를 한 번에 관리해주기 위해 useQueries를 사용한 커스텀 훅여기서 fetchComments() 함수는 아티스트 페이지와 포스트 페이

https://www.youtube.com/watch?v=yDhMmmHZONM1차 : 종합 건강 관리 서비스 (운동, 식단, 영양제 추천 + ai 챗봇)메인 타겟 좁히기 어렵고, 주제 너무 광범위함시중에 나와있는 서비스들도 많고, 유니크한 점을 어필하기 어려움

역할 분담투두 페이지 : 김도희다이어리 리스트 + crud + 지도 API : 김용채팅 AI 챗봇 : 복예린, 양윤성로그인/회원가입 + 마이페이지 + 메인페이지 : 선지원프로젝트 명 : PAi프로젝트 페이지 구조

OPENAI_API_KEY → NEXT_PUBLIC_OPENAI_KEY 수정dangerouslyAllowBrowser: true 추가OPENAI_API_KEY는 브라우저에 노출되면 안 되는 값인데, 퍼블릭으로 두는 것이 맞는지?→ 브라우저 환경에서 GPT 기능을 사용한

layout.tsx를 서버 컴포넌트로 유지하기 위해, HeaderWrapper.tsx 클라이언트 컴포넌트로 따로 분리해당 훅 사용 시 클라이언트 컴포넌트에서 사용 필요 (”use client”)

IME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS단계의 어플리케이션그러나 IME과정에서 keydown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 모두 처리하기 때문에 keydown이벤트가

Error: (0 , \_hooks_useChatSessionWEBPACK_IMPORTED_MODULE_1.default) is not a function리액트훅을 사용하는 커스텀 훅을 서버 컴포넌트 page.tsx에서 바로 사용하려고 했을 때 해당 훅이 함수가 아니라

수파베이스에서 json 타입 형식을 가져와서 사용할 때 기존에 따로 사용하고 있는 타입으로 지정할 경우이런 오류가 떴었다. Type 'string | number | true | { key: string: Json | undefined; } | Json\[]' is n

handleItemClick함수에 handleClose()를 같이 넣어 해당 url로 이동하면서 사이드네비게이션을 닫도록 시도했지만, Next.js에서 useRouter를 사용할 때 프로그래매틱 네비게이션(router.push)는 클라이언트 사이드 전환을 수행하므로 컴

AI에게 추천받기 버튼을 눌러 투두리스트를 추천 받아, 새로운 투두리스트가 생길 때 저장하기와 초기화하기 버튼이 뜨지 않음초기에 투두리스트 추천 받기를 눌렀을 때 todoMode이 recommendTodo인 것을 확인todoRequestType 도 마찬가지로 recom

서버 사이드에서 투두리스트를 추가해줄 때 클라이언트에서 사용하고 있는 todos 데이터와 별도로 데이터 상태가 관리되고 있어, 채팅에서 투두리스트 저장 후 채팅 화면으로 이동했을 때 화면이 리렌더링 되지 않으면 ui가 업데이트 되지 않는 문제가 있었음.saveChatT

만들어야하는 모달 공용 컴포넌트 useModal.tsx 컴포넌트 내에서 사용 방법 사용 예시 1 (취소 버튼 없는 경우) 사용 예시 2 (취소 버튼 있는 경우)

각기 다른 레이아웃을 가진 페이지마다 동일한 컴포넌트를 사용하면서, 모바일 환경에서 다른 높이 값 때문에 어떻게 해결해야할지 이런 저런 방법을 써보며 고생을 좀 많이 했다.모바일 환경에서 더 정확한 전체 높이 계산을 위해 찾은 방법으로는모바일 특히 Safari에서는 주

실시간 검색 기능과 버튼에서 연속된 동작으로 인한 불필요한 네트워크 요청을 방지해야하는 상황특정 시간 이후에 한 번만 실행하기Debounce 는 여러 번 발생하는 이벤트에서, 가장 마지막 이벤트만을 실행되도록 만드는 개념이다.아래 예시 그럼처럼 순차적 호출을 하나로 그

Next.js 프로젝트에서 Tanstack query의 prefetch를 사용하면서 클라이언트와 서버에서 네트워크 요청을 처리해야하는 상황 프로젝트 특성상 최신 데이터를 계속 요청할 필요는 없음 -> 네트워크 효율적인 요청 관리 필요Spotify API 요청 시 토큰

모바일 웹 환경에서 이미지 다운로드가 제대로 되지 않는 현상이미지 비율이 화면과 다름간헐적으로 카드 안에 있는 로고 파일 사라짐이미지 사이즈 & 비율 확인카드 이미지는 360x480px이고, 다운로드 된 이미지는 1240x1920px이리 비율 상으로는 동일한 상태이미지