Project 2 - 1일 차(0): 프로젝트 이해, flow

목표와 방향을 제대로 이해하기 위해.

전체적 timeline

월요일 - 분석 기획(모델링은 오래 걸리고, 어느 기능까지 할지) 
화요일 - 


<제외할 기능>
- 소셜 로그인은 안 한다. (3차때, 대한항공, cgv 예약 기능과 함께---> 지역별 영화관, 매진 좌석, 예약가능 좌석 고려) 
- 비회원 로그인은 우선 순위 뒤로 
   >> 요청 시 "로그인 필요합니다 " 메세지로 
   >> 유저 정보 필요 없을 거기에, 인증 절차도 필요 없어질 것
- 휴대폰 간편 인증도 안하는 


<우리가 하는 거> 로그인 회원가입부터 주문결제까지의 과정에 집중
로그인, 회원가입, 
주문페이지 
결제페이지 
상세페이지, 메인페이지, 장바구니 -> 데이터베이스에서 값이 와야해서 필요함
(외부 라이브러리 없음) 


2차는 디자인 안함. 그러라고, clone 이미 디자인 나온거로. 


추석 한 주는
2차 끝나고 3차, 기업협업 위한 쉬어가는 중, 개인적 개발, 공부

---

workflow 

---

전체적 프로세스

1. PET
사이트 어떤 거 정했고,
이 사이트의 정체성은 무엇이고 

 

[2차 프로젝트 PET 분석 ]

Project 2- 1일 차: 닥터마틴스 분석

 

2. 개발 단계 (백엔드)

- ERD modeling 

- 데이터베이스

- API 

3. 1차 sprint meeting 후 2차 sprint meeting 에서 회고 

---

 

프로젝트 이해하기

제품과 고객을 정의, 해당제품을 필요로 하는 고객에게 우리의 서비스를 제공하고자 하는 목적을 지닌 프로젝트

 

고객과 제품을 위해 개발하는 것은 개발자로서 지녀야 하는 필수 덕목

내가 개발하는 영역이 -->  고객에게 어떤 편의로 다가갈지 항상 고민하며 개발하는 습관

 

 

🎯Mindset

✔ 제품과 고객을 위한 개발

좋은 서비스에서 좋은제품을 고객에게 제공할 때

고객이 서비스를 이용할 때 좋은 경험을 가져가려면 개발자로서 좀 더 고객친화적인 개발을 해야합니다.

 

보통 유저친화적인 개발을 하기위해서는 개발자가 더 고생해야하는 경우가 대다수 입니다.

내가 좀 더 고생 할 지라도 서비스와 고객을 위해서 어떤 편의를 제공할 수 있을지 고민 하시길 바랍니다.

 

✔ 회고를 기반으로 한 성장

세상의 모든 개발자는 경험과 기록을 기반으로 성장합니다.

회고를 통해 개발자는 자신의 경험을 반성하고 개선할 점을 찾아내며, 지속적인 학습과 성장을 이룰 수 있습니다.

 

프로젝트 동안 앞으로 지켜나가고 싶은 좋은 습관은 어떤 점 인지 , 고쳐봤으면 하는 부분은 어떤 점이 있는지 고민해보세요.

✔ Scrum : Agile하게 개발하기

개발자는 제품을 한 번에 완벽하게 생산하지 않습니다.

제품의 프로토 타입을 만들어 시험하고, 테스트를 거쳐가며 최종 제품의 형태로 만들어 나갑니다.

 

여러분들이 위코드에서 개발할 때도 마찬가지입니다.

매일아침 standup-meeting을 통해 서로의 업무 컨디션을 체크하고 우리 팀의 제품이 어떻게 만들어지고 있는지 확인

---

---

📍Curriculum

 🧷 좀 더 고도화된 협업, 실무와 가까운 프로세스로 진행되는 프로젝트입니다. 한 기업의 구성원으로 일한다는 마음가짐으로 책임감있게 프로젝트에 임해주세요!

 

