1. 개발자로 직업을 선택한 이유가 무엇입니까?
   : 제가 습득한 만큼 구현해낼 수 있다는 것이 좋았습니다.
   공부해서 알아가는 쾌감과, 해낼 수 있다는 자신감이 생겨 재미있었습니다.

2. 우리 회사에 지원한 동기가 무엇인가요?

3. 개발자로서 본인이 가진 장점 3가지를 근거와 함꼐 말씀해주세요.
   : 첫째, 소통능력입니다.
   서울교통공사에서 근무 당시 고객들과 교류하며 의사소통 능력과 적극성을 길렀습니다.
   둘째, 새로운 툴을 사용하는 적응력
   Styled Component 와 Tailwind CSS 를 병행하여 사용해봤으며,
   React 에 그치지 않고 React Query + Recoil 을 활용해 구현했다.
   셋째, 끈기
   잘 모르는 분야일수록 포기하지 않고 매달릴 수 있는 의지가 필요하다고 생각합니다.
   항해99 프로젝트마다 기술 구현에 난항을 겪었지만 마지막까지 결국 해내는 끈기를 보였습니다.

4. 앞으로 3개월/6개월/1년동안 어떤 공부를 하실지, 왜 이러한 공부 계획을 세웠는지 말씀해주세요
   : 3개월 간 회사에 적응하며 자바스크립트 공부를 계속할 것이다.
   6개월차에는 알고리즘 코딩 테스트 문제를 천천히 풀것이며,
   1년 안에 기본적인 cs 지식을 바탕으로 자바스크립트의 전반적인 흐름을 이해하는 것이 목표다.

5. React ?

: 자바스크립트 기반의 라이브러리.

: SPA(Single Page Application) 을 위한 사용자 인터페이스를 구축하는데 사용

: 웹, 모바일 앱 등의 view layer 를 처리하는데 사용
--> 뷰만을 신경쓰는 라이브러리로 기타 기능은 직접 구현하여 사용해야 함
( 라우팅 = 리액트 라우터, Ajax 처리 = axios 혹은 fetch, 상태 관리 = redux 혹은 MobX ... )
: 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM) 을 사용
--> 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리

: 다른 라이브러리들과 함께 특정한 환경을 렌더링하는데 사용
목표 - 개발자가 UI를 만들 때 일어나는 버그 최소화
So, React 는 사용자 인터페이스의 일부를 나타내는 자족적이고, 논리적인 코드 조각 컴포넌트 사용
: React는 인터페이스의 일부분을 위해 사용하거나, 애플리케이션 전체를 만들때 사용하기가 보다 쉬움

5-1. JSX ?

: JSX(JavaScript XML) = JavaScript 에 XML 을 추가한 확장 문법

: JSX 는 리액트로 프로젝트를 개발할 때 사용되므로, 공식적인 자바스크립트 문법은 아니다.

: 브라우저에서 실행하기 전에 '바벨' 을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
: JSX 는 하나의 파일에 자바스크립트와 HTML 을 동시에 작성하여 편리하다.
: 자바스크립트에서 HTML을 작성하듯이 쓰기 때문에 가독성이 높다.

- 문법 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

(Virtual DOM 에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록,
컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문)

- 문법 2. 자바스크립트 표현식

(JSX 내부에서 코드를 { } 로 감싸줘야한다)

5-2. React Component ?

: 리액트로 만들어진 앱을 이루는 최소한의 단위

: 기존의 웹 프레임워크 = MVC 방식으로 분리해 관리

--> 각 요소의 의존성이 높아 재활용 어렵다는 단점 있음

컴포넌트 = MVC 의 뷰를 독립적으로 구성

--> 재사용 할 수 있음. 새로운 컴포넌트를 쉽게 만들 수 있음

: Component = 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node 를 출력하는 함수

: 컴포넌트의 이름은 항상 대문자로 시작해야 한다
(리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문)

: Component 의 종류 = 함수형 컴포넌트, 클래스형 컴포넌트 2가지

5-3. 함수형 컴포넌트 ?

