기술 면접 공유사항

프론트엔드 요구사항 (<- "여기는 은지님 면접 보시는 회사에 채용 공고 지원 자격 보셔서 수정하시면 될 것 같습니다!")

 

자격 요건

• ㆍTypescript, React, Next.JS에 대한 기본지식
  ㆍ서비스 개발 및 운영 중 직면하는 문제들을 해결하고자 하는 적극적인 분

 

우대사항

ㆍ유관업무 경력자 (1년)
ㆍ스타트업에 경험 또는 관심이 있거나 성장하는 회사를 함께 만들어가고 싶은 분
ㆍ AWS를 이용한 서비스를 개발 또는 운영한 경험이 있으신 분
ㆍRN 또는 웹뷰를 이용한 어플리케이션 개발 경험이 있으신 분
ㆍ서버리스 프레임워크에 대한 경험이 있으신 분

 

 

면접에 대해 준비하면 좋을것 같은것들

 

• 직무에 대한 기본적인 지식을 많이 물어볼것 같음
• 사전 코딩 테스트에 대해 질문을 많이 할것같음, 사전 코딩테스트에 대해 왜 이렇게 작성했는지
• 전체적으로 기술적인것 보단 얼마나 원활하게 업무를 풀어나갈것인지도 숙지하면 좋을듯(팀원들과의 협업 능력 평가)
• 포트폴리오 마크업이랑 css에 대해서도 물어볼수 있으니 이것에 대해서 대응 방법 찾기

 

👩‍💻 기본 공통 질문

 

자기소개 <- 💡 면접때 나온 질문!

지원하게 된 동기 <- 💡 면접때 나온 질문!

직무가 본인 성향에 맞는지 <- 💡 면접때 나온 질문!

퇴사 이유 <- 💡 면접때 나온 질문!

팀 프로젝트를 하면서 동료와 갈등이 있었는지..? 있었으면 어떻게 대처를 하였는지..? <- 💡 면접때 나온 질문!

성격의 장단점 <- 💡 면접때 나온 질문!

장점

단점

마지막 궁금한게 있으면 알려주세요 <- 💡 면접때 나온 질문!

 

 

👩‍💻 과제에 관련 질문

 

서버와 통신 구현을 어떻게 하였는지..?

ES6문법 어떤 점을 활용했는지..?

 

 

이력서 / 리드미 위주로의 설명

배포 URL을 넣어놨는데 프론트 페이지와 백엔드 서버를 어떻게 배포를 했는지..?

구현사항 설명

영역 별로 컴포넌트화

제공된 API를 통해 불러온 데이터를 등록일(createdAt) 최신순으로 정렬

 

 

👩‍💻 리액트 관련

 

✅  리액트는 무엇인가요 <- 💡 면접때 나온 질문!

 

-> facebook에서 주도하여 개발한 js기반 라이브러리로 웹 어플리케이션의 UI를 효과적으로 구축하는데 사용합니다.

-> 가상돔을 이용하여 UI를 빠르게 렌더링할 수 있다는 장점이 있습니다.

 

-> 리액트는 상태가 업데이트 되면 업데이트가 필요한 곳의 UI를 가상돔을 통해 렌더링합니다.

 

 

✅ 리액트를 사용하는 이유는 무엇인가요 <- 💡 면접때 나온 질문!

 

-> 가상돔을 사용하여 UI를 빠르게 렌더링 할 수 있고 컴포넌트의 가독성이 매우 높고 간단하여 유지보수와 재사용이 용이하기 때문입니다.

-> 리액트는 프레임워크가 아닌 라이브러리기 때문에 다른 프레임 워크과 함께 사용할 수 있습니다.

 

 

 

✅ CRA 란 무엇인가요?

-> 리액트 개발환경을 쉽게 구축해주는 보일러플레이트입니다.

 

웹팩 : 여러 유형의 파일들을 압축 시키는 번들링하는데 쓰입니다.

바벨 : 브라우저가 이해할 수 있는 하위 문법으로 변환하는데 쓰입니다. 

 

 

 

✅ state와 props에 대해서 설명 <- 💡 면접때 나온 질문!

 

-> React에서 구성 요소가 데이터를 받고 처리하고 보내기 위해 사용됩니다.

-> Props는 부모에서 자식으로 전달되는 불변의 데이터이고 컴포넌트에 값을 전달할 때 사용합니다.

-> State는 컴포넌트 내부에서 관리되는 데이터의 상태입니다.

 

 

 

✅ hook이란?

 

