-
Notifications
You must be signed in to change notification settings - Fork 0
되돌아보기 (우아한테크캠프 1주차)
Yunseo Hwang edited this page Oct 11, 2021
·
41 revisions
우아한테크캠프 1주차를 되돌아봅니다.
- 상수는 별도의 파일/모듈로 분리하자 참고
- 이슈 및 PR 템플릿을 지정해서 사용하자 참고
- 커밋 메시지에 이슈 번호를 붙이고 각 태그마다 이모지를 사용해보자 참고
- ex) [#1] feat: ✨ 커밋 내용
- 브랜치 분리 시 feat/기능도 좋지만 네이밍이 너무 힘드니 tag/이슈번호로 해보자.참고
- 타입스크립트를 사용해보자 참고
- webpack을 사용해보자 참고
- SCSS와 BEM 네이밍 컨벤션을 사용해보자 참고
- 특정 컴포넌트의 하위 요소를 찾을 때는
.closest, previousSibling이나 nextSibling과 같은 값들을 사용해보자 참고1 참고2 - querySelector나 querySelectorAll과 같이 자주 사용하는 부분은 shortcut 함수를 만들어 사용해보자 참고
- 일반 컴포넌트와 페이지 컴포넌트를 별도의 폴더로 구분하자 참고
-
.dispatchEvent메서드를 사용해 input에서 Enter가 입력되었을 때 입력을 완료시키는 등 UX를 개선할 수 있다면 개선하자 참고 - Throttling과 Debouncing 등의 방법으로 성능을 개선할 수 있다면 최대한 개선해보자 참고
- NodeList를 다뤄야 할 때 Array.from()을 사용해서 더 똑똑하게 다뤄보자 참고
- 로컬 스토리지를 사용해서 다크 모드를 구현해 UX를 개선해보자 참고
- 로딩이 필요한 부분에는 로딩 애니메이션을 적용해서 UX를 개선해보자 참고
- http status 코드를 잘 표현해보자 참고
- 데이터 검증 로직을 클라이언트와 서버 모두 적용하자 참고
- .env 파일을 사용해서 환경 변수를 관리하자 참고
- 발생할 수 있는 보안적인 문제들을 최대한 해결해보자 참고
- 에러 미들웨어를 사용해서 에러 핸들링을 하자 참고
- morgan과 같은 로거를 사용해서 로그를 남기자 참고
- 서버 시작 프로세스를 loaders로 분리하여 모듈화하자 참고
- 외부 패키지를 사용하는 부분은 최대한 분리하여 의존성을 줄일려고 해보자 참고
다른 팀의 코드를 살펴보면서 배울 점을 찾습니다.
- 이미 작성한 내용은 중복해서 작성하지 않았습니다. 그래서 뒤로 갈수록 Comment의 양이 적을 수 있어요.
- 앞 팀에서 놓친 내용을 뒤 팀에서 깨닫기도 합니다..ㅎ
├── README.md(FILE)
├── tips
└── project
├── .gitignore(FILE)
├── .prettierrc.js(FILE)
├── app.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── database # 데이터베이스 관련 파일
├── routes # 서버 로직
├── src # 클라이언트에서 필요로 하는 이미지/.js/.css 파일들
└── views # pug 파일들
- 우리팀은 sqlite3을 사용한 반면 nedb를 사용하였다.
- sqlite3과 nedb의 장단점을 정리하고 비교해보자.
- 하나의 폴더 안에서 여러 파일로 나누어질 때(위 경우
routes)index.js에서 다른 모듈을 모아서 export했다.- 폴더로 나눴을 때 하위의 파일들이 하나의 모듈이라는 것을 명시적으로 표현하는 방법이라 생각한다.
-
status메서드를 사용해서 서버 상태를 잘 표현했다.- http 상태 코드에 대해서 정리하자. - 참고
- 템플릿 파일(.pug)를 렌더링하는 route와 기능을 수행하는 route를 분리했다.
- form 태그를 사용하되
submit이벤트 발생 시e.preventDefault로 기본 이벤트 동작을 막고fetchapi를 사용해서 데이터를 가져오는 방식으로 구현하였다.-
submit이벤트 발생시의 동작에 대해서 정리하자. -
.preventDefault메서드에 대해서 정리하자. -
fetchapi와fetch를 사용하지 않는 방법에 대해서도 알아보자.
-
- form 태그를 사용하되
- 로그인/회원가입에 대한 결과 정보를 서버에서 클라이언트에게 전달하도록 구현하였다.
- 필수적인 부분이었는 데 이것에 대해서 인지하게 된 것이 마지막쯤이라 우리팀은 구현하지 못한 것이 아쉽다.
- 입력 데이터에 대해 클라이언트측과 서버측 모두에서 검증하도록 구현하였다.
- 데이터 검증 로직에 대해서 찾아보니 데이터 검증을 언제, 얼마나 해야 하는 지에 대해서는 의논이 많이 되고 있었다. 참고
- 데이터 검증 로직에 대해서 정리하자.
- 데이터 검증 로직에 대해서 찾아보니 데이터 검증을 언제, 얼마나 해야 하는 지에 대해서는 의논이 많이 되고 있었다. 참고
- 비밀번호 검증 로직에서 정규식은 각 문자 형식(숫자인지, 영소문자인지 등)을 확인하기 위한 용도로 사용하고 JS 로직으로 구현하였다.
- 누구나 이해할 수 있는 영역에 한해서만 정규식을 사용하고 핵심적인 로직은 코드로 구현하여 이해하기 좋다.
- 우리팀이 약관동의 페이지, 휴대전화인증 페이지, 정보 입력 페이지로 구분한 페이지를 하나의 페이지(CSR)로 구현하였다.
- CSR과 SSR의 장단점을 정리하고 비교해보자.
- 클라이언트측의 스크립트를
DOMContentLoaded이벤트가 발생하였을 때 실행시키도록 하였다.-
DOMContentLoaded이벤트과 다른 방식에 대해서 찾아보고 정리해보자.
-
- 서버 오류가 발생했을 때 에러 핸들러를 설정하여 에러 페이지를 렌더링하도록 작성하였다.
- .env 파일과 dotenv 패키지를 사용해서 환경변수를 설정하였다.
├── README.md(FILE)
├── .gitignore(FILE)
├── .prettirrc(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── tips
└── src
├── index.js(FILE)
├── main.js(FILE)
├── db # 파일 기반 데이터베이스 구현 관련 파일
├── passport # passport 관련 파일
├── public # 클라이언트에서 필요로 하는 이미지/.js/.css 파일들
├── routes # 서버 로직
└── views # pug 파일들- 처음에는 lowdb를 사용했다가 후에 파일 기반으로 DB를 직접 구현하였다.
- lowdb에 대해서 살펴보자.
- DB에 대해서 알아보고 직접 구현할 때 필수적인 부분에 대해 정리하자.
- passport-local 패키지를 사용했다.
- passport-local 패키지에 대해 알아보고 사용했을 때의 이점 등에 대해 정리해보자.
- 즉시 실행 함수 방식을 사용하였다.
- 에러 메시지의 내용을 바꿀 때
innerHTML속성을 사용했다.- HTML 내용을 바꿀 수 있는 방법에 대해서 찾아보고 각 방법간 차이에 대해 정리해보자.
- req에 사용자 정보가 존재할 경우, 회원가입 페이지에서 메인페이지로 리다이렉트하도록 서버측에서 구현하였다.
- 라우트 구조를 작성할 때
.route메서드를 사용했다.- express.Router 객체에 대해 살펴보고 route를 설정할 수 있는 메서드들에 대해 정리해보자.
- helmet과 hpp 패키지를 사용했다.
- helmet, hpp 패키지에 대해 알아보고 사용했을 떄의 이점 등에 대해 정리해보자.
- 발생할 수 있는 웹 취약점에 대해 정리해보자.
- esm 패키지를 사용해서 import/export 문법을 사용할 수 있도록 설정하였다.
- express-session의 쿠키 설정에서 httpOnly 속성을 사용했다.
- 쿠키 관련 옵션에 대해서 정리하고 관련 보안 이슈에 대해서도 알아보자.
- morgan 패키지를 사용해서 로그를 남겼다.
- 포트 정보를
app.set메서드를 통해 설정하고app.get메서드를 사용해 가져오는 방식으로 구현했다.-
app.set메서드와app.get메서드에 대해 알아보자.
-
├── README.md(FILE)
├── .gitignore(FILE)
├── yarn.lock(FILE)
├── package.json(FILE)
├── .github/workflows
├── api # api들(중복확인 요청 api)
├── models # 데이터베이스 설정
├── public # 클라이언트에서 필요로 하는 이미지/.js/.css 파일들
├── routes # 서버 로직
└── views # pug 파일들- Github Actions를 사용해서 Heroku 배포를 자동화했다.
- CI/CD와 함께 Github Actions에 대해서 정리하자.
- 이메일 중복 체크 기능을 구현하였다.
- 에러가 발생할 경우 에러 객체를 다음 미들웨어로 넘겨 에러 핸들링을 잘 구현하였다.
- 우리팀의 경우에는 Express 미들웨어를 잘 사용하지 못했는데 이 팀은 잘 사용한 것 같다.
- Express 미들웨어에 대해 정리하자.
- 우리팀의 경우에는 Express 미들웨어를 잘 사용하지 못했는데 이 팀은 잘 사용한 것 같다.
- sqlite DB를 sequelize 패키지와 함께 사용하였다.
- sequelize 패키지에 대해 알아보고 사용했을 때의 이점 등에 대해 정리해보자.
- 데이터베이스를 핸들링하는 로직을 models 폴더로 분리하였다.
- MVC 등의 아키텍처 패턴에 대해 알아보고 각 개념들에 대해 정리하자.
- 클라이언트 스크립트를 작성할 때 하나의 함수(addListeners) 안에서 로직들을 작성하였다.
- SCSS를 사용하였다.
- SCSS와 사용했을 떄의 이점 등에 대해 정리해보자.
-
router.use메서드를 사용해서 모든 pug 템플릿에 사용자 정보를 변수로 넣어주었다. - session-file-store 패키지를 사용해서 세션정보를 파일에 저장하였다.
- session-file-store 패키지에 대해서 정리하자.
├── ReadME.md(FILE)
├── .gitignore(FILE)
├── .prettirrc(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── tips
├── database # 데이터베이스 파일(.db)
└── src
├── app.js(FILE)
├── config
├── controllers # 서버 로직
├── css # 클라이언트에서 필요로 하는 css 파일들
├── js # 클라이언트에서 js 파일들
├── middlewares # express 미들웨어
├── repository # 데이터베이스 핸들링
├── routes # 컨트롤러와 route를 맵핑
├── static/images # 클라이언트에서 필요로 하는 이미지 파일들
├── utils # 데이터베이스 설정, bcrypt 등 유틸
└── views # pug 파일들- js, css, image들에 대해 별도의 폴더를 두고 URI를 기준으로 각 파일들을 제공하도록 설정하였다.
- 컨트롤러 함수들을 하나의 객체로 묶었다.
- 색상에 대해서
reset.css에서 root 변수를 선언하여 사용했다. - 요청 URI 상수에 대해 별도의 constant 폴더에 위치시켜 사용했다.
- 입력값 변경에 대해서
keyup이벤트를 사용했다.-
keyup,keydown,input등 관련 이벤트들에 대해 찾아보고 차이점을 정리하자.
-
- Close Button을 클릭하여 이전 페이지로 돌아가야 할 때
history.back()을 사용했다.- 우리팀의 경우에는 직접 이전 URI로 이동하도록 구현했는 데, 이 방식이 더 적절한 것 같다.
-
history에 대해 알아보고 정리해보자.
-
location.href값을 변경시키는 대신location.assign메서드를 사용했다.- 두 방법 사이의 차이점에 대해 정리하자.
- DOM 요소를 찾는 데 있어
previousSibling이나nextSibling값을 적극 사용했다.- 우리팀의 경우에는 부모 요소에 클래스 값을 주어서 DOM요소를 찾는 메서드마다 해당 클래스 값을 받아 해당 클래스의 하위 요소에서 DOM 요소를 찾도록 구현했다.
- 우리팀 방식보다 이 팀의 방식처럼 이벤트가 일어난 타겟을 기준으로 요소를 탐색해나가는 방식이 더 함수도 간결해지고 의미에 부합하는 것 같다.
- 데이터베이스 핸들링을 하는 로직을 repository로 추상화하였다.
- Repository 패턴에 대해서 정리해보고 다른 패턴에 대한 차이점에 대해 정리해보자.
├── README.md(FILE)
├── .gitignore(FILE)
├── .prettirrc(FILE)
├── Procfile(FILE)
├── app.js(FILE)
├── checklist.md(FILE)
├── db.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── routes # 서버 로직
└── src
├── css # 공통 css 파일(reset.css)
├── js # 공통 스크립트 모듈(utils, constant)
└── pages # 각 페이지별 pug, css, js 파일들- 이벤트 핸들러에 인자를 넘겨줄 때
.bind메서드를 사용했다- 우리팀의 경우 이벤트 핸들러를 반환하는 함수를 호출함으로써 구현했는데 어느 것이 더 좋은 방식일 지에 대해서는 더 알아봐야 겠다.
- 입력값이 검증실패하였다면
submit이벤트의 동작을 막았다. (e.preventDefault)- 우리팀은 놓친 부분이라 아쉽다. 막지 않으면 이미 검증 실패된 데이터가 전송되니 막지 않을 이유가 없는데 말이다.
-
querySelector와querySelectorAll메서드들을$와 $ $로 표현했다.- HTML Element 변수의 경우
$로 시작되니 $ 를 사용해서 그 요소들을 가져오는 메서드를 표현하는 것은 좋은 것 같다. -
_라는 이름의 객체에$와 $ $를 메서드로 묶어둔 것도 좋아 보인다.
- HTML Element 변수의 경우
- Procfile을 사용해서 애플리케이션 시작 커맨드를 지정했다.
- Procfile에 대해서 알아보자.
├── README.md(FILE)
├── .gitignore(FILE)
├── .prettirrc(FILE)
├── server.js(FILE)
├── db.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── controller # 서버 로직
├── router # 컨트롤러와 route 맵핑
├── views # pug 파일들
└── public
├── apis # api 요청 함수들
├── components # 페이지별 컴포넌트들
├── helper # 헬퍼 함수들
├── images # 클라이언트에서 필요로 하는 이미지 파일들
├── pages # 각 페이지에서 필요로 하는 js 파일들
├── styles # 클라이언트에서 필요로 하는 css 파일들
└── constant.js(FILE)- 각 요소를 컴포넌트로 분리하였다.
- 우리팀 같은 경우 해당 DOM을 가져와 하나의 파일에서 여러 요소의 이벤트 설정 등의 작업을 진행했는 데 확실히 하나의 파일에서 하나의 요소에 대한 코드를 다루니 읽기 좋다.
- 컴포넌트와 페이지에 대한 폴더 분리 및 파일명을 다르게 했다.
- 페이지 컴포넌트의 경우에는
_view.js로 네이밍해서 확실하게 페이지와 관련된 파일이라는 것을 나타내서 좋았다.
- 페이지 컴포넌트의 경우에는
- 페이지와 요소 모두 컴포넌트 형식으로 작성했다.
- 오류 발생 여부를 쿼리스트링으로 전달했다.
- URL 객체와 searchParams 속성에 대해서 정리하자.
- 상수들은 constant.js 파일로 분리했다.
- leveldb를 사용했다.
- leveldb에 대해 알아보고 다른 DB와의 차이점 등을 정리하자.
- 다른 부분보다도 클라이언트측 코드에 대한 구조가 정말 잘되어 있어서 코드 이해가 쉽다.
- 브랜치 분리시 tag/이슈번호로 네이밍했다.
├── README.md(FILE)
├── .gitignore(FILE)
├── .eslintrc.js(FILE)
├── app.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── db(FILE)
├── .vscode
├── tips
├── model # 컨트롤러와 route 맵핑
└── static
├── common # 공통 및 컴포넌트의 css, js 파일들
├── fontawesome-free-5.15.3-web # fontawesome 파일들
├── images # 클라이언트에서 필요로 하는 이미지 파일들
└── pages # 페이지별 css, js, ejs 파일들- 회원가입 페이지를 템플릿 문자열을 사용해서 CSR로 구현했다.
- 일일이 요소를 생성하고 삽입하는 작업으로 구현한 것이 아니라 템플릿 문자열을 사용해서 생성하고
innerHTML속성으로 변경했다.
- 일일이 요소를 생성하고 삽입하는 작업으로 구현한 것이 아니라 템플릿 문자열을 사용해서 생성하고
├── README.md(FILE)
├── .gitignore(FILE)
├── .prettierrc(FILE)
├── LICENSE(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── app.js(FILE)
├── views # pug 파일들, css 파일들
└── src
├── approval # 약관동의 페이지 스크립트
├── common # 공통적으로 사용되는 컴포넌트 스크립트
├── images # 클라이언트에서 필요로 하는 이미지 파일들
├── login # 로그인 페이지 스크립트
├── main # 메인페이지 스크립트
├── phone # 휴대전화 인증 페이지 스크립트
├── signup # 회원가입 페이지(정보입력 페이지) 스크립트
└── utils # 유틸 함수들(API, 상수, 검증함수 등)- husky와 lint-staged를 사용해서 커밋 시 eslint 및 prettier를 적용시키도록 했다.
- 요소를 탐색할 때
.closest메서드를 사용했다.-
.closest메서드에 대해 정리하자.
-
- 메인페이지에서 로그인 여부 확인 시 템플릿 대신 세션의 유저 정보를 확인하는 API를 사용했다.
- Enter가 입력되었을 때 입력을 완료시키고자
.dispatchEvent메서드를 사용했다.-
.dispatchEvent에 대해 정리하자.
-
├── README.md(FILE)
├── .gitignore(FILE)
├── .env(FILE)
├── ProcFile(FILE)
├── app.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── .github
├── bin # 앱 실행 스크립트
├── mock # 데이터베이스에 가짜 데이터 삽입
├── models # 데이터베이스 핸들링
├── public # 클라이언트 측에서 필요로 하는 css, js, 이미지 파일들
├── routes # 서버 로직
└── views # ejs 파일들- 이슈 및 PR 템플릿을 지정하였다.
- 이슈나 PR을 하다보면 제목만 입력해두고 보내고 싶은 마음이 생기는 데 템플릿이 있다면 이러한 경우를 방지할 수 있어서 좋을 것 같다.
- app 부분과는 별개로 앱을 실행시키는 부분을 bin/www.js에 두었다.
- console.log 대신 debug 패키지를 사용하였다.
- debug 패키지에 대해서 알아본다.
- 데이터베이스에 가짜 데이터를 생성하는 함수를 정의했다.
- 일종의 테스트를 위한 함수로 보이는 데 로그인 기능을 확인할 때 매번 회원가입을 할 필요가 없어서 좋을 것 같다.
- 테이블을 생성할 때 코드 내에 SQL문을 작성한 것이 아니라 별도의 .sql 파일을 fs 모듈로 읽어 사용했다.
- 모델을 정의할 때 클래스를 사용했고 getter와 setter를 사용해서 private한 구조를 만들었다.
- 모델 내에서 데이터베이스 컬럼을 표현하기 위해
Symbol을 사용했다.-
Symbol에 대해서 정리해보자.
-
- URI 구조대로 폴더 구조를 작성하였다.
- 입력창 컴포넌트는 우리팀의 경우 ejs로 작성하여 include 했는 데, 이 팀의 경우 js로 동적생성하는 함수로 구현하여 사용하는 방향으로 구성하였다.
- 재활용성 등을 생각했을 때, 이러한 방향이 더 적합하다고 생각된다.
├── README.md(FILE)
├── .gitignore(FILE)
├── app.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── webpack.js(FILE)
├── assets # 클라이언트 측에서 필요로 하여 빌드될 js 파일들
├── bin # 앱 실행 스크립트
├── lib # 파일 기반 데이터베이스 구현
├── middlewares # express 미들웨어들
├── models
├── public # 클라이언트 측에서 필요로 하는 css 파일들, 빌드된 js 파일들
├── routes # 서버 로직
├── services
└── views # pug 파일들- webpack을 사용해서 클라이언트측 스크립트 파일을 빌드했다.
- webpack과 그 배경에 대해서 알아보고 정리하자.
- 키보드를 구현하여 PC에서도 모바일 같은 키보드 UI를 확인할 수 있다.
- 브랜치별로 자동배포하도록 Github Actions를 사용해서 설정하여 개발 서버와 배포 서버를 분리했다.
- 로컬에서는 발생하지 않았던 오류가 배포했을 때 생길 수도 있는 데 이를 개발 서버를 통해 테스트 할 수 있으니 좋은 방법인 것 같다.
├── README.md(FILE)
├── .gitignore(FILE)
├── .DS_Store(FILE)
├── .prettierrc(FILE)
├── app.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── session.json(FILE)
├── .github/ISSUE_TEMPLATE
├── assets # 클라이언트에서 필요로 하는 리소스 파일들(이미지 파일들)
└── src
├── db.js(FILE)
├── routers # 서버 로직
├── script # 클라이언트에서 필요로 하는 js 파일들
├── styles # 클라이언트에서 필요로 하는 css 파일들
└── views # pug 파일들- 디바운싱을 적용하였다.
- 쓰로틀링(throttling)과 디바운싱(debouncing)에 대해 정리하자.
- 인증번호 입력 부분에서 타이머를 적용했다.
-
setTimeout,clearTimeout등 관련 함수들에 대해 정리하자.
-
├── README.md(FILE)
├── .gitignore(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── Owoodev-tips
├── gomjellie-tips
└── server
├── app.js(FILE)
├── package-lock.json(FILE)
├── bin # 앱 실행 스크립트
├── db # 파일 기반 데이터베이스 구현
├── myLib # 서버측 유틸 함수들
├── public # 클라이언트에서 필요로 하는 css, js, 이미지 파일들
├── routes # 서버 로직
└── views # pug 파일들-
XMLHttpRequest를 API 요청을 하기 위해 일부 사용했다.-
XMLHttpRequest와fetch의 차이점을 정리하자.
-
- 휴대전화 인증 번호를 클라이언트에서 처리하지 않고 별도 API를 만들어 서버에서 처리했다.
├── README.md(FILE)
├── .gitignore(FILE)
├── app.js(FILE)
├── package-lock.json(FILE)
├── package.json(FILE)
├── bin # 앱 실행 스크립트
├── public # 클라이언트에서 필요로 하는 css, js, 이미지 파일들
├── routes # 서버 로직
└── views # pug 파일들-
querySelectorAll을 통해서 반환되는NodeList를Array.from()을 사용해서 변환했다.-
NodeList에 대해서 알아보자.
-
├── readme.md(FILE)
├── .DS_Store(FILE)
├── .vscode
├── images
├── tips
└── project
├── readme.md(FILE)
├── .env(FILE)
├── .gitignore(FILE)
├── .DS_Store(FILE)
├── package.json(FILE)
├── yarn-error.log(FILE)
├── yarn.lock(FILE)
├── .vscode
├── node_modules
└── src
├── .DS_Store(FILE)
├── index.js(FILE)
├── database # 파일 기반 데이터베이스 구현
├── public # 클라이언트측에서 필요로 하는 css, js, 이미지 파일들
├── routes # 서버 로직
├── util # 유틸 함수들
└── views # pug 파일들- 로컬스토리지를 사용해서 다크모드 구현
- 여러 크기의 휴대폰 크기에서 보여지는 것을 시각화 했다.
- 아이폰 X(375x730)과 갤럭시 S5(360x640)에 대해서 버튼을 각각 만들고 클릭 시 해당 크기로 보여지도록 UI를 구성하였다.
├── README.md(FILE)
├── .env.example(FILE)
├── .gitignore(FILE)
├── .prettierrc(FILE)
├── LICENSE(FILE)
├── package.json(FILE)
├── yarn.lock(FILE)
├── .github
├── README_IMG
├── data
└── src
├── app.js(FILE) # App entry point
├── confing # 환경변수 및 설정
├── loaders # 시작 프로세스 모듈화 (express, logger)
├── models # 데이터베이스 생성 (nedb)
├── routes # Express route controllers
├── services # 비즈니스 로직 (routes와 분리)
├── views # views (pug)
└── public # 정적 자원- 시작 프로세스를 loaders로 분리하여 모듈화하였다.
- express 객체를 만들고 loader의 인자로 넘겨주는 방식으로 구현하여 재활용성이 더 높아졌다.
- logger로 winston 패키지를 사용했다.
- winston 패키지에 대해 알아보자.
- 특정 route로 이동하는 함수들을
routes.js에 모아 모듈화했다.
├── README.md(FILE)
├── .gitignore(FILE)
├── .editorconfig(FILE)
├── app.js(FILE)
├── package.json(FILE)
├── package-lock.json(FILE)
├── .devcontainer
├── bin # 앱 실행 스크립트
├── db # 데이터베이스 핸들링
├── public # 클라이언트에서 필요로 하는 css, js, 이미지 파일들
├── routes # 서버 로직
└── views # pug 파일들- 세션 객체의 속성을 제거하기 위해
delete를 사용했다. - 개발 과정에서 도커를 사용한 것으로 보인다.
- 도커에 대해서 찾아보고 정리하자.
├── README.md(FILE)
├── .gitignore(FILE)
├── package.json(FILE)
├── package-lock.json(FILE)
├── tsconfig.json(FILE)
└── src
├── index.ts(FILE)
├── apis # 외부 패키지(jwt, bcrypt,)를 사용하는 유틸 함수들
├── database # 데이터베이스 설정
├── js # 클라이언트에서 필요로 하는 js 파일들
├── middleware # express 미들웨어(jwt 체크 미들웨어 등)
├── models
├── public # 클라이언트에서 필요로 하는 css, 이미지 파일들
├── routers # 서버 로직
└── views # pug 파일들- 타입스크립트를 사용했다.
- 타입스크립트를 사용했을 떄의 이점 등에 대해 생각해보자.
- 사용자 인증에 JWT를 사용했다.
- 세션 기반과 토큰 기반 인증에 대한 차이점과 장단점을 정리하자.
- 외부 패키지를 사용하는 부분은 별도의 모듈로 만들었다.
- 커밋 메시지에 이슈 번호를 붙여서 사용했고 각 태그마다 이모지를 사용했다.
- 각 이슈별 커밋을 한눈에 확인할 수 있어서 좋다.
- 텍스트보다 이모지가 눈에 더 잘 띄기에 좋은 것 같다.
├── README.md(FILE)
├── LICENSE(FILE)
├── .gitignore(FILE)
├── package.json(FILE)
├── yarn.lock(FILE)
├── .github
└── server
├── index.js(FILE)
├── assets # 클라이언트에서 필요로 하는 css, js, 이미지 파일들
├── db # 데이터베이스 파일(db.json)
├── routes # 서버 로직
└── views # pug 파일들- resize 이벤트를 적용해서 height의 값을 css 변수로 설정하였다. (--vh)
- 로딩애니메이션을 적용하였다.
- fetch API를 통해서 데이터를 가져올 때까지 로딩 애니메이션을 사용자에게 보여준다.
작성 예정...... 작성중