1. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요 const 키워드는 변수에 할당된 값을 변경할 수 없게 만듭니다. 하지만 배열이나 객체에 요소나 속성을 추가하는 것은 해당 변수에 새로운 값을 할당하는 것이 아니라, 변수가 참조하는 메모리 영역에서 값이 변경되는 것입니다. 이러한 경우에는 const로 선언된 배열이나 객체도 요소나 속성을 추가할 수 있습니다. ex) 배열에 요소 추가 const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] 위 예제에서 const로 선언된 arr 변수는 변경할 수 없습니다. 하지만 push 메서드를 사용하여 배열의 요소를 추가할 수 있습니다. 이는 push 메서드가 배열 자체를 변경하기 ..
1. 브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, session storage, cookie) 브라우저 저장소는 클라이언트 측에서 데이터를 저장하기 위한 방법. 1. 쿠키(Cookie) 쿠키는 이름, 값, 만료일 및 경로 정보와 같은 작은 문자열 데이터를 저장하는 데 사용됩니다. 쿠키는 서버에서 생성하고 브라우저에 저장되며, 브라우저에서 요청 시 서버로 전송됩니다. 쿠키는 일반적으로 인증, 세션 관리 및 개인화된 사용자 경험에 사용됩니다. 2. 로컬 스토리지(Local Storage) 로컬 스토리지는 쿠키와 달리 서버와 통신하지 않고 브라우저에 데이터를 저장합니다. 로컬 스토리지는 브라우저에서 생성되며, 영구적으로 데이터를 저장합니다. 로컬 스토리지는 데이터의 이름과 값을 저..
1. position 을 어떻게 사용하는지 알려주세요. "position"은 HTML과 CSS를 사용하여 요소(element)를 웹 페이지 상에서 어떤 위치에 표시할지를 결정하는 속성입니다. 요소를 상대적으로(relative), 절대적으로(absolute), 고정(fixed)하거나, 그리드(grid)나 플렉스(flex) 레이아웃과 같은 다른 레이아웃 기능을 사용하여 배치할 때도 사용됩니다. relative : 요소의 원래 위치를 기준으로 위치를 조정할 때 사용됩니다. 이 때 top, bottom, left, right 속성을 사용하여 상대적으로 이동할 위치를 지정합니다. absolute : 요소를 가장 가까운 부모 요소나, 부모 요소가 없을 경우 body 요소를 기준으로 위치를 조정할 때 사용됩니다. 이..
1. 프레임워크와 라이브러리 차이점에 대해 설명해주세요. 프로그래밍에서 프레임워크와 라이브러리는 비슷한 기능을 제공하지만, 다음과 같은 차이점이 있습니다. 제어의 흐름: 프레임워크는 제어의 흐름을 개발자에게 강제합니다. 즉, 개발자는 프레임워크에서 정의한 규칙에 따라 코드를 작성해야 합니다. 반면에 라이브러리는 개발자가 필요에 따라 라이브러리의 함수를 호출하며, 제어의 흐름은 개발자가 결정합니다. 추상화 수준: 프레임워크는 상위 수준의 추상화를 제공합니다. 즉, 개발자가 프레임워크를 사용하면서 자세한 내용은 숨겨지고 추상화된 인터페이스만 제공됩니다. 반면에 라이브러리는 상대적으로 하위 수준의 추상화를 제공합니다. 개발자는 라이브러리에서 제공하는 함수를 호출하면서 상세한 구현 내용을 알고 있어야 합니다. ..
1. Hoisting 이란? TDZ란? Hoisting은 JavaScript에서 변수와 함수 선언을 위쪽으로 끌어올리는 것을 의미합니다. 변수와 함수 선언이 스코프 내에서 정의된 위치와는 상관없이 스코프의 최상단으로 끌어올려지며, 이후에 선언된 코드에서도 해당 변수와 함수를 참조할 수 있습니다. 이는 var로 선언된 변수와 함수 선언문(function declaration)에 해당합니다. 반면 let과 const로 선언된 변수, 함수 표현식(function expression)은 hoisting이 발생하지 않습니다. console.log(x); // undefined var x = 5; 변수 x가 선언되기 이전에 console.log(x)를 실행하면 undefined가 출력됩니다. 이는 var x가 ho..
1. 웹페이지가 브라우저에 랜더링 되는 과정? 웹페이지가 브라우저에 렌더링 되는 과정은 다음과 같은 단계를 거칩니다. HTML 문서 다운로드: 브라우저는 URL을 입력받고, 해당 URL에서 요청한 HTML 문서를 다운로드합니다. 이 과정에서는 DNS 조회, TCP 연결 등의 작업이 수행됩니다. HTML 파싱: 브라우저는 다운로드한 HTML 문서를 파싱 하여 DOM(Document Object Model) 트리를 생성합니다. DOM은 HTML 문서의 계층 구조를 나타내며, 노드와 엘리먼트 등의 정보를 포함합니다. CSS 다운로드: 브라우저는 HTML 문서에 포함된 CSS 파일을 다운로드합니다. CSS는 웹페이지의 레이아웃과 스타일을 정의하는 데 사용됩니다. CSS 파싱: 브라우저는 다운로드한 CSS 파일을..
44. Server Side Rendering, Client Side Rendering, Static Site Generation 의 장단점을 설명해주실 수 있을까요? SSR은 서버에서 뷰 구성에 필요한 전체 HTML을 요청을 받은 즉시 생성해서 반환합니다. 초기에 모든 페이지를 완성해서 보내기 때문에 검색엔진 최적화(SEO)에 유리합니다. 초기 페이지 로드 시간이 빠릅니다. 그러나 페이지 이동시마다 서버에서 페이지를 생성하는데 시간이 걸리기 때문에 TTFB(Time To FIrst Byte)가 느립니다. CSR은 서버가 아닌 클라이언트 브라우저에서 어플리케이션을 렌더링합니다. 후속페이지의 로드 시간이 더 빠르지만 초기 페이지로드 시간이 SSR에 비해 느립니다. 또한 SSR과 달리 클라이언트 단에서 렌더..
29. TCP 3 way handshake란 무엇인지 설명해주실 수 있을까요? TCP/IP 프로토콜에서 연결 설정을 위해 사용하는 세 단계의 과정으로 클라이언트와 서버 간의 데이터 통신을 시작하기 위해 필요함. 1. SYN(Synchronize Sequence Numbers): 클라이언트는 서버에게 SYN 패킷을 보내고, 클라이언트가 사용할 초기 시퀀스 번호를 전송함. 이 패킷은 클라이언트에서 서버로 전송됨. 2.SYN-ACK(Synchronize-Acknowledgment): 서버는 클라이언트의 SYN 패킷을 수신하면, SYN-ACK 패킷을 클라이언트로 전송함. 이 패킷은 서버에서 클라이언트로 전송됨. 이 패킷에는 서버의 초기 시퀀스 번호와 클라이언트가 보낸 시퀀스 번호에 1을 더한 값이 포함됨. 3...
17. JSX란 무엇인가요? JSX는 Javascript에 XML을 추가하여 확장한 문법. 리액트로 프로젝트를 개발할 때 사용됨(공식적인 자바스크립트 문법은 아님) 브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환됨. 특징 : 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함. 자바스크립트에서 HTML 을 쓰듯 사용하기 때문에 가독성이 높고 작성하기 쉬움. 규칙 : 1. 반드시 부모 요소 하나가 감싸는 형태여야 함 2. 자바스크립트 표현식은 { }안에 작성 3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용 4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 ex) class -> className..
11. Arrow Function 이란 무엇인지 설명해주실 수 있을까요? 화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용. 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식. 함수는 이 표현식을 평가하고, 평가 결과를 반환함. 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성될 때. 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 함. 화살표 함수에서의 this는 상위 스코프의 this를 의미하며(Lexical this), 함수가 호출될 때가 아닌 함수가 정의될 때 이미 결정된다. this가 필요 없는 일반 함수에서 또는 내부 함수 등에서 bind(this)의 대체할 때(외부의 this를 주입해야 하..