리액트는 UI를 컴포넌트라는 독립적이고 재사용 가능한 블록으로 구성한다. 각각의 컴포넌트는 사용자 인터페이스의 특정 부분을 정의하며, 자체적인 상태(state)와 속성(props)을 기반으로 렌더링한다. 컴포넌트는 "처음 화면에 나타날 때", "업데이트할 때", "화면에서 사라질 때" 다양한 동작이 필요하다. 이런 흐름을 리액트는 라이프사이클(Lifecy...

페이지 구조는 어떠한가?전통적인 웹 사이트 구조로, 사용자가 새로운 페이지로 이동할 때마다 서버에 요청을 보내 새로운 HTML 문서를 받아오는 방식이다.각 페이지가 독립된 HTML 파일로 존재페이지 이동 시 전체 새로고침(Full Page Reload) 발생 → 페이지

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

DevOps는 소프트웨어 개발(Dev)와 운영(Ops)을 결합한 개념이다. Dev와 Ops는 초기 소프트웨어 계획에서 개발, 빌드, 테스트, 릴리즈, 운영에 이르기까지 모든 라이프사이클에 긴밀한 관계를 맺고 있다. DevOps는 두 팀 간의 협업과 소통을 강화해 소프트

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

정렬 알고리즘은 데이터를 특정 기준에 따라 나열하는 알고리즘이다.데이터의 정렬이 필요할 때 사용한다.일반적으로 빠른 성능이 필요하다면 퀵 정렬을, 데이터가 크고 안정적인 정렬이 필요하다면 병합 정렬을, 데이터가 거의 정렬되어 있다면 삽입 정렬을 선택하는 게 좋다.버블

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

Web Storage 웹 스토리지는 클라이언트에 데이터를 저장하는 API이다. HTML5에서 도입되었으며 세션 스토리지와 로컬 스토리지를 제공한다. 동기식으로 작동한다. 클라이언트에 데이터를 저장하므로 보안 이슈가 있을 수 있다. 중요한 데이터나 유실되어선 안 되는

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

프론트엔드 테스트 Unit Test : 단위 테스트는 함수나 모듈 등 가장 작은 단위를 테스트한다. 특정 기능이 예상대로 작동하는지 확인하는데 중점을 둔다. 빠르고 간단하며, 의존성이 적어 독립적으로 실행할 수 있다. Integration Test : 통합 테스트는

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

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

String과 string은 다른가? 결론은: 다르다! 타입스크립트는 string과 String 타입을 구분한다. Primitive Type 원시 타입(Primitive Type)은 가장 기본적인 데이터 타입이다. 자바스크립트에는 number, bigint, b

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

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

카테고리에 상관 없이 모두 /로 처리되는 걸 카테고리 id별로 나누어 주기 위한 작업 중 문제가 발생하였다.라우팅은 문제없이 작동했으나, cateId가 {} 빈 객체로 나오던 상황기존에 사용하던 방식수정한 방식이후부턴 정상적으로 cateId를 인식할 수 있었다.두 가지

SPA SPA(Single Page Application)는 단일 HTML 페이지로 구성된다. 페이지 전환 시 전체 페이지를 새로 로드하지 않으며, 클라이언트 측(CSR)에서 JavaScript를 통해 콘텐츠를 동적으로 렌더링한다. 장점 : 빠른 페이지 전환 속도

자바스크립트 배열자바스크립트 배열은 다양한 데이터 타입의 값을 포함할 수 있는 동적 배열이다.인덱스를 사용해 새로운 요소를 추가한다. 빈 자리는 empty items로 채워진다.push()는 배열의 끝에 새로운 요소를 추가하고, unshift()는 배열의 앞에 새로운

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

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