목적의식이 면접대비가 아닌 더 좋은 개발자가 되기위해 아래 질문에 잘 대답할 수 있게 준비하자
- 순수 자바스크립트 대신에 리액트를 쓴 이유?
- 리액트의 장단점?
- 리덕스를 쓰는 것에 있어서 불편했던 점?
- jwt 로 로그인 기능을 구현하였다면 그것에 대한 장단점은 뭔지?
- 프로젝트 진행하면서 어려웠던 점 → 어떻게 극복했는지?
6. 왜 개발자가 되려고 하는가?(자기 소개서) - 팀원간의 문제 또는 갈등이 있을시에 보통 어떻게 해결하는 편인가?
- 왜 굳이 프론트엔드를 선택했는지?
- axios를 사용하셨는데, 그 이유는 무엇인지?
- S3로 배포한 것에 대해서 + https 를 구현하였다면 어떻게 그리고 왜 구현하였는지?
- 개발자는 어떤 직업이라고 생각하는가?
- 사용자의 불편함에 핑계가 아닌 개선을 보여줘야하는 직업
불편함을 마주보고 재미와 편리함으로 승화시켜야 하는 직업
끝없는 배움을 추구해야하는 직업
- 사용자의 불편함에 핑계가 아닌 개선을 보여줘야하는 직업
- 프론트엔드는 어떤 분야인가?
- 프론트엔드 개발자로서 가장 중요하게 생각하는 점은?
- 디자이너와 협업해서 프로젝트를 진행했던 경험 (장단점)
- 실제로 배포 후 마케팅으로 고객유치를 했던 경험에 대해서 (성과 = 수치로 말해야함)
- 항해99 도중 가장 힘들었던 점? 많이 배운점?
- 개발을 시작한지 얼마 되지 않았고, 경험도 매우 짧은데 우리 (회사) 입장에서 왜 그쪽을 뽑아야 하는가?
- 주니어 개발자 / 신입으로서 회사에 어떻게 기여할 수 있겠는가?
- 자바스크립트라는 언어에 대해서.. 자바스크립트는 어떤 언어이고 다른 언어들과 비교했을 때 나은 점과 부족한 점?
장점 / 단점 - 본인은 어떤 개발자라고 생각하는가? (회사측에서 다면평가를 참고하지 않았을 때 vs 다면 평가를 참고했다면 ~ 이러한 평가들이 있었는데 이것에 대해서 어떻게 생각하는가?)
- git으로 협업을 했다고 하는데 어떻게 협업을 했는지, 보통 하나의 브랜치 (마스터 / 메인) 으로 진행을 한 것 같은데.. 그렇게 할 때 어려웠던 점이 있었는지?
- UX 를 향상시키기 위해 기울였던 노력?
- 라이브러리, 패키지, 프레임워크의 정의를 간단하게 해본다면?
- 프로젝트를 진행할 때 어떤 것을 모듈화 하였는지? 모듈화 하는 것이 왜 중요한지?
- 리액트 훅을 왜 사용하는가?
- 호이스팅이란?(var, let, const)
자바스크립트엔 따로 컴파일러가 없어서 자바스크립트 엔진이 실행전에 알아보기 쉽게 코드를 검토한다!
- 브라우저 저장소에 대해서 설명해 보세요(로컬 스토리지, 세션 스토리지, 쿠키)
- 동기와 비동기에 대해서 설명해주세요(promise, async & await) + 써본 적 있는지
async는 외부함수에 await는 내부함수(콜백함수)에 선언해 await를 선언한 함수가 리턴값을 반환할때까지 기다린 후 그 뒤의 함수들을 실행시켜줄 수 있다
- 서버 사이드 렌더링과 싱글 페이지 애플리케이션의 차이점
- 프로젝트에서 성능을 개선하기 위해 어떤 것을 했는지?
- 프런트엔드 개발은 지속적으로 학습해야 하는 분야인데 어떤식으로 학습을 하고 있는지?
- 클래스형 컴포넌트와 함수형 컴포넌트의 차이점과 장단점
- 고차 컴포넌트 (hoc)란? 사용해본 적 있는지 https://velog.io/@hwang-eunji/React-고차-컴포넌트-HOC-사용하기
- 개발자로서의 본인의 비전은?
- 최근에 관심갖거나 공부 하고 싶은 개발 기술이 있는지?
- RESTful API 가 무엇인가, 써본적 있는지? https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html
HTTP URI로 정의된 리소스를 HTTP 방식과 페이로드의 결합으로 정의한 API
get, post, put, delete 등의 메소드로 요청을 보낼 수 있으며 이를 이용해 서버와 통신해 crud를 구현할 수 있습니다.
결국 http 요청을 보낼때 어떤 url에 어떤 method
를 사용할지 개발자들 사이에 널리 지켜지는 약속
그 외에 put은 정보를 통채로 갈아끼울 때 patch는 특정 방식으로 정보 일부를 교체할때
-
개발을 즐기나요? 우리는 개발 자체를 즐길 수 있는 사람이 필요한데, 본인은 그 부류인가요?
-
개발과 관련되지 않은 질문 → 개발자의 소양에 관해: 질문하는 사람인가요? 어려움에 닥쳤을 때 질문을 통해 해결했던 경험이 있다면 나눠줄 수 있을까요?
-
가상돔의 장단점?
-
css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.
-
자바스크립트 this 란? https://nykim.work/71
정의 this는 JavaScript에서 객체지향을 구현하기 위한 키워드다. 이 용도로 쓰는건 괜찮다.
다시 한 번, 정리하자면, this는 기본적으로 window이지만, 객체 메서드, bind call apply, new일 때 this가 바뀝니다. 그리고 이벤트리스너나 기타 라이브러리처럼 this를 내부적으로 바꿀 수도 있으니 항상 this를 확인해보셔야 하고요. 여러분이 선언한 function의 this는 항상 window라는 것 알아두세요. (strict 모드에서는 undefined !!)
메소드를 호출했을 시 this 는 메소드의 호출 주체(메소드명 앞)이 된다.
this 해결방법
Arrow Function을 사용
b 내부에서 this를 변수에 저장 -
이 회사에 지원하는 이유가 무엇이죠? (한 번 간 보려고요 이런 거는 안 됩니다)
-
var, let, const에 대해 설명해주세요 (함수랑 묶어서 설명하면 좋을 듯 합니다)
var는 function-scoped이고, 이것의 문제를 보완 한 let, const는 block-scoped이다.
var, function scope의 경우 밖에서 for loop 같은 반복문 안의 내용물에 접근 할 수 있기 때문에 에러가 있습니다.
let, const와 같은 block scope의 경우 block scoped이고이 말은 block 안에서 만들어진 let, const는 그 블록{} 안에서만 수있는 뜻이다. 함수 범위에서와 같이 밖에서 접속하면 참조 오류가 뜬다.
let와 const의 유일한 차이점은 let 에서와는 달리 const에는 새로운 값을 할당 할수가 없다.
결론적으로 변화가 일어나는 변수는 (예를 들어 루프) let을, 변화가 일어나지 않는 변수는 const를 사용 하는게 좋다.
https://medium.com/@yeon22/javascript-var-let-const의-차이점-9fab5c264c9c -
map() vs Map() 의 차이
-
최근에 했던 프로젝트 중 본인이 가장 만족했던 성과가 있다면 구체적인 예를 들어서 설명을 해주세요!
-
리액트 리렌더링의 조건
자신의 상태(state)값이 변경될 때, 부모 컴포넌트가 리랜더링될 때, 자신이 전달받은 props값이 변경될 때, 강제 업데이트(forceUpdate)함수가 실행될 때
-
클로저란?
- closure는 Lexical scoping에 따라 선언 시점에 변수 참조 범위가 결정되고 이를 기억하고 있었던 것이므로 호출 지점과 무관하게 기억된 환경에 접근하여 참조 값을 가져올 수 있다.
- 클로저는 자바스크립트에서 private 기능을 보완한다. 클로저를 이용하면 제한적인 접근만을 허용하여 private한 변수 또는 메소드의 효과를 낼 수 있기 때문이다.
즉, 객체지향 프로그래밍의 정보 은닉과 캡슐화의 이점을 얻을 수 있다.
클로저와 스코프의 차이점
스코프 - 프로그래밍언어에서 유효범위는 어느 범위까지 참조하는 지를 뜻한다.
유효범위의 종류에는 크게 두 가지가 있다.
- 전역 스코프 (Global scope) : 스크립트 전체에서 참조되는 것을 의미하며, 어느 곳에서든 참조 된다.
- 지역 스코프 (Local scope) : 정의된 함수 내에서만 참조되는 것을 의미하며, 밖에서는 참조 되지 않는다.
- 클로저 - 클로저는 함수가 선언된 환경의 (렉시컬) 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기술
-
javascript 실행 context
https://poiemaweb.com/js-execution-context
스코프 -
웹사이트의 동작원리
엔터를 치면 구글 서버에서 index.html을 get요청으로 가져와야 하는데 가져오기 위해선 구글 IP주소가 필요합니다 www.google.com이라는 도메인 네임을 통해 IP주소를 찾아야 되는데 DNS에 요청을 보내서 구글 IP주소를 찾고 그걸로 index.html을 가져와서 브라우저에 렌더링 합니다
-
오픈소스 프로젝트란?
“오픈소스”란 무엇인가요? 오픈소스 프로젝트에서는 누구나 어떤 목적으로든 프로젝트를 보고, 사용하고, 수정하고, 배포할 수 있습니다. 이러한 권한은 오픈소스 라이선스를 통해 적용됩니다. 오픈소스는 채택의 장벽을 낮춰 아이디어를 신속하게 퍼뜨릴 수 있기 때문에 강력합니다.
-
Typescript에서, Interface와 Abstract Class의 차이는 뭔가요?
질문해주신 물음에 대한 답은 구글링을 통해 찾았습니다. 인터페이스는 타입이며 컴파일 후에 사라진다. 추상 클래스는 선언과 구현이 모두 존재하지만 인터페이스는 선언만 존재하며, 멤버 변수와 멤버 메서드를 선언할 수 있지만 접근 제한자는 설정할 수 없다. 알아둘 점은 자식 인터페이스는 여러 부모 인터페이스를 다중 상속할 수 있다.
-
React에서 Virtual DOM은 왜 필요하며, 어떤 역할을 하는건가요?
DOM은 사소한 변화에도 Render Tree를 다시만들고
Layout, Paint의 과정들이 다시 처음부터 시작되야한다는 것에서 한계성이 두드러 졌고 이러한 문제를 해결하기 위해 Virtual DOM이 등장했습니다
로컬에 Virtual DOM을 생성 시키고, 브라우저에 Render를 요청 하기 전에 변경 사항을 요청 하는 방식인데요
Virtual DOM을 사용함으로서, 데이터 변경이 있을 때 더 이상 어떻게 업데이트 할지를 고려하는 것이 아니라, 일단 바뀐 데이터로 그려놓고 비교를하고 바뀐 부분만 찾아서 바꿔주는 형식으로 동작합니다.
리액트의 렌더링 과정을 간결하게 살펴보면
렌더링 시 Virtual DOM, 즉 가상 DOM을 먼저 만든다. 그 후 실제 DOM과 비교를 하여 변경이 있는 부분(하위 컴포넌트)만 대체를 하기 때문에 리소스 낭비를 줄일 수 있다. 라고 표현할 수 있겠습니다 -
자바스크립트는 싱글 스레드로 동작합니다.
자바스크립트는 싱글 스레드 환경이기 때문에, 한 번에 하나의 코드만을 실행할 수 있기 때문이다.
항상 맨 위에 놓인 함수를 우선으로 실행된다. 이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.
그럼에도 javascript가 병렬적으로 비동기 코드를 실행하는 것처럼 보이는 것은 비동기 처리를 외부 api에 위임하고, 완료된 작업을 event loop를 통해서 반환받고, 다시 javascript의 실행 영역에서 callback을 실행하기 때문입니다. -
useCallback & useMemo는 무엇인가?
좀 더 쉬운설명?
66.자바스크립트 비공개 변수
67.자바스크립트의 Falsy
68. 자바스크립트는 왜 싱글 스레드일까?
69. styled-commponent 타입스크립트 이슈
70. React 성능최적화
71. currying?
72. useEffect의 여러기능
함수형 컴포넌트에서도 클래서형 컴포넌트의 라이프 사이클을 흉내? 구현할 수 있습니다
componentDidMount - 최초한번
componentDidUpdate - 상태값이 변할때마다 // dependency 인지
componentWillUnmount - return 값이 있는 경우 hook의 cleanup 함수로 인식하고 다음 effect가 실행되기 전에 실행 // 컴포넌트가 제거 될때 실행
-
ES6 - let과 const // arrow function // ES6에서는 배열을 제어할 수 있으며 forEach 보다 좀 더 유연한 방식을 사용하는 for of 구문이 추가되었다.
ES7 - S7에서는 제곱 계산을 위한 지수 계산 연산자 **가 추가되었다. 이 연산자는 Math.pow()와 같은 기능
Array.prototype.includes()는 인수로 전달되는 배열의 값을 체크하는데, 값이 있을 경우 true를, 없다면 false를 리턴한다.
ES8 - async와 await이 추가 -
주소창에 구글 입력 .
구글 서버로 찾아간다.
DNS가 연결해줄 곳을 찾음 (DNS - 실제 서버가 어디있는지 알고 있는 서버)
서버에서 HTML 파일을 클라이언트로 보냄.
HTML 파일 파싱 및 DOM Tree 생성
link 태그를 만나 css 파싱 및 CSSOM 트리 생성
DOM , CSSOM 합쳐 Render Tree 생성
(8. JavaScript를 만나면? HTML파서는 JS 코드를 실행하기 위해 파싱 중단
JS 엔진실행 및 JS코드 파싱) -
map 과 forEach
forEach()으로 할 수 있는 것은 map()으로도 가능하고 그 반대도 가능합니다.
map()은 메모리를 할당하고 리턴 값을 저장합니다. forEach()는 리턴 값을 버리고 항상 undefined를 리턴합니다.
forEach()는 콜백함수로 현재 Array를 변환할 수 있습니다. 대신에 map()은 새로운 Array를 리턴합니다. -
함수형 프로그래밍과 객체지향형 프로그래밍
https://suminpixel.tistory.com/20
79. 함수형 vc 객체지향형
81. RESTFUL, REST
REST란?
82. [REST API 장단점](https://wallees.wordpress.com/2018/04/19/rest-api-%EC%9E%A5%EB%8B%A8%EC%A0%90
83. HTTP, HTTPS
84. 리액트 성능체크
85. TaskQueue, Micro Task Queueu
86. MVC MVP MVVM
87. 타입스크립트 장점
88. 타입스크립트 장단점 간결하게
89. 컴파일이란?
프로그래머가 작성한 코드를 바이너리 파일로 변환하는 과정 소스코드를 컴파일하여 프로그램을 만들 수 있다
-
context란?
실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. ... 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다.