2차 프로젝트

수익성을 지니고 있는 모든 웹 서비스라면 지닐 수 밖에 없는, 회원 - 상품 - 주문 - 결제 4가지 핵심 요소를 기반으로, 팀내에서 결정한 제품의 가치를 전달하는 웹 서비스를 만듭니다. 이번 프로젝트를 통해 개발만 하는 개발자가 아닌 고객과 제품 중심적으로 사고 할 수 있는 개발자로 거듭납니다.  (회원 = 회원가입, 로그인)

 

Frontend

• Advanced Router
  • 쿼리스트링(query-string)을 통해 url로 관리되고있는 데이터를 객체형태로 다룰 수 있는 방법에 대해 배웁니다. 이를 통해 상품 상세페이지처럼 동일한 UI에 다른 제품이 보여져야 하는 동적 라우팅과, 리스트 페이지에서 내가 선택한 조건에 맞는 상품만 골라서 볼 수 있는 filtering 기능을 구현해 볼 수 있습니다.
  • 참고자료
    • Advanced Router

Backend

• AWS EC2
  • AWS EC2가 제공하는 클라우드 환경 내에서 가상 컴퓨팅 환경을 제공하여 사용자가 필요한 만큼의 가상 서버를 배포하고 운영합니다.
• AWS RDS
  • RDS를 경유, 사용자에게 관리형 관계형 데이터베이스 서비스를 제공하여 데이터베이스 운영 및 관리 작업을 간소화합니다.
• AWS VPC
  • 가상 네트워킹 환경으로, 사용자가 AWS 리소스를 위한 격리된 가상 네트워크 환경을 생성하고 구성합니다. VPC는 사용자의 네트워크 통신 시 보안을 위해 매우 중요한

---

1차 프로젝트 체크 리스트 | 기술 관점

🚀 1차 프로젝트 목표

아래는 1차 프로젝트 목표를 공통 / 프론트 / 백 순서로 정리한 내용입니다.
중간 중간 체크리스트 확인하면서 프로젝트 진행해주세요!

☑️ 공통 목표

• Scrum - 스크럼 진행 방식에 대해서 이해했고 Trello 와 같은 tool 을 활용하여 스크럼 방식 아래 프로젝트 진행할 수 있다
• Standup Meeting - 매일 아침 미팅을 통해 어제 한 일, 오늘 할 일, blocker 세 가지를 공유하며 팀원들과 미팅을 진행할 수 있다.
• Communication - 팀원들과 소통이 필요한 경우 올바른 방법을 통해 의견을 주고 받으며 조율할 수 있다.
• Git - 기본적인 Flow에 따라 Git을 사용할 수 있으며, 올바른 이름의 branch를 생성하고 작업 내용에 대한 commit message를 작성할 수 있다.
• 문제 해결 능력 - 모르는 과제를 마주하는 경우 Google 검색, stackoverflow 등을 활용하여 문제를 해결할 수 있다.
• Q&A - 스스로 문제 해결이 잘 안 되는 경우, 혹은 누군가가 도움을 요청하는 경우 동기, 혹은 멘토와 올바른 방법으로 질문과 대답을 주고 받을 수 있다.

---

☑️ Backend

:: HTTP & Restful API

• HTTP 기본 개념 (요청/응답, stateless)를 이해하고 있고 메세지 구조를 이해하고 있다.
• GET, POST 메소드 차이점을 알고, 프론트에서 넘어오는 데이터를 어떻게 처리해야 하는지 알고 있다.
• RESTful API 개념을 이해하고 URL 주소를 RESTful 식으로 구현할 수 있다.

:: Database & SQL

• one to one, one to many, many to many 개념을 알고 있다.
• 요구사항에 맞게 데이터 베이스 모델링 설계를 할 수 있다.
• JOIN 기본 개념을 이해하고 있고, LEFT JOIN, RIGHT JOIN, INNER JOIN, OUTER JOIN의 차이점들을 이해하고 있다.

