[엘리스] 1차 프로젝트 회고록 - 03 새로운 시작

 

기대반, 걱정반 새로운 시작!

 

9팀 [아침엔]
날짜: 23-11-01
작성자: 하윤아

 

 

오전 스크럼

1. 백엔드쪽에서 포스트맨 api명세서 안내 (return 값으로 오는 json은 카테고리부분 수정으로 오후중 데이터 틀 공지해주실 예정)

2. 페이지 이동및 뷰관련해서 spa와 이미 만들어주신 폴더구조(express.static) 환경의 차이에 대해 프론트엔드에게 대건님이 설명해주실예정. Spa를 문의했는데 리액트에서 적합한 방법임을 안내해주심

3. 현재 백엔드와 프론트엔드 진행상황공유

4. 백엔드에 api를 get요청으로 보낼시 검색어 query를 어떻게 보내야 하는지 문의. 추후 안내예정.

5. 백엔드 팀 오피스아워 후 변경사항 공지해주심

6. 프론트팀 오피스아워때 질문할점 공유 (코드 점검받고 뷰구성에 대한 질문)

 

프론트엔드 회의

1. 깃 디렉토리 명에 대한 상의

html, css → design 폴더로 빼두기로 함

(나머지는 아직 미정)

2. 자바스크립트 변수명, 함수명 표기법

제일 많이 쓰이고 구분이 편한 카멜 표기법을 사용하기로 함

3. 역할 논의

윤아: 디자인, 퍼블리싱, 장바구니 / 영재님: 퍼블리싱, 장바구니 / 진주님: MVC 모델 기반으로 구축 & API를 불러오기 위한 코드 작성 및 백엔드 분들과 소통

→ 아무리 서버와 API를 모른다해도 이렇게 하는게 맞을까? 하는 의문과 방향성의 어려움이 생김

4. 코치님께 여쭤볼 질문 목록 미리 각자 작성해오기

- 관리자 페이지를 다뤄본 경험이 적어서 간단하게 구현하고 싶은데 어떻게 구현해야할지 감이 잡히지 않아서 이부분은 확실하게 마무리 하지 못함

- tailwind가 부트스트랩보다 훨씬 다양해서 많이 쓰는 css 라이브러리라고 해서 사용을 하기 위해 설치 과정이 복잡하여 CDN으로 잠깐 사용하였는데 편리하기는 하나 일일히 클래스명을 찾아봐야해서 시간이 오래 걸렸고 짧은 클래스명으로 나중에 다시 볼 때 어떤 스타일인지 알기 어려움, html이 복잡해지고 가독성이 떨어짐, 버튼이 사라져서 안보이는 현상 > css 전체 잘라넣기해서 저장하고 다시 붙여넣고 저장하니까 버튼 생김

- 앞으로 자바스크립트를 이용해서만 해야하는데 이런 기능에는 어떤 코드를 짜야할지 감이 안잡힘. 구글에 검색을 할 때 어떻게 검색을 하는게 효율적인지 ? 아니면 어떻게 해야할지?

- 앞으로의 진행에 있어서 어떤 방향을 잡고 가야하는지

- 개발 시 특별하게 신경써서 해야 할 내용

- 제가 서버나 데이터를 받아오는 과정이 아직 이해가 부족하여 거의 진주님이 백엔드분이랑 많은 소통으로 구현하시고 저랑 영재님은 지금 현재 API, 서버 관련해서 관여를 못하고 있는데 어떻게 하면 좋은지? 이방법은 아니라고 생각

 

오늘 배운 내용

1. 깃 푸쉬 방법

로컬 저장소(내 pc) - 원격 저장소 연결 → push

front-dev 브랜치 클론 → 브랜치 생성 → 커밋 → 푸쉬

 

ls : 현재 파일 확인

cd 파일명: 파일명으로 이동

pwd: 현재 디렉토리 확인 경로

 

git branch front-dev/feature/design: 생성할 브랜치(2개 동시 생성)

 

git status: 상태 확인

git add .: 전체 추가

git commit -m “[front-end] Design: file add”: 수정부분 알려주기(자세히 표기)

git push origin front-dev: front-dev 브랜치에 push 하기

 

오피스아워

시간: 20:00 ~ 21:00 약 1시간 동안 진행

 

- 피그마로 구현한 화면

➕관리자들이 회원 가입한 사용자들 알 수 있는 사용자 관리 페이지 추가

➕관리자 페이지를 일반 사용자는 접근 못하고 관리자는 접근 못하도록 구현

 

- 전체 역할 방향성: 서버에 대한 지식이 부족하니 https://velog.io/@bepyan/VanillaJS-Express%EB%A1%9C-%EC%9B%B9%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95-%EB%A7%9B%EB%B3%B4%EA%B8%B0

이 블로그를 따라해가면서 개발하는 환경을 이해하는 것 중요: 금요일까지 만들어보고 프로젝트에 적용해보기 제안

