코멘토 직무부트캠프 후기 : 프론트엔드 실무자와 개발하기

코멘토라는 사이트에서 실제 현직자를 멘토님으로 하여서 과제를 해결하고 피드백을 받을 수 있는

직무부트캠프를 진행해 보았습니다.

 

원래 5주차 프로그램 과정인데 과제가 4개밖에 없고, 비교적 난이도는 어렵지 않아서 저는 2일 만에 끝내버렸네요...

그런데 멘토님 피드백을 실제로 받아보니까 급하게 해서 그런가 틀린 부분이 많았습니다.

 

 

아래 내용은 실제 멘토님께서 저한테 주신 피드백 입니다.

경로 실수부터 해버렸네요 ㅋㅋㅋㅋ.....

 

--------------------------------------------------------------------------------------------

 

3번째 리뷰 진행해볼께요!

 

1️⃣ 상품이 로딩되지 않는 이슈

상품이 안보이는 이슈는, 이전 리뷰에서 말씀드린대로

실제 불러온 파일과 path가 잘못 매칭되어서 발생하는 문제였습니다 🥲

 

라우팅 부분을 수정해주니까, 파일은 잘 가져오는 것을 확인할 수 있었어요!

 

 

2️⃣ Navigation.jsx 컴포넌트 버그

라우팅 문제가, Navigation 컴포넌트가 정상 동작했다면

금방 찾아냈을 문제였던 것 같아 조금 아쉽네요 🥲

 

네비게이션 컴포넌트를 사용하고 있는 쪽에서의 소스코드(장바구니)를 보면

 

<Navigation name="장바구니" hasBack={true} />

와 같이 적용되고 있어, 상단 바에 "장바구니"라는 글자가 보이는 걸 의도하신 것 같아요.

 

하지만 실제 Navigation.jsx 소스코드에서는

아래와 같이 props를 받아오지 않고

하드코딩 되어 있어서 "코멘토 쇼핑"이라는 글자만 보여지고 있네요

 

const Navigation = () => {

return(

<div>

<Title>

코멘토 쇼핑

</Title>

</div>

)

}

 

컴포넌트를 생성하실 때

props를 받아오는 것을 잊어버리지 않도록

바로바로 코드를 작성하시길 추천드려요!

 

[참고] 회사에서는 대체로 자바스크립트 대신 타입스크립트 언어를 쓰는데요.

• 타입스크립트에서는 이러한 props 미스매칭 에러를 모두 컴파일 에러(코딩하는 와중에 빨간줄)로 잡아주기 때문에, 현업에서 많이 발생하는 문제는 아닙니다!
• 자바스크립트 코딩을 할 때는, props를 주의해주세요~!

 

+) 위의 코드에도 불필요한 <div>가 사용되고 있네요!

역할이 없다면 지워주시는 게 더 깔끔할 것 같습니다 :)

 

 

3️⃣ 장바구니 아이템 삭제 함수 관련 (Basket.js의 23번 줄)

const Remove = (productId) => {

webStorage.removeBasketItem(productId);

setBasketItemCount(basketItems.length - 1);

};

 

Basket.js 코드 내부, 장바구니 아이템 삭제 함수를 위와 같이 작성해주셨는데요.

 

3-1) 자바스크립트에서 함수 이름은 소문자로 시작해야합니다.

언어에서 지정한 명명 규칙을 따르는 것이 중요한데요

자바스크립트는 변수와 함수에 카멜 표기법 (camelCase)을 따르라고 가이드하고 있습니다.

• 그래서 Remove()=> remove()로 변경해주어야 합니다.

 

클래스와 컴포넌트를 만들 때는 파스칼 표기법(PascalCase)을 따릅니다.

• Basket, ProductDetail

 

상수에는 스네이크 케이스(SNAKE_CASE) 또는 파스칼 표기법(PascalCase)을 사용합니다.

 

 

3-2) 함수명을 더 구체적으로 적는 것이 좋습니다

remove()는 너무 범용적인 표현이기 때문에 removeBasketItem과 같은 식으로 조금 더 구체적으로 적어주시는 것을 권장 드립니다!

 

요새는 PC들의 성능이 워낙 좋기 때문에, 코드 길이를 줄이는 것보다

가독성을 위해 길고 구체적으로 적는 것을 권장하고 있습니다.

 

참고용으로 알아두시면 좋을 것 같아요 :)

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

사실 어떻게 시스템이 구성 되어 있는지 확인해 볼겸 그나마 공부를 해보았던

프론트엔드 부분을 지원해봤고,

 

가격은 원래 가격은 300000만원으로 꽤 비싸지만, 얼리버드 특가로 180000만원까지 단축 가능합니다!

 

생각보다 저는 피드백이 맘에 들었어요 ㅎㅎ

 

다음에는 AWS 클라우드 관련해서 한번도 안해봤던, 필요한 부분을 한번 도전해볼 것 같습니다.

 

관심 있으신 분들은 코멘토 사이트에서 확인하시면 좋을 것 같네요!

 

https://comento.kr/?index 

코멘토