개인공부

JSX(Javascript Syntax eXtension)는 JavaScript를 확장한 문법이다.공식적인 자바스크립트 문법은 아니며, React로 개발할 때 사용되는 문법이다.하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다.React를 사용할 때 반드시

Virtual DOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 알고리즘문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 interface이다.DOM은 HTML 문서 내의 모든 요소를 정의하고, 각 요소

브라우저에 URL을 입력하면 서버가 브라우저에 페이지를 제공한다.request : 브라우저가 서버에 페이지를 달라고 하는 것response : 요청한 페이지를 브라우저에 제공하는 것Client : 요청하는 쪽Server : 요청을 받아 알맞은 데이터를 제공하는 쪽브라우

직렬적으로 일을 처리한다.요청한 작업에 대해 완료 여부를 따져 순차대로 처리한다.요청을 보낸 후 응답을 받아야만 다음 동작이 이루어진다.일을 처리하는 동안 다른 프로그램은 정지한다.프로그램의 전체적인 효율을 저하시킬 수 있다.병렬적으로 일을 처리한다.요청한 작접에 완료

CORS (Cross-Origin Resource Sharing): 사이트 간 출처 리소스 공유애플리케이션을 통합하기 위한 매커니즘이다.한 도메인에서 다른 도메인에 있는 리소스와 상호작용하는 방법이다.CSRF (Cross Site Request Forgery, 사이트

REST란? REST (Representational State Transfer) HTTP 프로토콜로 데이터를 전달하는 프레임워크이다. 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는다. 클라이언트와 서버 간의 구성요소를 엄격히 분리하여 구현은 단순화하고 확장성

호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. > hoisting : 끌어 올리기, 들어올려 나르기. 호이스팅 스코프(함수) 안에 존재하는 모든

스코프는 현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 표현되거나 참조될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 해당 스코프 내에 없다면 사용할 수 없다.스코프는 선언된 변수에 접근할 수 있는 유효한 범위이다.계층적인 구조이기 때문에 하

이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)으로, 원한다면 그것들에 응답할 수 있도록 시스템이 말해주는 것이다.시스템은 이벤트가 발생될 때 신호를 발생시키고, 이벤트가 발생되었을 때 사건이 자동적으로

해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장한다.html5부터 제공되는 기능이다.키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다.영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어

React.memo, useMemo, useCallback 리액트 렌더링 최적화를 위한 기법 컴포넌트가 리렌더링되는 조건 부모에서 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링될 때 자신의 state가 변경될 때 > Memoization :

type과 interface는 매우 유사하게 사용된다. 그러나 두 개 이상을 작성하거나, 타입 간 결합이 필요할 때는 interface를 사용하는 것이 좋다.interface는 단순히 객체의 모양을 표현하기 때문에 여러개가 오더라도 머지하기만 하면 된다.반면에 type

react-query react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어졌다. 기존 상태 관리 라이브러리인

개발하면서 발생하는 반복적인 문제들을 해결하기 위한 방안이다.객체지향 특성과 설계 원칙을 기반으로 구현되어 있다.특성 : 캡슐화, 추상화, 상속화, 다형화설계 원칙(SOLID) : 단일 책임 원칙, 개방 폐쇄 원칙, 리스코프 치환 원칙, 인터페이스 분리 원칙, 의존관계

객체, 배열, 함수 모든 것이 해당된다.여러 타입의 상위 타입으로 인식된다.구체적으론 number, string, boolean, bigint, symbol, null, 또는 undefined가 아닌 나머지를 의미한다.많은 타입을 아우르고, error를 띄우기 때문에

SEO > 검색엔진 최적화(search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하여 검색 결과

DDD(Domain-Driven Design, 도메인 주도 설계)는 소프트웨어 프로젝트 개발 과정에서 도메인을 중심으로 시스템을 구축하는 방법론이다.기존의 설계가 기술 중심이라면, DDD는 프로젝트를 Domain 단위로 나누어 설계한다.DDD의 핵심적인 목표는 느슨한

Progressive Web Apps 프로그레시브 웹 앱(Progressive Web Apps, PWA)은 웹 기술을 사용해 만든 애플리케이션이다. 기존 웹 앱과는 달리, 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. HTML, CSS, JavaScript

엘리먼트(Element)는 React 애플리케이션을 구성하는 블록이다. React 앱의 가장 작은 단위로, 화면에 표시할 내용(UI)을 기술한다.엘리먼트는 불변 객체로, 생성된 후에는 자식이나 속성을 변경할 수 없다. 업데이트가 필요할 땐 새로운 엘리먼트를 생성하고 R

Responsive Web Design 반응형 웹 디자인(RWD)은 웹사이트가 화면 크기에 따라 레이아웃과 콘텐츠를 조정하는 방식이다. 데스크탑, 태블릿, 스마트폰 등 사용자가 어떤 디바이스를 사용하든 자동으로 조정된다. 별도의 웹사이트를 만들 필요 없이 하나의 웹

React 공식문서를 번역 정리한 내용입니다. State: A Component's Memory 컴포넌트는 상호작용의 결과로 화면에 표시되는 내용을 변경해야 한다. 폼에 입력하면 입력 필드가 업데이트되어야 하고, 다음 이미지로 넘어가는 버튼을 클릭하면 표시되는 이미

Lazy Loading 사용자가 실제로 필요한 콘텐츠만 요청하고 로드하는 방식이다. 페이지가 처음 로드될 때는 필수적인 콘텐츠만 로드하고, 추가적인 콘텐츠를 요청할 때 해당하는 콘텐츠를 로드한다. 예를 들어, 웹 페이지에 많은 이미지가 포함되어 있다면 처음에는 화면에

<Suspense>는 컴포넌트 렌더링을 지연시키고 대체 UI를 보여주는 기능이다. 비동기 작업을 처리할 때 유용하게 사용할 수 있으며, 주로 데이터 로딩이나 코드 스플리팅 같은 작업에 사용된다.로딩으로 인한 딜레이 중 사용자 경험을 개선할 수 있다. 빈 화면 대신

Hook React Hooks은 use로 시작되는 함수이다. React 16.8에서 추가되었으며, 클래스 컴포넌트에서 사용하던 여러 기능을 함수형 컴포넌트에서도 사용할 수 있게 만들어 준다. Hook의 규칙 Hook은 호출 위치에 제약이 있다. 최상위 레벨에서만

Babel은 주로 ECMAScript 2015+ (ES6+) 코드를 이전 버전의 브라우저나 환경에서 호환되는 JavaScript 버전으로 변환하는데 사용하는 도구이다. 개발자는 Babel를 사용해 소스코드를 웹 브라우저가 처리할 수 있는 JavaScript 버전으로 변

Metadata 메타데이터는 HTML 문서의 ``에 포함되어, 해당 웹 페이지에 대한 정보를 제공한다. 검색 엔진 최적화(SEO)에 영향을 주기 때문에 중요하다. 아래는 메타데이터의 예시이다. 메타데이터 설정 Next.js 14에서 메타데이터를 추가하는 방법은 두

BEM(Block, Element, Modifier)은 CSS 클래스의 이름을 체계적으로 관리하기 위한 방법론이다. 웹 프로젝트에서 CSS의 재사용성과 유지보수성을 높이는데 도움이 된다.BEM에서는 세 가지 주요 개념으로 구성된다.block\_\_element--mod

git remote 설정 git config Git의 설정을 관리한다. 해당 저장소에만 적용되는 local과 해당 사용자에게 적용되는global이 있다. git config --list를 사용하여 현재 설정된 모든 정보를 확인할 수 있다. git config 로