<aside> 📢

개발자 취업을 위해 필요한 세 번째 step! [CS면접, 기술면접 script 작성]입니다. 문장 완성에 부담 느끼지 않으셔도 됩니다. [개념 정리, 중요 키워드] 등 차근차근 작성 부탁드립니다!

</aside>

[FE] CS면접 답변 script 작성하기

<aside> ✅ 단방향 바인딩, 양방향 바인딩의 차이점에 대해 설명해주세요. 각각 사용하는 프레임워크는 뭐가 있나요?

-데이터 바인딩 화면상에 보여지는 데이터와 브라우저 메모리에 있는 데이터를 묶어서 서로 간의 데이터를 동기화하는 것을 의미함.

-단방향 바인딩 JavaScript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미함. 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조입니다. 대표적으로 React가 있습니다.

-양방향 바인딩 JavaScript(Model)에서 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서 되어서 둘 중 하나만 변경되어도 함께 변경되는것을 의미합니다. 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조입니다. 대표적으로 Vue.js, Angular가 있습니다.

출처 https://adjh54.tistory.com/49#google_vignette https://oliviakim.tistory.com/91

</aside>

<aside> ✅ 상태관리 도구를 사용했나요? 사용하신 상태관리 도구에 대해서 자세히 설명해주세요.

전역상태관리를 위해 Redux와 Redux Toolkit을 사용해봤습니다. Redux는 단방향 모델링으로 구성되었고 action기록이 남아 디버깅에 유리하고, 순수 함수를 사용하기 때문에 상태를 예측 가능하게 만든다는 장점이 있습니다. 하지만 작은 기능을 구현하려해도 기본적으로 파일 여러 개를 만들어야하고, 필수로 작성해야 할 코드량이 많습니다. Redux toolkit은 이런 문제점을 보완한 개발도구입니다. Slice를 사용하면 action value, action creator, reducer를 각각 만들 필요 없이 한번에 만들 수 있습니다.

출처 https://velog.io/@wonder1247/리덕스-툴킷Redux-Toolkit https://amyhyemi.tistory.com/103

</aside>

<aside> ✅ JS 의 원시타입, 참조타입에 대해 설명해주세요.

원시타입으로는 number, bigint, string, boolean, null, undefined, symbol가 있다. 공통점으로는 object가 아니며, 따로 메서드를 가지지 않는다. 참조타입으로는 array, function, object, date등 있다. 원시타입과는 다르게 동적이고 대부분 객체로 치환된다. 그렇기에 메서드를 가진다. 또한 변수를 선언 후 참조 타입의 데이터를 할당하려 할때, 값은 해당 변수에 직접적으로 할당되지 않는다. 메모리에 저장되어 있는 참조타입 값의 주소가 저장된다.

출처 https://hwani.dev/js-primitive-reference-types/

</aside>

<aside> ✅ Babel, Webpack 라이브러리의 역할에 대해 설명해주세요.

Babel이란 자바스크립트 컴파일러이다. JavaScript에 컴파일러가 필요한 이유는 모든 브라우저가 ES6를 지원하지 않기 때문에 ES5로 변환하는 작업이 필요하다. 또한 Babel은 JSX 문법을 변환한다. JSX는 JavaScript 코드이지만 브라우저에서 단독으로 실행될 수 없기 때문에 변환이 필요합니다. Wepback은 정적 모듈 번들러이다. 파일을 컴파일 할 때, 여러 모듈들이 파일을 읽어오는데 시간이 오래 걸리고 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.

출처 https://velog.io/@suyeon9456/Babel https://codermun-log.tistory.com/436

</aside>

<aside> ✅ React 사용하여 개발한 웹페이지에서 페이지를 이동할 때 마다 속도가 느려 최적화를 진행하려고 합니다. 어떤 방법들이 있을까요?

이미지 최적화와 렌더링 최적화, 데이터 최적화가 있습니다. 불필요한 이미지 용량을 줄인다. React.memo를 사용하거나 useCallback등을 사용하여 성능을 향상한다. 불필요한 API호출을 피하고, 필요한 데이터만 요청하기.

</aside>

[추가] 프로젝트에서 [맡은 역할, 가장 어려웠던 기술적 문제, 해결한 경험] 정리 및 설명하기

| 역할 | - 회의록 작성 및 공유

• 기획 및 코드리뷰 참여 | - CloudFront 배포 ( 캐싱 )
• 로그인 페이지와 Task Mangement 페이지 저장 | | --- | --- | --- | | 기술 구현 | 1. | 2. | | | 3. | 4. | | 해결 과정 Good case | 1. | 2. | | | | | | 해결 과정 Sad case (실수, 충돌) | 1. 첫 번째 방법 만족감 낮음
• 원인 분석: | 2. 다른 방법 시도: 어떤 문제점 해결을 위해 선택했는가 ** 1번 방법 vs 2번 방법 비교/ 알게된 점 | | | | | | 결과 | 1. ~기능 개선 수치 확인 | 2. 90% 만족 / 10% 아쉬움 | | | 3. | 4. | | | | | | 차후 계획 | 1. ~기능 리팩토링
• 현 수준보다 ~ 낮출 수 있다. 높일 수 있다. | 2. 10% 아쉬움 해결하기 위해, | | | | | | 정확히 학습한 내용 (성과) | 1. QueryDSL | | | | | | | 멘토, 팀원 긍정 피드백 | 1. -관련 시도 방법 좋았다(멘토) | 2. -관련해 개념 설명해줘서 고마웠다(팀원 1) | | | | | | | | |

<aside> ✅ 1:1 컨설팅 시간은 꼭 지켜주셔야 합니다. 나를 위한, 타인과 함께 하는 시간입니다. 감사합니다.

</aside>

과제 제출

<aside> 🚨 당일 17시50분 이전 1차 제출 필수 !!

1차 제출 마치신 이후에 추가적인 수정을 진행 해주시면 되겠습니다!

</aside>

<aside> 💡 제출 경로 안내

작성한 이력서 페이지 우측 상단의 공유 → 게시 버튼을 눌러 웹에서 볼 수 있도록 합니다. 웹 링크를 복사하여 아래 임베디드 되어있는 제출 경로를 따라 링크를 제출 합니다.

아래 임베디드 제출 경로가 보이지 않을 경우 제출 링크로 들어가셔서 진행 바랍니다.

(노션 앱에서는 임베디드 경로가 잘 연결되지 않을 수 있습니다.)

</aside>

https://urclass.codestates.com/content/397e14a6-395e-44e9-b449-94107c3787cb?playlist=4865