web3 [Next JS 14 웹사이트 만들고 배포까지 A to Z] CSS 익히기 창업 활동을 하면서 우리 팀 개발자는 총 4명이었다. 프론트엔드 두명, 백엔드 두명이서 웹사이트를 2달 간 개발하였다. 웹사이트를 만들어야 하는 기간이 매우 부족했고 그래서 우리는 Next.js 프레임워크와 Tailwind css를 사용해서 개발하기로 하였다. Next.js의 가장 큰 장점은 풀스택 프레임워크라는 것이다. 그러다 보니 우리는 프론트엔드와 백엔드로 나누긴 하였지만 백엔드도 css 디자인을 하고 프론트엔드도 api를 짜는 일이 종종 잦았다. 그렇게 개발을 하면서 가장 힘들었던 점을 조금 서술하려고 한다. P1. 백엔드 파트에서 가장 고충이었던 것은 컨테이너 구조를 짜는 것이었다. 예를 들어 이런 페이지가 있다고 할 때 총 몇개의 div 컨테이너로 나눌 수 있겠는가? 사람마다 다르겠지만 나는 .. 2024. 3. 23. [Next JS 14 웹사이트 만들고 배포까지 A to Z] SSR 페이지에서 useState 사용하기 NextJS를 공부하다 보면 페이지에 function을 넣어야 하는 일이 자주 일어난다. 단순히 반복 작업을 줄이기 위해 사용하기도 하고 fetch한 데이터를 처리하기 위해서도 사용한다. 웹사이트를 개발하면서 나도 메인페이지에 useState 기능을 넣을 일이 있었다. 다음과 같이 학습자료 탭을 누를 경우 드롭메뉴가 펼쳐지는 기능을 구현하기 위해서는 useState를 이용해야만 했다. Q1. css를 사용해서 구현하면 되는 것 아닌가? 물론 css에 hover라는 기능이 있어서 hover를 사용하면 되는 것 아닌가? 하는 의문이 들 수 있다. 하지만 내 경우는 hover를 사용하기엔 원하는 기능이 조금 달랐다. 코드를 확인하면 ul 태그 안에 li 요소들이 들어있는 것을 확인할 수 있다. li 요소에 h.. 2024. 3. 22. [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파일.. 2024. 3. 17. 이전 1 다음
