nextjs143 [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] 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. [Next JS 14 웹사이트 만들고 배포까지 A to Z] 프로젝트 시작 2023년 12월 전북대학교 창업 팀에서 연락이 왔다. 개발자가 부족해서 혹시 웹 개발에 참여할 생각이 없냐는 연락이었다. 창업팀 내부 상황은 그야말로 처참했다. 팀 운영에 관련해서 어떤 프로세스도 없었고 대학교 팀 프로젝트 하는 것 마냥 굴러가고 있었다. 도저히 그렇게 운영해서는 안될것 같아서 올해 했었던 한이음 ICT 프로젝트의 경험을 바탕으로 내가 개발 PM을 맡게 되었다. 현재까지 상황은 웹사이트 디자인이 외주를 맡겨 나온 상태였고 개발만 시작하면 되는 상황이었다. 첫 회의를 하면서 많은 것을 정했다. 프레임워크는 풀스택 개발이 가능한 Next JS를 사용하고, 개발방식은 애자일 기법을 이용하며 스프린트 주기를 2주로 잡고 진행하였다. 또한 Tailwind css를 사용해서 최대한 시간을 단축하려.. 2024. 3. 16. 이전 1 다음
