Wecode - Project 1 (부트캠프)/Project 1 과정

Project1 - 1일차: 팀과 [목표세팅/Planning Meeting/모델링]

JBS 12 2023. 9. 11. 16:13

백엔드 팀의 방향과 목표

과정중심적으로 하기로 했다. 

 

우리팀의 목표는,

답 코드를 구하기보다, 구조화 과정중심

 

 

첫 프로젝트를 시작하기에 앞서, 과정중심의 사고에 대한 강연을 듣고 팀원들도 모두 

과정 중심의 진행에 설득된 거 같았다. 

 

Project 1- 1일 차: 포트폴리오 - 과정 중심 사고 기법 (이력서, 면접 때 참고)

개발자 - 과정중심 - 논리 기반 기술적 문제에 푸는 것만 급급하는게 아니라, ‘문제해결완료'라고만 쓸 수 없으니, 잠자는 시간을 쪼개서라도 탐구는 해야 함. 팀원들이 뭐하는거냐고 하더라도.

pm-developer-justdoit.tistory.com

 

나는 과정을 중요시하고,

나머지 팀원들은 기록과 과정을 잘 못해서. 

 

다같이 논리-탐색-예상-결과확인- 차이점 - 회고 를 중심으로 하기로 했다.


전체 Planning Meeting w/ 멘토님  + 프론트 +백엔드

프론트와 한 자리에서 

1차 프로젝트 안내와 목표를 짧게 안내 받고, 

 

추후 프론트 팀원 두 분과,

백엔드 팀 3명이서 모여서 

 

Trello를 작성하고, 

오늘 무엇을 할 것인지

그리고 어떤 방향으로 할 지 우선순위를 정했다. 

 

일단은 필수사항부터 하고. 

이후에 선택사항을 얹기로. 

 

프론트는 두 분이서 각각 유저(로그인 회원가입)과 포스팅 (목록 조회, 좋아요, 댓글 등) 기능을 구현하기로 하셨다고 전달 받았다. 

 

 

그리고 백엔드 프론트 통신 협업은 금요일에 하고, 

그 전까진 테스트가 필요하다면 

각각 상반된 포지션의 멘토분에게 데이터 받아서 테스트 하는 것으로 안내 받았다. 

 

그전까지 각자 포지션의 기능 구현에만 신경쓰도록 만들어진 거 같다. 


백엔드 팀 Planning Meeting : 1. 문제 해결 접근 - 구조화 

백엔드끼리 다시 모여서, 

백엔드 업무에 대해서 오늘 할 것과

추후 하루하루 어떤 것을 해서 

완료할지 플랜을 짰다. 

 

이후, 빌드업을 했는데,

 

회원가입과 로그인은 foundation 2주차에 과제로 해보고,

foundation test로도 해보았기에, 바로 하기로 하고. 

 

아직 안 해본 포스팅 (게시글) 관련 코드를 생각해보았다. 

 

그렇다면, 데이터베이스의 정보는 어디서 받아오는걸까? 로 

다시 처음부터 시작했다. 

 

회원가입, 로그인처럼,

 

1. 프론트가 고객에게 받은 포스팅 데이터를, 

우리가 (백엔드) 받아서, (app.post) 

 

2. 그걸 데이터베이스에 저장해야 함. 

 

 

포스팅에 들어갈 정보를 먼저 생각해보자 

- 제목

- 내용 

- 누가 썼는지

- 생성 날짜가 있어야 함

- user_id

 

 

이런 것들이 모두 database 내의 table에 들어갈 column이다. 


백엔드 팀 1일 차

- 첫 회의 : 1. 모델링  - 데이터베이스 구조화 

 

1) 각 테이블에 어떤 요소가 들어갈지 '예상'해보았다.

(페이스북 게시물을 보고 상상해보며 참고함)

 

0. users 테이블 

- id   (= user_id)

