본문 바로가기

Web/NextJS

[Next JS 14 웹사이트 만들고 배포까지 A to Z] 프로젝트 시작

2023년 12월 전북대학교 창업 팀에서 연락이 왔다.

개발자가 부족해서 혹시 웹 개발에 참여할 생각이 없냐는 연락이었다. 창업팀 내부 상황은 그야말로 처참했다.

팀 운영에 관련해서 어떤 프로세스도 없었고 대학교 팀 프로젝트 하는 것 마냥 굴러가고 있었다.

도저히 그렇게 운영해서는 안될것 같아서 올해 했었던 한이음 ICT 프로젝트의 경험을 바탕으로 내가 개발 PM을 맡게 되었다. 현재까지 상황은 웹사이트 디자인이 외주를 맡겨 나온 상태였고 개발만 시작하면 되는 상황이었다.

첫 회의를 하면서 많은 것을 정했다. 프레임워크는 풀스택 개발이 가능한 Next JS를 사용하고, 개발방식은 애자일 기법을 이용하며 스프린트 주기를 2주로 잡고 진행하였다. 또한 Tailwind css를 사용해서 최대한 시간을 단축하려고 했다. 그 이유는 당장 2024년 2월에 예비창업패키지를 하게 되는데 그때까지 보여줄만한 결과물이 필요했기 때문이다. 

웹페이지 메인 화면

이런식으로 디자인 된 페이지가 40페이지 정도 외주 결과물로 나왔고 우리는 본격적으로 개발에 들어갔다.

앞으로 올리는 글들은 기능 개발을 하면서 마주한 오류와 해결방법을 적으려 한다.

 

깃허브 README 파일에 커밋규칙 적용

본격적으로 개발을 시작하기 앞서 Github에 코드를 올릴 때도 커밋 컨벤션을 지키면서 배포를 하면 좋을 것 같다는 생각이 들어서 저렇게 작성하였다. 또한 브랜치도 확실하게 분리하여 실제 언제는 배포할 수 있는 main 브랜치, 버전 관리를 위한 release 브랜치, 현재 개발 중인 develop 브랜치 3개로 분리해서 코드를 작성하였다. 

 

자세한 내용은 여기 잘 작성되어 있으니 확인해보길 바란다.

https://www.conventionalcommits.org/en/v1.0.0/

 

Conventional Commits

A specification for adding human and machine readable meaning to commit messages

www.conventionalcommits.org

https://velog.io/@kim-jaemin420/Git-branch-naming

 

Git branch & naming

클론 코딩을 시작하려는데, 현업에서 하는 것처럼 브랜치를 나눠서 하려니 브랜치 이름에도 규칙이 있지 않을까 싶어 찾아보고 작성합니다. 더불어, 브랜치 네이밍을 알기에 앞서 브랜치 종류

velog.io

이렇게 git을 만들고난 후 바로 next js 프로젝트를 생성하였다.

가장 처음 한 것은 메인 페이지 디자인을 만드는 것이었다. 이 뒤부터는 다음 글에서 작성하려고 한다.