: Node.js + Express + TypeORM

• 초기세팅(npm init, npm package 설치, package.json 관리, TypeORM을 이용한 MySQL DB연결)을 혼자서 할 수 있다.
• Node.js + Express 기반의 Layered Pattern의 폴더 디렉토리 구조를 이해하고 있으며 각 파일의 목적과 용도를 이해하고 있다. (server.js / app.js / routes / controllers / services/ models[dao] 등)
• 데이터 베이스에 저장된 User정보를 리턴하는 엔드포인트를 구현할 수 있다.
• Frontend로 부터 전달된 다양한 종류의 데이터를 Backend 데이터 베이스에 저장 할 수 있다.
• 쿼리 스트링과 JSON으로 전달되는 데이터를 어떻게 받아서 처리하는지 알고 있다.
• SQL Raw Query문을 사용하여 DB CRUD(Create, Read, Update, Delete)을 구현 할 수 있다.
• 프론트엔드 개발자와 소통하여 Frontend 서버와 Backend 서버를 연결 할 수 있다.
• AWS에서 서버를 생성하여 Node.js + Express 기반의 애플리케이션을 배포할 수 있다.
• 스크럼 진행 방식에 대해서 이해했고 스크럼 방식 아래 프로젝트 진행할 수 있다.

---

☑️ Frontend

:: CRA & Router

• CRA를 이용하여 프로젝트 초기 세팅을 혼자서도 어느 정도 할 수 있다.
•  Router.js에 라우트를 추가할 수 있다.

:: React

• Pages, Components의 차이점을 알고 어디에 어떤 컴포넌트를 만들어야 하는지 안다.
• event handler를 정의해서 특정 이벤트에 부여할 수 있다.
• 자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지 알고 있다.
• map 메서드를 사용, jsx 리턴하여 목록을 구현할 수 있다.
• fetch나 axios를 사용하여 백앤드 api를 호출하고, 응답받은 데이터를 활용하여 화면을 그려줄 수 있다.
• 로그인 사용자의 token을 왜 localStorage에 저장 하는지 설명할 수 있다.
• children 개념을 이용하여 컴포넌트를 재사용 할 수 있다.
• query string이나, path로 동적 라우팅을 구현할 수 있다.

:: SCSS

• scss를 왜 사용하는지 이해하고 있다.
• nesting 기능을 활용하여 스티일링을 구성할 수 있다.
• scss 의 variable / extend / mixin / & 등 여러기능을 자유자재로 사용할 수 있다.

---

2차 프로젝트 체크 리스트 | 기술 관점

📕 2차 프로젝트 목표

☑️ 공통 목표

• Trello에 정리한 티켓 내용을 토대로 매일 아침 정해진 시간에 팀원들과 standup meeting을 진행할 수 있다.
• 내가 할 수 있는 것과 없는 것, 현재 우선순위가 높은 것과 그렇지 않은 것을 잘 구별하고 팀에게 전달하여 기획과 일정을 조율할 수 있다.
• 전체의 과정을 생각하며 프로젝트를 기획하고 프론트와 백이 맞춰보는 일정까지 고려하여 발표 전까지 팀원들과 최대한의 결과물을 만들어낼 수 있다.
• Git의 기본적인 Flow에 따른 방식 + squash, git rebase를 적용하여 commit 내역을 깔끔하게 관리할 수 있다.
• 새로운 기술을 학습하며, 혹은 잘 안풀리는 과제를 마주하는 경우 Google 검색, stackoverflow 등을 활용하여 문제를 해결하고 바로 적용해볼 수 있다.
• 마친 후에는 프로젝트 후기를 작성하여 2주의 시간을 되돌아보고 실제 이력서 작성과 면접 준비를 할 수 있다.