- email , nickname, password   (= users.email/ users.nickname/ 

- created_at

- updated_at

 

1. Threads 테이블

- content 

- created_at

- title     //이건 안 필여한가? 

- user.id 

 

<나중에 select 해서 쓸 데이터>
users.nickname,    --> users 테이블
threads.id AS postId,   --> threads 테이블 
threads.content,       --> threads 테이블 
threads.created_at AS createdAt,       --> threads 테이블 
FROM threads
INNER JOIN users ON threads.user_id = users.id
ORDER BY threads.created_at DESC;
`)

필요한 데이터베이스 위한 참고) Thread 조회 (read) 

// 1)  thread 받아오기  (데이터베이스 -> mysql -> dbmate)

app.post ( "/posts/read", async(req, res) => {

try {

app

// 2) 최신순 나열 

// 3) if, 아무 데이터 없으면, 빈 배열 

 

- email , nickname, password

- created_at

- updated_at

-  post_id

- title --> 목록에 제목/작성자이름/content(미리보기?)/생성날짜/ 수정날짜 나오니까 


필요한 데이터베이스 위한 참고) Thread 남기기 (create) 

// 1)  thread 받아오기  (데이터베이스 -> mysql -> dbmate)

app.post ( "/posts/create", 

// 2) 로그인 한 사람만 

// 3) if, content 한 글자 이상 아니면, 에러 


 

2. post delete 포스트 삭제 

- post_ id

- 생성 날짜 create date 

- 누가 썼는지 user_id 

- title

- content

- updated_at

 

--> user와 다르게, post에서는 title, content 도 생각해야한다는 생각의 전환이 되었다! 

 

 

3. post update 포스트 수정 

 -post_ id 

- created date

- user_id 

- title 

- content 

- updated_at

 

4. post_comments (댓글 작성) 

- 어떤 게시물의 댓글인지 post_id

-  user_id :누가 썼는지 
- created date

- title

- content

- updated_at

 

 

5. post_likes 

- 어떤 게시물의 댓글인지 post_id

-  user_id :누가 썼는지 
- created date

- title

- content

- updated_at

 

--> like는 좋아요 클릭/ 좋아요 해제 만 있고, 보이는 기능이 없으니까 


mysql  database, table 넣어야 하고 

 

[table]

1. user

2. posts

3. post_comments

4. post_ likes 

 

2) erd 모델링 : 관계 (1:1 /1:N / N:N, pk/fk) '탐구'

팀원들과 말로 서로 설명을 해보며, 관계를 파악해보았다.

각자 논리가 맞는지 생각하면서 탐구함. 

 

erd 모델링을 하면 그림이 대략 이렇게 된다. 

 

이제 pk, fk를 나눠보기로

 

post 테이블: 

- 누가 썼는지 : users_id (fk)  --> 다른 테이블에서 왔으니 

- createdAt : 나중에 udpate 수정된 거 할 때 가져와야 하니 

 

comments 테이블: 

- - 게시물 안에 썼으니: 

 

 

이 테이블에서 어떤 다른 테이블이 필요한지 생각하고, 

다른 데에서 왔으니 다 fk 

 

 

게시물 like

- 특정 게시물 찾아야 하니 : post _id 

- 어떤 사람이 like 눌렀는지 알아야 하니 : user_id 

 

 

이 ERD를 기반으로 

mysql에 데이터 들어가는데, 프론트가 정보를 넣는건데, 

우리가 넣는 건 아니지만, 

우리가 column 만들고, 

 

코드 테스트용으로 

 

 

즉, 


코딩

회원가입, 로그인 함수 코드를 마무리 하기 위해서 

 

일단 팀원들이 마무리가 필요한, 토큰부터 해결하기로 하였다.

 

내가 유일하게 토큰이 마무리 되었기에,

토큰의 개념과 코드 방법, 코드 만드는 함수에 대해 설명하였다. 


1. 토큰 코드의 위치

 return 전, 비밀번호 확인 로그인 완료 후 

 

2. 토큰 원리: 프론트에 response body에 담아서, response보낼 때 토큰을 담아서 준다

로그인 시, 로그인 성공 메세지와 함께, 메세지로 보임.

"accessToken" : token 

 

3.토큰 만들기 

1) jwt.sign()를 사용할 것

토큰을 만들어주는 함수

 

jwt.sign(): jwt 안에 들어있는 6개의 함수 중 하나. 

>> 첫번째 인자: 뭘 암호화할지 

- exp: 만료 되는 시간 (지금 시간을 초로 나눠서 _ 밀리 세컨드 단위라 초로 환산) 

- data: 데이터베이스의 id

 

>> 두번째 인자: signature 

- 우리 회사만의 고유한 문자열들을 넣어서, 

나중에 토큰 열 때에도 이 문자열 넣어야 동작  

 

2)  jsonwebtoken 설치 

npm install jsonwebtoken --save 설치

const jwt = require('jsonwebtoken'); .   // jsonwebtoken을 jwt라는 변수에 담는다

 


이후

각자 프로젝트를 진행하면서 

부족한 부분들을 채워넣으며, 

초기화 세팅을 하고, 초기화 세팅용 branch를 깃허브에 생성하여 push 하는 것을 목표로 하였다. 

회원가입과 로그인도 완성하여, user branch에 넣는 것까지 예상했으나, 

초기화세팅이 foudation 기간에 포함되지 않았던 내용들이 많아서, 시간이 걸렸다. 

 

3일차에, user/post api 생성 완료하면 되기에, 여유를 갖고 하기로 하였다. 

 

 

1일차 회고 :[다시 복습한 것]

" 맥북을 백팁 하는 법  -> optin + ₩" 

팀원이 프로젝트를 하며 백팁하는 법을 물어보아서

내가 대답하면서 복기하며 다시 채우게 되었다. 

1일차 회고 : [몰랐던 거 다시 채운 거 ]

백팁 언제 쓰는가? 팀원에게 백팁을 쓰느 법을 알려주고나서,

그렇다면 백팁은 언제 쓰더라? 다시 복기하며

팀원이 알려주었다. 

 

"백팁은 query 문 쓸 때  쓴다. "

 

+ 5일차에 또 배운 것 

server.listen(portNumber, () => console.log(`Server is listening on ${portNumber}`);  

여기에서도 백팁을 써야 오류가 안 난다


1일차 회고 :[다시 복습한 것]

jwt토큰을 팀원들에게 알려주기 전에,

개념, 원리, 코딩, 디코딩 과정을

빠르게 복기함 


1일차 회고 :[다시 복습한 것]

깃허브 올리는 법. 

내가 팀원에게 알려주며 다시 복기함. 

그런데 git init을 해서, main과 branch연결이 안 돼서 멘토님께 여쭤봐서 알게 된 사실. 

 

1. git init은 최초에만 하는 것이다. 그 폴더에 git 관리하겠다고.

 

+ main에서 git init하면 안 됨(됐으면, 지워야 함) 다 트래킹하고 있으니.

.git 폴더를 지우면 됨

rm of .git

ls 해보면 다 사라짐. 

2. git clone 받으려면 

repository에 올라온 md든 뭐든 받아서 수정하려면 git clone,

로컬에서 수정 후에는 무조건 저장소에 commit, push 작업 

 

-> git clone 할거면, 다른 거 전에

폴더 만들고 git clone 부터 하고, clone 했으면, 그 이후에는 git init 안해도 됨, 

 

3. branch 이름 바꾸려고, github에서 바꾸면 안 됨, 모두 글로벌하게 쓰는 거기 때문에, 

github 에서 branch 수정하면 안되고, 

local에서 하고, 다시 commit 해서 push 해야 함. 

 

4. git 이 다 history를 알고 있어서. 

이미 다른 repository에 올렸던, 파일을

지금 새로운 repository에 이미 올린 파일 올리려고 하면, history 읽고 안된다고 함. 

 

5. code . 

하면 이 상태에서 vscode 열림. 

 

6. 내가 push 한 코드에, 수정 추가해서 올리려면 

병합하기 전까지는 계속 수정한 거 있으면, 여기에다가 commit 하면 되는데.

merge 했다면, 그거를 clone해서 다시 add commit 

 

 

7. git remote add origin [repository 주소 A]를 했는데 

git remote-v를 하면 git remote add origin [repository 주소 B] 가 나오는 이유는, 

 

git remote가 [repository 주소 B] 에 저장되어있기 때문에.

--> 한번에 하나만 가능함 

 

 

그러기에, [repository 주소 A]를 지워줄 거임. 

git remote rm origin 

그러고나서 git remote-v 하면, 아무것도 안 나옴. (=잘 지워진 것. 정상) 

 

git remote add origin [repository 주소 B] 하고 

git remote-v 하면 

 [repository 주소 B]로 잘 나온다. 

 


1일차 팀으로 한 것

1. 우선순위 세팅

 

1) 백엔드 우선순위 정하기,

2) 백엔드와 프론트와 우선순위 정함 (필수 > 선택 > 추가 기능 구현_)

 

 

2. ERD구조화 

우리는 회원가입과 로그인을 한 상태라 패스하고, .

그렇기에, posting 관련 기능은 구현 안 해봐서

흐름을 먼저 말로 정리해보았다. 

 

 

3. 우리팀 목표 : 과정중심적 사고 

 

"과정중심적으로 하기로 했다.

우리팀의 목표는, 답 코드를 구하기보다, 구조화 과정중심/

나는 과정을 중요시하고, 나머지 팀원들은 기록과 과정을 잘 못해서. 

다같이 논리-탐색-예상-결과확인- 차이점 - 회고 를 중심으로 하기로 했다." 

 

 

4. 토큰 

회원가입, 로그인을 패스하고 포스팅에 집중하기에 앞서, 

토큰을 팀이 모두 완료하도록 

토큰을 내가 알려주고, 모두 설치와 코드 하고. 

 

 

 

5. 깃허브

 

윈도우 사양이 좋지 않아서, 설치와 서버 연결 등 문제가 많아, 

맥북인 내가, 코드를 친 후 깃허브에 push 하기로 했다.

 

 

0) repostiory에서 git clone 

1) vscode editor에 코드 작업 

2) git push 

3) pull request

4) 수정 후 commit 

5) 될 때까지 commit 

 

 

6. 폴더 만들어서  > express초기 세팅

 

 

7. express initialized 초기세팅 branch 생성

- branch 별로 따로 올리기

(api별로 할 거니까) 

 

 


내가 맡은 역할

- 토큰 개념, 설치, 코드, 발행 설명

- 초기세팅 api , 회원가입 로그인 api, 게시물 api -> 깃허브 push, pr, merge 

- 이후 코드 분리, branch 분리

- pull readm. md 상세하게 작성해서 올리기 

 

팀원들과는 구조화, 코드 작성 후 검토, pr 리뷰 이후 수정을 함께했다. 

 

깃허브 push  및

작성 및 수정을 논의한 뒤 vscode에서 실행하는 등 마무리와 업로드를 전반적으로 리드했다.