컨플릭트를두려워하지말자

1. HTTPS에대해서 

인터넷에서 브라우저와 서버간에 안전하게 데이터를 전송하기위한 프로토콜. HTTP에 SSL/TLS 프로토콜을 결합하여 데이터를 암호화하고 전송 중 데이터의 무결성과 기밀성을 보장한다. 세션 키를 통해 데이터를 암호화하고 복호화 함. 

(** HTTP와의 차이점에대해 묻는 질문이 아님을 기억하기!) 

장점: 보안성, 무결성, 인증,SEO향상. 

도입방법: SSL/TLS인증서 구매 및 설치, 웹 서버 설정. 

SSL/TLS핸드셰이크란? 클라이언트(브라우저)와 서버 간에 안전한 연결을 설정하는 초기단계. 

2. React에서 State와 Props의 차이는? 

props는 부모가 자식컴포넌트에게 전달하는 읽기 전용 데이터. state는 컴포넌트 내부데서 관리되는 동적 데이터. 

state는 상태 변경이 되고, 변경될 때마다 리랜더링이 일어나지만 props는 변경이 불가능함. 

3.Flexbox와 Grid의 차이? (css관련. 웹 퍼블리셔 예상 질문에도 나올듯)

flexbox(display:flex, flex-direction, flex-wrap,justify-content,align-items)는 1차원,

grid(display:grid, grid-column-gap, grid-row-gap,grid-gap, 행과 열 배치가 가능)는 2차원 레이아웃 시스템. 

4. React의 상태관리를 위한 방법들 

-useState등 자체 상태관리 속성 사용

-Context Api로 전역역적으로 관리

-Redux, Mobx,Recoil 등 전역 상태 라이브러리 사용 

5. async/await에 대해 (비동기 함수에 대해)

javascript에서 비동기 함수를 간단하게 작성할 수 있는 기능.

async : 함수를 비동기 함수로 선언. 프로미스를 반환하고 예외 발생시 예외처리(try/catch) 가능 

await : 비동기 함수 내에서만 사용 가능. 프로미스가 해결될 때까지 실행을 중지하고, 해결이 되면 결과 반환. promise의 than 역할.  

만약에 여러 비동기작업을 병렬로 실행해서 모든 작업이 될때까지 기다리고싶으면 Promise.all을 사용해야함. 

6. React 클래스형과 함수형의 차이

클래스에서는 this를 사용하고, 메서드 오버라이드를 통해 작업을 수행함

함수형에선 저 둘을 사용하지 않고 useState 훅을 사용하여 상태를 관리함. 화살표 함수를 사용. 

함수형이 좀 더 코드 이해가 쉽다 

7. SPA(single page application)의 장단점

장점: 초기 로딩 후에는 페이지간의 전환이 빠르고 서버 요청이 줄어들어 사용자경험이 향상된다. 

클라이언트측 라우팅으로 상태관리가 편리하다. (대시보드나 분석 툴, 커머스 사이트, 소셜네트워크 서비스 ,채팅 등 빠른 페이지 전환과 상호작용이 필요한 서비스에 용이, 블로그 등 부드러운 네비게이션을 필요로 하는 사이트에도 좋음)

단점: 초기 로딩 속도가 느림. SEO(검색 엔진 최적화)최적화가 어렵다. 큰 애플리케이션의 경우 메모리사용량이 많아질 수 있음. 

8. SSR의 장단점 

장점 : SEO최적화(서버에서 완전한 html을 제공해서 크롤러가 쉽게 콘텐츠를 인덱싱함), 초기 로딩속도가 빠르다, 저사양 디바이스를 지원. 정적 사이트(블로그,문서 사이트 등 주기적으로 업데이트되는)나 미리보기 기능 생성에 유리함. 초기에 많은데이터를 가져와야 하는 경우 미리 페이지를 생성하므로 유리. (next.js-react , nuxt.js-vue)

단점: 서버 부하 증가, 복잡한 설정 및 유지보수,모든 요청에대해 서버에서 html을 생성하므로 네트워크 지연 발생가능, 실시간 데이터 업데이트가 어려움.

9. Reac 16.8버전 이후의 주요변화 

훅 도입으로 클래스에서만 가능했던 상태관리와 생명주기 메소드를 함수형에서도 사용 가능하게 됨.

useState,useEffect,useContext(컴포넌트 트리 전체에 데이터를 쉽게 전달, props drilling 방지 ), useCallback(의존성 배열이 변경되지 않는 한 동일한 함수를 반환함, 컴포넌트가 불필요하게 다시 랜더링된는 것을 방지.),useMemo,useReducer 등.. 

이로 인해 코드가 더 간결해짐. 

10. 브라우저의 랜더링 과정에 대해 

브라우저가 html,css,javascript 파일을 가져와 랜더링함. html 파싱을 통해 DOM트리 생성, css파싱을 통해 cssom 트리 생성. javascript는 DOM 및 CSSOM에 접근하여 조작. 

11. HTTP 프로토콜의 주요 메소드에 대해 

GET,POST,PUT,DELETE 에대한 설명 ...

12. CSS모듈과 SCSS의 차이에 대해 

css는 클래스 이름이 로컬스코프로 제한되어 컴포넌트 간 스타일 충돌을 방지함. scss는 sass의 확장으로 변수,중첩,믹스인 기능을 제공하여 더 복잡하고 유지보수 가능한 스타일을 작성가능케 함. css는 컴포넌트 단위로 관리하는데, scss는 복잡한 스타일을 작성하는데 유리 .

    - scss 에서 믹스인과 함수의 차이점 

           믹스인은 css속성을 재사용할 수 있게 해줌. @include를 통해 사용. 함수는 값을 반환하는 로직을 포함할 수 있어              주로 계산된 값을 반환하는데 사용됨.

13. TCP와 UDP의 차이 

TCP: 신뢰성 보장. 정확하고 순서에 맞는 데이터 전달을 위해 여러가지 확인 절차를 거침. ex)페이지 로딩,파일 전송 

UDP: 연속성(실시간 서비스) 보장. 데이터를 보내기만하고 확인 절차는 x. ex) 게임,스트리밍,화상통화 

14. type과 interface의 차이

interface는 객체에만 사용 가능. type은 객체가 아니여도 모든 유형의 타입에 정의 가능. 

interface는 상속 가능!  type도 &를 통해 비슷하게 사용 가능하지만 성능적으로 떨어짐. 

그리고 여러번 선언 되어도 나중에 선언한 것으로 대체되거나 오류가 발생하지않고, 모두 병합된다!  

앞으로 더 추가예정...