---

☑️ Backend

1) 1차 체크리스트(참고)

• HTTP 기본 개념 (요청/응답, stateless)를 이해하고 있고 메세지 구조를 이해하고 있다.
• GET, POST 메소드 차이점을 알고, 프론트에서 넘어오는 데이터를 어떻게 처리해야 하는지 알고 있다.
• RESTful API 개념을 이해하고 URL 주소를 RESTful 식으로 구현할 수 있다.

    :: Database & SQL

• one to one, one to many, many to many 개념을 알고 있다.
• 요구사항에 맞게 데이터 베이스 모델링 설계를 할 수 있다.
• [ ] JOIN 기본 개념을 이해하고 있고, LEFT JOIN, RIGHT JOIN, INNER JOIN, OUTER JOIN의 차이점들을 이해하고 있다.

    :: Node.js + Express + TypeORM

• 초기세팅(npm init, npm package 설치 | package.json 관리, TypeORM을 이용한 MySQL DB연결)을 혼자서 할 수 있다.
• Node.js + Express 기반의 Layered Pattern의 폴더 디렉토리 구조를 이해하고 있으며 각 파일의 목적과 용도를 이해하고 있다. (server.js / app.js / routes / controllers / services/ models[dao] 등)
• 데이터 베이스에 저장된 User정보를 리턴하는 엔드포인트를 구현할 수 있다.
• Frontend로 부터 전달된 다양한 종류의 데이터를 Backend 데이터 베이스에 저장 할 수 있다.
• 쿼리 스트링과 JSON으로 전달되는 데이터를 어떻게 받아서 처리하는지 알고 있다.
• SQL Raw Query문을 사용하여 DB CRUD(Create, Read, Update, Delete)을 구현 할 수 있다.
• 프론트엔드 개발자와 소통하여 Frontend 서버와 Backend 서버를 연결 할 수 있다.
• AWS에서 서버를 생성하여 Node.js + Express 기반의 애플리케이션을 배포할 수 있다.
• 스크럼 진행 방식에 대해서 이해했고 스크럼 방식 아래 프로젝트 진행할 수 있다.

2) HTTP & Restful API

• Unit-Test를 통해 구현한 함수를 상황에 따라 평가할 수 있다
• Pagination의 개념을 이해하고, limit과 offset을 이용하여 제한된 범위 안에 있는 데이터만을 추려내어 Frontend에 전달할 수 있다.
• Filtering의 개념을 이해하고, Client/Frontend로 부터 쿼리 스트링을 받아서 희망한 데이터만을 추려내어 Frontend에 전달할 수 있다.
• Ordering/Sorting의 개념을 이해하고, 요청에 의해 순서가 재배치된 데이터 모음을 Frontend에 전달할 수 있다.
• Docker의 기본 개념을 이해하고 개발된 환경을 Docker를 이용하여 배포할 수 있다.

---

☑️ Frontend

1) 1차 체크리스트(참고)

• [ ] CRA를 이용하여 프로젝트 초기 세팅을 혼자서도 어느 정도 할 수 있다.
• [ ] Routes.js에 라우트를 추가할 수 있다.

:: React

• [ ] Pages, Components의 차이점을 알고 어디에 어떤 컴포넌트를 만들어야 하는지 안다.
• [ ] event handler를 정의해서 특정 이벤트에 부여할 수 있다.
• [ ] 자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지 알고 있다.
• [ ] map 메서드를 사용, jsx 리턴하여 목록을 구현할 수 있다.
• [ ] fetch나 axios를 사용하여 백앤드 api를 호출하고, 응답받은 데이터를 활용하여 화면을 그려줄 수 있다.
• [ ] 로그인 사용자의 token을 왜 localStorage에 저장 하는지 설명할 수 있다.
• [ ] children 개념을 이용하여 컴포넌트를 재사용 할 수 있다.
• [ ] query string이나, path로 동적 라우팅을 구현할 수 있다.

