개발일지

진행 중인 사이드 프로젝트 Oeasy의 MVP기능 구현이 완료되어 유저 피드백을 받아보았습니다..!좋은 피드백도 많았지만 처음부터 완벽할 수는 없었습니다 ㅠㅠ내가 맡은 부분의 피드백레시피 더보기 버튼의 불편함원하는 레시피만 모아 볼 수 있는 기능이 있었으면 좋겠다.랜덤으로 추천 받는 레시피 버튼이 이벤트배너 같아서 눌러보지 않는다.1.  IntersectionObserver 적용하기 변경 전: 더보기 버튼 방식기존 방식은 사용자가 '더보기' 버튼을 클릭해야만 다음 페이지 데이터를 불러왔습니다. 하지만 이 방식은 간단하지만 사용자 인터랙션이 필요하여 사용자가 불편함을 느꼈습니다.변경 후: IntersectionObserver를 활용한 무한 스크롤적용 방법 :요소 참조 생성: 페이지 하단에 useRef를 사..

진행 중인 사이드 프로젝트에서 맡은 역할 중 한 가지인 랜딩페이지가 어느 정도 완성되어 스크롤이벤트를 적용해보려고 합니다!스크롤 기능은 웹 페이지에서 긴 콘텐츠나 여러 섹션을 포함하는 페이지에서 사용자 경험을 향상하는 중요한 요소 중 하나입니다. 필수 목표 체크리스트✔️ wheel 이벤트를 통해 스크롤을 부드럽게 처리하기✔️ 창 크기(resize)에 따라 동적으로 headerHeight를 계산하여 페이지 스크롤이 원활하게 이루어지도록 만들기1.  반응형 사이즈에 맞는 헤더높이 계산하기- 모바일과 웹 사이즈에 따라 헤더의 높이가 다르기 때문에 화면 크기에 따라 헤더의 높이를 계산하여 적용시켜야 했습니다.const [headerHeight, setHeaderHeight] = useState(0);// 화면 ..

들어가기 전..Next.js에서는 클라이언트 컴포넌트와 서버 컴포넌트로 나뉩니다.기본적으로 app폴더의 하위의 모든 컴포넌트는 서버컴포넌트입니다! ✨ 서버 컴포넌트와 클라이언트  컴포넌트- 서버 컴포넌트(서버상에서 실행되는 컴포넌트)우리는 React에서 프로젝트를 하면서 console.log를 찍었을 경우 크롬 브라우저의 콘솔창에서 로그를 확인하였습니다.하지만 Next.js에서 컴포넌트를 만들어 console.log 찍었을 경우에 크롬 브라우저에서 확인하면 로그를 확인할 수 없습니다. 그럼 찍은 로그는 어디서 확인할 수 있을까요? 바로 terminal에서 확인할 수 있습니다!이처럼 Next.js에서는 컴포넌트의 실행 환경이 브라우저인지, 서버인지에 따라 서버 컴포넌트인지 클라이언트 컴포넌트인지가 결정됩니..

1️⃣ Next.js란 무엇일까?Next.js는 React를 기반으로 하는 웹 개발 프레임워크입니다. 2️⃣ 프레임워크와 라이브러리프레임워크개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 라이브러리공통 기능의 모듈화가 이루어진 프로그램의 집합 3️⃣ Next.js를 사용하는 이유개발자가 개발에만 집중할 수 있도록 프레임워크로서의 역할을 수행하고 API Router를 지원하여 full stack 웹 개발이 가능하도록 해줍니다. 4️⃣ App Router와 Pages RouterApp Routerapp 폴더 하위에 모든 파일을 추가할 수 있습니다.폴더명으로 경로를 정의하고, 폴더 안에 page.tsx로 작성된 파일만 경로로써 사용할 수 있습니다.app/(root..