📌

1. 중간 소감
2. 한 일과 할 일
3. 이제까지의 어려움
4. 앞으로의 방향

✨ 컬러리스트 사이트(아직 없음

1. 중간 소감

생각보다 중간중간 많이 못하기도 하고 어려운 부분들이 많아서 예상보다 완성이 늦춰지고 있다.
또 이번이 나의 첫 프론트엔드 프로젝트이자 처음 만들어보는 기능들이 많아 정확한 작업 시간을 예상하기가 어렵기도 하다. 여러가지 CSS라이브러리를 사용해보고, 팔레트의 기능들을 구현해보며 어려움을 많이 겪었지만 그만큼 지금까지 만들어놓은 것들에 뿌듯함을 느끼기도 한다.

2. 한 일과 할 일

시험지

프런트

• S3 같은 곳에서 문제 목록을 가져온다~ -> 아직 S3 미사용
• 문제 목록을 보여주고, 클릭! 하면 해당 문제 페이지로 이동
• 랜덤 선택 버튼을 클릭! 하면 해당 페이지로 이동

백엔드

• 할 일이 없다

문제 풀이

프런트

• 에디터를 깎는다 → 팔레트 매우 힘들었음…
• 팔레트를 선택할 수 있게 해준다
  • 문제나 팔레트를 S3에서 들고 온다
• 저장할 걸 submit을 하면

백엔드

• 최종 저장, 공유 한다

회원가입

프런트

• 회원가입 form을 만든다
• api 서버에게 가입 요청을 한다

백엔드

• email 점유 확인을 하거나, Oauth로 권한을 얻는다
• 기존에 가입한 유저인지 확인하고
• DB에 사용자를 추가한다

로그인, 로그아웃

프런트

• 로그인 form을 만든다
• api 서버에게 로그인 요청을 한다
• 토큰을 받아서, 상태에 올려놓고, api 요청할 때마다 보낸다
• 로그아웃
• 내가 발급 받은 토큰을 지운다

백엔드

• 로그인 데이터를 받아서, DB에 있는 사용자 정보와 대조하고
• 암호화된 비밀번호를 검사하거나(argon2) vs Passport 같은 걸로 OAuth
• jwt토큰을 발급하기 (json web token)

마이페이지

프런트

• 서버에게 사용자의 푼 문제, 풀던 문제 정보를 요청한다
• 프런트는 결과를 보고, pdf로 변환해서 출력할 수 있다

백엔드

• 해당 사용자를 먼저 찾고
• 그 사용자가 푼 문제와, 풀던 문제 목록을 join해서
• 보내준다~
• pagination
  • offset
  • page
  • maxCount
• 사용자 마다 해당되는 마이페이지, 문제 페이지 불러올 수 있게 사용자 정보 확인

배포

백엔드

• node.js 서버를 docker container 로 빌드해서 ECS에 올리기
• IAM으로 권한 그룹을 만들고 그 안에 계정 만들기
• Access Management

1차 배포 이후 추가 기능

즐겨찾기나 검색이 있다

프런트

• 즐겨찾기 추가, 삭제 요청을 보낸다
• 태그를 달고, 삭제 요청을 보낸다
• 필터를 한다~
• 2020년도 이후에 출제된 문제만 보기~

백엔드

• 즐겨찾기를 추가하거나 삭제하고
• 태그로 찾기

자동 저장

프런트

• 로컬 스토리지에 저장하거나
• 정기적으로 서버에게 보낸다

백엔드

• 자동 저장이 오는 걸 간단하고 빠른 방법으로 저장을 해준다
• 완성된 거 vs 작성 중인 거
• table에다가 flag를 만들어서
• isCompleted => 완료됐는지 여부를 boolean으로 저장
• 완성이 되는 순간에~ => 확정!

관리자! version2

• Role Based Authorization => 역할 기반 권한 관리
• 관리자 용 API !
• 모든 푼 문제들을 볼 수 있다
• filter(1번 문제 푼 것들만 모아 보고 싶다든지)

3. 이제까지의 어려움

• 일정 관리 나름대로 노션에도 기록하고, 할 일을 기능별로 리스트 작성해 착실하게 진행하려고 했지만 중간 중간 다른 일정이 생기거나 기능을 만들며 어려움을 겪을 때 손놓고 쉬기도 했다.

• 팔레트 및 선택칸 기능 구현 팔레트와 선택칸 기능은 보기엔 단순해보여도 여러가지 기능들이 필요했다. 실제로 만들면서 생각했던 것보다 복잡한 로직때문에 속도를 내지 못했다. 또 한 번 만들어놓은 기능은 다시 손대기가 어려워 수정하는 데에도 약간 겁이 나기도 했다. 그리고 타 사이트에서 많이 본 기능이 아니다 보니 검색을 하는데에도 어려움이 있어서 코칭에서 많은 도움을 받았는데, 나의 부족한 검색 기능과 구현 능력이 아쉬웠다.

• 계속되는 기능 추가 욕심 사이트를 만들다보면 계속해서 디테일을 추가하고 싶어진다. 그러다보면 하나의 기능을 만들다가도 곁다리로 이런 저런 옵션을 붙이고 싶어져서 로직이 복잡해지거나 시간이 많이 들어가고 다른 기능을 구현하는 일정이 뒤로 미뤄지기도 했다. 그래서 중간 중간 백엔드 팀원과 코치 토끼님과 이야기를 나누고 1차 배포까지의 구현 목표를 다시 정리했는데, 그렇게 하면서 머리도 정리되고 한번씩 리프레싱 되어 좋았다. 추가하고 싶은 기능을 일단 목록에 써놓고 앞으로 하나씩 추가해나갈 예정이다.

4. 앞으로의 방향

1차 목표는

• 회원가입, 회원 수정, 메인 페이지 등 남은 페이지들을 순차적으로 만들고
• 백엔드 연결하기
• css 수정
• 배포
• 회고 및 리드미 작성

2차 목표는 배포 후

• 즐겨찾기, 필터링, 검색 기능 추가
• 코드 리팩토링
• css 수정