나의 개발일지

Get, Post의 차이 GET 데이터 조회를 목적으로 하며, HTTP header URL에 Query String 형태로 데이터를 전송하는 방식 url에 데이터를 담기에 길이가 제한적이며 보안에 취약하다. POST 데이터 추가 목적으로 사용되며 HTTP Body에 데이터를 추가하여 전송하는 방식 GET 방식보다 데이터 크기를 크게 할 수 있으며 보안적으로 더 나음 속도가 GET 방식보다 비교적 느림 웹 동작 방식 사용자는 브라우저에 URL을 입력 브라우저는 DNS를 통해 서버의 진짜 주소를 찾음 HTTP 프로토콜을 사용해 HTTP 요청 메세지 생성 TCP / IP 연결을 통해 HTTP 요청이 서버로 전송 서버는 HTTP 프로토콜을 활용해 HTTP 응답 메세지 생성 TCP / IP 연결을 통해 요청한 컴..

호이스팅 (Hoisting) hoisting 의 사전적 의미 : 끌어 올리기, 들어올려 나르기. 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상 단순하게 설명하자면 단어 뜻 처럼 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 '끌어올려~~'진 듯한 현상이다. 포인트는 물리적으로 '끌어올려'지는 것이 아니라 자바스크립트 엔진이 먼저 전체 코드를 한 번 스캔하고 실행컨텍스트에 미리 기록해 놓기 때문에 이런 현상이 발생하는 것이다. var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그 사이의 시간을 TDZ..

도메인(Domain)과 네임서버, DNS 도메인이란 인터넷 주소를 언급할 때 흔히 도네임 또는 도메임 이름이라고 한다. 도메인은 웹사이트의 위치를 나타낸다. 예를 들어 도메인 이름 "google.com"은 IP 주소 "142.250.196.142"를 가리킨다. 도메인과 URL의 차이점 웹 주소라고 하는 URL에는 사이트 도메인 이름과 전송 프로토콜 및 경로 등의 정보가 포함되어 있다. 네임서버란 해당 도메인에 매핑되는 ip주소로 변환해주는 것 ex) abcd.com => 123.123.123.123 DNS란 Domain Name System의 약자로 도메인 이름을 IP 주소로 바꿔주는 역할을 하는 시스템 계층이다. 일종의 전화번호부 같은 역할이다. 이로 인해 우리는 숫자로 되어 있는 IP 주소를 기억하지..

TCP와 UDP의 차이점 연결 지향성: TCP(Transmission Control Protocol): 연결 지향적인 프로토콜로, 통신하기 전에 연결을 설정하고, 통신이 끝나면 연결을 해제한다. 이는 데이터를 신뢰성 있게 전송하고 수신 확인을 통해 데이터 손실을 방지한다. UDP(User Datagram Protocol): 비연결 지향적인 프로토콜로, 데이터를 전송하기 전에 연결을 설정하지 않는다. 따라서 속도가 빠르지만, 데이터 전송 중 손실이 발생할 수 있다. 신뢰성: TCP: 데이터 전송 중에 손실이나 오류가 발생하면 재전송을 통해 신뢰성 있는 데이터 전송을 보장한다. UDP: 데이터 전송 중에 오류가 발생하더라도 재전송을 하지 않는다. 따라서 손실이나 오류가 발생할 수 있다. 헤더 크기: TCP:..

useRef에 대해 설명해주세요. useRef는 React에서 참조(ref)를 생성하고 관리하기 위한 React Hook중 하나입니다. useRef를 사용하면 컴포넌트 내부에서 생성한 변수나 DOM 요소에 대한 참조를 생성하고, 이를 다른 곳에서 사용할 수 있습니다. useRef는 DOM 요소에 직접 접근할 때 사용할 수도 있지만, 그 외에도 여러 상황에서 유용합니다. useRef를 사용하여 생성한 참조는 컴포넌트가 리렌더링될 때마다 새로 생성되지 않으며, 기존에 생성한 참조를 그대로 유지합니다. useRef를 사용하는 상황으로는 다음과 같은 것들이 있습니다. 1) DOM 요소에 직접 접근해야 하는 경우 예를 들어, 특정 DOM 요소의 크기나 위치를 측정하거나, 입력 폼의 값을 가져오거나, 스크롤 위치를..

웹폰트를 사용할 때 고려해야 할 점을 말씀해주세요. WOFF2 : 용량 적음 Pre-Loader : 미리 불러오기 제일 좋은 방법은 OS 시스템 폰트 사용하기 리액트 프래그먼트에 대해 아시나요? React.Fragment는 React의 컴포넌트 구조에서 매우 중요한 역할을 합니다. React에서는 컴포넌트를 반환할 때, 그 컴포넌트는 반드시 하나의 부모 요소로 감싸져야 합니다. 하지만 때로는 불필요한 div나 다른 HTML 요소로 감싸는 것이 원치 않을 때가 있습니다. 이럴 때 React.Fragment를 사용하면 됩니다. React.Fragment는 그룹화된 자식 요소들을 반환할 수 있게 해주지만, 실제 DOM에는 별도의 노드로 나타나지 않습니다. 따라서 불필요한 마크업 없이 여러 요소를 렌더링할 수 ..

공통 질문 1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요? DOM(Document Object Model)은 웹페이지의 구성요소들을 트리구조로 표현한 것이며 가상 돔은 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 가상DOM을 이용하면, 실제 DOM을 조작하는 것보다 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가볍고 효율적입니다. 또한 가상DOM에서 batchupdate가 가능해졌는데, 예를 들어 인스타그램의 좋아요를 누를 때, 실제 DOM에서는 좋아요 하나를 바꾸기 위해 여러 개의 엘리먼트가 변경되어 여러 번의 갱신이 필요하지만, 가상 DOM에서는 모든 변경을 한 번에 모아서 한 번만 갱신하기 때문에 성능이 훨씬 향상될 것입니다. 2...

1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 리액트는 SPA로서, JS로 DOM을 직접 조작하는 대신 가상 DOM(Virtual DOM) 방식을 사용하여 화면 요소를 제어합니다. 이로 인해 직접 변수를 변경하는 것이 아니라 state를 통해 데이터를 관리해야만 변경 사항이 적용될 수 있습니다. 상태 관리는 주로 두 가지 방식으로 구분됩니다. 첫 번째, 지역적으로 상태 관리를 합니다. 해당 컴포넌트에서만 사용되는 state라면 컴포넌트 내에서 선언하여 관리합니다. 두 번째로는 전역적으로 상태관리를 합니다. 여러 컴포넌트에서 공유되는 상태는 전역 상태 관리 라이브러리인 redux를 사용하여 관리하고 서버로 데이터를 받았을 때는 tanstack-query의 queryKey를 통..