레벨2 - 인터뷰

🚀 어김없이 찾아온 레벨 인터뷰

벌써 레벨 2를 마무리하는 레벨 인터뷰가 찾아왔다. 이번엔 준조였고 함께하는 크루는 세인, 노아이즈, 에디, 아커, 센트, 솔로스타였다. 레벨 1에서 레벨 인터뷰를 경험했기 때문에 긴장감은 지난번보다 크지 않았다. 하지만 레벨 1에서 받은 피드백을 얼마나 수용을 했는지, 지난번보다 얼마나 성장을 했는지를 스스로 판단을 해야 했기 때문에 이 부분에서는 부담감을 가질 수밖에 없었다.

 

인터뷰 순서는 조 배정에 나온 순서로 진행되었다. 레벨 1 인터뷰에서는 거의 마지막 순서였기 때문에 이번에는 오전에 깔끔히 인터뷰를 마무리하고 홀가분하게 점심을 먹고 싶었다. 하지만 나의 순서는 4번째로 매우 어정쩡한 순서였다. 다행히 10시에 바로 인터뷰를 시작하고 시간을 딱 맞추어 인터뷰를 진행했기 때문에 오전에 나까지 할 수 있었다. 그래서 나름 마음이 편한 점심시간을 보낼 수 있었다.

 

레벨1 인터뷰와 다른 점이 있었다. 레벨 로그를 꼭 작성하지 않아도 되지만 레벨로그 인터뷰 질문지는 필수로 작성하여 인터뷰가 끝난 후 제출해야 한다는 것이다. 하지만 레벨 로그와 인터뷰 질문지는 밀접한 관계를 가지고 있기 때문에 나는 레벨 로그를 작성한 후 이를 바탕으로 인터뷰 질문지를 작성하였다. 다음은 이번 레벨 2 인터뷰를 위해 작성한 레벨 로그와 인터뷰 질문지이다.

 

레벨 로그

인터뷰 질문지

---

🎤 인터뷰 과정

나의 인터뷰이는 아커, 센트, 솔로스타이다. 과연 어떤 질문이 올지 긴장을 하며 인터뷰를 시작하였다. 

 

서브펜스와 에러바운더리

장바구니 협업 미션에서 서스펜스와 에러바운더리를 사용했다. 서스펜스에 대한 설명, 에러바운더리에 대한 설명. 모두 간단하게 어떻게 동작하는지.

 

이번 미션에서 어떻게 사용했는지 구체적인 예시는?

- 장바구니 아이템을 불러오는 fetching을 함. 자식 컴포넌트에서 함. 부모컴포넌트에서는 서브펜스를 감쌈. 에러바운더리는 최상단에 위치하게 하여 모든 에러를 케치 할 수 있도록 함.

 

최상단의 에러바운더리?

- 비동기 통신뿐 아니라 일반 에러도 케치 할 수 있다. 하지만 일반 에러는 원하는 동작이 아니었다. 

 

fallback 컴포넌트?

- 에러가 나왔을 때, 그? 에러를 보여주는 컴포넌트. 미션 중에는 NotFound라는 컴포넌트를 만들어 fallback에 넘겨주었다. 하지만 NotFound 보다는 ErrorPage와 같은 일반적인 컴포넌트가 더욱 알맞다.

 

이를 개선하기 위해 어떻게?

- 비동기 통신에 따른 에러, 개발 중에 나타날 수 있는 에러를 분리.

- 더 구체적으로, 에러를 어떻게 받아서 분리하는지는 아직 학습이 잘 되어 있지 않다. 이를 더 학습을 한다면 가능할지도,,,ㅠㅠ

---

컴포넌트를 설계하는 기준

컴포넌트는 리액트에서 가장 중요한 요소 중 하나. 때문에 많은 고민을 하였고 현제 내가 생각하는 가장 중요한 컴포넌트의 분리 기준은 이 컴포넌트가 얼마나 재사용할 수 있는가?를 가장 먼저 생각한다.

 

