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

1. inline과 inline block , block의 차이 

2. promise와 async/await의 차이 

에러처리 방식이 다르다

promise: .catch()

async/await : try-catch() 사용 

async/await이 Promise를 좀 더 쉽게 작성 할 수 있게 한 버전. 

promise는 비동기 처리를 위해 .then() .catch() .finally() 등 체인형태로 사용되어 

비동기 작업이 늘어나면 코드가 복잡해진다. 비동기작업 병렬실행 가능. 

둘 다 리턴값은 Promise객체이다. 

그러나 async/await은 비동기코드를 마치 동기코드처럼 작성할 수 있어 가독성이 높아진다. 

3. 자바스크립트 class 에서의 this의미 

>클래스의 생성된 인스턴스를 가리킴. 

4. let var const 의 차이

var가 가장 오래됨. ES5버전 이전에는 변수선언시 var만 사용했음.  변수가 선언된 함수 내에서만 유효하다.

전역변수로 쓰려면 함수 외부에서 선언해야. 

그러나 if와 for와 같은 블록스코프는 인식하지않음 블록(if or for) 내부에서 선언한 함수는 외부에서도 접근 가능하다. 

같은 스코프 내에서 재선언 가능하다. 

let, const 는 ES6부터 도입되었다.  var의 문제점을 해결하기위해 도입됨. 

둘 다 블록 스코프를 가지고, 선언된 블록 {} 안에서만 유효하다. 

같은 스코프 안에서 재선언 하는 것이 불가능하다. 

const는 상수, let은 변수

let은 재할당 가능, 그러나 const는 재할당 불가능. 그러나 const로 선언된 객체나 배열같은 참조형 데이터의 요소는 변경가능.  

1. 배열과 해시의 차이 

배열은 인덱스를 통해 데이터에 접근, 해시는 키를 통해 접근

배열은 순차적으로 처리해야 하는 경우에 사용하는 것이 좋고, 해시는 키 기반으로 검색을 해야 할 때 유용하다. 

eg) 리스트 처리 > 배열 , db 검색 or 캐싱 > 해시 

2. http와 https의 차이 

http는 데이터 암호화 x https는 ssl/tls 핸드셰이크를 추가해서 데이터를 암호화함. 서버-클라이언트간의 안전한 통신 보장. 데이터 무결성 보장. 

seo면에서도 https 페이지가 높은 랭크를 받는다. 

3. 프론트엔드에서 웹 성능 최적화를 위해 할 수 있는 일 

- webpack이나 vite 등의 번들러를 사용한 코드 번들링. > 필요시에만 코드를 로딩함

- 리소스 캐싱 > 브라우저에 캐싱을 설정하면 사용자 재방문시 리소스를 재사용할 수 있어 로딩이 빨라짐(react-query)

-비동기 처리 > js의 비동기 처리 로직을 사용해서 ui가 멈추지 않고 반응하도록 함 

-지연 로딩 > 이미지나 비디오같은 용량이 큰 것들은 필요할때만 로드해서 로딩속도 줄이기 

+ sql과 nosql차이... 

+브라우저 랜더링 과정... 

나중에 더  써야지... 

마이크로프론트엔드란

각각의 독립적인 팀이 FE모듈을 개발하고, 이를 조합해서 하나의 사용자경험을 제공하는 방식. 

Webpack이 필수적임 ~.~ 

Webpack5 부터 포함되는 Module Federation 플러그인을 사용해서 리모트 모듈을 정의하고, 이를 호스트모듈에서 찾아 쓰도록 한다! 

장점: 

각 팀이 독립적으로 개발하고 배포할 수 있다 (각자의 깃 레포지토리에 업로드 하는 것이 가능함!)

이로인해 다른 모듈과의 의존성 충돌을 줄일 수 있다! 

각 팀이 선호하는 라이브러리나 프레임워크를 사용하는 것이 가능하다 (호스트에서는 리액트,리모트A에선 Angular,B에선 Vue를 사용하는것이 가능)

단점: 

중복  로드가 발생할 수 있음

라이브러리 중복-> 공유 라이브러리(module federation)도구를 사용하여 문제 해결 

네임 스페이스 중복->모듈 번들러(Webpack, Rollup)를 사용해 각 모듈을 독립적으로 번들링 or Web Component사용 or 자바스크림트 IIFE 즉시 호출 함수 표현식을 사용하여 전역변수의 범위를 제한. 

스타일 중복 -> CSS-IN-JS 라이브러리(styled등)를 사용

개발시에는 

리모트 모듈들이 모두 실행된 상태에서 호스트 모듈을 실행해야 정상적으로 작동하고 , 

실제 서버 배포시에는 

각각의 url에 리모트와 호스트가 모두 배포된 상태여야 정상적으로 동작한다. 

공부하면서 알게 된 내용을 조금씩 더 추가할 예정..

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) 게임,스트리밍,화상통화 

앞으로 더 추가예정...