개발일지

호이스팅 ( Hoisting ) JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트( import )의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. 즉 JavaScript 변수가 어떤 의미에서 함수나 문의 최상단으로 "올려지는" (혹은 "끌어올려지는") 것을 말합니다. 하지만, 끌어올려진 변수는 undefined 값을 반환합니다. 그래서 심지어 이 변수를 사용 혹은 참조한 후에 선언 및 초기화하더라도, 여전히 undefined를 반환합니다 이러한 자바스크립트 동작방식에 의해 사용자에게는 var로 선언한 변수, 함수 선언문은 호이스팅에 의해 가장 상단에 끌어올려지고 const나 let으로 선언한 변수 그리고 함수표현식은 참조 에러가..

JavaScript의 시작과 꽃(?)이 아닐까...? 열심히 외웠는데 항상 다시 초기화된다. 이제는 어느정도 개념이 머릿속에 박혀있지만 여전히 말로 풀어내는 게 되질 않아서 최대한 말로 하는 연습을 하기 시작했다. var let const 차이점 간단 포인트 ! 변수 선언, 초기화, 할당 var: 중복 선언, 재할당 모두 가능 ex) var a= 1; var a= 2; 가능 let:중복 선언 불가 재할당 가능 ex) let a= 1 ; a=2; 가능 const:중복 선언, 재할당 모두 불가능 스코프 var : 함수 레벨 스코프 let, const : 블록 레벨 스코프 var는 유연한 변수 선언이 가능하기 때문에 간단한 테스트에는 편리 할 수 있지만, 코드량이 많아 진다면 어디서 사용되고 있는지 파악하기도..

전송계층은 송신자와 수신자를 연결하는 통신서비스를 제공하는 계층으로, 데이터의 전달을 담당합니다. 그리고 데이터를 보내기 위해 사용하는 *프로토콜이 TCP와 UDP입니다. *프로토콜 : 클라이언트와 서버가 정보를 교환할 수 있도록 하는 메시지 형식에 대한 규칙 TCP( Transmission Control Protocol : 전송 제어 프로토콜 )란? 인터넷상에서 데이터를 메세지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜입니다. IP(Internet Protocol)가 인터넷 프로토콜로서 복잡한 인터넷 망 속에서 클라이언트와 서버 간에 통신할 수 있게 IP 주소와 패킷과 같은 규칙을 통해 통신을 하게 하는 것이라면, TCP는 IP 규칙으로만 통신하기에 부족하거나 불안정하던 여러 단점들(패킷 순서..

시작은 니콜라스와 함께 ( 니콜라스 감사해요 !! ) https://www.youtube.com/watch?v=tosLBcAX1vk HTTP는 상태가 없는 (Stateless) 프로토콜이기 때문에 사용자가 웹 브라우저를 통해서 특정 웹사이트에 접속하게 될 경우 어떤 사용자가 접속했는지에 대한 정보를 파악할 수 없다. 따라서 쿠키 또는 세션을 사용하여 사용자를 구분하고 각 사용자에 맞는 정보를 제공한다. Cookie? 쿠키는 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재 대부분의 브라우저가 지원 클라이언트에 저장되기 때문에 보안에 취약하다는 단점이 있음 Session? ..

HTTP( Hyper Text Transfer Protocol )란? HTTP란 인터넷에서 데이터를 주고 받기 위한 프로토콜( 통신 규약 )입니다. 인터넷을 작동시키는 역할을 하며, 웹 서버 및 웹 브라우저 상호 간의 데이터 전송을 위한 전송 계층 프로토콜입니다. 80번 포트를 사용하며 HTTP 서버가 80번 포트에서 요청을 기다리고 클라이언트는 80번 포트로 요청을 보내면 됩니다. HTTP의 특성 1. 무상태성(Stateless) HTTP에서는 서버가 클라이언트의 상태를 보존하지 않는다. 따라서 응답과 요청이 독립적이다. 2. 비연결성(Connectionless) HTTP는 기본적으로 연결을 유지하지 않는 모델이다. 일반적으로 초 단위 이하의 빠른 속도로 응답한다. 1시간 동안 수천 명이 서비스를 사용..

1. CSR ( Client Side Rendering ) CSR 동작 방식 CSR은 일반적으로 아래와 같이 동작합니다. 1. 사용자가 웹 페이지를 방문하면(request), 브라우저는 최소한의 HTML 파일을 다운로드(response) 한다. 이 HTML 파일은 script, meta, link 등의 태그를 포함하며, 빈 컨텐츠의 index.html 파일이라고 보면 된다. 2. 브라우저는 index.html에 있는 자바스크립트 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링한다. 3. 사용자가 페이지를 이동할 경우, 서버에 추가 HTML파일을 요청하지 않고 이미 받은 자바스크립트를 이용하여 렌더링 한다. CSR 장점 후속 페이지 ..

브라우저의 주요 기능은 사용자( 클라이언트 )가 선택한 자원을 서버에 요청( Request )하고 서버의 응답( Response )을 받아 브라우저에 표시하는 것입니다. 브라우저의 구성 요소에는 아래와 같은 요소가 있습니다. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행 UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. ..

React Query Hooks 호출 순서 오류 1. 문제 상황 💡 판매자 대시보드 페이지에서 product들의 데이터를 useQuery로 받아오고, useMutation을 통해 데이터를 변경하는 작업을 수 행하는 과정에서 ‘Uncaught Error: Rendered more hooks than during the previous render.’ 라는 에러 발생 오류 코드 //SellerDashboard.tsx ... const { dataList, isLoading, isError } = useFetchProducts(); if (isLoading) { return Loading...; } if (isError) { return error!; } const { mutate } = useMutation..