[JS] 주니어 레벨의 프론트엔드 개발자가 되려면?

 

신입 개발자로 일을 하면서 여러 가지 상황에 부딪힐 때마다 드는 생각은

 

'이게 최선인 걸까?' 하는 고민이다. 

 

그만큼 아직은 배워야 할게 많다는 뜻일까. 

 

성장에 대한 고민을 하면서 여러 블로그 글을 읽다가 재밌는 글이 있어 번역해 옮겨본다. 

 

2022년에는 주니어 프론트엔드 개발자(리엑트)라고 불릴 수 있을까?

안녕하세요. 

많은 사람들이 소프트웨어 엔지니어를 희망하고 발리에서 재택근무와 고소득의 라이프 스타일을 바라고 있습니다. 그렇지 않은 사람이 있을까요?

 

하지만 몸 값이 높은 주니어 프론트엔드 개발자가 되는 것은 그렇게 쉬운 일은 아닙니다. 해가 갈수록 채용 담당자는 주니어 레벨의 개발자에게 더 많은 요구와 엄격한 잣대를 요구하고 있습니다. 

 

바로 지금 여기서 당신이 주니어 레벨의 FE로 불릴 수 있는지 한번 확인해 보려고 합니다. 아래 질문을 질문할 수 있어야 주니어라고 불릴 수 있을거라 생각합니다. 행운을 빌어요.

 

HTML

1. 왜  HTML 파일에 <!DOCTYPE...>을 넣는 걸까요?

답변: <!DOCTYPE...>은 문서에 사용된 HTML 버전을 브라우저에게 알려주기 위해 사용합니다. 

 

2. HTML5에서 소개된 주요 변화는 무엇인가요?

답변: 

• <header>와 <footer>

이 새로운 태그를 이용하면 더이상 <div> 태그로 두 개의 엘리먼트를 나누지 않아도 됩니다. Header 엘리먼트는 페이지의 상단에 위치하는 반면, footer는 하단에 위치합니다. 

• <nav>

이 태그는 네비게이션내비게이션 링크들의 집합을 정의합니다. 주요 내비게이션 링크의 블록을 위한 용도이지 문서 내 모든 링크를 위한 건 아닙니다. 

• <video>와 <audio>

위 두 태그는 내장 비디오와 사운드 컨텐츠를 위한 태그입니다. 

• <progress>

태스크의 완성도를 체크할 때 사용합니다. 

• <figure>와 <figcaption>

figure는 문서내 이미지의 마크업을 하기 위함이고 figcaption은 이미지의 캡션을 위해 사용합니다.

• placeholder attribute

이 특성은 인풋 필드 혹은 텍스트 에어리어에서 입력되길 예상하는 값의 힌트를 설명합니다. 이 힌트는 사용자가 값을 입력하기 이전까지 표시됩니다. 

 

3. 어떤 시멘틱 엘리먼트를 알고 있으며 어떤 것들을 사용하나요?

답변:

• <article>

이 태그는 독립적이고, 완전한 콘텐츠를 명시합니다. 예를 들어 포럼 포스팅, 블로그 포스팅, 사용자 코멘트, 제품 카드, 그리고 신문 기사 등이 있습니다. 

• <aside>

이 태그는 컨텐츠의 옆부분에 위치하는 콘텐츠를 의미합니다. (사이드바와 같은 겁니다.)

• <details>

사용자가 보거나 숨길수 있는 상세 추가 정보를 의미합니다. 

• <footer>

문서의 footer 엘리먼트를 정의합니다. 

• <header>

문서의 header 엘리먼트를 정의합니다. 

• <main>

문서 컨텐츠의 주요 콘텐츠를 의미합니다. 

• <mark>

마킹되거나 하이라이트된 텍스트를 나타냅니다.

• <nav>

네비게이션 링크 세트를 정의합니다. 

• <section>

다큐먼트의 섹션을 정의합니다. 섹션이란 주로 헤딩을 가진 시멘틱 콘텐츠 그룹입니다. 예를 들어 섹션 엘리먼트는 챕터, 설명, 뉴스 아이템, 그리고 콘텐츠 정보 등에 사용될 수 있습니다. 

4. HTML의 특성이란 무엇인가요?