-> 클래스 형식의 리액트 컴포넌트에서만 사용할 수 있었던 state관리나 라이프 사이클을 함수형 컴포넌트에서도

사용할 수 있게 만들어주는 기능입니다.

 

react가 useState, useEffect 등 기본적으로 훅을 제공하기도하고

사용자가 입맛에 맞게 훅을 만들어서 사용할 수도 있습니다.

 

 

 

✅  리액트를 작성할때 어떤식으로 작성하는지..?

 

-> 리액트는 컴포넌트라는 레고 조각들을 사용해 레고를 만드는 것과 비슷하다고 생각합니다.

코드의 중복을 최대한 줄이려 UI와 로직들을 재활용하고자하고

 

이를 타인이 보아도 해당 로직을 쉽게 이해할 수 있고

필요한 로직을 폴더에서 쉽게 찾을 수 있게끔

관심사가 비슷한 상태나 로직을 모아서 작성하려 노력합니다.

 

 

👩‍💻프론트엔드 관련

 

✅ git과 gitHub가 무엇인가요?

 

-> git은 소스코드를 효과적으로 관리할 수 있게 하는 형상 관리 도구입니다.

분산형 관리 시스템이라는 데에 svn과 차이점이 있으며 중앙 서버에 장애가 발생해도 로컬 저장소를 이용하여

중앙 저장소의 복원이 가능합니다.

 

-> gitHub 는 git 저장소를 관리하는 클라우드 기반 호스팅 서비스입니다.

 

-> git 은 버전관리 '프로그램' 이고 gitHub는 버전관리와 소스코드 공유가 가능한 원격 저장소입니다.

 

 

 

✅ node && npm 에 대해서 설명

 

-> node.js 란 chrome V8 js 엔진으로 빌드된 js 런타임입니다.

-> npm 이란 nodePackageManager의 약자로 node.js 기반의 모듈을 모아둔 저장소입니다.

 

 

 

✅ 클라이언트 사이드 랜더링(CSR) <-💡 면접때 나온 질문!

 

-> 클라이언트 측에서 어플리케이션 렌더링이 이루어지는 걸 의미합니다

서버에서 index.html 파일을 클라이언트에게 보내주면 body 안에 id 루트와

어플리케이션이 구동하기 위해 필요한 스크립트 파일만 들어있습니다.

 

그렇기 때문에 html은 텅 비어있는 상태이고 처음 접속하면 빈화면만 보이게 됩니다.

이후에 다시 링크된 자바스크립트 파일을 서버로부터 다운받습니다.

 

한 파일에 어플리케이션이 구동되기 위한 로직과 프레임워크, 라이브러리 파일들이 들어있기 때문에

자바스크립트 파일은 무겁고 다운로드 받는데에 시간이 걸립니다.

 

그 외 필요에 따라 api 요청을 한다면 서버에서 json파일을 다운받아 동적으로 html을 생성합니다.

 

 

-> 서버로부터 텅빈 html을 다운로드 받은 후 js 파일을 가져와 사용자 입장에서는 화면 보기와 상호작용이 동시에 일어나는 것

 

장점 : 첫 로딩에 파일을 다 받기 때문에 이후엔 빠르게 렌더링이 이루어져 사용자 경험이 높아지고

추가로 필요한 데이터 요청만 하게 되어 서버 부담이 줄어듭니다

 

단점 : 사용자가 첫 화면을 보기 위해 기다리는 시간이 소요되고 SEO 문제가 발생할 수 있습니다.

-> CRS의 html문서는 텅 비어있기 때문

 

 

 

✅ 서버 사이드 랜더링(SSR) <- 💡 면접때 나온 질문!

 

-> 웹 사이트에 접속하면 서버가 필요한 데이터를 가져와서 html 파일을 만드는 것을 의미합니다.

다 만들어진 html 파일과 js파일을 클라이언트에게 같이 보내줍니다.

완성된 html 문서를 받아와서 사용자에게 바로 보여주는 것입니다.

 

장점 : 첫 로딩에 화면을 보는 시간이 빠릅니다, SEO 문제를 해결합니다.

단점 : 사용자가 페이지 이동을 하면 모든 파일을 전부 받아오기 때문에 깜박임 현상이 일어나 사용자 경험이 낮아집니다.

또, 사용자가 빠르게 화면을 확인할 수 있지만 동적으로 데이터를 처리하는 자바스크립트 파일을 다운로드 받는 시간차가 생길 수 있어 화면을 클릭했을 때 아무런 액션이 생기지 않을 수 있습니다.

 

 