:: SCSS

• [ ] scss를 왜 사용하는지 이해하고 있다.
• [ ] nesting 기능을 활용하여 스티일링을 구성할 수 있다.
• [ ] scss 의 variable / extend / mixin / & 등 여러기능을 자유자재로 사용할 수 있다.

2) CRA & Router

• [ ] Functional component를 생성할 수 있다.
• [ ] Hooks의 useState, useEffect 함수를 사용하여 컴포넌트의 상태를 관리할 수 있다.
• [ ] styled-component를 사용해 js 파일 안에서 컴포넌트의 스타일을 지정하고, 컴포넌트의 상태를 props로 받아 스타일 적용을 다르게 할 수 있다.

---

49기 | 2차 프로젝트 시작 안내

0.  n차 프로젝트 팀 선정

1.  Planning Meeting w/ Team

• 스프린트의 시작을 알리는 Planning Meeting 을 진행해주세요!
• 가장 아래의 **팀 별 Planning Meeting 준비** 항목에서 각 팀에 해당하는 페이지 내용을 입력해주세요.

✅ 프로젝트 주제 선정

이솝

러쉬

와이즐리

이케아

마켓컬리

정육각

오설록

시디즈

나이키

닥터마틴

스파오

 

[각각의 product 분석]

해당 내용은 아래 링크에! 

Project 2- 1일차 (2) : 후보 기업 분석, Business Modeling

[Planning Meeting Board]

해당 내용은 아래 링크에! 

Project 2- 1일 차(3) : [오후 Planning Meeting] 닥터마틴스 PET 분석/ Planning Meeting Board

 

 

2.  Final Meeting w/ Team

🗣 정해진 내용을 토대로 팀원들과 최종 미팅을 진행합니다.

• 첫 번째 Sprint 에 대한 최종 플래닝 미팅입니다.
• 플래닝 미팅 내용을 토대로 이번주 작업 내용에 대해 확정 지어주세요.
• 확정된 내용을 토대로 역할 분담 및 기간 설정이 진행되기 때문에 팀원들과 신중히 논의해주시기 바랍니다.

내가 po로서 회의해서 계속 말하는 말, 지금 이 자리에서 이해하고, 지금 이 자리에서 의견 있으시면 말해주세요.

회의 시간을 잘 활용하는 것이 팀의 효율성을 위한 일이기에! 

 

Trello 세팅

🗣 아래 페이지를 참고하여 Trello 세팅을 진행해주세요. Trello 활용법

Slack 세팅

 🗣 아래 페이지를 참고하여 Slack 세팅을 진행해주세요. Slack 활용법

 

3. 프로젝트 초기 세팅

 🗣 아래 페이지를 참고하여 Frontend, Backed 각각 프로젝트 초기세팅을 진행해주세요.

 

프로젝트 초기 세팅

• Frontend 초기 세팅 진행 후 멘토가 생성한 Repository에 push 해주세요.
• Backend 멘토가 생성한 Repository를 clone하여 초기 세팅 진행 후 PR 생성해주세요.

4. 개발 시작!

 🗣 수고하셨습니다👏👏👏 이제 본격적으로 개발을 시작해주시기 바랍니다. 다들 화이팅-!

 

:: Frontend: 각자 담당한 페이지에 대해 route 경로를 설정하고 레이아웃 작업을 시작해주세요.

:: Backend : 사이트를 상세히 살펴보며 확장성을 고려한 데이터베이스 모델링을 모여서 함께 진행해주세요.

 

필독) 백엔드 데이터베이스 관리 안내

✔️ DB 는 모든 팀원이 전부 만드셔야 합니다.

• 아마존에서 제공하는 RDS 서비스를 이용하기 전에는 각자의 컴퓨터에 있는 MySQL 을 이용해야 합니다.
• 다른 팀원의 MySQL 에 접근하는 것은 아직 어려운 점이 많기 때문에 테스트는 본인의 DB 를 이용합니다. 

