코인원 프론트엔드 기술 면접 후기...

내 멘탈

안녕하신가악!!!!!!!!!!!!!!!!!

면접을 보고 임재범의 고해를 들으면서 집에 왔다.

왜냐하면 기술 면접을 아주 말아 먹었기 때문이다.

 

뭐지. 나는 이 정도로 이론을 모르는가?

자책은 이 정도로 하고, 오늘 질문 받은 것들에 대해 정리해 보도록 해보겠다.

---

질문 1. 렌더링을 할 때, 어떻게 키 값을 설정해야 하는가? 좋은 것과 지양해야 하는 것.

리액트에서 컴포넌트 배열을 렌더링할 때, 각 요소에 고유한 "키(key)" 값을 할당하는 것이 중요하다.

키는 리액트가 어떤 항목이 변경, 추가, 또는 삭제되었는지 식별하는 데 도움을 준다.
이는 효율적인 요소 재사용 및 리렌더링 최적화에 기여한다.

 

• 좋은 키 값 설정:
  • 고유성: 각 키는 형제 요소 중에서 고유해야 함. 데이터의 id 같은 고유한 식별자를 사용하는 것이 이상적.
  • 안정성: 키는 렌더링 간에 변하지 않아야 함. 데이터의 고유 ID를 사용하면 이 조건을 만족하기 쉬움.
• 지양해야 하는 것:
  • 인덱스 사용: 배열이 재배치되었을 때 문제를 일으킬 수 있으므로, 가능한 피해야 함
  • 랜덤 값: 키로 랜덤 값을 사용하는 것은 키의 안정성 원칙에 위배되므로 피해야 함

여기까지는 적당히 대답했던 것 같음..

 

---

질문 2. 리액트의 불변에 대해 아는 것을 설명하라

리액트에서 불변성은 데이터를 변경할 때 원본 데이터를 직접 수정하지 않고, 수정된 새로운 사본을 생성하여 사용하는 원칙을 말한다. 리액트의 상태 관리에서 불변성을 유지하는 것은 중요한데, 이는 리액트가 효율적으로 컴포넌트의 변화를 감지하고, 필요한 경우에만 렌더링을 트리거하기 위함이다.

 

• 장점:
  • 성능 최적화: 순수 컴포넌트(PureComponent)나 React.memo를 사용할 때, 불변성은 얕은 비교를 통해 컴포넌트의 리렌더링을 결정하는 것에 도움을 줌.
  • 버그 감소: 데이터를 직접 수정하지 않기 때문에 예기치 않은 사이드 이펙트를 줄임.
  • 이전 상태 관리: 이전 상태의 사본을 유지하기 쉬워, 시간 여행 디버깅 같은 기능 구현이 용이

뭔가 아는 것을 설명하라는 말이 너무 광범위해서 얼탔는데...
불변성에 관한 글이 내 블로그에 있다. 진짜 마음이 너무 아프다.
그래서 immer 사용 안 해봤냐고 물어봐 주셨는데... 안해본 것 같다.
대신 비슷한 상황에 lodash의 cloneDeep을 사용했는데, 이건 용도가 다르다고 한다.
이 근본 없는 놈... 다시 배워야겠지?
불변성에 대한 내 블로그 글 : https://bitcoins.tistory.com/40

 

---

질문 3. 시간 복잡도와 공간 복잡도의 차이

• 시간 복잡도(Time Complexity): 알고리즘을 완료하는 데 필요한 시간의 양에 대한 계산. 이는 보통 알고리즘에 입력된 데이터의 크기에 따라 변화.
• 공간 복잡도(Space Complexity): 알고리즘 실행을 위해 필요한 총 저장 공간의 양에 대한 계산. 이는 알고리즘이 실행되는 동안 필요한 임시 저장 공간을 포함

뭐라뭐라 그럴듯한 대답을 하긴 했는데... 이때부터 확실히 멘탈 나간듯. 

 

---

질문 4. 정렬을 할 때 n제곱이 되는 대표적인 것이 무엇이고, 사용할 때 효율적으로 생각하는 정렬은?

