면접 피드백 정리

 

웹폰트를 사용할 때 고려해야 할 점을 말씀해주세요.

 

WOFF2 : 용량 적음 

Pre-Loader : 미리 불러오기

제일 좋은 방법은 OS 시스템 폰트 사용하기

 

 

리액트 프래그먼트에 대해 아시나요?

React.Fragment는 React의 컴포넌트 구조에서 매우 중요한 역할을 합니다. React에서는 컴포넌트를 반환할 때, 그 컴포넌트는 반드시 하나의 부모 요소로 감싸져야 합니다. 하지만 때로는 불필요한 div나 다른 HTML 요소로 감싸는 것이 원치 않을 때가 있습니다. 이럴 때 React.Fragment를 사용하면 됩니다.

React.Fragment는 그룹화된 자식 요소들을 반환할 수 있게 해주지만, 실제 DOM에는 별도의 노드로 나타나지 않습니다. 따라서 불필요한 마크업 없이 여러 요소를 렌더링할 수 있습니다.

 

시맨틱 태그에 대해 설명해주세요

웹 접근성 --> 이 키워드가 중요하다

 

웹 접근성은 모든 사용자가 웹사이트와 그 내용을 동등하게 이용할 수 있도록 보장하는 것을 의미합니다. 여기서 모든 사용자는 시각 장애, 청각 장애, 운동장애, 언어 장애 등 다양한 장애를 가진 사람들을 포함하며, 또한 나이가 많거나 기술적 지식이 부족한 사람들도 포함됩니다.

 

웹 접근성은 다음과 같은 요소들을 포함합니다:

이해하기 쉬운 콘텐츠: 웹사이트의 콘텐츠는 모든 사용자가 쉽게 이해할 수 있어야 합니다. 이는 텍스트, 이미지, 비디오, 오디오 등 모든 형태의 콘텐츠에 적용됩니다.
키보드 접근성: 웹사이트의 모든 기능은 키보드만을 사용하여도 접근 가능해야 합니다. 이는 마우스를 사용할 수 없는 사용자들을 위한 것입니다.
적절한 색상 대비: 웹사이트의 색상은 충분한 대비를 가지고 있어야 합니다. 이는 시각 장애인이나 색맹 사용자들이 콘텐츠를 쉽게 볼 수 있게 하기 위한 것입니다.
명확한 폼 레이블: 웹사이트의 폼 요소는 명확하게 레이블링되어 있어야 합니다. 이는 스크린 리더를 사용하는 사용자들이 폼 요소를 쉽게 이해하고 사용할 수 있게 하기 위한 것입니다.
웹 접근성은 또한 웹 표준과 관련된 법률에 따라 필수적일 수도 있습니다. 이는 웹사이트를 운영하는 기업이나 개인이 모든 사용자에게 동등한 서비스를 제공하는 것을 보장하기 위한 것입니다.

 

 

 

 

비동기식 순서를 말씀해보세요

 

JavaScript에서 비동기식 코드의 실행 순서는 다음과 같습니다
비동기 함수 호출: 비동기 함수(예: setTimeout, AJAX 요청, Promise 등)가 호출되면, 이 함수는 콜스택에서 웹 API로 이동합니다. 이는 JavaScript 엔진 외부에서 실행됩니다.
웹 API 실행: 웹 API는 주어진 작업을 실행합니다(예: 타이머를 설정하거나, 서버에 요청을 보냅니다). 웹 API 작업이 완료되면, 해당 함수의 콜백이 '태스크 큐' 또는 '콜백 큐'라고 불리는 대기열에 추가됩니다.
이벤트 루프 확인: 이벤트 루프는 콜스택이 비어 있을 때마다 태스크 큐에서 콜백을 가져와 콜스택에 넣습니다. 이는 콜스택에 다른 작업이 없을 때만 발생합니다.
콜백 실행: 콜스택에 다시 추가된 콜백 함수는 실행되고, 최종 결과를 반환합니다.
이렇게 비동기식 코드는 동기적인 코드와 다르게 실행 순서가 보장되지 않습니다. 비동기 함수가 호출되면, 해당 함수는 백그라운드에서 실행되며, 콜백 함수는 나중에 실행됩니다. 이는 JavaScript가 단일 스레드 언어라도 여러 작업을 동시에 처리하는 것처럼 보이게 하는 핵심 메커니즘입니다.

 

 

 

 

비동기식 콜스택이란 무엇인가요?

 

비동기식 콜스택은 JavaScript의 비동기 작업을 관리하는 메커니즘 중 하나입니다. JavaScript는 단일 스레드 언어이므로, 한 번에 하나의 작업만 처리할 수 있습니다. 그러나 비동기 기술을 사용하면 JavaScript는 여러 작업을 동시에 처리하는 것처럼 보이게 할 수 있습니다.

비동기식 콜스택은 이러한 비동기 작업을 관리하는 데 사용됩니다. 기본적으로, JavaScript는 코드를 실행하면서 콜스택에 함수를 추가합니다. 함수가 완료되면 콜스택에서 제거됩니다. 이것이 동기 작업의 기본 흐름입니다.

