co-task 프로젝트

[#7] Mongoose, express.js를 사용해서 User API 만들기

1. 설계mongoDB는 다른 관계형 DB처럼 스키마 설계가 필요없기 때문에 프론트엔드 개발자에게 딱이였다.mongoDB는 매우 유연하게 스키마 수정이 가능하고 스키마 디자인시 고려하는 디자인 방식은 Embedding과 Referencing이 있지만 나는 단순히 key-value 형태이기 때문에 위의 디자인 방식조차도 복잡하게 느껴졌다. 그래서 단순하게 One-to-One, 즉 key-value로 모델링 했다.{ "_id": "ObjectId('mdkalsfmk2')", "name": "marais", "email": "marais@gmail.com", "password": "maraispw",}위와 같은 User document가 있을 때, name 이나 email 와 같이 하나..

[#6] Server 셋팅하기 | Express.js, MongoDB, and Mongoose

초반엔 supabase를 이용해서 백엔드를 해결하려고 했었다. 하지만, 얼마 전에 팀원 한분이 나가면서 총 2명이서 프로젝트를 진행하게 되었다. 이참에 둘이서 시간이 좀 걸리더라도 나중에 필요한 기술들을 지금 해보자라는 이야기가 나왔고 연차가 쌓일수록 거의 대부분이 풀스택을 하는 것이 보였다. 그래서 Express.js를 이용해서 간단한 user 관리와 todo에 필요한 CRUD 정도만 해보기로 했다. 간단한 설명과 함께 최신에 올라온 Express.js, MongoDB, Mongoose 설치방법이 없어서 정리한다.  Express.js란?공식 문서화면에 제일 잘 설명되있다. Express는 웹 및 모바일 애플리케이션을 위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레..

[#5] Atomic Design Pattern 적용하기

기본 셋팅과 디자인을 끝내고 본격적인 개발을 들어가려고 하는데 한 팀원이 "그런데, 저희 디자인 시스템은 어떤거 써요?"라는 질문을 던졌다. 솔직히 생각도 못하고 있던 부분이였다. 그래서 "어,, 생각안해봤는데, 혹시 사용하고 싶으신 것 있으세요?"라고 여쭤보았더니 Atomic Design을 사용해본 적이 있다고하셨다. "그럼 제가 잘 몰라서 그런데,, 이번주 스프린트로 atomic design pattern 리서치하고 적용해볼께요!" 그래서 이 디자인을 적용하기로 했고 내가 폴더구조를 만들어서 main에 push 한 뒤, 그 다음부터 마크업을 시작하기로 했다. Atomic Design Pattern이란?Atomic Design은 사용자 인터페이스를 구축하기 위한 디자인 시스템을 만드는 방법론이다.Ato..

[#4] 프론트엔드 개발자가 만드는 Figma 디자인 | 깔끔한 todoList UI

현재 프론트엔드 3명이서 todoList 프로젝트를 진행하고 있다. 해당 프로젝트의 목적은 깃허브 이슈와 Jira를 사용해서 최대한 깔끔한 프로젝트를 하나 완성하는 것이다. 다른 분들은 디자인에 인연이 없다고 하셔서 내가 맡아서 피그마 작업을 진행했다. 처음엔 걱정했지만 꽤 좋은 방법을 찾아서 생각보다 수월하게 디자인 프레임을 완성할 수 있었다. 여기서 내가 이용한 방법은 바로 "Figma Community"이다. 유명한 디자인 웹 사이트인 Pinterest는 디자인 참고용으로는 좋겠지만 비전공자가 참고해서 피그마를 만드는 것에는 좀 어려움이 있어보인다. 피그마로 간단한 디자인 작업을 하기에는 Figma Community를 적극 추천한다. 예를 들어서, 'web todolist'를 검색하면 다양한 자료들..

[#3] Co-Task 프로젝트 셋팅 | Package Manager(yarn berry), Development Environment(Eslint, Prettier, husky)

이번주 스프린트로 프로젝트 셋팅을 맡았다. Package Manager(yarn berry)와 Development Environment(Eslint, Prettier, husky)를 리서치 및 셋팅하는 것이다. 꼬박 이틀에 걸친 힘든 싸움이였다..한장에 다 정리하려고 하니 천천히 알아보자 1. Package Manager Package란? - Module을 하나의 블럭이라고 했을 때 이러한 블럭들의 뭉치 NPM의 등장 여러 버전의 동일한 패키지를 한 프로젝트에서 사용할 수 있게 하자 설치 방식을 통일하자 패키지 관련 정보가 들어있는 메타 데이터를 간소화 하자 누구나 배포할 수 있도록 하자 Yarn의 등장 병렬화를 통한 속도 개선 자동화 된 lock 생성 의존성 트리 알고리즘 변경 캐시 사용 Pnpm &..

[#2] Github Actions로 Github Issue 생성시, Jira Issue 자동화

들어가며 협업을 제대로 경험해보고 싶어서 투두리스트 "co-task"라는 토이 프로젝트를 시작했다. 목표는 github 컨벤션, issue 발행, CI/CD 등 정말 정석으로 실무처럼 개발해보고 익숙해지는 것이다. 그래서 가장 많이 들어본 Jira를 협업툴로 선택했다. 그러나, 조사를 진행할수록 내 생각과는 달랐다. Jira를 사용하면 우선 시각적으로 깔끔하게 스케줄관리를 할 수 있고 [#1] 포스팅처럼 github과 연동해서 브랜치에 티켓 넘버를 넣어, commit 메세지를 봤을 때 어떤 단계인지 한눈에 알기 쉽다. 하지만, github issue에 리서치 등을 일목요연하게 정리해서 모두에게 공유하고 싶은 우리의 목적과는 다르게 좀 제한된 느낌이 있었다(정말 팀 단위용). 물론 아래의 방법처럼 gith..

[#1] Jira 협업툴 github과 연동 | Husky로 commit message Jira 티켓번호 자동화

1. Jira 설치 및 github 연동 구글링해서 보면 자료가 엄청 많고 쉽다.2.  Husky로 commit message Jira 티켓번호 자동화여기서부터가 시간이 좀 걸렸다.  처음에는 직접 .git/hooks에 prepare-commit-msg를 생성해서 하는 방법을 사용했다. 하지만 더 간편한 방법이 있었다. 바로 husky를 사용하는 것이다. 설정 과정도 매우 간단하다.  터미널 내 위치: ../프로젝트명 (내경우 프로젝트이름이 co-task) -> ../co-task 1) husky 설치npm install husky jira-prepare-commit-msg --save-dev && npx husky install(이때 husky/_ 경로는 잘못된게 아니고 사용하는 ..