매일메일

안녕하세요, 프론트엔드 개발자를 준비하고 있는 대학생 윤장호입니다!취업을 준비하는 시점에서, 저에게 가장 부족한 점은 CS 지식과 코딩테스트 실력이라고 생각합니다.여러 프로젝트를 거치며 실무적인 역량은 꾸준히 발전되어 왔지만, 어떤 기술을 왜, 어떻게 사용하고 있는지에

부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다.props는 읽기 전용으로, 자식 컴포넌트에서 수정할 수 없습니다. 이는 리액트의 단방향 데이터 흐름 원칙 때문이며 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들어 버그 발생 가능성을 줄이고 디버깅을 편하게 합니다

Controlled Component(제어 컴포넌트)는 상태(state)를 통해 입력 값을 제어하는 컴포넌트를 말합니다.Controlled Component에서는 입력 요소의 값(value)을 state와 동기화하고, 사용자의 입력이 이루어질 때마다 onChange 이

리액트의 memo를 사용하여 컴포넌트를 메모이제이션하여 성능을 최적화 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때 리렌더링을 방지하여 렌더링 비용이 큰 컴포넌트에서 유용합니다.useCallback을 통해 함수를 메모이제이션하여 불필요한 함수 재생성

함수가 선언될 때의 스코프(변수에 접근할 수 있는 범위)를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능입니다.클로저는 함수가 일급 객체라는 특성과 렉시컬 스코프(함수가 선언되었을 때의 환경)의 조합으로 만들어집니다.예시 코드를 보면 innerFu

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정입니다.브라우저가 HTML 파일을 받아 HTML 파서를 통해 문자열로 변환하고, 이 문자열을 다시 HTML 토큰으로 변환합니다. 이 HTML 토큰은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미합니다.HT

사용자가 'www.google.com'을 입력하면, 브라우저는 도메인 이름을 IP 주소로 변환하는 DNS 조회(DNS Lookup) 과정을 거칩니다. 브라우저는 캐시된 DNS 기록을 확인하고, 해당 도메인 이름이 없으면 로컬 DNS 서버에 요청하여 'www.google

StrictMode는 리액트에서 주로 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용됩니다.componentWillMount(), componentWillReceiveProps() 등과 같이 더 이상 사용이 권장되지 않는 메서드가 코드에

리액트에서 어떠한 컴포넌트가 렌더링 되기 위해서는 렌더링을 실행시킬 트리거가 필요합니다.리액트에서의 트리거는 주로 2가지 경우가 있습니다.초기 렌더 : 사용자가 페이지에 처음 방문하였을 때 발생리렌더 : 상태가 업데이트 되었을 때 발생render phase는 리액트가

호이스팅은 자바스크립트가 코드를 실행하기 전의 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징입니다. 이 때문에 코드의 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보입니다.한편, 호이스팅은 값 할당까지 끌어올리지는 않습니다.위와 같이

reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말합니다.DOM의 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 합니다. 이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비

자바스크립트에서 코드가 실행되는 환경을 의미합니다.자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재합니다.전역 실행 컨텍스트자바스크립트가 처음 실행될 때 생성되는 컨텍스트입니다.전역 컨텍스트는 프로그램이 종료될 때까지 유

자바스크립트의 배열(Array)은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있습니다.배열은 제로 인덱스 기반으로, 배열의 각 값은 array0, array1과 같이 인덱스를 통해 접근할 수 있습니다.또한 배열은 숫자, 문자열, 불리언, 객체

자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.자바스크립트에서는 이름 없는 함수, 즉 익명 함수를 정의할 수 있습니다.익명 함수는 함수 표현식에서 주로 사용되며, 필요에 따라

스크립트를 비동기적으로 다운로드합니다.다운로드가 완료되면 즉시 실행됩니다.HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.스크립트를 비동기적으로 다운로드

