안녕하세요~모두들 잘 지내고 계신가요?  오늘은 디프만 활동을 하면서 제가 부족하다고 느낀 부분을 제대로 정리해보기 위해서 왔어요!! 디프만 활동을 하면서 저희 팀은 서비스의 빠른 초기 렌더링과 팀원들의 Next.js 역량 증진을 위해서Next.js 프레임워크를 선택하게 되었어요. 백엔드 팀원들과 얘기를 나누던 중, Next.js의 "서버"는 백엔드 개발자들이 흔히 얘기하는 서버와 어떤 차이가 있고, 왜 존재하는지 질문을 했었어요. 저는 이 내용을 자신있게 대답하지 못 했고,,, 바로 찾아보고 다시 머릿속에 넣고자 했어요..🥲🥲 Next.js우선 Next.js는 무엇일까요?Next.js는 React 기반의 프레임워크로, 클라이언트와 서버의 경계를 넘나들며 동작할 수 있는 풀스택 프레임워크입니다. 특히..

Next.JS에서는 특별한 기본 제공 이미지 컴포넌트가 있습니다.바로 컴포넌트입니다! 이미지를 보여줄 때, 단순히 태그를 사용하는 것이 아니라,Next.JS에서 제공하는 컴포넌트를 사용하면 이미지를 더 최적화된 방식으로 출력하도록 도와요. 예를 들어, lazy loading을 적용하여 보일 때만, 불러옵니다. 위의 동작은 추가적인 설정없이 자동으로 해줍니다.lazy-loading이 되면 안되는 이미지도 있습니다! 예를 들면, header에서 항상 보이는 이미지/아이콘 같은 경우에는priority 속성을 추가해서 항상 우선적으로 보이도록 설정할 수 있습니다. 반응형 이미지를 적용하는 과정도 단순화할 수 있어요. 그래서 컴포넌트를 사용하는 것이 좋습니다. 그리고, Image를 사용하면 이미지의 확장자..

NextJs Essentials반드시 알아야 할 핵심 개념 Routing, Pages, ComponentsFetching, Sending DataStyling, Images, Metadata  Next.JS 설치// 설치npx create-next-app@latest// 실행npm run dev   폴더 구조 분석app 폴더는 가장 중요하다.app 폴더로 전체 웹사이트에 두고 싶은 다양한 페이지를 설정하는 곳이다.해당 폴더에 page.js, layout.js가 존재한다. page.js와 layout.js는 예약어이다.page.js는 페이지를 렌더링해야한다는 것을 알려준다.React 구조를 보인다.서버 컴포넌트라는 것이 주목할 점이다.  Components which require a special "en..

Client Component파일 최상단(중간x)에 **‘use client’**라 적으면 그 아래 생성한 컴포넌트는 모두 client 컴포넌트이다.HTML에 Javascript 기능넣기가 가능하다.useState, useEffect 등 사용 가능Server Component아무 곳에서 만든 component는 모두 server 컴포넌트가 될 수 있다.HTML에 Javascript 기능넣기가 불가능하다.ex) onClick={}useState, useEffect 등 사용할 수 없음.그럼 그냥 Client Component가 좋은거 아닌가?기능적 제한이 server component에 비해 없어서 개발하기는 편하다.Page 로딩 속도 느리다.Javascript가 많이 필요하기 때문이다.Hydration이 ..