프론트 엔드 면접 관련 공부

next.js

https://dane-itview.tistory.com/entry/Nextjs-datafetch-method

Next.js 이 4가지는 뭐가 다를까요? 🤔 getInitialProps / getServerSideProps / getStaticPaths / getStaticProps

https://dane-itview.tistory.com/entry/SSR-vs-SSG-Nextjs

SSR vs SSG: Next.js의 렌더링 대결! 어떤 것을 택할까?

next.js의 장단점은 무엇일까요?

리코일

메모리이슈에 대해서 알고 있나요?

리코일 메모리 이슈가 있지만 개선중이다. 0.7.6에서 해결된 패치가 있다.

리코일 정식 버전이 아니다 0.7.7 이 최신 버전

상태 관리

mobx

recoil

redux

zustand

react-query

리덕스

특징 및 장단점?

mobx

특징 및 장단점?

1. 사용이 간단한다. 리덕스 처럼 보일러 플레이트가 없음.
2. 관련 코드 observable computed action class에 한곳에서 관리 가능.
3. Reactive Programming

엔티티와 동일한 class를 작성하고 @데코레이터를 사용하는 패턴을 많이 사용했다.

자바랑 비슷하다는 느낌을 받았음.

 

디자인 패턴은 어때?

웹 접근성

장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것

1. 시각
2. 이동성
3. 청각
4. 인지
5. 시멘틱한 마크업
6. 대체 텍스트 alt image,video 태그 - 스크린 리더 사용자
7. 디자인 색상 대비 적당한 글꼴 크기 aria태그

웹표준

브라우저나 기기에 상관없이 서로 호환되도록 제시된 웹 제작 방법

GZIP 설정

• 자바 스프링 부트 설정 webconfg.java addResourceHandler
• compression-webpack-plugin

모노레포

모놀리식

코드 스플릿 설정

테스트 전략

https://dane-itview.tistory.com/entry/test-FIRST

test FIRST 원칙: 테스트에 있어서의 중요한 지침

프로토타입

프로토타입 상속 구현하는 방법

function SuperClass (name) {
  this.name = name;
}
SuperClass.prototype.say = function () {
  console.log(`I am ${this.name}`);
}

function SubClass (name) {
  SuperClass.call(this, name);
}
SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.constructor = SubClass;
SubClass.prototype.run = function () {
  console.log(`${this.name} is running`);
}

cdn

대용량이나 잦은 요청이 있는 컨텐츠를 캐시서버에 분산 배치해서 응답속도를 개선하거나 다운로드 속도를 개선하는 기술

이미지 요청이 오면 DNS가 가까운 CDN 서버로 요청을 보내고 캐시된 이미지를 응답합니다.

캐시된 컨텐츠가 없거나 오래되면 원본 컨텐츠에서 받아와서 업데이트 합니다.

웹프론트 보안

• 유저 입력 받는 값 innerHtml 사용하지 말기

SOP same origin policy

다른 origin 리소스 사용 제한

• 출처(origin)
  • protocol + host + port
• A사이트에서 내 정보를 이용해 B사이트의 정보를 조작하는 것을 방지할수 있다.

CORS

• 다른 출처 리소스 사용 가능
• simple request
• prefilght request
• credential request

OWASP top 10

• injection
• access control

session

발급번호 DB 에 저장

JWP

정보를 많이 저장하고 있음

서버부담 낮아즘

json 정보를 인코딩

단점

알고리즘 none 공격

디코딩이 쉽다

민감한 정보 빼야됌

최소한 정보만해야됌

시크릿키 그대로 쓰면 안돼

생성용키 검증용키 따로 해

jwt 탈취

 

 

반응형

 

자바스크립트

실행 컨텍스트

코드를 실행하는데 필요한 환경을 제공하는 객체

선언된 위치에 따라서 결정된다

호이스팅

변수 선언 라인보다 위에서 변수를 참조할수 있는 현상

엔진이 코드 스캔

변수를 먼저 기록하기 때문

• 콜스택 내부에 실행 컨텍스트가 쌓인다

Lexical Environment 정적 환경

Environment Record + Outer Environment Reference

Environment Record 환경레코드

Outer Environment Reference 외부 환경 참조

이전 / 바깥 Lexical Environment를 가리킴

자바스크립트 엔진 동작 순서

• 생성 단계
• 실행 단계

변수 섀도잉

동일한 식별자로 인해 상위 스코프에서 선언된 식별자가 가려지는 현상

식별자 결정

스코프 체인

스코프들의 연결 리스트

식별자를 결정하기위해 찾는 과정을 스코프 체이닝

스코프

정적 스코프 - 선언된 환경에 따라서 스코프가 정해진다

클로저

중첩된 함수일때 내부 함수에서 외부함수의 변수에 접근할수 있는 것을 클로저라고 합니다.

자바스크립트 정적 스코프 이기 때문에 생깁니다. 실행환경이 아니라 선언된 환경에 따라서 스코프가 정해지는 것을 말합니다.

yarn pnp 장단점

• 장점
  • 브랜치 이동해도 intsall 필요없다
  • 개발자간 다른 환경 줄일수 있다.
  • install 시간을 줄인다
  • node_modules 용량이 줄어든다
• 단점
  • pnp 적용안되는 모듈이 있다
  • node_modules가 설치되 버린다.

HTTP2

request와 response로 이루어지던 것이

stream으로 이루어져서 병렬로 처리가 가능하다

바이너리 프레임으로 인코딩

서버응답코드

HTTP 상태 코드 - HTTP | MDN

100번대 정보응답

200번대 성공

300번대 리다이렉션

400 클라이언트 에러

500 서버 에러

기술 외 

가장 만족하는 프로젝트는?

동료와 트러블 갈등이 생기면 어떻게 해?

개발자로서의 목표

퍼블리셔와 프론트엔드 개발의 차이?

모던 프론트엔드 개발의 장단점

장점

사용자 경험 향상

생산성 향상

재사용성 향상

단점

학습 곡선의 증가

브라우저 호환성

복잡성의 증가

요즘 관심있는 기술?