이전에 리액트를 다룰 땐, 페이지 단위를 먼저 생각을 하며 개발을 한다. 그래서 모두 완성하고 나서 이건 재사용한다.라는 것을 분리한다. 하지만 요즘엔 가장 먼저 재사용하는 것이 무엇인지 생각하고 이를 먼저 만든다. 이후 조립하는 과정을 통해 페이지를 만든다.

 

재사용성을 염두! 스토리북도 함께 사용하면서 어떤 스토리를 가지고 있는지 항상 생각하는 편이다. 

 

스토리북을 활용하면서 좋았던 점?

- 이전엔 항상 로컬에 페이지를 띄어놓고 비교해 두며 개발을 하였다. 하지만 스토리북을 통해 굳이 페이지를 만들지 않고도 내가 컴포넌트를 잘 만들고 있는지 확인할 수 있었고 props를 다양하게 함으로써 많은 스토리를 만들어 컴포넌트가 어떻게 재사용할 수 있는지를 파악하는데 도움이 되었다.

 

재사용성 관리성. 재사용성을 높이기 위한 노하우

- 의존성을 최대한 줄이도록 노력하였다. 커스튬훅조차도 재사용 가능한 컴포넌트에서 사용하지 않도록 하였고 props를 다양하게 사용하도록 노력하였다.

- 미션에서는 모달이 가장 재사용성이 가능하게 만들었다고 생각한다. 장바구니 미션에서 만들어 두었던 모달을 바탕으로 조금만 확장하여 다양한 상황에서 재사용할 수 있도록 만들어 두었더니 장바구니 협업 미션에서도 자유자재로 사용할 수 있었다.

---

네트워크 요청할 때 fetch를 통해 간단하게 데이터를 받을 수 있다. 내부적으로 어떤 일이 일어나나요?

 

아는 선에서 밖에 이야기를 할 수밖에 없었다. 특정 주소에 api 요청을 보내게 된다면 해당 주소에서 허용된 리소스라면 보내준다. 더욱 자세한 과정은 아직 학습이 부족하다.

 

cors 오류는 왜? 어떻게 해결?

- cors 에러는 서버 측에서 저에 대한 주소가 허용되지 않았다. 만약에 localhosh3000번에서 서버에 요청을 보냈을 때, 서버에서는 localhost3000을 허용하지 않기 때문에 발생한 오류이다. 이를 해결하기 위해선 서버측에서 해당 주소를 허용해야 한다.

 

백엔드에선 어떻게 해결?

- 헤더에 특정 키를 모두 허용해야 한다. 요청하는 주소를 입력해야 한다. 정확한 내용은 아니므로 답변을 자신 있게 하지 못했다.

---

협업 미션에 겪었던 문제

 

명세를 확실히 정해두지 않고 각자 개발을 했기 때문에 중간에 명세를 바뀌는 경우가 있었다. 쿠폰 api 경우, name, description이 어떤 역할을 하는지 자세하기 정의하지 않고 개발을 하지 않았기 때문에 서로의 생각이 달랐던 문제도 있었다. 

 

실수를 줄여나가는 방법?

- 소통이 가장 좋은 방법이다. 문제가 발견되면 숨기지 말고 함께 공유를 하고 해결방안을 모색하는 것이 좋다.

---

리액트를 개인적으로 사용할 의향이 있는가?

 

리액트가 굉장히 마음에 든다. html, css, js 따로 있던 레벨 1과 달리 레벨 2에서 리액트를 사용할 땐, 컴포넌트를 만들기 위해 JSX, 상태/이벤트도 관심사에 맞게 잘 분리를 할 수 있다. 즉, 작은 컴포넌트를 잘 관리를 할 수 있다.

 

클래스와 리액트는 어떤 부분에서 다르게 느꼈나?

