지수의 블로그

4 분 소요

TIL

모의 면접 연습

모의 면접 연습

숨고에서 이력서 첨삭을 받았다. 원래는 이력서 첨삭을 받고, 첨부된 프로젝트들에 대해서 코드리뷰를 하려고 했는데 같이 진행할 만큼은 아니라고 판단되어서 모의 면접 연습으로 갑자기 방향을 틀게 되었다.

이력서 피드백

준비를 많이 한것으로 보인다고 하셨다.

프로젝트도 괜찮고, 기술 스택도 좋다고 해서 이력서로 떨어질 일은 없을 것이라고 했다.

(근데 내가 넣은 곳은 왜 떨어졋지?)

조금 수정이나 개선해야할 사항은 이력서 형식은 좋은데, 노션을 사용하다 보니 프로젝트를 나열할 때 처음에는 그냥 이미지 밖에 보이지 않는다는 점이다.

인사 담당자 및 면접관 입장에서는 프로젝트가 어떤 것이 최신인지, 제일 뽐내고 싶은 것인지 이렇게 보면 모른다. 클릭을 해서 스크롤을 해야 회고 내용이라던지 배운 점을 볼 수 있기 때문에 조금 개선이 필요한 부분이다.

그래서 밖에서도 4~5줄의 설명을 써주면 좋을 것 같다. (어떻게 해야할 지는 아직 잘 모르겠다.)

그리고 병역완료한 부분 한줄 적기

모의 면접

갑자기 진행했더니 정제되지 않게 말을 했다.

그리고 알아야 할 게 너무 많다..ㅠㅠㅠ

물론 다 정확하게 알 수는 없겠지만 방금 질문한 부분들은 현업자로서 말씀해주신 부분이기 때문에 준비하면 아주 좋을 것 같다.

일단 모르면 잘 모르겠는 내용도 ~일 것 같습니다로 끝내기 질문은 끝나고 질문 시간 때 하기

  • 간단한 자기소개

  • 직무 변환 이유

    제너럴한 질문은 미리 짧게 해둘것 (너무 시간 많이 쓰지 않기)

    나중에 기술 면접 때 시간을 더 쓰는 것이 좋다.

  • 프로젝트 진행 관련

    context rerendering 문제있는 것

    context api 렌더링 이슈

두 컴포넌트가 한 Context를 공유하고 그 객체의 속성을 각각 나누어 쓰더라도 한 쪽에서 값을 수정하면 다른 한 쪽도 렌더링이 발생합니다.

예를 들어, First 컴포넌트에서는 Context.first 값만을 사용하고 Second 컴포넌트에서는 Context.second 값만을 사용하지만, First 컴포넌트에서 값을 수정시 Second 컴포넌트에서 리렌더링이 발생합니다.

간단한 앱에서는 큰 문제가 되지 않지만, 규모가 커질수록 퍼포먼스에 문제가 되므로 좋지 않습니다.

이를 해결하기 위해 Context를 분할하여 사용할 수 있는데, 이는 Context가 많아져 결국 유지보수성을 떨어뜨립니다.

    swr react 18 suspense에 대한 학습

    보통 데이터를 가져오는 중간에 loading 화면을 띄우기 위해 loading state를 만들고, true 일 때 무언가를 띄워주도록 합니다.

  • html, css 관련 질문

    b 태그 strong 태그

    flex를 사용할 수 없을때 어떻게 가운데 위치? margin auto vertical align 도 있음

    => 극한의 상황에서도 개발한 경험이 있는지도 확인하는 곳이 있다.

  • javascript 관련 질문

    번들링 해보면 좋음

    source map 빌드 파일과 원본 파일 위치를 알려주는? 디버깅을 도와주는 것

    자바스크립트 객체에서 키를 통해 value를 찾는데 어떤 알고리즘을 사용하는지?

    자바스크립트에서 객체는 Hash table 자료구조이다.

    https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvJbPb%2FbtqJDGKnWb1%2FTox02O6HZ58kwpWwyfIE7k%2Fimg.png

    key를 사용하면 hash function에 의해 해당하는 메모리 주소를 참조할 수 있게 되고, 그 안에 있는 값을 참조할 수 있는 것이다.

하지만 무조건 탐색이 빠르다고 해서 좋은 것은 아니다. 해시 테이블이 0부터 100까지 있지만 해시 함수가 0~30까지 특정 구간의 값 위주로 해싱을 해준다면 나머지 공간은 쓰이지 않고 낭비된다.

이것을 해결하기 위해 체이닝, 오픈 어드레싱을 사용하여 개선한다. 체이닝은 같은 값으로 해싱이 되면 노드를 원래 있던 값 뒤에 붙여 링크드 리스트로 저장하는 것이다. 하지만 이는 해시 구조 대비 성능이 안좋아진다.

오픈 어드레싱은 해시 충돌이 일어날 경우 다른 해시 값에 저장하도록 하는 방법이다. 다른 주소를 어떻게 정하는 지에 대한 이슈가 생긴다.

따라서 해시 함수 자체를 특정 값에 모이지 않도록 잘 짜야한다.

React로 개발할 때, 프로젝트에서 배열로 map 메서드를 사용하여 컴포넌트를 반복적으로 나타냈다가 객체를 이용해서 hash 구조로 나타낸다면 탐색 시 더 빨랐기 때문에 Object.values(객체) 메서드를 통해 배열로 변환 후 컴포넌트를 반복적으로 나타내어 hash 구조를 이용한 적이 있다.

    Javascript array에 대한 것들 push pop 계속 되는데 정적으로 정해진 메모리인가

    자바스크립트에서 배열은 일단 다른 언어들의 일반적인 배열과 다르게 정적으로 메모리가 정해지지 않는다.

자바스크립트에서 배열은 동일한 크기의 메모리 공간이 연속적으로 나열된 구조가 아니라 문자열 0, 1, 2의 인덱스를 프로퍼티로 가지고, length 프로퍼티를 가지는 객체이다.

따라서 push나 pop 등의 배열 메서드를 이용해서 쉽게 배열을 조작할 수 있다.

따라서 일반 배열의 접근 속도보다 느리지만, 삽입하고 삭제하는 경우 더 빠른 효과를 가져올 수 있다.

    https://velog.io/@wongue_shin/JS%EC%9D%98-%EA%B0%9D%EC%B2%B4%EB%8A%94-hash-table%EC%9D%B4-%EC%95%84%EB%8B%99%EB%8B%88%EB%8B%A4#

  • React 관련 질문

    useMemo와 useCallback 사용하면 좋을 것 같다. value를 저장하기 위해서 사용하는 것인데 함수 컴포컨트 안에 선언되어 있는 변수들을 다시 연산하지 않아도 되기 때문이다! => 그래서 메모이제이션 항상해야하나? 그런것도 알아야함
    1~1억 계산하는 함수라면 만약 1억이 변하지만 않는다면 써도 좋다

    dependency array에 대해 알아보기, 얕은 비교! 얕은 비교는 그냥 메모리이다.

    obj.a = 2; useState(); setState obj <- mutable setState -> immutable을 구현하기 위해 주는 함수 * 매우 필수적인 질문

    useEffect return => unmount 무조건인것은 아님. unmount 되려면 [] 가 비어있어야함

    useEffect(() => {
  console.log(1);
  return () => {
    console.log(2);
  };
}, [obj]);

    동작: 1 obj가 바뀌면 2 1 (다시 바뀐 obj로) 그래서 cleanup이라고 한다.

    useEffect(() => {
  const fn = () => {
    console.log(state);
  };
  document.addEventLsitener("load", fn);
  return () => {
    // 새로운 state를 기준으로 동작할 수 있도록!
    document.removeEventLsitener("load", fn);
  };
}, [state]);

    useRef 사용하는 거 더 알아보기 무조건 element에만 사용해서 DOM을 선택하는 용도 말고도 다른 용도가 있다.

    컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리

    useReft로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트 리렌더링이 되지는 않는다.

    state로 관리하면 setState 호출 후 변경된 state를 렌더링 이후 알 수 있지만, useRef로 관리하면 변수를 변경하면 바로 조회할 수 있다.

    useRef를 이용하여 다음과 같은 값을 관리할 수 있다.

    setTimeout, setInterval 을 통해서 만들어진 id
외부 라이브러리를 사용하여 생성된 인스턴스
scroll 위치

    const someRef = useRef(1);
console.log(someRef.current);
return ();

    이런 식으로 사용할 수도 있다.

    프로젝트 별로 기술 스택을 왜 선택했는지 각각의 장단점과 다른 것들과 비교

    VDOM 이 좋은 이유는 실제 DOM에서 body의 background를 주었다가 다시 원래대로 돌렸을 때 결과적으로 같으니까 렌더링하지 않아서 좋음

    setState에 관련한 질문, 왜 a=3 보다 setA를 써야하는지

    제어 컴포넌트 vs 비제어 컴포넌트

    controlled component

    const [value, setValue] = useState();
return <input value={value} onChange={(e) => setValue(e.target.value)} />;

    위와 같이 state를 관리하여 e.target을 이용해서 state에 저장하는 방식으로 input을 제어하는 컴포넌트이다.

    uncontrolled component

    비제어 컴포넌트는 state를 관리하지 않고 ref를 이용해서 input의 value를 꺼내온다.

    제어 컴포넌트는 사용자가 값을 입력할 때마다 리렌더링 시키고, 비제어 컴포넌트는 사용자가 엔터를 치거나 트리거 하기 전까지는 리렌더링도 되지 않고 값을 동기화 시키지도 않는다.

    쓰로틀과 디바운드 (이벤트 핸들링 관련)

    https://webclub.tistory.com/607

    가비지 컬렉터 - 클로저 연관성

    코드 스플리팅 학습

    추가적으로…

    네트워크 관련 http 메서드!

    git

    보안 관련 질문

    ci/cd + 캐싱

    전반적인 cs

모든 질문들에 대해서 공부하는 것이 좋겠다.

일단 말씀해주신 것은 긍정적으로 바라보고 취업 바라봐도 좋을 것 같다고 말씀해주셨다.

그래서

계속 기업 도전해보기

직방 가지마? 쿠팡 가지마 카카오 계열사중 별로, 네이버 클로버는 안좋음

꽤 큰 기업부터 도메인 맘에 안드는것부터 지원하면서 면접 준비

사업자 규모 중 개발자 비율 물어보기

병역특례 알아보기

프론트엔드 개발자 두명 이상 있는 곳 가기!

당근마켓 리디북스 (전 라프텔)

태그: ,

카테고리:

업데이트:

댓글남기기

참고