: 가장 간단하게 컴포넌트를 작성하는 방법
: state 를 포함하지 않으며, 데이터를 받아 출력할 컴포넌트를 반환한다.

5-4. 클래스형 컴포넌트 ?

: 컴포넌트의 구성 요소, 리액트의 생명주기를 모두 포함하고 있다.
: property, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용

5-5. Props ?

: property(프로퍼티)의 줄임말
: 부모 요소에서 설정한다.
--> 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 Props 라고 한다. (단방향 데이터 흐름)
: 읽기 전용이다.
--> 자식 컴포넌트에서 전달 받은 props 를 변경 불가능
--> props 를 전달해준 최상위 부모 컴포넌트만 props 변경 가능
: property 에 문자열을 전달할 때는 큰따옴표(" "), 문자열 외의 값 전달할 때는 중괄호({ })

5-6. State

: 컴포넌트의 상태를 나타냄
: Props 와 반대로 변할 수 있음 = 동적인 데이터를 다룰 때 사용
( ex. 리스트에서 선택된 값, 체크박스에서 체크된 값 등 )
: state 는 클래스형 컴포넌트에서만 사용 가능

5-7. 가상 돔 (Virtual DOM)

: DOM 업데이트를 추상화 시켜 놓은 것
: 브라우저에서 html 을 열게 되면 DOM 을 만들게 된다.
--> html 코드의 특정 부분이 변경되면 전체 DOM 을 새롭게 만들게 되어 매우 비효율적
==> 이를 개선하기 위해 리액트는 가상 DOM 을 만들어 진짜 DOM 과 비교함
==> 그리고 변경된 부분만 진짜 DOM 에 반영하는 방식으로 작업 수행
: Vue, React 에서 사용

6. 실전 프로젝트 기간의 기술적인 어려움이 있었는지,
   그 어려움을 어떻게 해결하고 그 결과는 어땠는지 말씀해주세요.
   : 정말 많이 부딪혔는데, 그 중에서 props 가 제일 어려웠다..
   예제를 풀어보고 구글링도 해보고 자문을 얻어가면서 props 를 사용해서 구현을 했지만,
   너무 번거롭고 복잡해서 Recoil 을 사용하여 데이터를 전면 교체했다.

7. 최근 공부했던 주제 중에 가장 자신있게 설명할수 있는 것을 말씀해주세요.
   :

8-1. 비동기 처리 방식 ?

: 자바스크립트는 싱글 스레드 프로그래밍언어기 때문에 비동기 처리가 필수적

: 비동기 처리는 그 결과가 언제 반환될지 알 수 없기 때문에 동기식으로 처리하는 기법들 필요

--> setTimeout, callback, promise

--> 세 가지 모두 비동기 코드를 동기식으로 작성하는 기법들, but 단점들 있음
==> async 와 await 는 이런 문제들을 해결함과 동시에 사용법도 훨씬 단순해짐

8-2. async, await ?

: 비동기 처리를 동기식으로 처리하는 효율적인 기법

: function 앞에 async 만 붙이면 --> 자동 Promise 객체로 인식
비동기로 처리되는 부분 앞에 await 붙여주면 --> return 값 = resolve( ) 값
==> async 가 붙은 함수는 promise 를 반환하고, promise 가 아닌 것은 promise 로 감싸 반환
==> await 키워드가 만나면 promise 가 처리(settled)될 때까지 기다린다.

: promise 가 처리 완료되어 resolve(값) 되면 "값만 따로 추출해서 리턴" 한다.

: await 는 promise.then 보다 좀 더 가독성 좋게 promise 의 result 값을 얻을 수 있도록 해주는 문법

==> async / await 가 Promise 를 완벽히 대체하는 것은 아님 !

==> 비동기는 Promise 객체로 처리하고,

asynce / await 는 비동기를 동기식으로 처리하는 기법 !

==> 기존에는 Promise 에 직접 .then( ) 을 통해 동기 처리를 했지만,
await 를 사용하면 바로 동기 처리가 되기 때문 !