그러나 비동기 함수(예: setTimeout, AJAX 콜 등)가 호출되면, 이 함수는 콜스택에서 제거되어 웹 API(Web APIs)로 이동합니다. 이는 JavaScript 엔진 외부에서 실행됩니다. 웹 API 작업이 완료되면, 해당 함수의 콜백이 '태스크 큐' 또는 '콜백 큐'라고 불리는 대기열에 추가됩니다.

이벤트 루프는 콜스택이 비어 있을 때마다 태스크 큐에서 콜백을 가져와 콜스택에 넣습니다. 그리고 콜스택에서 다시 실행되어 최종 결과를 반환합니다. 이렇게 하여 JavaScript는 비동기 작업을 동기적으로 처리하는 것처럼 만들 수 있습니다. 이것이 바로 비동기식 콜스택의 동작 방식입니다.

 

 

 

Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?

원래 답변 : 또한 가상DOM에서 batchupdate가 가능해졌는데, 예를 들어 인스타그램의 좋아요를 누를 때, 실제 DOM에서는 좋아요 하나를 바꾸기 위해 여러 개의 엘리먼트가 변경되어 여러 번의 갱신이 필요하지만, 가상 DOM에서는 모든 변경을 한 번에 모아서 한 번만 갱신하기 때문에 성능이 훨씬 향상될 것입니다.

 

--> 인스타그램의 좋아요로 예를 들은 것은 좋은데, 좋아요 하나로 성능이 크게 차이가 날 것 같지 않아서 성능이 향상된다는 말은 부적절해보임

--> 가상 돔은 일일이 돔에 접근할 필요가 없고 자동화가 된다(리액트의 장점이 될 수도 있음)

 

 

---

 

 

개발자 질문

Q. 개발자가 된다면, 개발자로서의 목표가 있는지?

구체적인 목표를 말하자.

기술 스택, 라이브러리를 언급하는 것도 좋음

ex) 이런 스택을 사용해보고 싶다. / 여러 라이브러리를 사용했는데 라이브러리를 직접 만들어 공유하고 싶다

 

 

 

마지막 질문

마지막 질문 하고 싶냐고 물어보면 꼭 질문하는 것이 좋다.

회사에 관한 질문, 이런 기술 스택은 향후 쓸 계획이 있는지 / 타입스크립트를 도입할 계획이 있는지 / 기술 세미나 등

 

 

 

면접 답변 Tips

기술 면접은 예시를 들어 설명하기, 제일 좋은 것은 본인의 경험을 녹여 말하기

차이점을 말하라고 하면 각각 어떤 것인지 간단한 설명 후에 차이점을 말하면 좋다

답은 길게 말하기

꼬리질문을 대비하기 위해 키워드를 직고 그려나가는 마인드맵 활용하기(연관지어 외우기)

 

 

---

 

 

< 다른 팀원 분이 공유해주신 면접 피드백 자료! >

사용방식을 이해하고 있는지 / 고려할 점을 이해하고 있는지
고려해야 할 점
라이센스
폰트 용량: 용량이 큰 폰트는 불러오는데 꽤 오래 걸림; 몇 메가씩 하면 불러오는거 느림; 그러면 텍스트가 깨지거나 안 보이거나 나중에 교체하는 현상이 보임;
foit, fout; 알아두면 좋음
웹폰트마다 확장자가 다 다름; 어떤게 있는지 알아두면 좋음
woff2가 용량이 작아서 선호함
용량을 줄이는 방법이 있음; subset; 일상생활에서 사용하지 않는 폰트를 subset font라고 하는데, 밑에 받침이 2개 들어가있는, 일상에서 쓰이지 않는 단어는 제거하는 것
라이브러리
npm trends에서 보니 많이 쓰더라
시맨틱 태그
역할에 맞게 사용하는 것이 가장 핵심임
A tag vs. button
Input vs. textarea
접근성과 연관이 있음; 남녀노소 누구나 웹을 사용할 수 있게; 시력이 안 좋은 사람도 읽을 수 있게 크기를 고려한다던지,
Screen 리더기 프로그램 (iOs 등마다 다 있는데)
어떤 태그가 사용되었는지 다 읽어줌
브라우저 렌더링 순서
Html parsing 해서 돔 트리 구성, 렌더 트리 구성, css om 트리 만들고 등등
reflow랑 repaint를 개발자 도구에서 확인할 수 있음
어떤 작업을 했을 때 reflow와 repaint가 발생하는지
퍼포먼스, 성능에서 확인 가능
브라우저 성능 평가에 활용됨 (e.g. lighthouse)
메타 태그를 페이지마다 적용한다거나, og tag를 적절하게 활용한다거나,
가상DOM 원리를 파헤쳐 본 경험 중심으로 이야기 하면 좋음
면접에서 물어보는 것: 어떤 개발자가 되고 싶은지
어떤걸 만들고 싶은가
zep 같은 프로젝트를 만든다거나
사용자가 창작물을 만들 수 있는
에디터 라이브러리 써보니 궁금해서 만들어봤다, 같은 경험이 있으면 좋음
질문할 때 - 타입스크립트로 전환할 계획이 있는지 / 회사에 대한 정보 / 나랑 맞는 기술 스택을 활용하는지
비슷한거랑 비교해서 이야기 하면 좋음

 

 

 

---