시작하며
생각보다 오래걸렸던 SR기획을 끝내고 코드 스테이츠 측에서 제공하는 레포지토리에 Wiki에 관련 내용을 업로드하고 초기 세팅을 마친 후에 개발을 시작하였다. 사용할 스택과 구체적인 API를 정했고 일정과 팀원들이 수행할 작업들을 Github Issue와 Milestones를 사용해서 정리해놓았기 때문에 자체적으로 진행했던 첫 프로젝트에 비해서 훨씬 수월하게 시작할 수 있었다.
초기 세팅
Client
npx create-react-app client
create-react-app으로 리액트 초기 셋팅을 하고 필요한 모듈들을 package.json에 추가하였다. 기획을 세부적으로 진행했기 때문에 사용할 스택들이 정리가 되어 있었고, 프로젝트 진행 중에 필요한 모듈은 개발하면서 추가적으로 설치하기로 하였다.
//package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^30.0.0",
"@ckeditor/ckeditor5-react": "^3.0.3",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@react-spring/web": "^9.3.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"aos": "^2.3.4",
"axios": "^0.21.4",
"dotenv": "^10.0.0",
"html-react-parser": "^1.4.0",
"react": "^17.0.2",
"react-animated-numbers": "^0.7.0",
"react-datepicker": "^4.3.0",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-js-pagination": "^3.0.3",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.4",
"react-scroll-motion": "^0.2.1",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.2",
"styled-components": "^5.3.3",
"date-fns": "^2.25.0",
"history": "^5.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
컴포넌트 단위로 설계한 와이어프레임대로 해당하는 파일들을 만들었고 Redux를 사용해서 기본적으로 필요한 loginReducer를 설정하고 .env 파일 생성 후 Client 초기 셋팅을 마무리하였다.
Server
//package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"fs": "0.0.1-security",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.3",
"mysql": "^2.18.1",
"mysql2": "^2.3.0",
"node-schedule": "^2.0.0",
"nodemailer": "^6.6.5",
"path": "^0.12.7",
"router": "^1.3.5"
},
"devDependencies": {
"nodemon": "^2.0.13"
}
}서버도 마찬가지로 필요한 모듈을 package.json에 추가하였고 express를 사용하여 구현하였다. api 설계를 끝냈기 때문에 router를 사용하여 필요한 요청들을 router 폴더와 controllers 폴더를 생성하여 분리하였다. 마찬가지로 .env 파일을 설정하고 초기 셋팅을 마무리 하였는데 배포를 진행하면서 AWS의 Parameter Store에서 별도로 환경변수를 설정해 줄 예정이지만 로컬 환경에서 테스트를 하면서 개발을 진행해야해서 데이터 베이스 관련 환경변수를 설정해주었다.
목업 페이지 구현
이번 프로젝트에서 담당한 부분은 홈페이지와 네비게이션 바, 관리자 페이지를 담당하게 되었다. 2주 안에 끝내야 하는 비교적 짧은 프로젝트이기 때문에 4명 모두 풀스택 포지션으로 파트를 컴포넌트 혹은 기능별로 분배하였다.
Home & NavigationBar
Home 페이지에는 다양한 애니메이션 효과를 적용하고 싶어서 라이브러리들을 찾아서 적용하였다. 느린 우체통이란 사이트의 컨셉에 맞게 도착예정인 편지들의 개수를 카운팅 업 애니메이션을 적용하여 화면에 표시되도록 하였고, 스크롤 애니메이션을 적용하여 서비스에 대한 설명이 표시되도록 하였다. 기능에는 관련이 없는 페이지이지만 페이지를 접속했을때 처음 보이는 화면이기 때문에 서비스에 대한 컨셉과 설명을 담을 수 있도록 구성하려고 하였다.
네비게이션 바는 상단에 fixed 해놓아서 스크롤을 내려도 고정되게 하였고 모든 페이지에서 보이게 설정하였고, 로그인 시 받은편지함, 보낸편지함, 편지 쓰기, 마이페이지, 로그아웃, 관리자페이지(관리자 로그인 시)가 보이도록 설정하였다.
AdminPage
관리자 페이지는 프로젝트 시작 전에는 설계하지 않았는데, 코드 스테이츠 측에서 제공하는 요구 조건에 관리자 페이지를 따로 구현해야 해서 기획 단계에서 추가로 맡게 되었다. 데이터 베이스 스키마를 짤 때 필요한 테이블이 2개 뿐이기 때문에 관리자 페이지도 유저 관리와 편지 관리로 나누어서 구현하였다. 이전에 다가치 프로젝트를 진행할때 페이지네이션이나 검색 기능을 구현했기 때문에 목업페이지 제작부터 쉽게 적용할 수 있었다.
이전에는 브라우저에서 제공하는 Modal, Confirm 창을 사용하였지만 기본 디자인만 사용할 수 있기 때문에 별도로 컴포넌트를 생성하여 구현하였다.
마치며
다가치 프로젝트를 진행하면서 꽤 많은 목업페이지를 구현했었고 다양한 태그들의 기본 속성도 파악하고 있어서 좀 더 수월하게 목업페이지를 만들 수 있었다. 데이터 베이스 스키마도 간단하고 구현했던 기능들이여서 어렵지 않게 구현할 것 같다. 이번 프로젝트는 배포 자동화와 도메인 구입을 통한 https 구현까지 할 예정이기 때문에 다음 단계에서 Github 레포지토리와 연결할 예정이다.