CommonJS와 ES Module은 자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식입니다.CommonJS는 주로 Node.js 환경에서 사용되며, 모듈을 동기적으로 불러옵니다. 즉, 모듈이 로드될 때까지 다음 코드가 실행되지 않는 방식입니다.CommonJ

이벤트 전파는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 개념입니다.이벤트 전파는 크게 캡쳐링, 타겟, 버블링 단계로 나뉩니다.이벤트가 DOM 트리의 최상위 요소(document)에서 시작하여, 이벤트가 발생한 요소(타깃 요소)로

코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.React.js는 React.lazy를 통해 코드 스

디바운스(Debounce)와 쓰로틀(Throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법입니다.이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식입니다.이를 통해 불필요하게 많은 이벤트 호

리액트에서 index를 key로 사용하는 것이 권장되지 않는 이유는 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생할 수 있기 때문입니다.리액트는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제되었는지를 추적합니다. 그러나 ind

자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기까지 두 단계의 과정을 거치기 때문입니다.자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거칩니다. 이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당됩니다. 이 때 변수

useEffect와 useLayoutEffect는 모두 렌더링된 후에 특정 작업을 수행하기 위해 사용됩니다. 하지만 실행되는 타이밍과 용도가 다릅니다.렌더링이 완료되는 시점에 비동기적으로 실행됩니다. 즉, 화면이 실제로 사용자에게 그려진 후에 useEffect가 실행되

tanstack-query에서 staleTime과 gcTime은 데이터를 캐싱하고 관리하는 데 중요한 두 가지 설정값입니다.staleTime은 데이터를 처음 가져온 후에 그 데이터를 '신선한' 상태로 간주하는 시간을 말합니다. staleTime 내에는 같은 쿼리에 대한

웹 접근성 웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함해, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념입니다. 마치 공공건물에 휠체어 경사로를 설치해 이동이 불편한 사람도 이용할 수 있게 하는 것처럼, 웹 페이지 역시 디지털

CSR(Client Side Rendering) 방식은 브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 번들을 실행하여 동적으로 컨텐츠를 채우는 방식입니다.반면, SSR(Server Side Rendering) 방식은

Flexbox와 Grid는 페이지에서 레이아웃을 구성할 때 자주 사용되는 CSS 속성입니다. 두 속성 모두 화면 요소를 배치하고 정렬하는 데에 사용되지만 몇 가지 차이점이 존재합니다.Flexbox는 1차원 레이아웃이지만, Grid는 2차원 레이아웃입니다.Flexbox는

프론트엔드 E2E(End-to-End) 테스트는 애플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션 하여 테스트하는 방식입니다.단위 테스트나 통합 테스트와 달리, E2E 테스트는 사용자 관점에서 전체 애플리케이션이 의도한 대로 작동하는지 검증합니다. 브라우저 환경에

전통적인 JPEG나 PNG 대신, 압축 효율이 높은 webp 또는 AVIF와 같은 최신 포맷으로 변환할 수 있습니다.이 포맷들은 이미지 품질을 유지하면서도 파일 크기를 크게 줄여줍니다. 단, 일부 구버전의 브라우저에서는 최신 이미지 포맷을 지원하지 않으므로, 호환성을

자바스크립트의 이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 메커니즘입니다.자바스크립트는 기본적으로 한번에 하나의 작업만 처리할 수 있습니다. 하지만 이벤트 루프가 콜 스택과 태스크 큐를 매개하면서 비동기

낙관적 업데이트는 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다. 사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 빠른 반응을 보여줍니다.낙관적 업데이트의 대표

자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만을 처리할 수 있는 단일 콜 스택을 가집니다. 하지만 브라우저나 Node.js 환경이 제공하는 비동기 처리 메커니즘 덕분에 여러 작업을 동시에 수행할 수 있습니다.자바스크립트는 브라우저의 Web API나

interface는 선언 병합을 지원해 여러 번 선언할 수 있어, 주로 객체 타입을 확장할 때 유리합니다.예를 들면 다음과 같습니다.위 코드에서 Person interface를 여러 번 선언할 수 있으며, 결과적으로 하나의 interface로 병합됩니다.type으로 선

시맨틱 마크업은 HTML 요소를 사용하는 방식으로, 단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식을 말합니다.예를 들어, <div>와 <span>같은 비시맨틱 태그가 아닌, <header>, <footer>, <arti

undefined와 null은 둘 다 '값이 없다'는 의미를 담고 있지만, 그 쓰임새와 의미에는 차이점이 존재합니다.변수는 선언했지만, 아직 아무 값도 할당하지 않았을 때, 자바스크립트는 그 변수에 undefined라는 값을 자동으로 부여합니다.예를 들어 let a;

React의 useEffect는 컴포넌트의 특정 시점에 자동으로 호출되는 훅으로, 크게 컴포넌트가 마운트, 업데이트, 언마운트 되는 시점에 호출됩니다.먼저, useEffect는 컴포넌트가 마운트 될 때, 즉, 처음 렌더링되고 나서 호출됩니다. 이때 데이터 초기화나 외부

자바스크립트의 Promise는 비동기 작업을 관리하고, 해당 작업의 성공 또는 실패 결과를 나중에 사용할 수 있도록 하는 객체입니다. 정리하자면, Promise는 비동기 작업의 완료 여부를 약속해주는 개념이라고 할 수 있습니다.자바스크립트는 비동기 처리를 위한 콜백 함

ES6는 자바스크립트의 최신 버전으로, 2015년에 공식 발표되었습니다. ES6는 코드의 가독성과 유지보수성을 높이고, 현대 웹 애플리케이션의 요구를 반영하기 위한 여러 기능들을 제공합니다. 주요 변경사항은 다음과 같습니다.let과 const 키워드가 추가되었습니다.

함수 선언식과 함수 표현식은 자바스크립트에서 함수를 정의하는 두 가지 방법으로, 이 둘의 주요 차이점은 호이스팅에 있습니다.함수 선언식은 이름이 있는 함수입니다. 함수 선언식은 자바스크립트 엔진이 코드를 실행하기 전에 메모리에 로드하기 때문에 호이스팅이 발생합니다. 즉

resolve()와 fulfilled는 Promise에서 비동기 처리시 사용되는 값들이지만, 차이점이 존재합니다.resolve()는 Promise가 성공적으로 끝났을 때 결과 값을 넘겨주는 함수입니다. 예를 들어 어떤 비동기 작업이 잘 끝났을 때, resolve()를

CORS는 서로 다른 출처(origin)에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책입니다.기본적으로 브라우저에는 보안 상의 이유로 동일 출처 정책이 적용되어 있습니다. 해당 리소스가 같은 출처에서 제공되는 것이 아니라면 브라우저가 이를 차단하도록 되어 있습니

React.memo를 활용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않도록 합니다. 특히 부모 컴포넌트가 자주 업데이트되는 상황에서 유용합니다.useMemo와 useCallback 훅을 사용하여 각각

리액트의 동시성 모드는 여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능을 의미합니다. 예전 리액트는 스택 구조로 이루어졌습니다. 즉 한 번 렌더링을 시작하면 끝까지 멈추지 않고 다 처리해야

Suspense와 기존 로딩 상태 관리 방식인 useEffect()와 loading state는 로딩 상태를 관리하는 방식에서 근본적인 차이가 있습니다.기존 방식에서는 데이터를 불러올 때 useEffect() 훅을 사용하고, 로딩 상태를 관리하기 위해 isLoading

Error Boundary는 React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트입니다. 일반적으로 클라이언트에서 오류가 발생할 때 표시할 UI를 제공하여, 애플리케이션의 신뢰성과 사용자 경험을 높이는 데 활

localStorage와 sessionStorage는 브라우저에서 제공하는 클라이언트 측 저장소 API로, 둘 다 데이터를 키-값 쌍 형태로 저장합니다.차이점은 데이터의 지속성과 범위에 있습니다.localStorage는 데이터를 영구적으로 저장합니다. 브라우저를 닫거나

Tanstack Query는 서버 상태 관리의 복잡성을 극복하기 위해 사용하는 라이브러리입니다. 여기서 서버 상태란 서버에서 제공하는 데이터로, 클라이언트에서 직접 수정할 수 없고 네트워크 요청과 같은 비동기 작업을 통해 가져오거나 갱신해야 하는 데이터를 의미합니다.동

webpack, rollup과 같은 번들러는 다양한 파일과 모듈을 하나의 배포 가능한 번들로 묶는 역할을 합니다.다수의 개별 파일에 대해 모두 네트워크 요청을 수행할 경우, 성능에 부정적인 영향이 있을 수 있습니다. 번들러는 다수의 파일을 하나 또는 소수의 파일로 묶어

이벤트 버블링은 이벤트가 발생했을 때 가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식입니다.예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후 이 이벤트가 상위 요소인 div, body, document, window로 전파되는 과정을 거치

리액트에서 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각이라고 설명드릴 수 있습니다. 컴포넌트는 특정 기능이나 UI 요소를 캡슐화합니다. 잘 만들어진 컴포넌트는 주로 단일 책임 원칙을 따릅니다.리액트 내에서 컴포넌트는 크게 클래스형과 함수형으로 나눌 수

정적 타이핑을 통해 코드의 안정성을 크게 향상시킬 수 있습니다. 개발 시 타입 오류를 런타임으로 실행하기 이전에 발견할 수 있어 런타임 에러를 줄이고, 코드의 품질을 개선할 수 있습니다. 이러한 장점은 특히 대규모 프로젝트에서 두드러집니다.개발자의 생산성을 높여줍니다.

서버 컴포넌트는 리액트 18 버전에서 도입된 새로운 기능입니다. 기본적으로 클라이언트에서 실행되는 기존의 리액트 컴포넌트와 다르게 서버에서만 렌더링 되는 컴포넌트를 말합니다. 서버에서만 실행되기 때문에 브라우저 쪽 번들 크기를 줄이고, 초기 로딩 속도를 개선하는 데 큰

Streaming SSR은 서버에서 렌더링된 HTML을 한 번에 완성해서 보내는 방식이 아니라, 준비된 부분부터 점진적으로 스트리밍해서 클라이언트에 전달하는 기술입니다. 이를 통해 사용자는 페이지의 중요한 콘텐츠를 더 빠르게 확인할 수 있습니다.기존 SSR은 서버에서

HTTP는 웹 상에서 클라이언트와 서버 간 데이터를 주고받는 데 사용되는 통신 규약입니다. 클라이언트가 서버에 요청을 보내고, 서버가 이에 대한 응답을 반환하는 방식으로 동작합니다. HTTP는 비연결성(stateless)을 특징으로 하여 한 번의 요청-응답이 끝나면 연

Body와 Header의 가장 큰 차이는 정보(데이터)의 역할입니다.Header는 데이터의 메타 정보를 담습니다. 즉, 데이터 자체가 아니라 데이터에 대한 컨텍스트 정보를 포함합니다. 이로써 수신자가 데이터를 어떻게 처리해야 할지 지침을 제공하는 역할을 합니다. 예를

제로 런타임 CSS는 CSS-in-JS의 단점을 보완하기 위해 등장한 방식입니다. 기존에 많이 쓰이던 CSS-in-JS 방식은 스타일을 컴포넌트 안에서 작성해서 동적으로 생성합니다. 이러한 방식은 런타임에서 CSS를 만들다 보니 성능 문제가 생길 가능성이 있습니다.예를

자바스크립트에서 클래스의 Public, Private, Protected 접근제어자는 클래스 멤버의 접근 범위를 제어하는 데 사용됩니다.Public은 별도 키워드를 붙이지 않았을 때 기본 적용되는 접근제어자로, 클래스 외부에서도 자유롭게 접근 가능합니다. 예를 들어,

px은 화면의 물리적인 픽셀 단위를 기준으로 한 고정 단위입니다. 이 값은 절대적인 크기를 나타내며, 요소의 크기가 고정되어 디바이스의 해상도나 사용자 설정에 영향을 받지 않습니다.예를 들어, font-size: 16px으로 설정하면 항상 16픽셀 크기로 표시됩니다.

데이터 속성은 사용자 정의 데이터를 HTML 요소에 저장하기 위해 사용되는 속성입니다. 선언 방법은 data-로 시작하는 속성을 HTML 태그에 추가하면 됩니다.예를 들어, <div data-user-id="12345" data-role="admin"></d

event.target과 event.currentTarget은 모두 이벤트 객체의 속성이며, 각각 "이벤트가 실제로 발생한 요소"와 "이벤트 리스너가 연결된 요소"를 가리킵니다. 이 둘의 차이점을 이해하려면 이벤트 버블링을 알아야 합니다. 이벤트는 특정 요소에서 발생한

CDN은 전 세계에 분산되어 있는 서버들을 통해 사용자에게 웹 컨텐츠를 빠르고 효율적으로 제공하는 기술입니다. 웹 사이트의 이미지, CSS, Javascript 파일, 동영상 등 정적 컨텐츠를 사용자와 물리적으로 가까운 서버에서 전달하는 방식입니다.먼저, 자주 요청되는

HTML의 <!DOCTYPE>은 웹 브라우저에 해당 문서가 어떤 HTML 버전을 기반으로 작성되었는지 알려주는 역할을 하는 선언문입니다. 문서의 최상단에 위치하며, 브라우저가 HTML 문서를 해석하고 렌더링하는 방식을 결정합니다. 대소문자를 구분하진 않지만, 강조

컴포넌트 간 상태 공유가 용이해집니다. 여러 컴포넌트에서 공통적으로 사용되는 상태를 중앙화하여 관리하고, 여러 곳에서 쉽게 접근할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트에게 상태를 전달하기 위해 여러 컴포넌트를 거치는 "props drilling"을 겪지 않고

Node는 DOM을 구성하는 가장 기본적인 구성 단위입니다.Node에는 여러 가지 타입이 존재합니다. "Document Node"는 HTML 문서 전체를 나타내는 루트 노드이며, "Element Node"는 HTML 태그를 나타내고, "Text Node"는 텍스트 내용

useRef()는 React의 훅 중 하나로, 컴포넌트 내에서 변경 가능한 값을 저장하고 관리할 수 있게 해줍니다.useRef()는 주로 두 가지 목적에 사용됩니다.첫째, useRef()는 DOM 요소에 접근할 때 사용됩니다.예를 들어, 특정 DOM 요소에 직접 접근하

TDD는 소프트웨어 개발 방법론 중 하나로, 테스트를 먼저 작성한 후 실제 코드를 작성하는 방법론입니다.TDD는 일반적으로 'Red-Green-Refactor' 사이클을 따릅니다.첫 번째 단계는 Red로, 실패하는 테스트를 작성하는 것입니다. 이 테스트는 아직 구현되지

프로토타입은 자바스크립트에서 객체 간의 상속을 구현하는 매커니즘입니다.자바스크립트의 모든 객체는 기본적으로 \[Prototype]이라는 숨김 프로퍼티를 가지고 있으며, 이 프로퍼티는 다른 객체를 참조하거나 null 값을 가집니다. 프로토타입 연결은 Object.crea

JPEG는 Joint Photographic Experts Group의 줄임말로, 손실 압축 방식을 사용하는 이미지 포맷입니다.파일 크기를 효율적으로 줄일 수 있다는 장점이 있습니다. 하지만 이미지를 저장할 때마다 데이터가 손실되어 화질이 점점 나빠지는 현상이 발생한다

프록시 서버를 이용한다면 CORS(Cross-Origin Resource Sharing) 설정 없이도 SOP(Same-Origin Policy)를 우회할 수 있습니다. 여기서 이야기하는 프록시 서버는 브라우저 대신 외부 서버에 요청을 보내고 응답을 받는 역할을 대리 수

box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성입니다.레이아웃을 스타일링할 때 예상치 못한 크기(너비, 높이) 변화가 발생하곤 합니다. 그런 상황에서 box-sizing 속성이 도움이 될 수 있습니다.box-sizing에는 두 가지 옵션이

Virtual DOM은 React에서 사용되는 핵심 개념으로, 실제 DOM을 JS 객체 형태로 복제한 가벼운 사본이라고 할 수 있습니다. 브라우저의 DOM은 구조적으로 복잡하고, 이를 직접 조작하는 작업은 성능 비용이 상당히 높습니다. Virtual DOM은 이를 개선

CI/CD는 애플리케이션 배포 과정을 자동화하여 더 짧은 주기로 고객에게 서비스를 제공하는 방식입니다.먼저 CI는 Continuous Integration의 약어로 지속적 통합을 의미합니다.CI는 개발자들이 코드 변경사항을 주기적으로 메인 브랜치에 병합하는 과정을 자동

transform과 position은 각각 적합한 경우가 다른데, 애니메이션이나 동적인 위치 변경이 필요한 경우 transform을 선호합니다.transform을 선호하는 이유는 성능 때문입니다. transform은 브라우저의 composition 단계에서 실행됩니다.

React를 이용해서 웹 애플리케이션을 구현하기 위해서는 번들러 설정, 라우팅 설정, 다양한 렌더링 방식을 위한 추가 세팅 등 복잡한 과정을 거쳐야 합니다. 이러한 작업들은 시간과 노력이 많이 들며, 많은 개발자들에게 진입 장벽이 될 수 있습니다.Next.js는 이러한

a unchanged { b: 'unchanged' } { c: 'unchanged' }함수에 인수로 a, b, c를 전달한다고 해서 원본 변수가 변경되지는 않기 때문입니다.a unchanged { b: 'unchanged' } { c: 'changed' }자바스크립트

쌓임 맥락(Stacking Context)은 가상의 z축을 상정하여 HTML 요소들을 3차원으로 개념화한 것입니다. 쌓임 맥락은 요소들이 쌓이는 순서에 영향을 미칩니다.기본적으로 HTML 요소는 DOM 순서에 따라 쌓입니다. HTML 상에서 위쪽에 위치할수록 아래쪽에

<link>는 외부 리소스와의 연결을 돕는 요소이며, rel 속성 값인 preconnect, preload, prefetch는 리소스 로드의 우선순위를 설정하여 로드 성능을 최적화하기 위해 사용됩니다.preconnect는 브라우저가 특정 origin에 대한 네트워

자바스크립트에서 this는 함수가 호출되는 방식에 따라 값이 달라집니다. 다양한 상황에서 this가 어떻게 바인딩되는지 크게 6가지 상황으로 나누어 설명드리겠습니다.전역에서 함수가 호출되면, this는 전역 객체를 참조합니다. 브라우저 환경에서는 window 객체를,

Server Action은 Next.js에서 제공하는 기능으로, 서버에서 실행되며 브라우저에서 호출할 수 있는 비동기 함수입니다. 이 기능은 서버 로직을 직접 호출함으로써 클라이언트와 서버 간의 상호 작용을 간소화할 수 있게 해줍니다.예를 들면 백엔드 서버와 API 통

타입 단언(Type Assertion)은 컴파일러에게 특정 값이 어떤 타입인지 개발자가 더 잘 알고 있다고 알려주는 방법입니다. 개발자가 as를 이용해 타입을 단언하면, 자동 추론된 타입을 덮어쓰게 됩니다. 이는 컴파일러가 타입을 자동으로 추론하지 못하거나 잘못 추론하

웹 개발에서는 브라우저가 제공하는 기본 스타일이 서로 다를 수 있기 때문에, 이를 통일하여 일관된 디자인을 구현하는 것이 중요합니다. Reset CSS와 Normalize CSS는 모두 브라우저 간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일입니다. 두 방법은 목

alt 속성은 이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공하여 사용자에게 콘텐츠를 이해할 수 있도록 돕는 역할을 합니다. 예를 들어, 네트워크 문제로 이미지가 로드되지 않는 경우, alt 속성의 텍스트가 대신 표시되어 이미지의 의도를 전달할 수 있습니다.alt

모노레포는 mono(단일)와 repo(레포지토리)를 합친 용어로, 여러 프로젝트 또는 패키지를 하나의 코드 저장소에 통합하여 관리하는 방식을 의미합니다.모노레포를 구성하기 위해 대표적으로 두 가지 구성 방식이 사용됩니다.먼저, 프로젝트 단위로 분리된 구조를 사용합니다.

Git Flow에서 기능 개발은 feature 브랜치에서 이루어지고, 완료된 후 develop 브랜치에 병합됩니다. 릴리스를 준비할 때는 release 브랜치를 따로 만들어 QA와 최종 검증을 거친 뒤, 프로덕션 코드를 관리하는 main에 병합하게 됩니다. 만약 긴급한

CSS 전처리기는 CSS를 더 효율적이고 체계적으로 작성할 수 있도록 도와주는 도구입니다. CSS는 기본적으로 스타일 규칙을 선언하는 데 필요한 문법만 제공하기 때문에 반복적인 작업이나 코드의 재사용성이 떨어지는 단점이 있습니다. CSS 전처리기는 이러한 한계를 극복하

디버깅을 잘하기 위해서는 문제를 정확히 이해하는 것이 가장 중요하다고 생각합니다. 따라서 가장 먼저 오류 메시지를 꼼꼼하게 읽어 어떤 원인에 의해 문제가 발생한 것인지 구체적이고 명확하게 파악하려 노력합니다.다음으로, 문제를 격리하는 과정이 필요합니다. 코드베이스가 클

useState()를 조건문 안에서 사용하면 안되는 이유는 리액트가 state를 관리하는 방식이 useState를 호출하는 순서와 연관되어 있기 때문입니다.리액트는 컴포넌트 내부에서 useState()가 호출된 순서를 기준으로 state를 저장하고 업데이트합니다. 그런

JWT는 Stateless 인증 방식을 제공합니다. 서버가 사용자의 인증 상태를 별도로 저장할 필요가 없어, 서버의 메모리나 데이터베이스 비용을 줄일 수 있습니다. 인증 상태 관리에 대한 부담이 없어지니 서버의 확장성 측면에도 유리합니다.JWT는 토큰에 자체적으로 필요

Content-Type은 HTTP 요청과 응답에서 전송되는 데이터의 타입을 명시하는 헤더입니다. 서버와 클라이언트가 데이터를 주고받을 때, 올바르게 해석할 수 있도록 하기 위해 사용합니다.예를 들어, JSON 데이터를 전송할 경우 Content-Type: applica

의사 요소는 CSS 선택자에 추가하는 키워드로, 특정 요소의 일부분에 스타일을 적용할 때 사용됩니다. 일반적인 CSS 선택자는 요소 전체의 스타일을 지정하지만, 의사 요소를 사용하면 요소 내부의 특정 부분에만 스타일을 적용할 수 있습니다. 대표적인 예시로는 ::befo

인증은 사용자의 신원을 검증하는 과정입니다. 즉, 인증은 "사용자가 누구인지 확인하는 과정"입니다.예를 들어, 웹 사이트에 로그인할 때 아이디와 비밀번호를 입력받아 해당 사용자가 누구인지 검증하는 것이 이에 해당합니다. 인증 방식에는 비밀번호 기반 인증, 생체 인증,