본문 바로가기

Trello

Solo-Project(Trello-Clone)

프로젝트 소개

자신의 해야 할 일들을 정리하고 관리할 수 있는 웹 서비스

기존의 Trello를 참고하여 내 방식에 맞게 코드를 작성한 뒤 구현하였습니다. 

 

메인 페이지

소개 영상

 

구현 영상

 자신만의 보드와 리스트, 카드를 확인 할 수 있으며 모든 보드와 리스트 그리고 카드는 사용자가 원할 때 언제든지 삭제, 수정 할 수 있다. 사용자는 자신의 이름과 비밀번호를 수정하고 싶을 때 수정이 가능하며 더이상 사용하지 않을 시엔 회원 탈퇴 할 수 있다.

 

포지션 및 스택

Full-Stack

 

- Front-End: Redux, React, Axios, Material-UI

 

- Back-End: Mongoose, MongoDB, Express, Jwt, Bcrypt

 

- 참고문서

 

jsonwebtoken 모듈

서버와 클라이언트 간 통신할 때 식별하기 어플리케이션 또는 웹페이지를 만들 때 클라이언트와 서버가 통신을 해야하는 경우가 있습니다. 이 때, 어떤 사용자가 서버에게 요청을 걸었는지 알기 위해 사용자마다..

hyeooona825.tistory.com

 

 

bcrypt를 이용하여 로그인 암호 해싱하기 - Jungwoon Blog

bcrypt를 이용하여 로그인 암호 해싱하기 bcrypt bcrypt는 애초부터 패스워드 저장을 목적으로 설계되었다. Niels Provos와 David Mazières가 1999년 발표했고, 현재까지 사용되는 가장 강력한 해시 메커니즘 중 하나이다. bcrypt는 보안에 집착하기로 유명한 OpenBSD에서 기본 암호 인증 메커니즘으로 사용되고 있고 미래에 PBKDF2보다 더 경쟁력이 있다고 여겨진다. bcrypt에서 “work factor” 인자는 하나

jungwoon.github.io

 

도전한 항목

- Server 만들기

 

 처음에는 localstorage를 사용하여 state를 불러와 사용하려고 하였다. 하지만 서버도 직접 만들어야한다고 하기에 백엔드 쪽은 약하여 normalizr라는 중첩된 데이터를 스토어에 통합하기에 적합한 형태로 변환시켜주는 라이브러리를 사용하려고 하였다. 하지만 이 방법은 예시도 너무 없고 오히려 더 복잡하여 차라리 mongoose를 이용하여 만들자!라는 맘으로 처음 서버를 만들어 보았다. 

server 처음 부분

 어떻게 만들까 하다가 우선 따라해보자 라는 맘으로 youtube를 참고하여 mongoose와 express를 사용하여 만들었다. 이게 막상 도전하기가 어려웠지 해보니까 은근 잘 되었다.(백엔드 체질인가....) 솔직히 저 코드를 하나하나 한줄한줄 설명해보시오! 하면 설명 못한다. 전체적인 구조는 이렇게 하는거구나라고 파악만 했지 세세하게는 아직 파악을 못하였다. 아마 리팩토링을 한번 해야하지 않을까....라는 생각이 드는 코드이다.ㅎㅎㅎㅎ

 

- Mongoose(populate, ref)

 

 기초 서버를 만들고 나서 모델을 짤 때에 어떻게 짜야할까 하다가 트리구조 형식으로 짜야한다는 어느 블로그에 말을 보고 짜보기로 하였는데 어떻게 짜야할지 감이 안 잡히는 와중에 mongoose에 ref와 populate로 해야한다는 것을 얼핏 본 적이 있어 그걸 사용하였다.

우선, 위 코드와 같이 스키마를 짜주고 연결시켜주고 싶은 스키마를 이름을 설정해준 뒤 배열을 만들어 그 안에 ref를 사용해 해당 스키마와 연결해주면 된다. 

 

그리고 난뒤 위와 같이 populate를 사용해 경로를 연결해주면

 

위 데이터와 같이 트리구조를 가진 데이터가 완성된다. 저런 식으로 코드를 구성하여 더 깊숙한 트리구조도 가능하다. 하지만 너무 깊숙하면 나중에 찾기가 어려워 조금 자제를 하는 편이 좋을 듯 하다.ㅎㅎㅎㅎ

 

회고

 이번 프로젝트는 다른 사람들과 같이 하는 것이 아닌 나 혼자 처음부터 끝까지 한 프로젝트라 조금 힘들었다. 모르는 부분이 나오면 물어볼 사람도 없었고, 오로지 나혼자 찾고 나혼자 알아보고 나혼자 적용시켜야 하기 때문에 어디가 잘못됬는지 어디가 이상한 지 알 수가 없어 내가 생각했던 시간보다 훨씬 더 많은 시간이 투자된 것 같다. 

 하지만 혼자 하면서 단점만 있었던 것은 아니다. 혼자 처음부터 끝까지 하다보니 코드 전체적인 구조를 내가 다 파악을 하고 있을 수 있어서 오류가 생기면 금방 원상복귀를 할 수 있다는 점은 좋았다. 그리고 내 맘대로 할 수 있었다는 점도 좋았다.(솔직히 편했다.)

 그래서 그런지 git을 전혀 사용하지 않았다. 이거는 내가 정말 땅을 치고 후회하는 점이다. 나중에 실무에 직접 가서는 대부분 git을 사용하여 코드를 주고받고 정리하고 할텐데 이번에 혼자 하다보니 필요성을 못 느껴 전혀 사용하지 않았다. 만약 사용하였다면 지금 git을 매우 잘 사용하고 있지 않았을까 라는 생각도 든다. 

 마지막으로 내가 가장 좋았던 점은 이제 백엔드 즉, 서버를 만들고 데이터를 보관하는데 전혀 두려움이 없어졌다는 것이다. 처음에는 만들기 싫고 어렵고 복잡하고 해서 난 무조건 프론트엔드 쪽만 해야지라고 생각했었는데 막상 내가 코드를 짠 대로 잘 짜여져서 데이터가 오고 가고 하는걸 보니 자신감이 한층 업그레이드되어 만약 취업을 해서 백엔드로 갈 상황이 생기면 난 주저없이 백엔드도 할 수 있다고 할 수 있을 것 같다.