[Taskify] - 프로젝트 생싱 및 초기 세팅

🍂 10월 중순, 팀 프로젝트 첫날 기록 - 시작

오늘은 중급 프로젝트의 첫날이다. 드디어 Part 3 팀원들과 함께 프로젝트를 시작하게 되었는데, 우리팀은 첫 회의를 통해 협업 툴로 사용할 수 있는 일정 관리 시스템 “Taskify”라는 주제를 선정하게 되었다.

 

💡 주제 선정 이유

Taskify를 주제로 고른 이유는 아주 간단하다 ㅎㅎ! 일정 관리 시스템은 일상에서 자주 사용되는 서비스인 만큼, 사용자의 편의를 고려한 여러 기능을 구현해볼 수 있을 것 같았다. 게다가 프로젝트의 규모가 커서 다양한 컴포넌트를 만들어보는 좋은 기회라고 생각했다. 팀원들도 모두 동의해주어 기분 좋게 프로젝트를 시작할 수 있었다. 😊

 

🛠️ 프로젝트 세팅 과정

첫걸음으로, 깃허브에 프로젝트 레포지토리를 만들고 팀원들을 초대했습니다. 협업을 원활하게 하기 위해 Next.js와 Tailwind CSS를 사용하기로 했다.

프로젝트 초기 세팅에 사용한 주요 기술 스택

•  Next.js (Page Routing): 페이지 라우팅을 위한 프레임워크로 채택
• Tailwind CSS: 빠르고 간편한 스타일링
• Axios: API 요청 처리를 위한 HTTP 클라이언트
• 공통 컴포넌트 모듈화: 재사용성을 높이기 위해 공통 컴포넌트는 모듈로 관리하기로 했다.

협업의 기본은 일관성! 그래서 코드 컨벤션도 함께 정하고 협업을 위한 브랜치 전략도 수립했습니다. 브랜치 전략으로는 협업에 널리 사용되는 GitFlow방식을 채택하여, 기능별로 브랜치를 나누어 작업하고 합치는 과정에서 충돌을 최소화할 수 있도록 했다.

 

📋 R&D 분배와 역할 정하기

초기 설정이 끝난 후, 피그마에 디자인해둔 다양한 페이지를 보니 정말 많았다 😱 그래서 기능별로 작업을 나누기로 했다. 

• 랜딩 페이지
• 로그인/회원가입 페이지
• 대시보드 페이지
• 모달 창 <- 내가 맡은 것 🙂

 

🧑‍💻 모달 작업과 첫 테스트

사실 처음에는 어디서부터 작업을 시작해야 할지 좀 막막했다. 그래서 가장 먼저 모달 기능부터 테스트해보기로 했다. 이전에는 z-index를 사용해서 모달을 화면 맨 위에 띄웠었는데, 이번에는 멘토님이 추천해주신 Portal을 활용해보기로 했다.

Portal은 모달을 특정 DOM 노드로 보내서 어디서든 최상단에 위치시킬 수 있는 기능입니다. Portal로 모달을 테스트해 보니, 생각보다 깔끔하게 적용되어 기분이 좋았다! 😄

 

🔗 API 통신과 로그인 기능

이제 모달 테스트가 끝난 후, 다양한 기능을 더 테스트하려면 API 통신이 필요했다.

하지만 막상 API 작업을 시작하려니 할 일이 많았다. 일단 axiosInstance만 만들어 놓은 상태였는데, 필요한 API가 많아서 커스텀 Hook을 만들기까지는 시간이 좀 걸릴 것 같았다.

게다가 이번 프로젝트에서는 API 호출 시  토큰이 필요했는데, 이를 해결하기 위해 간단한 로그인 페이지를 만들어서 테스트용으로 토큰을 발급받아 진행하기로 했다.

하지만 여기서 뜻밖의 난관이 기다리고 있었으니, 바로 CORS 에러😵

 

🚨 CORS 문제 해결하기

CORS 에러의 원인은 서버에서 Access-Control-Allow-Origin을 *로 설정한 반면, 클라이언트에서 withCredentials: true를 사용하려 했기 때문이었다.

CORS 문제 해결 방법

Access-Control-Allow-Origin: *와 withCredentials: true는 함께 사용할 수 없다는 사실을 알게 되었다. 이 설정은 모든 출처에서 요청을 허용하지만, 인증 정보를 포함한 요청은 허용하지 않기 때문이다. 그래서 클라이언트에서 withCredentials: false로 설정해 문제를 해결했다. 최근에는 JWT와 같은 토큰 기반 인증 방식이 많이 사용되기 때문에, 인증 정보를 헤더에 포함해 처리하는 방식을 선택했다.

 

🔧 Next.js 설정 최적화

마지막으로, 개발 과정에서 편리함을 더하기 위해 Next.js 설정을 다듬었다.

SVG 컴포넌트화 : next.config.mjs에서 SVG 파일을 컴포넌트처럼 사용할 수 있도록 설정했다. 덕분에 SVG 아이콘을 더 쉽게 활용할 수 있었다.

• 경로 Alias 설정: @/를 사용해 루트 경로를 간편하게 참조할 수 있도록 Node.js의 path 모듈을 활용해 설정했다. 이렇게 설정해두니 코드를 작성할 때 불필요한 경로 작성에서 해방된 느낌이랄까? 😆

 

🌟 마무리하며

프로젝트 첫날, 팀원들과 함께 초기 설정을 마치고 나니 잘 할 수 있을까, 걱정되기도 했지만 초급 프로젝트를 수행한 이후 협업에 대한 자신감이 조금은 생긴 것 같아서 앞으로 Taskify 프로젝트가 어떻게 완성될지 기대가 된다. 열심히 배워가며 성장하는 시간이 되길 바라면서, 오늘은 여기서 마무리 ! 😊