답변:

HTML 특성은 HTML 엘리먼트에 대한 추가적 정보를 제공합니다. 시작하는 태그에 항상 정의되며 특성들은 보통 태그명/값 짝으로 이루어져 있습니다. (name='value')

 

5. 만약에 유저가 <a href='#'>...</a> 태그를 클릭한다면 어떤 일이 발생할까요?

답변:

페이지 상단으로 이동할 것입니다. 

---

css

1. 어떤 크기 단위를 알고 있나요? 차이점이 무엇인가요?

답변:

 

크기 단위는 크게 두개로 나뉠 수 있습니다. 

• 절대 길이(px, pt, cm, mm, in);
• 상대 길이(em, rem, %, vw, vh);

절대 길이 단위는 고정되어 있습니다. 이것을 화면상에 사용하는 것을 권장하지는 않습니다. 왜냐하면 스크린의 크기는 다양하기 때문입니다. 하지만 아웃풋 매체가 특정한 경우라면 사용할 수 있습니다. 

 

상대적 길이는 다른 특성의 길이에 비례한 값을 가집니다. 다양한 매체에 더욱 확장하기 편 이합니다. em 그리고 rem 단위는 완벽하게 변화 가능한 레이아웃을 만들 때 실용적입니다. 

 

2. margin collapse가 무엇인가요?

답변:

 

이는 html의 두 엘리먼트의 top과 bottom이 만났을 때 두개의 마진 중 가장 큰 마진으로 마진이 합쳐지는 현상을 말합니다. 

 

상단과 하단 이렇게 두개의 블록이 있다고 가정해 보겠습니다. 상단의 블록(블록 A)은 바텀 마진을 50px을 가지고 하단 블록(블록 B)은 탑 마진을 30px을 가지고 있습니다. 이 두 블록 간의 거리는 80px이 아닌 50px이 됩니다. 

3. 어떤 CSS 선택자를 알고 있나요?

답변:

 

CSS 선택자는 크게 다섯개의 카테고리로 나눌 수 있습니다:

• 단순 선택자(이름, id, class를 기반으로 엘리먼트 선택)
• 혼합 선택자(엘리먼트간의 관계를 통해 엘리먼트 선택)
• 가상 클래스 선택자(특정 상태에 따라 엘리먼트 선택)
• 가상 엘리먼트 선택자(한 엘리먼트의 부분을 선택하고 스타일링)
• 특성 선택자(특성 혹은 특성 값에 따라 엘리먼트 선택)

4. 흔히 사용되는 CSS 전처리기에는 어떤 것들이 있나요? 그리고 왜 사용하나요?

답변:

 

CSS 전처리기는 전처기기만의 독특한 문법을 이용해 CSS를 생성하도록 해주는 프로그램입니다. 대부분의 전처리기는 순수 CSS에서는 가지고 있지 않은 특별한 기능을 가지고 있습니다. 예를 들어 mixin, nesting selector, inheritance selector 등이 있습니다. 이러한 기능을 이용하면  CSS 구조를 더욱 가독성 있고 유지 보수하기 용이하도록 할 수 있습니다. 

 

흔히 사용되는 전처리기:  Sass, Less, Stylus, PostCSS

 

5. 동일한 스타일을 가진 다수의 엘리먼트를 어떻게 타게팅하나요?

답변:

 

CSS 그룹핑 선택자를 이용합니다. 이것을 이용하면  HTML 엘리먼트에서 동일한 스타일 정의를 가진 엘리먼트를 모두 선택 할 수 있습니다. 그루핑을 위해선 콤마로 각가의 선택자를 나누어야 합니다. 

 

---

Javascript

1. 이벤트 루프란 무엇이고 어떻게 작동하는 건가요?

답변:

 

자바스크립트는 이벤트 루프에 기반한 런타임 모델을 가지고 있습니다. 이는 코드를 실행하고 처리 이벤트를 모으고 대기상태의 하위 태스크를 실행하는 일을 합니다. 

 

이벤트 루프는 스택과 태스크 큐의 모습을 하고있는데 스택이 비면 태스크 큐에서 첫 번째 태스크를 가져와 스택에 쌓습니다. 

 

2. 콘솔 로그의 순서가 어떻게 될까요?