• n2 복잡도를 가지는 정렬: 버블 정렬(Bubble Sort), 삽입 정렬(Insertion Sort), 선택 정렬(Selection Sort) 등
• 효율적인 정렬 알고리즘: 퀵 정렬(Quick Sort), 병합 정렬(Merge Sort), 힙 정렬(Heap Sort) (평균적으로 nlogn)

sort로 정렬을 사용하지만... 정확히 어떤 경우에 최악의 상황이 나오는지 잘 모르겠다고 했나?
그냥 일반적으로 n제곱이 되는 상황만 주의한다고 했다..
시간복잡도를 생각해서 정렬한 것과 아닌 것에 대한 실제 예제를 참고해야 할 듯싶다.

 

---

질문 5. 자료형 중 signed와 unsigned의 차이

• signed 자료형은 음수, 0, 양수를 모두 표현할 수 있음.
• unsigned 자료형은 0과 양수만 표현할 수 있음. 이 차이는 주로 정수형 데이터를 저장할 때 관련되며, unsigned 자료형은 동일한 비트로 더 큰 양수를 저장할 수 있는 반면, signed 자료형은 그 범위를 음수와 양수에 나눠 사용함.

즉, 부호를 저장하고 적당히 표현할지, 부호 버리고 그 남은 비트로 2배를 더 표현할지의 차이인 것 같은데..
진짜 몰랐습니다.

 

---

질문 6. 자바스크립트에서 int 2의 64 제곱 이상 표현할 수 없는 문제의 이유

자바스크립트는 IEEE 754 표준을 따르는 부동소수점 수로 숫자를 표현하기 때문이다.

이 때문에 정확한 64비트 정수 값을 표현하는 데 한계가 있다. 
이를 해결하기 위한 BigInt 타입이 도입되었으며, 이를 통해 아주 큰 정수도 정확히 표현할 수 있음.

 

답변을 못해서 이 뒤에 나 답변하기 편하라고 부동 소수점에 대해 물어보셨는데... 이것도 몰랐다..

 

---

질문 7. common js와 module js의 차이 / js, cjs, mjs의 차이

• CommonJS: require() 문법으로 모듈을 가져오고, module.exports로 모듈을 내보냄. (동기적 로딩)
  주로 서버사이드에서 사용됨
• ES Modules (ESM): import와 export 문법을 사용하여 모듈을 가져오고 내보냄.(비동기적 로딩)
  브라우저와 서버 사이드 모두에서 사용 가능.

• .js: 전통적으로 JavaScript 파일을 나타내며, CommonJS 또는 ES 모듈 문법을 사용할 수 있습니다.
• .cjs: CommonJS 모듈 시스템을 사용하는 JavaScript 파일을 명시적으로 나타냅니다. 주로 ES 모듈을 기본으로 사용하는 환경에서 CommonJS 모듈을 구분하기 위해 사용됩니다.
• .mjs: ES 모듈 문법을 사용하는 JavaScript 파일을 명시적으로 나타냅니다. Node.js 환경에서 ES 모듈을 사용할 때 확장자로 .mjs를 사용함으로써 모듈 시스템의 명확한 구분을 제공합니다.

멘탈 나가서 카모 js라고 듣고 무슨 새로운 라이브러리인 줄 앎. 진짜 아는 거였는데
2024 awards 지식이 아쉬운 프론트엔드 개발자에 노미네이트 될 하상원

 

---

 

기억나는 것은 여기까지다.
진짜 한 몇 년만에 면접 보는거라 너무 긴장했습니다 미안합니다

하지만 발전했죠? 더 잘 알았죠? 하상원 버전 1.1로 업데이트 됐죠? 

들었을 때는 왜 이렇게 어렵지 생각했는데, 또 글로 정리하니까 이걸 대답 못하냐 싶다.

그래도 면접 분위기는 되게 좋았다. 답변을 잘 못해도 엄청 좋게 설명해 주시고 친절하셨다.

무엇보다 질문하는 것에 대해 열정있게 알려주시는 것이 멋있어 보였다.

 

면접관분들은 좋은 분이신 것 같았는데

나는 그분들에게 좋은 면접자가 되지 못한 것 같아 너무 아쉬울 따름이다.

.

.

.

어쩌라고

나에겐 다음이 있다.

난 아직 29살이거든.

 

이 정도로는 굴하지 않는다.

댐벼라 코딩 새끼야