백엔드(도커)를 띄우고 개발서버에 도커를 배포하고 호출하는것 : VM이 배포 서버로 이런 역할을 함

- 웹팩, 바벨? 자바스크립트를 이용하여 웹서버를 파싱하면 버전이 낮은 웹은 이해하지 못하는 현상 발생 → 이때 웹팩, 바벨을 활용하여 이해할 수 있는 환경을 만들어줌

- 페이지 구현은 window.href, a태그 이용하여 임시 구현하기

- 백엔드 pc에서 개발 → 깃랩에 업로드 → VM에 pull → express 서버 → 프론트에 전달

: 서버가 죽었을때 백엔드 API 새로 만들때까지 기다리지 않아도됨

- 프론트: 백엔드 서버에 접근하기 위해 붙어야 함(VM이 붙어야 하는 환경 제공), 백엔드 API 불러오기 위해 포트 올림

- 개발할때마다 확인하는것이 아닌 환경 구축이 중요

- 앞으로 배워가야할 방향성: 백엔드 API직접 호출, 백엔드 소스 pull 받아 띄우는 방법, DB접근 방법

- 서버가 죽어도 프론트에서 /API로 띄울수 있게

- 리액트가 아니면 컴포넌트 단위로 역할분배하는 것은 어려움

- 코드 작성의 어려움? 일단 해보는것 중요, 에러는 에러 날 때 같이 보면서 수정해야함 디버깅 방법이 다름

- 라이브러리: bulma 사용하면 더 편했을 것, 테일 윈드는 설정해야할 것이 많아 어려움

- 백엔드에서 서버 두개 띄우는것 같음(포트2개) -> 프론트 서버를 만들어 연결하는것 제안?

- 라이브러리: bulma 사용하면 더 편했을 것, 테일 윈드는 설정해야할 것이 많아 어려움

- 백엔드에서 서버 두개 띄우는것 같음(포트2개) → 프론트 서버를 만들어 연결하는것 제안?

- API 호출 → axios 이용

긴급회의

- 리액트 사용 (제일 큰 이슈였다. 프론트에서 리액트를 제대로 사용할줄 아는 사람이 없어서 백엔드분의 지원과 도움을 받기로 함)

- 서버를 백엔드, 프론트 따로 띄어서 엔진엑스로 연결

- 화면설계서 (Wireframe)와 기능명세서 (Functional Specification)로 명확한 명세서 작성

 

새로운 목표

프로젝트의 크기(기능)를 줄여서 완성하는 것

리액트 배워서 프로젝트에 적용하기

 

공부 방향성

- 엘리스 강의 적극 활용

- 간단한 영화 페이지 (팀원 공유 깃 코드 참조) usestate, useeffect, 변수, 대괄호에 대해서 미리 공부

 

느낀점

프로젝트를 3일째로 진행하면서 어려웠던 API, 서버에 대한 이해와 지식이 이제는 어느정도 익숙하고 낯선 느낌은 없다 하지만 그래도 아직 어려운건 맞다. 그래도 이제는 익숙하고 어떻게 구현을 하고 어떤 환경이 돼야 웹이 만들어진다는 큰 틀은 잡혔다. 구체적인 구현 방법과 데이터를 불러와서 내가 사용하는 것에 대한 의문이 들고 지금 하는 역할이 과연 프론트의 역할이 맞는지 의문이 들었는데, 코치님께서 눈치를 채시고 질문도 하기 전에 미리 방향성과 앞으로 해야할 것들을 나열해 주셨다. 코치님께서도 서버에 대한 큰 틀과 이해하기 쉽도록 개발환경에서 쓰이는 것들이 어떤 역할을 하는지까지 알려주셔서 평소에 많이 들어봤던 바벨이 뭘까? 궁금했었는데 이 부분이 해소가 되었다. 엘리스 수업을 듣기전 프론트가 서버까지 관여해서 하는줄 몰랐다. 그저 자바스크립트로 구현만 하면 되는줄 알았던 지난날의 나를 다시 돌이켜보고 미리 공부를 많이 해오지 못한것에 대한 아쉬움이 남아있었다. 프로젝트를 혼자 진행을 했었다면, 경험이 많았다면 팀원들에게 도움이 되었을텐데 지금 도움을 너무 많이 받고 있는 상황이라 다른분들의 공부시간도 필요하실텐데 죄송한 마음이 들기도 했다. 하지만 본인들도 공부하면서 배워가는것이 많다면서 적극적으로 도와주신다고 하셔서 너무 감사했다. 누군가를 알려주면서 도와주는게 쉽지 않은데 정말 감사한 마음이 들었고 적극적인 지원을 해주신만큼 나도 적극적으로 배우고 따로 공부도 많이 해서 팀원들을 위해 꼭 성공적인 프로젝트로 마무리 하는것이 나의 최종 목표가 되었다. 

 

 

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