- 가독성 측면에서 다르게 느꼈다. 웹컴포넌트, 쉐도우돔 보단 리액트의 컴포넌트가 더욱 직관적인 면이 있다고 느껴졌다. 또한 리액트를 배우기 위한 진입점도 낮아졌고 커뮤니티도 잘 형성이 되어있어 도움을 받으며 공부할 수 있는 환경이 잘 갖춰졌다.

---

좋은 코드가 될 수 있는 포인트, 이를 위한 노력

 

1. 네이밍

변수든, 함수든 네이밍을 통해 어떤 역할을 할 수 있는지 파악할 수 있다. 항상 네이밍을 많이 고민을 하고 있다. 이벤트 핸들러를 다룰 때, 항상 앞에 handle~ 접두사를 쓰고 시작한다. 하지만 이를 직역하자면 '~을 다룰 때'인데 이것이 과연 이벤트의 동작을 정확히 의미하는가를 고민하고 있다. 만약에 모달을 여는 함수라면 이전에는 handleClickModalOpen이라고 했지만 요즘엔 조금 더 간단하면서 이벤트가 어떤 동작을 하는지를 의미하는 modalOpen이라고 네이밍을 한다.

 

2. 함수 분리

장바구니 수량이 변경된다면 많은 동작을 할 수 있다. 이를 하나의 함수에 담지 않고 해당 함수를 충분히 작은 단위로 나누고 하나의 함수가 하나의 동작만 할 수 있도록 분리하는 노력을 하였다.

 

3. 테스트

콘솔로만 테스트를 했다. 하지만 페어, 협업을 통해 느낀 점은 테스트가 과연 나만을 위한 것인가? 아니면 나만이 아닌 다른 누군가와 함께 코드에 대해 이야기를 할 때, 중요한 하나가 될 수 있는지를 많이 고민하고 있다. 내가 작성한 코드에 대한 확신을 가질 수 있고 더 나아가 오류를 해결하고 확장해야 하는 상황이 있을 때 테스트 코드가 많이 유용하게 다가올 수 있을 것 같다.

---

🛠️ 레벨 인터뷰에 대한 피드백

다음은 레벨 인터뷰가 끝나고 같은 조의 크루들에게 받은 피드백 내용이다.

👍 잘한 점

학습 측면

• 서스펜스와 에러바운더리를 미션에 어떻게 활용했는지 잘 이야기함
• 아는 개념에 대해선 확실한 답변, 그렇지 않은 경우엔 추측성 답변을 하지 않음
• 알고 있는 지식을 경험과 더불어 자신 있게 설명함
• 사용한 지식들에 대해 더욱 활용할 수 있는 방안을 고민하고 학습을 이어나갔으면 함

말하기 측면

• 디션이 정확함
• 맺음말을 명확히 함
• 말하기 속도 자체는 적당
• 전반적으로 차분한 말투, 밝은 분위기로 진행됨
• 아이컨텍
• 질문의 요지를 다시 물어봄
• 중간에 비유를 사용함

---

👎 부족한 점

학습 측면

• fetch, cors 관련 내용에 대한 학습이 부족
• 사용한 지식들에 대해 더욱 활용할 수 있는 방안을 고민하고 학습을 이어나갔으면 함
• 비동기 상황에 발생하는 에러에 대한 핸들링
• 에러바운더리 활용도
• 네트워크 통신 과정
• 서버에서 cors를 해결하는 방법
• 여러 가지 기술들에 대한 밀도 있는 학습 필요

말하기 측면

• 불필요한 손동작이 보임
• 처음 답변을 시작할 때 어~ 추임새가 나옴
• 단어 중간중간 쉬는 시간이 길어 전체적인 말의 속도가 살짝 느리게 느낌
• 말하기 속도가 조금 더 빨랐으면 함
• 긴장할 때 손을 꽉 움켜쥐는 습관이 보임
• 난처한 질문을 받았을 때, 답변이 잘 정리되어 있지 않음
• 답변이 질문의 요지에서 조금 벗어남
• 두괄식으로 이야기하는 것이 좋을 것 같음