woorim960 / trello-clone-mvc

NodeJS를 이용한 트렐로 클론코딩

트렐로 클론코딩

환영합니다.
trello-clone-mvc는 NodeJS를 기반으로 MVC 패턴을 적용하여 개발되었습니다.

📍 바로가기

Service

• 박우림의 Trello 이용해보기

Wiki

• 요구사항분석
• DB 설계
• API 설계
• 커밋 전략

README

• Run
• Tech Stack
• Dependencies
• Developer

🍀 Run

1. 환경변수 파일 생성

데이터베이스와 연결되어야지만 실행이 가능합니다.

• 명령어

# 작업 경로로 이동
$ cd /workdir

# 환경 변수 파일 생성
$ touch .env

# 환경 변수 내용 추가 -> 내용은 바로 하단에 있습니다.
$ vi .env

• .env 파일 내용
  • DB 설계 바로가기

# ? 내용에 사용하는 DB 정보를 적어주십시오.
PORT=7777

DB_HOST=?
DB_USER=?
DB_PSWORD=?
DB_DATABASE=?

2. 도커를 이용한 trello-node-mvc 이미지 실행

# /workdir은 본인의 작업 경로입니다.
$ docker run --env-file /workdir/.env -p 7777:7777 dnfla960/trello-node-mvc

3. 접속

http://localhost:7777

📚 Tech Stack

• Back

  • Node.js (v4.14.4)
  • Express (v4.17.1)
  • MySQL (v8.0.20)

• Front

  • HTML5 EJS
  • CSS3
  • Vanila JS ES6+
  • DOM

🛠 Dependencies

1. dotenv: ^8.2.0
2. ejs: ^3.1.5
3. express: ^4.17.1,
4. mysql2: ^2.2.5

👨🏻‍💻 Developer

박우림 웹 프로그래머

trello-clone-mvc's Issues

메인 UI 기본 폼 구축

구현 목록

• HTML

• 메인화면에는 ToDo를 등록하는 Add a list div 박스가 기본적으로 존재한다.
• div 박스의 텍스트 Add a list... 추가

• CSS

• Add a list 박스 스타일링
• 배경화면 이미지 추가

패스워드 암호화

구현 목록

• 뭐하기
• 뭐하기
• 뭐하기

드래그 위치에 맞춰서 드랍되도룩 구현

구현 방법

• 프런트단에서는 Drag된 노드가 Drop된 노드의 위치로 삽입되어야 한다.
• insertBefore(DragedNode, DropedNode) 메서드를 사용해준다.
• Drop 위치가 카드가 아니라면 최하위로 이동시켜준다.
• appendChild()를 사용한다.

Drag & Drop된 노드의 위치가 영구적으로 저장되도록 구현

구현 목록

• Cards 테이블에 position 필드를 추가한다.
  • 각 position 필드에 의해 본인의 위치를 기억하도록 할 수 있다.
• 기존에 id 순으로 조회되던 카드가 position 순으로 조회되도록 카드 조회 API를 수정해줘야 한다.
• 카드가 생성될 때는 가장 최근의 카드 position보다 1 큰 값으로 저장되도록 한다.
• position의 수정은 아래와 같이 한다.

• Drag 노드가 중간에 삽입될 경우 본인보다 하위 우선순위들을 position을 1씩 더해줘야 한다.
  1. Drag 노드가 Drop 노드보다 position이 크든 작든 Drop 노드의 position으로 변경하고, 하위 노드들의 position은 모두 1씩 더해준다.
     - 해당 API가 추가되어야 한다.
  2. Drop 위치가 최하단이라면 가장 최근의 카드 position 보다 1 큰 값으로 수정되도록 한다.

카드 폼 생성

구현 목록

• JS

• Add a card를 클릭하면 새로운 Card 등록 폼이 생긴다.
• 각 등록 폼에는 empty 인풋(textarea)과 Add, X 버튼이 존재한다.
• Enter를 누르면 Add 버튼이 클릭되어야 한다.

