엘리스트랙 sw과정 - 1차 프로젝트

국비지원 엘리스트랙 강의를 들은지 2달이 되었고
1차프로젝트를 할 예정이다.
1차 회의 결과와 궁금증 해결의 시간이었다.

프로젝트 설명

피부에 고민이 많은 20대 여성들을 대상으로 한 화장품 전문 쇼핑몰 제작 프로젝트

사용 스택

• FrontEnd
  • HTML
  • CSS
  • JavaScript

  **리액트를 사용하려했으나 기초를 다진다는 의미로 자바스크립트를 사용**
  

• BackEnd
  • Node.js
  • Exrpess
• DB
  • MongoDB

Commit Type

기능
Feat        : 새로운 기능을 추가할 경우
Fix          : 버그를 고친 경우
Design     : CSS 등 사용자 UI 디자인 변경
!BREAKING CHANGE : 커다란 API 변경의 경우(ex API의 arguments, return 값의 변경, DB 테이블 변경, 급하게 치명적인 버그를 고쳐야 하는 경우)

개선
Style       : 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
Refactor   : 프로덕션 코드 리팩토링
Comment  : 필요한 주석 추가 및 변경
!HOTFIX   : 급하게 치명적인 버그를 고쳐야하는 경우

그 외
Docs       : 문서를 수정한 경우( README.md 수정)
Test        : 테스트 추가, 테스트 리팩토링(프로덕션 코드 변경 X)(test 폴더 내부의 변경이 일어난 경우)
Chore      : 빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X)
( package.json의 변경이나 dotenv의 요소 변경 등, 모듈의 변경)
Rename    : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
Remove       : 파일을 삭제하는 작업만 수행한 경우

제목 작성 규칙
Feat: "추가 get data api 함수"

본문 작성 규칙
본문은 한 줄 당 72자 내로 작성합니다.
본문 내용은 양에 구애받지 않고 최대한 상세히 작성합니다.
본문 내용은 어떻게 변경했는지 보다 무엇을 변경했는지 또는 왜 변경했는지를 설명합니다.

꼬리말 작성 규칙
꼬리말은 optional이고 이슈 트래커 ID를 작성합니다.
꼬리말은 "유형: #이슈 번호" 형식으로 사용합니다.
여러 개의 이슈 번호를 적을 때는 쉼표로 구분합니다.
이슈 트래커 유형은 다음 중 하나를 사용합니다.
    
Fixes: 이슈 수정중 (아직 해결되지 않은 경우)
Resolves: 이슈를 해결했을 때 사용
Ref: 참고할 이슈가 있을 때 사용
Related to: 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)
ex) Fixes: #45 Related to: #34, #23

최종 예시
Feat: "추가 로그인 함수"

로그인 API 개발

Resolves: #123
Ref: #456
Related to: #48, #45

강사님께 질문 리스트

프론트

• 프론트 개발 흐름 (디자인을 페이지 별로 나누어서 개발할지? or component별로?)작업이 겹치지 않게 하기 위해 페이지 별로 개발..!
• 공통 컴포넌트(header, footer)는 따로 빼서 작업 후 페이지에 삽입….
• 답변 :
• css 라이브러리 사용 관련 문의css 라이브러리 사용 제한 X
• 순수 css O
• 답변 :
• 제작환경 폴더구조 문의하나의 레포에서 폴더 server, client 나눠서 작성하기
• client - 페이지별 폴더 구조 구성! (관리 용이)
• 답변 :
• css 합의를 봐둬야할것.
• 답변: 처음시작전에 css 스타일링을 미리 해둘것.

백엔드

• erd 만들어야 할까요?X
• 디비 스키마 방향성 체크 및 참고
• vm 세팅 및 배포는 나중에 해도 될까요?
• vm 세팅 및 배포 우선 작업 (정답 없음..)

해야할 일

백엔드

수요일까지 db설계 완료하기(바로 api작성 X)

추가 개발 관련하여

• 기능적으로 보여줄것
• 퍼스널 컬러 기능
• 기술적으로 보여줄것인덱스를 활용해 db 쿼리 튜닝프론트코드적으로 보여줄 것
• 폴더 구조 고민(이게 최선인지?)
• 애니메이션 추가(화려하게)
• ci/cd 구현
• 백엔드

결제시스템은 둘 다(기능, 기술) - client, back 둘다 공부 해야함!

 

폴더구조및 실행 하기위한 Vite

지인에게 질문을해본결과.
현재 프로젝트가 일반적인 빌드나 런실행하는 프로젝트가 생성이아니라.
추후 Vite 를 사용하여 프로젝트 생성해서 옴기는 작업을 할수도있을거같다.

 

프로젝트를 시작하며..

처음부터 너무 조급해서 급하게 진행하려는 경향을 보이는거같다..
뭔가에 쫗기는 기분이랄까. 땀까지 나서 갑자기 드는생각이 왜이럴까싶더라
일단 진정하고 차분히 복잡하게 생각하지말고 하나씩 해나가자는 생각이들었다.

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript