개발세발

프론트엔드 개발자 신입 면접 질문 리스트업 본문

코딩공부/참고자료

프론트엔드 개발자 신입 면접 질문 리스트업

뉼👩🏻‍💻 2023. 1. 29. 23:12
728x90
반응형
SMALL


매칭데이를 시작으로 최근 여러 기업에서 1차 또는 2차 면접을 보고 있다
면접에서 들었던 질문들 내용을 정리하고자 남기는 글

update. 23.02.07


  • 브라우저 렌더링 과정

https://velog.io/@yooon26/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EA%B5%AC%EC%84%B1%EA%B3%BC-%EB%8F%99%EC%9E%91-%EA%B3%BC%EC%A0%95

  • js는 어떻게 처리? (왜 css는 헤더에 있고, js는 body끝에 있는가)

https://bbangson.tistory.com/87

  • 웹 표준

http://www.smartebiz.kr/new/subpage02_02.html
https://seulbinim.github.io/WSA/standards.html#%EC%9B%B9%ED%91%9C%EC%A4%80-%EA%B4%80%EB%A0%A8-%EA%B8%B0%EC%88%A0%EC%9D%98-%EC%86%8C%EA%B0%9C

  • 웹 접근성

http://www.smartebiz.kr/new/subpage02_01.html

  • Localstorage

https://han41858.tistory.com/54
(local storage 용량이 5mb밖에 안되는 작은 용량인데 왜 투두리스트를 localstorage에 연결했냐)

  • 왜 익명함수를 사용하는가

https://likedev.tistory.com/29

  • 알고리즘 / 정렬

: 두 배열이 있을 때 이를 하나의 배열로 정렬하는 과정을 설명해보세요

  • 시간복잡도 / big-o를 아는가

https://hanamon.kr/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-time-complexity-%EC%8B%9C%EA%B0%84-%EB%B3%B5%EC%9E%A1%EB%8F%84/


=================

📍 백엔드

  • CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

  • 쿠키, 세션

https://interconnection.tistory.com/74
https://dev-coco.tistory.com/61

=================

📍 네트워크

  • REST API (RESTful)

https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

  • DNS

https://aws.amazon.com/ko/route53/what-is-dns/

=================

📍css, javascript, typescript

  • Promise, callback

https://jcon.tistory.com/189

  • async, await

https://ko.javascript.info/async-await

  • 순수함수, 비순수함수

https://velog.io/@jiiyoung/JavaScript-%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98%EC%99%80-%EB%B9%84%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98

  • 타입스크립트 제네릭

https://joshua1988.github.io/ts/guide/generics.html

  • Closure

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/closure.md

  • Var, let, const (+호이스팅)

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/var-let-const.md

  • svelte

https://yozm.wishket.com/magazine/detail/1176/

스벨트 vs 리액트, 누가 더 뛰어날까? | 요즘IT

스벨트(Svelte)와 리액트(React) 사이에서 고민하고 계신가요? 걱정하지 마세요. 모두가 비슷한 고민을 하고 있습니다. 온갖 기술이 난무하는 요즘, 최고의 개발 도구를 선택하는 것은 쉬운 일이

yozm.wishket.com

  • Display, position

https://velog.io/@iamhayoung/CSS-Position-Display-Float%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

💅 CSS :: Position, Display, Float에 대해 알아보기

각 요소의 배치, 레이아웃을 표현하며 CSS의 뼈대를 형성해주는 CSS position, display, float에 대해 알아봅니다🤓

velog.io


  • flex

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox - Web 개발 학습하기 | MDN

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용

developer.mozilla.org

  • 중앙정렬하기 위한 것들 - justify-content, align-content

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

developer.mozilla.org


https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

align-content - CSS: Cascading Style Sheets | MDN

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

developer.mozilla.org

  • setTimeout

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

setTimeout() - Web API | MDN

전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다.

developer.mozilla.org


  • setValue - undefined 나오는 경우

https://velog.io/@rkio/React-useState-%EC%82%AC%EC%9A%A9-%ED%9B%84-state%EA%B0%80-undefined%EB%A1%9C-%EB%82%98%EC%98%AC-%EB%95%8C

[React] useState 사용 후 state가 undefined로 나올 때

useState를 사용해서 state를 업데이트 할 때 분명히 코드 상으로는 업데이트가 되야지 정상인데, undefined가 나올 때가 있다.console.log()를 찍어보면 업데이트가 된게 맞는데, 왜 state는 변화가 없을까?

velog.io



function Test() {

  const [value, setValue] = useState("");
  const [result, setResult] = useState(3);

  const clickHandler = () => {
    setValue("첫번째");
    console.log(value);
    setValue("두번째");
    console.log(value);
  };

  const setHandler = () => {
    setTimeout(() => {
      console.log(result);
    }, "5000");
  };

  const plusHandler = () => {
    setResult((prev) => prev + 1);
  };
  return (
    <div>
      <button onClick={clickHandler}>button</button>
      <button onClick={setHandler}>button</button>
      <button onClick={plusHandler}>button</button>
    </div>
  );
}


* 기억나는 대로 코드를 작성해서 돌려본 결과... 완벽하게 맞진 않겠지만 얼추 맞는 코드 일듯


=================

인성질문

  • 어떻게 하다가 개발을 하게 되었는가 ?

  • 궁극적으로 되고 싶은 개발자? 향후 목표

  • 개발 역량을 쌓기 위해 교육과정 외에 노력한 점 ?

  • 개별적으로 스터디하고 있는건 없는가?

  • 팀 프로젝트에서 어려웠던 점


➡️ 인성말고 프로젝트를 진행하면서 !!기술적!!으로 어려웠던 점 ? 어떻게 해결했는가?

  • 프런트엔드 개발자는 퍼블리싱에 가까울까 백엔드에 가까울까

  • 공부하면서 어떤 책 봤는가

  • 커리어를 프런트와 백 중 어디로 잡고 싶은가

: 풀스택 교육과정을 들었었고, 새싹 교육과정에서도 혼자 node를 사용한 경험이 있어서 들었던 질문

  • 알고리즘 공부를 해본 적 있는가. 관련 문제를 풀어본 적 있는가

  • 회사에 궁금한 점

: 회사내 개발 조직 규모가 어떻게 되는지, 신입사원으로 들어가면 교육과정이 있는지 어떻게 이루어지는지, 지금 하고 있는 사업 외 향후 방향성 등등

728x90
반응형

'코딩공부 > 참고자료' 카테고리의 다른 글

vscode에서 discard changes 복원하는 방법  (1) 2023.08.25
프로그래밍 패러다임  (0) 2023.02.02
OAuth 2.0  (0) 2023.01.01
UrlDecode  (0) 2023.01.01
매개변수와 인자  (0) 2022.12.21