-> 서버로부터 내용이 꽉 찬 html 문서를 다운 받아와서 사용자는 화면을 빠르게 볼 수 있지만 이후에 js를 다운로드 받기 때문에 상호작용은 js가 다운 받아진 후로부터 가능합니다.

 

참고 자료 - https://velog.io/@mollog/CSR-SSR-%EC%B0%A8%EC%9D%B4-%EC%A0%95%EB%A6%AC

 

 

✅ 전개연산자

-> ES6 에서 나온 문법으로 객체나 배열을 펼칠 수 있게 합니다.

 

 

✅ 자바스크립트의 싱글스레드란..?

-> 자바스크립트의 비동기 런타임 과정을 묻는 질문

 

자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트는 싱글 스레드 언어라고 불립니다.

하지만 이벤트 루프만 독립적으로 실행되지 않고 웹 브라우저와 nodejs와 같이 실행되기 때문에

자바스크립트 자체는 싱글 스레드지만 자바스크립트 런타임은 싱글 스레드가 아닙니다.

 

 

✅ 타입스크립트를 사용한 적이 있나요? <- 💡 면접때 나온 질문!

 

넵

 

 

✅ 타입스크립트를 써야하는 이유

 

-> 동적인 자바스크립트를 정적으로 사용할 수 있기 때문입니다.

 

자바스크립트의 가장 큰 장점이자 단점은 변수나 객체의 타입을 지정하지 않는다는 점입니다.

자바스크립트는 동작하면서 언제 형변환이 되어 있을 수 있고 이런 점으로 인해 버그가 발생할 수도 있습니다.

이런 점을 자바스크립트에 타입을 지정해주는 타입스크립트를 사용함으로서 예방할 수 있습니다.

 

 

✅ 타입스크립트의 단점 :

매번 타입을 결정해주어야하기 때문에 코드량이 늘어날 수 있고

결국 자바스크립트로 컴파일되어 실행되기 때문에 자바스크립트를 사용했을때보다 속도가 느립니다.

 

 

정적타입 : 컴파일 시 타입 에러를 처리하기 때문에 안정성이 높고 컴파일 시 미리 타입을 결정하기 때문에 실행속도가 빠른 장점이 있으나 타입에 대한 제한으로 코드 작성 시 유연함이 떨어지는 단점이 있다.

동적타입 : 코드 작성시 타입에 대한 제한이 없어 유연하며 코드 작성이 효율적이지만 타입에 대한 리스크를 런타임에서 감당해야하기 때문에 코드가 길고 복잡할 경우 타입 에러를 찾기 어려운 단점이 있다.

 

 

 

✅ 실행컨텍스트란 뭔가요?

 

실행 컨텍스트 (전역 실행 컨텍스트 / 함수 실행 컨텍스트 / eval () 실행 컨텍스트)

// 엔진이 스크립트를 읽어내려가면서 함수 호출을 발견할때마다 함수의 실행 컨택스트를 스택에 push 합니다.

 

-> 자바스크립트 코드가 실행되는 환경입니다. 모든 자바스크립트 코드는 실행 컨텍스트 내부에서 실행됩니다.

함수가 실행되면 -> 함수 실행에 해당하는 실행 컨텍스트 생성 -> js엔진에 있는 콜스택에 쌓임-> 콜스택 가장 위에 있는 코드를 실행시킴

 

 

 

✅ 프로미스에 대해 설명해주세요.

 

프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있는데

최종 결과를 반환하는 것이 아닌 미래에 어떤 결과를 제공하겠다는 프로미스를 반환합니다.

 

 

 

✅ RESTful API를 통한 CRUD의 구현에 대한 설명 <- 💡 면접때 나온 질문!

 

-> Restful API 란 REST를 기반으로 만들어진 API를 의미합니다

-> REST 란 HTTP URl을 통해 자원을 명시, HTTP Method(post / get / put / delete / patch)를 통해

해당 자원에 대한 CRUD를 적용하는 것을 의미합니다.

 

 

 

👩‍💻 HTML 관련

 

✅ 웹표준에 대해서 설명하세요. <- 💡 면접때 나온 질문!

 

웹에서 표준적으로 사용되는 기술이나 규칙을 의미

w3c(표준화 단체 기구)의 토론을 통해 나온 권고안을 말함 

 

 

✅ 왜 웹표준을 지켜야하나요?

 

웹표준을 준수하는 것만으로 자연스럽게 웹 접근성이 향상되기 때문

 

 

✅  웹접근성에 대하여 설명하세요.<- 💡 면접때 나온 질문!

 

 

모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것

 

-> 장애인 / 고령자 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근하고 이용할 수 있게 하고

잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 활용

 

-> 청각 장애인을 위해 영상에 자막을 넣기

-> 마우스를 사용할 수 없는 사람들을 위해 키보드를 통해서도 웹을 이용할 수 있게 하기

-> 이미지에 대체 텍스트를 제공하는 간단한 방법

 

한국형 웹 콘텐츠 접근성 지침도 있음(웹 접근성 연구소)

 

 

 

✅ 웹 접근성을 용이하게 하기 위해 어떤 작업이 필요한지..?(대략적으로만 숙지하면 될듯)

 

meta 요소를 사용한 정확한 문서 정보의 제공과 제목의 사용, 의미에 맞는 마크업

 

올바른 마크업과 css를 이용하여 웹사이트를 제작하면

오래된 버전의 웹 브라우저에서도 콘텐츠가 적절하게 표시되고 웹 표준을 지원하는 최신의 기기나 환경에서도

동일한 결과를 기대할 수 있기 때문에 하위 호환성이나 상위 호환성을 확보할 수 있음

 

 

 

✅ 크로스 브라우징이란? 

 

여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술 / 방법

대부분 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제가 되는 경우가 적음

보통 익스플로어에서도 동작하게 하는 것을 크로스 브라우징이라고 함

 

 

DTD 선언이란?

html은 어떻게 렌더링 되는가? ------------------------ 추가 필요

http와 https의 차이

 

 

👩‍💻CSS

 

스프라이트 기법은?

css 상속이란

css 캐스케이딩이란

 

 

👩‍💻 자바스크립트 관련

 

 

✅ 자바스크립트는 어떤 언어인가요?<- 💡 면접때 나온 질문!

 

-> 역사는 90년대부터 시작, 웹 브라우저에서 페이지를 동적으로 꾸며주는 역할

요즘엔 웹페이지에만 국한되지 않고 다양한 곳에서 쓰이고 있음

런타임을 통해서 서버쪽에서도 자바스크립트를 실행할 수 있게 되었음 (api 개발할때 노드 js 쓰게 된 것)

 

 

 

✅ 비동기 처리가 무엇인가요?

 

-> 순차적으로 진행하지 않는 방식

요청을 보내고 응답에 관계없이 바로 다음 동작을 실행한다.

 

-> 클라이언트에서 서버로 데이터를 요청 했을 때, 서버가 그 요청에 대한 응답을 언제 줄지도 모르는데 데이터가 다 받아질때까지 앱이 대기상태로 머물러있을 수 없기 때문에 비동기방식이 필요합니다.

 

->  데이터 통신이 되기도 전에 값을 return 해 이 값을 이용하는 동작이 이루어질 경우 undefined가 나올 수 있음

 

->promise : 비동기 작업을 편하게 쓸 수 있도록 es6에 도입된 기능

이전에는 callback함수로 처리했지만 코드량이 많을 경우 전체적으로 코드가 난잡해져 promise가 등장

원래는 라이브러리였지만 js 에도 추가가 됨

 

 

 

✅ null과 undefined 차이 <- 💡 면접때 나온 질문!

 

undefined 변수를 선언하고 값을 할당하지 않은 상태, 값이 지정되지 않은 상태

null은 변수를 선언하고 빈 값을 할당한 상태 

 

 

 

✅ == 과 === 차이

 

== 보다 === 가 엄격

== 연산자는 양쪽 타입이 다를 경우엔 타입을 강제로 형변환한 뒤 비교

 

 

 

✅ 호이스팅은 무엇인가요 <- 💡 면접때 나온 질문!

 

->호이스팅은 코드를 실행하기 전 변수 / 함수 선언을 스코프의 최상단으로 끌어올려진 것 같은 형상을 말합니다.

자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 구분하는 과정,

즉 실행 컨텍스트를 위한 과정을 거치는데 이때 모든 선언을 스코프에 저장합니다.

코드 실행전에

var 는 이미 변수 선언이 저장되어 있기 때문에 undefined가 나옵니다.

 

-> var는 선언과 동시에 undefined로 초기화되기 때문에 undefined 가 뜸
-> let,const 초기화가 바로 되지 않음 선언 따로 초기화 따로

 

-> 함수 표현식에서는 호이스팅이 발생하지 않음 (함수 선언식에서는 일어남)

 

실행 컨텍스트란?

-> 코드가 실행되기 위해 필요한 환경입니다. 

 

 

✅ let / const / var 차이

 

-> var 는 중복선언, 재할당 가능

-> let 은 중복선언 불가, 재할당 가능