1. 카드 등록폼이 활성화 상태일 때

• 카드 등록폼이 생기면서 Add a card... 버튼은 사라져야 한다.

• CSS

• card 폼 스타일링

리스트 조회 & 등록 기능 구현

구현 목록

• JS

• 메인화면에서 기존에 등록되어있는 리스트가 조회되도록 추가해준다.
• Save 버튼이 클릭되면 입력된 List Title이 추가되어야 한다.
  • 이때 리스트 등록 API는 fetch를 이용하여 구현한다.
• 추가된 List Title에는 Add a card 버튼이 존재해야 한다.
• 추가된 즉시 새로운 List Title 등록 폼이 생긴다.
  
• List Title 등록 폼의 외부, 즉 바탕화면을 선택하면 등록 폼이 사라지고 Add a list 인풋으로 전환되어야 한다.
  

• CSS

• 등록이 완료된 리스트 박스 스타일링

참고

1. Lists 모듈을 추가하여 동적으로 생성되는 List를 오브젝트로 저장
2. 각 List 의 no(생성된 아이디)를 Div의 id로 등록해준다.
   • 새로 생성되는 리스트의 id는 "new"로 한다.
3. Save 버튼(article)이 클릭되면 현재 클릭된 노드의 id를 가져온 뒤 해당 List의 title이 변경되도록 구현

카드 Drag & Drop 구현

구현 목록

• JS

• Drag & Drop을 통해 각 Card를 원하는 위치로 이동시킬 수 있다.
  
• 서로 다른 List 폼에서도 Card 이동이 가능하다.
• API 이용하여 실제로 이동된 카드로 데이터가 변경되도록 구현
• 드래그되는 영역에 카드 미리보기가 되도록 구현
• #17
  - 프런트단에서는 Drag된 노드가 Drop된 노드의 위치로 삽입되어야 한다.
  - insertBefore(DragedNode, DropedNode) 메서드를 사용해준다.
  - Drop 위치가 카드가 아니라면 최하위로 이동시켜준다.
  - appendChild()를 사용한다.

참고 자료

1. MDN-Drag&Drop
2. 유튜브-퍼즐맞추기
3. MDN-insertBefore()

API 구현

API 명세

• API

구현 목록

• 홈

• 전체 조회

• 리스트

• 추가

• 카드

• 추가
• 수정
• 삭제

• 에러 응답

• 404

도커 이미지 만들기

구현 목록

• Dockerfile 만들기
• DockerHub에 푸시

• Dockerfile

FROM node:14

WORKDIR /app
COPY ./app/package*.json ./app/

WORKDIR /app/app
RUN npm install

COPY ./app/bin ./bin/
COPY ./app/src ./src/
COPY ./app/app.js ./

RUN npm i -g pm2

EXPOSE 7777
CMD ["pm2-runtime", "start", "./bin/www.js"]

X 버튼을 클릭하면 등록폼이 사라지도록 구현

구현 목록

• X 버튼을 클릭하면 등록 폼은 사라진다.
  ->

리스트 등록 폼 구현

구현 목록

• JS

• Add a list 박스를 클릭하면 새로운 List Title 등록 폼이 생긴다.
• 각 등록 폼에는 Add a list 인풋과 Save, X 버튼이 존재한다.
• Enter를 누르면 Save 버튼이 클릭되어야 한다.

• CSS

• Add a list 인풋과 Save, X 버튼 스타일링

X

구현 목록

• [ ]

X

카드 조회 & 등록 기능 구현

구현 목록

• JS

• 메인 화면 접근시 기존에 등록되어 있는 카드가 조회되도록 한다.
• Add 버튼이 클릭되면 입력된 Card가 추가되고, 새로운 Card 등록 폼이 생긴다.
  
• Card가 hover(마우스가 가리키고 있는) 상태라면 우측에 수정 아이콘 버튼이 보이도록 한다.
  

• CSS

• 등록 완료된 카드 폼 스타일링