Web/NextJS (3) 썸네일형 리스트형 [Next JS 14 웹사이트 만들고 배포까지 A to Z] SSR 페이지에서 useState 사용하기 NextJS를 공부하다 보면 페이지에 function을 넣어야 하는 일이 자주 일어난다. 단순히 반복 작업을 줄이기 위해 사용하기도 하고 fetch한 데이터를 처리하기 위해서도 사용한다. 웹사이트를 개발하면서 나도 메인페이지에 useState 기능을 넣을 일이 있었다. 다음과 같이 학습자료 탭을 누를 경우 드롭메뉴가 펼쳐지는 기능을 구현하기 위해서는 useState를 이용해야만 했다. Q1. css를 사용해서 구현하면 되는 것 아닌가? 물론 css에 hover라는 기능이 있어서 hover를 사용하면 되는 것 아닌가? 하는 의문이 들 수 있다. 하지만 내 경우는 hover를 사용하기엔 원하는 기능이 조금 달랐다. 코드를 확인하면 ul 태그 안에 li 요소들이 들어있는 것을 확인할 수 있다. li 요소에 h.. [Next JS 14 웹사이트 만들고 배포까지 A to Z] App Router App router란? 기존에 pages/ 디렉토리에서 라우팅 되던 방식과 다르게, app/ 디렉토리로 라우팅 하는 방식이 추가되었다. 많은 기능들이 있지만 프로젝트를 하면서 유용하다고 생각했던 기능들만 적어놨다. Server Component: app 디렉토리 내 파일은 디폴트로 서버 컴포넌트로 동작하므로 따로 선언할 필요가 없다. 클라이언트 컴포넌트를 사용하고 싶다면 최상단에 'use client'를 넣어주면 된다. Data Fetching 지원: fetch() Web API를 사용할 수 있게 되어, 컴포넌트 레벨에서도 SSR 적용 가능하다. (실제로 API를 구현하면서 많은 도움이 되었다.) RootLayout: app/ 디렉토리 안에 메인페이지인 page.js와 공통레이아웃인 layout.js파일.. [Next JS 14 웹사이트 만들고 배포까지 A to Z] 프로젝트 시작 2023년 12월 전북대학교 창업 팀에서 연락이 왔다. 개발자가 부족해서 혹시 웹 개발에 참여할 생각이 없냐는 연락이었다. 창업팀 내부 상황은 그야말로 처참했다. 팀 운영에 관련해서 어떤 프로세스도 없었고 대학교 팀 프로젝트 하는 것 마냥 굴러가고 있었다. 도저히 그렇게 운영해서는 안될것 같아서 올해 했었던 한이음 ICT 프로젝트의 경험을 바탕으로 내가 개발 PM을 맡게 되었다. 현재까지 상황은 웹사이트 디자인이 외주를 맡겨 나온 상태였고 개발만 시작하면 되는 상황이었다. 첫 회의를 하면서 많은 것을 정했다. 프레임워크는 풀스택 개발이 가능한 Next JS를 사용하고, 개발방식은 애자일 기법을 이용하며 스프린트 주기를 2주로 잡고 진행하였다. 또한 Tailwind css를 사용해서 최대한 시간을 단축하려.. 이전 1 다음