(function() {
    setTimeout(function(){console.log(1)}, 0); 
    Promise.resolve().then(() => console.log(2));
    new Promise((resolve, reject) => resolve()).then(() => console.log(3))
    console.log(4);
})();

여기서 console.log(4) 만이 유일하게 동기적 코드입니다. 따라서 맨 처음 실행될 것입니다. 두 개의 Promise는 마이크로 태스크이기 때문에 매크로 태스크인 setTimeout보다 우선권을 가지게 됩니다. 

 

따라서 순서는 4,2,3,1이 될 것 입니다.

 

3. 객체는 어떻게 복사하나요?

답변:

const obj = { name: "John" };

const objCopy1 = Object.assign({}, obj); // 1
const objCopy2 = { ...obj }; // 2
// using cloneDeep from lodash
const objCopy3 = cloneDeep(obj); // 3
const objCopy4 = JSON.parse(JSON.stringify(obj)); // 4

 

4. 배열 [1,2,2,3,4,4]에서 유일한 엘리먼트 배열을 어떻게 만드나요?

답변:

const notUniqueElements = [1, 2, 2, 3, 4, 4];

const uniqueElements = Array.from(new Set(notUniqueElements));
console.log(uniqueElements); // output is [1, 2, 3, 4]

 

5. this를 함수에 어떻게 설정하나요?

답변:

 

아래 메서드를 이용해 this를 함수에 설정할 수 있습니다. 

• .bind();
• .call();
• .apply();

---

React

1. 가상 DOM이란 무엇인가요?

답변:

 

간단히 말해 가상 DOM이란 리엑트의 가짜 HTML DOM입니다. VDOM은 컴포넌트의 구조 변화를 추적하고 전체 페이지 중 변화된 부분만을 다시 렌더링 하는데 이용됩니다.

 

2. 배열을 순환해 컴포넌트를 렌더링 할 때 왜  Key를 설정해야 하나요? 만약 이를 빼먹게 된다면 어떤 일이 발생하나요?

답변:

 

key는 엘리먼트 리스트를 생성할 때 추가해야 하는 스트링 특성입니다. 

 

키는 어떤 아이템이 변경되고 추가되거나 제거되었는지 리엑트에게 알려주는 역할을 합니다. 키는 엘리먼트 내부에 엘리먼트의 안정된 아이덴티티를 위해 추가되어야 합니다. 

 

만약에 리스트 아이템에 키를 부여해 주지 않으면 리엑트는 기본 설정으로 인덱스를 키로 사용하게 됩니다. 이 경우, 브라우저의 콘솔에서 경고 메세지를 확일 할 수 있습니다. 이는 퍼포먼스에 부정적인 영향을 미치고 컴포넌트 상태에 문제를 발생 시킬 수 있습니다. 

 

3. 리엑트 훅을 이용해 어떻게 이벤트 리스닝을 해제할 수 있나요?

답변:

 

useEffect 훅을 이용해 콜백을 리턴하면 가능합니다. 리턴되는 콜백은 컴포넌트가 언마운트 될 때 실행될 것입니다. 

useEffect(() => {
    window.addEventListener('mousemove', listener);

    return () => window.removeEventListener('mousemove', listener);
}, [])

 

4. React.PureComponent란 무엇인가요?

답변:

 

React.PureComponent는 React.Component와 비슷합니다. 차이점은 React.Component는 shouldComponentUpdate()를 실행하지 않지만 React.PureComponent는 얇은 prop, state 비교를 통해 이를 실행한다는 점입니다. 

 

만약에 리엑트 컴포넌트의 render() 함수가 동일한 prpos나 state로부터 동일한 결괏값을 렌더링 한다면, React.PureComponent를 사용해 퍼포먼스를 향상할 수 있습니다. 

 

5. 무엇이 리엑트의 컴포넌트를 재 렌더링 하게 하나요?

답변:

 

prpos나 state가 변경되었을 때 리엑트는 컴포넌트를 재 렌더링 합니다. 

---

 

출처: https://medium.com/@ivanburzakovskyi/are-you-able-to-be-called-a-junior-fe-react-developer-in-2022-df8a4897b711

Are you able to be called a Junior FE (React) developer in 2022?