-> const 중복선언, 재할당 불가능

 

 

✅ 자바스크립트 this에 대해 설명하세요

 

✅ 자바스크립트의 객체에 대해 설명해 주세요.

-> 키와 값으로 구성된 프로퍼티들의 집합입니다, 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있습니다.

 

 

 

 

✅ 자바스크립트의 데이터 타입을 말하세요

 

원시타입 / 참조타입

 

원시타입 : Number, String, Boolean, Null, Undefined

참조타입 : 함수형, 배열, 객체

 

 

 

✅ 참조타입과 기본타입의 차이? <- 💡 면접때 나온 질문!

 

저장되는 값의 차이입니다.

기본 타입은 실제 값을 변수에 저장합니다.

참조 타입은 메모리 주소를 통해 객체를 참조합니다

 

 

 

 

 

✅ 프로토타입이 무엇인가요?

 

자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.

이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.

 

 

✅ 자바스크립트 함수가 일급 함수인 이유

 

-> 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미입니다.

->자바스크립트 함수는 값처럼 변수에 할당할 수 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수 있습니다. 이처럼 값의 성질을 갖는 객체를 일급 객체라고 합니다.

 

 

 

✅ 클로저 <- 💡 면접때 나온 질문!

 

const order = (food) => {
  return function(drink){
    return console.log(food+"와"+drink+
"를 주문했습니다.")
  }
}

const ordering = order("햄버거")
const ordering2 = order("피자")
ordering("콜라")
ordering("바나나")

ordering2("coke")
orderding2("juice")

 

 

-> 함수와 렉시컬 환경의 조합(전역 환경)

 

함수가 생성될 당시의 외부 변수를 기억

생성 이후에도 계속 접근 가능

-> 전역 변수를 줄일 수 있음 (모든 코드가 전역 변수를 참조할 수 있기 때문에 의도치 않게 상태가 변경될 수 있고, 가독성 떨어짐)

 

-> 코드 재활용 가능해짐

 

 

✅ 이벤트 버블링과 캡쳐링

 

 

이벤트 버블링

-> 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들로 전달되어가는 특성을 의미합니다.

event.stopPropagation()를 사용하면 막을 수 있습니다.

 

 

이벤트 캡쳐링

-> 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달하는 것

target.addEventListener("click", function(), true)

addEventListener 메소드에 true 를 주게되면 캡처링됨

 

 

 

✅ 이벤트 위임

-> 하위요소의 이벤트를 상위요소에서 제어하는 것(위임한다)

 

 

✅ call 과 apply 메서드

 

✅ 객체 지향 프로그래밍이란?

-> 프로그램 구현에 필요한 객체를 파악하고 역할을 정의하며 객체들 간의 상호작용을 통해 프로그램을 만드는 것입니다.

-> 프로그램을 객체로 바라보는 관점으로 프로그래밍하는 것을 객체 지향 프로그래밍이라고 합니다.

-> 프로그래밍할 때 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아닌 "객체"라는 단위로 나누고

서로 상호작용할 수 있게 만들어 역할을 수행할 수 있게 만드는 것

 

** 객체 지향 프로그래밍 4가지 특성 **

캡슐화 / 추상화 / 상속 / 다형성

 

 

✅ 자바스크립트의 객체지향이란?

-> 자바스크립트는 멀티 패러다임 언어이며 Prototype을 기반으로 객체를 표현할 수 있습니다.

 

 

 

 

파이팅!!!!!!!!!!!🕊️

 

 

 

 

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

 

 

함수선언문 : 함수, 호이스팅 영향 받음

함수표현식 : 함수를 변수에 담아 놓은 것, 클로저-콜백으로 사용 가능

 

 

 

HTML

페이지에 제목 문단 이미지 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조

튼튼한 구조를 만드는 것이 중요

 

 

CSS

마크업 언어(HTML)이 실제 표시 되는 방법(색상, 크기, 폰트)를 지정하여 콘텐츠 구조를 꾸며주는 정적 언어

웹의 시각적인 표현 담당

 

 

JS

컨텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리 담당

성능적으로는 동적 처리에만 집중하는 것이 좋음

 

 

ES6 표준

 

지금은 ES10까지 나왔음

근데 ES5->ES6에서 변화가 많았음

 

 

js 는 싱글스레드(한번에 한 가지일만 처리가 가능한 단일 스레드)인데 비동기가 어떻게 가능?

 

-> 자바스크립트는 웹 브라우저나 node.js의 자바스크립트 엔진에서 실행됨

이 엔진에는 자바스크립트를 돌리는 하나의 스레드가 존재함