[엘리스] 1차 프로젝트 회고록 - 05 오류, 위기의 순간

오류 해결은 쉽지 않다.

9팀 - 아침엔

날짜: 23-11-06

 

프론트엔드 회의

폴더 구조에 대한 논의

component: header, footer

component: 페이지 이외 컴포넌트

 

 

API 활용한 카테고리 구현과정 공유

진행할 상황

이슈, 해결이 어려운 부분

진행 완료 상황

진행 중인 상황 공유

정확한 의사소통을 위해 서로 공유를 많이 하고 틈틈히 git push를 해서 다른 팀원과 겹치는 내용을 활용할 수 있도록 하였다.

 

오늘 작업 내용

오류 해결

갑자기 오류가 떠서 오류를 해결하느라고 시간이 너무 많이 걸렸다. 몇시간 동안 오류를 해결하기위해 다른 분께 여쭤도 보고 검색도 하였으나 이슈를 정확하게 파악하지 못해서 이전에 깃에 올려둔 작업을 다시 가져와서 새로운 내용만 다시 복사해서 겨우 해결했다. 도와주신 팀원분과 내용을 봐주신 다른 백엔드 분께 감사드린다.

 

git merge

오늘 master 브랜치로 첫 merge 시도의 날이다. 처음 해보는 일이라 현지님께서 어떠한 과정으로 merge를 하는지 듣고 숨죽이면서 지켜봤다. 먼저 데이터를 back-end 브랜치에 병합하고 그 다음 master로 병합하는 과정으로 진행하였다.

 

- 카테고리 명 작성시 콘솔로 데이터를 실시간으로 불러옴

- 소분류 선택시: 해당 대부류의 아이디(구현예정)

- 대분류 선택시: 대분류 아이디가 나와야 하나 → 대분류 이름이 나오는 이슈 발생

 

어려움을 겪었던 부분

{/* 소분류 선택시 대분류 목록 불러오기 */}

<label className="form_label--category-label">상위 카테고리</label>

{categoryType === '대분류' ? (

category.map((item) => {

if (item['parentCategory'].length < 2) {

return (

<select

className="form__div--category-main-div"

onChange={(e) => {

setParentCategory(item['_id ']);

}}

 

value={item['_id']}

>

{console.log("hhheeeerree", category)}

<option value='default'>대분류를 선택해주세요.</option>

<option value={item['_id']}>{item['name']}</option>

</select>

);

}

return null;

})

) : (

<select

key="default"

className="form__div--category-main-div"

value='-1'

onChange={(e) => {

setParentCategory('-1');

}}

>

<option></option>

</select>

)}

{console.log(parentCategory)}

이 부분은 [소분류]를 선택하면 대분류의 목록을 불러와서 소분류가 어떤 대분류에 포함이 되는지 구현하기 위한 select 부분이다. 블로그 예시 코드를 참조해가며 select에 onChange를 넣어서 구현을 했지만 내가 원하는 데이터는 대분류를 선택하면 그 대분류의 id 값이었는데 자꾸 대분류의 name 값이 나와서 하루종일 해결하려고 했지만 아직 원인을 찾지 못하였고 중간에는 console값이 순서대로 찍히지 않고 순서가 뒤죽박죽으로 찍히는 이슈로 문제를 마무리 하였다.

 

console.log를 찍어서 오류를 확인하면된다는것을 알고 있었지만 어떻게 확인하는지 정확히는 알지 못했다. 이번에 실력이 좋으신 팀원분이 하시는 방법을 보고 정말 도움이 많이 됐고 실제로 일을 하셨던 분이어서 도움될만한 가치있는 조언들과 꿀팁도 많이 배워간다.

 

사실 오류를 해결하는 부분이 지루하고 짜증이 날 수 있는 부분인데 팀원분께서 console.log를 단순하게 찍지 않고 재밌는 말표현을 넣어서 하면서 하면 지루하지 않다고 하셔서 정말 현실적이면서도 정말 도움이 됐던 부분이다. 이런 사소한 꿀팁들을 아낌없이 방출해주시는 팀원분께 감사하고 항상 중재해주시고, 격려하시는 팀장님도 너무 감사하다! 다들 프로젝트를 하면서 많이 성장하고 이전보다 의사소통이 좋아진것을 몸소 체감할 수 있던 좋은 기회라고 생각한다.

 

남은 오늘 마무리 할 내용

1. 전체 페이지의 대략적인 구성

(사용자 관리 페이지, 메인, 상품리스트, 회원가입)

2. 로그인과 회원가입 부분 UI 작성

3. 페이지 라우팅

 

내 욕심으로 항상 무리한 계획을 짜지만, 시간이 없으니 최소한의 시간으로 다양한 것을 구현하기 위해 노력해야겠다.

 

현재까지 작업이 완성 페이지

관리자 페이지

- 카테고리

- 상품관리

사용자 페이지

- 장바구니

- 주문

 

처음 배우는 리액트를 활용한것 치고는 생각보다 많이 진행되었다.

 

느낀점

프로젝트를 하면서 내가 사용한 시간을 곰곰히 생각해보니 코드를 작성하는 시간은 얼마 걸리지 않았다. 단지 오래 걸린건 코드를 어떻게 작성해야할지 문법을 찾고, 공부하고, 예시를 보며 다른 코드를 해석하는 시간과 오류가 나거나 제대로 데이터가 들어가지 않았을때 무엇이 문제일까?를 고민했던 시간이었다. 내가 듣기만 했던 개발자의 모습이 내 지금의 모습이었던 것이었다. 하지만 그 오류를 해결하고 결국 원하는 데이터 값을 들어왔을때 짜릿함과 성취감은 말로 표현할 수 없다. 새로운 언어를 사용하면서 프로젝트를 진행하는게 정말 가능한 일일까 하는 의문이 많이 들었지만 어느정도 기능 구현을 조금씩 해가는 팀원들을 보며 나도 작은 희망을 얻고 팀원들을 믿고 열심히 해보는 동기부여가 되었다. 다같이 완성했을때 팀원분들이 고생을 많이 하셔서 결과와 상관없이 뿌듯하고 말로 못할 성취감이 느껴질 것이라고 생각한다. 1주일도 채 남지 않았지만 노력해주시는 팀원들을 위해 열심히 노력해서 다같이 완성된 페이지를 볼 수 있었으면 좋겠다.

 

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