✔️ MySQLDump 를 통한 DB 백업 및 load

• MySQL 에는 데이터 백업 및 load 를 위한 자체 기능이 포함되어 있습니다.
• MySQLDump 명령어를 통해서 SQL 파일을 생성(백업)할 수 있습니다.
• 생성된 SQL파일을 이용하여 백업한 DB 를 그대로 복제(load) 할 수 있습니다
• 자세한 사용법과 다른 기능들은 필요한 경우 상황에 맞게 검색하여 적용해보시기 바랍니다.

✔️ RDS 사용

• AWS 서비스 배포 후 AWS 에서 접근할 수 있는 DB 를 사용해야 합니다.
• 저희는 AWS 에서 제공하는 RDS 라는 서비스를 사용할 예정입니다.
• RDS 에 DB 구축 후에는 RDS DB 하나만 관리해 주시면 됩니다.
• (자세한 내용은 6주차 목요일 AWS 세션에서 다룰 예정입니다.)

5. 프로젝트 진행

6. 프로젝트 마무리

03-1. 프로젝트 영상 녹화 및 제출

• 프로젝트 발표 후 프로젝트 영상 녹화를 진행해주시기 바랍니다.
• 프로젝트 마친 후에, 혹은 수료 후에 얼마든지 기획 했던 기능들 추가하고 다시 녹화할 수 있으므로 우선은 바로 진행해주시기 바랍니다.
• (나중에 팀원들과 다시 모이는 것이 생각보다 쉽지 않습니다.)
• 녹화된 영상은 각 팀에서 한 분이 **각 기수 구글 취업 classroom**에 제출해 주시기 바랍니다.

03-2. README.md 파일 작성

• 프로젝트 README.md 템플릿 입니다.
  • README.md
  • wecode-bootcamp-korea/readme-collection
• 프로젝트 완료 후에는 위 템플릿에 맞게 README.md 작성을 완료해주세요.
• 마지막 Reference 부분은 README.md에 반드시 포함되어야 하는 내용입니다.
• "그대로 따라서 작성하면 다른 프로젝트와 획일화 되어서 특별해보이지 않습니다. 나만의 언어로 나의 소중한 프로젝트를 특별하게 설명해 주세요."
• 팀 프로젝트를 마치면 개인 repository로 fork 해서 옮겨주세요.
• README.md 작성 후 각 기수 구글 취업 classroom에 제출해 주시기 바랍니다.

03-3. 프로젝트 회고 작성

 👨🏻‍💻 프로젝트 회고를 작성하는 것은 무엇보다 중요합니다. 깃헙에서 이루어지는 소통과 과정이 중요하듯이, 결과를 만들어낸 과정에 대한 이야기를 기록하고 보여주는 것이 개발자들에게 더욱 설득력 있고 어떠한 태도와 역할로 프로젝트에 참여했는지 어필할 수 있는 좋은 방법입니다.

• 프로젝트 후기에 일반적으로 들어가는 내용은 아래와 같습니다.
  • 웹 개발 기술을(React, Node.js 등) 배우며 느낀 점
  • 혼자 할 때와 팀으로 진행할 때 다른 점. 팀에서 내가 맡은 역할.
  • 기억하고 싶은 코드(가장 어려웠던 코드, 아직 미해결된 코드, 리팩토링 해서 좋아진 코드, 흐뭇한 코드)
  • 프로젝트를 마치고 느낀 점
  • 개발 철학 - 개발자에게 중요한 것은? 개발 한 달 후기. 앞으로 어떤 개발자가 되고 싶은지에 대한 생각.
• 정해진 형식에 맞는 내용 보다는 각자의 개성이 드러나는, 다른 사람들과 구분될 수 있는 글을 써보시기 바랍니다 :)