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

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

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