면접질문

어제 따끈따끈하게 받은 면접 기술 면접에 대해 정리를 해보려 한다. 신입으로서 너무 많은 질문(체감상 2~30개..?)이 들어와서 답변을 다 하진 못했고.. 결과를 기대하지말고 그냥 주어진 공부에 최선을 다하자 되면 좋고 안되면 다른곳 지원하면 되고! state 상태

면접 질문 중 3가지에 대해 정리해보겠당\~~ 조금씩 내껄로 만들다보면 나중엔 툭 찌르면 그냥 나오겠지? ㅎㅎvar는 함수 스코프를 가지며, 초기화 전 접근 시, 호이스팅 덕분에 undefined 반환한다(js만의 예전 문법으로 인한 오류라고도 볼 수 있음)여기서 호이

채용 박람회에서 만난 동기를 통해 가볍게만 알고 있던 큐에 대해 조금 더 딥한 내용을 듣게 되어 놓칠세라 바로 기억해놨다가 이제야 시간이 되서 좀 정리해보려한다풀 코드는 기억이 안나서 이 부분만 발췌해 왔는데,한 함수안에 저 3개 코드가 존재한다면 실행 순서는??3->

여러개중에 경험한 것 위주로 말씀드려보면 서버 사이드 렌더링이 가장 큰 장점이라 생각합니다. 서버에서 미리 렌더링한 페이지를 빌드타임에 html을 생성해 초기 로딩 시간이 단축됩니다. 물론 현 시점에서는 ssr 렌더링을 프로젝트에 도입해보진 못해서 경험적인 부분은 당장

함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능비유하자면, 함수가 자신이 생성된 환경을 '기억'하는 것자바스크립트의 함수가 일급 객체라는 특성 + 렉시컬 스코프의 조합으로 만들어짐여기서 innerFunction은 oute

reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업reflow브라우저가 페이지의 레이아웃을 다시 계산하는 과정DOM 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산함.이 과정은 모든

실행 컨텍스트는 자바스크립트에서 코드가 실행되는 환경js 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재하는 것전역 실행 컨텍스트자바스크립트가 처음 실행될 때 생성되는 컨텍스트프로그램이 종료될 때까지 유지되며, 전역에 선언된 변수나

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

props부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없음그로 인해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높임state컴포넌트 내부에서 관리되는 데이터동적으로 변경될 수 있고,

리액트 상태를 통해 입력값을 제어하는 컴포넌트입력 요소의 값을 리액트 상태와 동기화하고, 사용자 입력을 변경할 때마다 onChange 이벤트 핸들러를 통해 상태를 업데이트함ex - useState를 활용한 input value 제어value는 리액트 상태로 관리, on

memo를 사용하여 컴포넌트 메모이제이션가능컴포넌트의 props가 변경되지 않으면, 리렌더링 방지하여 성능 최적화렌더링 비용이 큰 컴포넌트에서 유용함수를 메모이제이션하여 불필요한 함수 재생성 방지값의 재계산 방지하여 성능 최적화이를 통해 자식 컴포넌트로 전달되는 함수나

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정DOM 생성브라우저가 HTML 파일을 받으면, 바이트(byte) 단위로 읽음브라우저의 HTML 파서는 이 바이트들을 문자로 변환, 문자들을 다시 HTML 토큰으로 변환이 HTML 토큰들을 각각의 태그와 텍스트, 속

브라우저는 도메인 이름을 IP주소로 변환해야함캐시된 DNS 기록을 확인하고 없으면 로컬 DNS 서버에 요청하여 ex-www.naver.com에 해당되는 IP주소를 얻음IP 주소 확인 후 브라우저는 서버와 TCP연결을 수립Transmission Control Protoc

음.. 평소에 내 포스트가 그냥 꾸준히 기록을 위한 누굴 보여주기 위한 글이 아니였다면이 글은 꼭 여러 분들의 조언을 받고 싶다.내 스펙은 제목처럼 작년 9월부터 공부를 해왔고, 부트캠프부터 어떤 커리어를 밟아왔냐면최초 9to9 하루 9시간 주 6일 온라인 부트캠프 (

개발 중 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용오래된 라이프사이클 메서드와 비권장 API의 사용을 감지ex - componentWillMount, componentWillReceiveProps 와 같은 메서드는 사용 권장되지 않음이러한 메서

리액트가 변화된 상태나 props에 따라 어떤 UI가 변경되어야 할지 결정하는 단계이 과정에선 실제 DOM을 업데이트하지 않고, 변경사항을 가상 DOM에서 계산하여 비교순수한 계산과정이기 때문에 성능에 영향 주지 않도록 중단 or 다시 실행될 수 있음React 18에서

자바스크립트가 코드를 실행하기 전 변수, 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징코드의 선언된 위치와 관계없이 변수를 사용할 수 있는 것처럼 보임but 선언의 호이스팅일 뿐, 변수의 값 할당까지 끌어올려지진 않음.ex - var는 선언 자체는 호이

순서가 있는 리스트형 객체, 여러 값을 하나의 자료구조에 저장할 수 있음제로 인덱스 기반, 각 값은 인덱스를 통해 접근할 수 있음동적 배열로, 크기가 고정되어 있지 않고, 요소를 자유롭게 추가 및 제거할 수 있는 유연성 제공다양한 데이터 타입을 저장할 수 있음(숫자,

일급 객체함수는 값처럼 취급될 수 있고, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있음일급객체란1\. 변수나 데이터 구조에 할당될 수 있다2\. 함수의 인자로 전달될 수 있다3\. 함수의 반환값으로 사용될 수 있다익명함수, 함수표

두 속성 모두 스크립트를 비동기적으로 로드async1\. 스크립트를 비동기적으로 다운로드2\. 다운로드 완료 시 즉시 실행3\. HTML 파싱과 병렬로 진행, 스크립트 실행 시 HTML 파싱이 잠시 중단4\. 여러 async 스크립트가 있을 경우, 다운로드가 완료되는

자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식CommonJSNode.js환경에서 사용, 모듈을 동기적으로 불러옴모듈이 로드될 때까지 다음 코드가 실행되지 않는 방식require 키워드를 사용해 모듈을 가져오고, module.exports를 통해 내보냄주로

이벤트 전파는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 개념캡처링 / 타겟 / 버블링 단계로 나뉨캡처링이벤트가 DOM 트리의 최상위 요소에서 시작하여, 이벤트가 발생한 요소로 향해 내려가는 단계이 과정에서 상위 요소들에 이벤트

코드 스플리팅을 통해 JS파일을 필요한 부분만 나누어 로드모든 코드를 한번에 불러오지 않고, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도 개선 가능레이지 로딩 기법사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로

이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법디바운스이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식ex-검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용

배열의 요소들이 추가되거나 삭제될 때, 순서가 바뀌는 경우 문제가 발생할 수 있기 때문리액트는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제되었는지를 추적그러나 index를 key로 사용하면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있음그러

인터프리터 언어코드를 컴파일하지 않고, 한 줄씩 즉시 실행하는 방식으로 작동하는 프로그래밍 언어그러한 언어인 자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드 실행 전 두 단계의 실행 과정을 거치기 때문컴파일 단계스크립트 실행 전 함수 및 변수 선언을

둘 다 렌더링된 후 특정 작업을 수행하기 위해 사용but실행되는 타이밍과 용도가 다름useEffect렌더링이 완료되는 시점에 비동기적으로 실행즉, 화면이 실제로 사용자에게 그려진 후, useEffect가 실행되는 방식useEffect는 보통 데이터를 가져오는 작업, 이

웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념단순히 장애인만을 위한 것이 아닌, 네트워크 속도가 느리거나 밝은 햇빛 아래 화면을 보는 등 일상적인 제약 상황에서도, 모든 사용자가

둘 다 페이지에서 레이아웃을 구성할 때 자주 사용되는 CSS 속성Flexbox는 1차원 레이아웃, Grid는 2차원 레이아웃Flexbox는 row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는 데 최적화주로 행이나 열 중 하나의 방향으로 정렬해야 할 때

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

이미지 포맷 최적화JPEG나 PNG대신 압축 효율이 높은 WebP 또는 AVIF와 같은 최신 포맷으로 변환이미지 품질을 유지하면서도 파일 크기를 크게 줄여줌. 단 구버전의 일부 브라우저는 최신 이미지 포맷을 지원하지 않아 호환성을 고려해야함이미지 사이즈 조정화면에 노출

성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법사용자 요청을 서버가 성공적으로 처리할거라고 미리 예상 후, UI를 즉각적으로 변경해서 사용자에게 빠른 반응을 보여줌ex- 좋아요 기능좋아요 버튼 클릭 시 서버 응답 기다리

interface는 객체의 형태를 확장하는데 용이,type은 튜플, 인터섹션, 유니온 등을 이용하여 더 복잡한 타입 정의 및 조합을 표현하는데 용이튜플고정된 길이와 타입을 가지는 배열ex- string,number타입의 첫번째 요소는 string, 두번째 요소는 num

Html 요소를 사용하는 방식단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식ex- div / span은 비시맨틱 태그header / footer / article / section은 문서 구조와 콘텐츠의 역할을 명확하게 함접근성 개선스크린 리더와

둘 다 nullable한 즉 값이 없다는 의미이지만 차이점은 확실히 존재한다undefined는 js에서 자동으로 할당되는 값임변수를 선언하고, 아무 값도 할당하지 않는다면 그 변수에 js는 undefined를 자동으로 부여함ex - let a;라는 변수를 선언만 하고

컴포넌트가 마운트, 업데이트, 언마운트되는 시점에 호출컴포넌트가 마운트될 때, 즉 처음 렌더링되고 나서 호출됨이때 데이터 초기화나 외부 API 호출, 구독 설정 등의 작업을 실행할 수 있음useEffect는 컴포넌트가 처음 마운트될 때 필요한 초기 작업을 수행할 수 있

비동기 작업을 관리하고, 해당 작업의 성공, 실패 결과를 나중에 사용할 수 있도록 하는 객체즉, 비동기 작업의 완료 여부를 약속해주는 개념JS는 비동기 처리를 위한 콜백 함수를 많이 사용함그러한 코드가 복잡해지면 콜백 지옥 문제가 발생됨Promise는 이러한 비동기 처

ECMAScript 2015 즉 자바스크립트의 최신 버전코드의 가독성과 유지보수성을 높이고, 현대 앱플리케이션의 요구를 반영하기 위한 여러 기능들을 제공.let과 const키워드가 추가let-변수 선언, const-상수 선언이 둘다 블록 스코프를 가져서 코드 안정성이

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

호이스팅에서 차이가 있음이름이 있는 함수JS 엔진이 코드를 실행하기 전에 메모리에 로드하기 때문에 호이스팅이 발생즉, 함수 선언식으로 정의된 함수는 코드 내 어디서든 호출 가능변수에 익명 함수를 할당하는 방식할당된 변수명으로 호출할 수 있음다만 호이스팅되지 않으며 변수

비동기 처리 시 사용되는 값들resolve는 완료시키는 함수fulfilled는 완료된 상태resolve는 Promise가 성공적으로 끝났을 때 결과 값을 넘겨주는 함수ex- 어떤 비동기 작업이 잘 끝났을 때, resolve를 호출해서 작업이 끝나고 결과가 이거다라고 전

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

서로 다른 출처에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책기본적으로 브라우저에선 보안 상의 이유로 동일 출처 정책(Same-Origin Policy)이 적용되어 있음다른 출처의 서버에 요청을 보낼 경우, 해당 요청에 대한 응답에 접근할 수 없도록 막음이로 인

react.memo로 컴포넌트를 메모이제이션하기컴포넌트의 props가 변경되지 않을 시 리렌더링을 막을 수 있음특히 부모 컴포넌트가 자주 업데이트되리 시 유용함=================================useMemo와 useCallback훅으로 값과 함

브라우저에서 제공하는 클라이언트 측 저장소 API둘 다 데이터를 키-값 쌍 형태로 저장함차이점은 데이터의 지속성, 범위localStorage는 데이터 영구적으로 저장즉, 브라우저 닫거나 장치 재부팅해도 데이터가 유지됨동일한 도메인 내의 모든 탭에서 데이터 공유 가능ex

서버 상태(서버 제공 데이터)관리의 복잡성 극복 위해 사용하는 라이브러리효율적인 캐싱 처리 기능 제공동일 데이터 반복적 요청하지 않아 네트워크 비용 절감, 캐싱된 데이터 즉시 제공해 더 나은 사용자 경험 제공 가능비동기 데이터 관리의 복잡성 줄여줌데이터 가져오기, 갱신

번들러 란? 다양한 파일과 모듈을 하나의 배포 가능한 번들로 묶는 역할sdf

이벤트 버블링은가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식ex-버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생 후 이벤트가 상위 요소인 div, body, document, window로 전파되는 과정을 거침기본적으로 브라우저는 이벤트 전파를 버블링

ui를 구성하는 독립적이고 재사용 가능한 코드 조각, 특정 기능이나 UI 요소를 캡슐화함주로 단일 책임 원칙을 따름클래스형과 함수형으로 나뉘는데, 최근 hooks도입으로 함수형 컴포넌트가 주로 사용됨더 간결하고 이해하기 쉬운 코드를 작성할 수 있게 해줌컴포넌트의 주요

정적 타이핑 통해 코드 안정성 크게 향상개발 시 타입 오류를 런타임으로 실행하기 이전에 발견할 수 있어 런타임 에러를 줄이고, 코드의 품질 개선개발자의 생산성 높여줌IDE의 자동완성 기능과 인텔리센스가 더 많은 정보를 제공할 수 있게 되기 때문에 코드 작성 속도가 빨라

리액트 18버전에서 도입된 새로운 기능서버에서만 렌더링되는 컴포넌트임즉 브라우저 쪽 번들 크기를 줄이고, 초기 로딩 속도를 개선할 수 있음ex - 데이터베이스, api에서 데이터 가져오는 작업을 서버에서 처리하고 클라이언트로 보낼 수 있어서 클라이언트와 서버 간 데이터

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

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

정보(데이터)의 역할Header는 데이터의 메타 정보를 담음즉, 데이터 자체가 아니라 데이터에 대한 컨텍스트 정보를 포함함이로써 수신자가 데이터를 어떻게 처리해야 할지 지침을 제공하는 역할ex - http 요청이나 응답에서 header에는 Content-Type, Au

CSS-in0JS의 단점을 보완하기 위해 등장한 방식기존에 많이 쓰이던 CSS-in-JS 방식은 스타일을 컴포넌트 안에서 작성해서 동적으로 생성이러한 방식은 런타임에서 css를 만들다 보니 성능 문제가 생길 가능성이 있음ex- 사용자가 페이지를 로딩할 때마다 CSS를

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

px화면의 물리적인 픽셀 단위를 기준으로 한 고정 단위이 값은 절대적인 크기를 나타냄요소의 크기가 고정되어 디바이스의 해상도나 사용자 설정에 영향 받지 xex - font-size:16px로 설정하면 항상 16픽셀 크기로 표시픽셀 단위는 간단하고 정확한 제어를 제공,

데이터 속성은 사용자 정의 데이터를 HTML 요소에 저장하기 위해 사용되는 속성선언 방법은 data-로 시작하는 속성을 HTML 태그에 추가하면 됨ex - <div data-user-id='12345' data-role='admin'></div>와 같이 사용

모두 이벤트 객체의 속성, 각각 이벤트가 실제로 발생한 요소 / 이벤트 리스너가 연결된 요소를 가리킴둘의 차이점을 이해하려면 이벤트 버블링을 알아야 함이벤트는 특정요소에서 발생 후 부모 요소들로 전파되는 과정(버블링)을 거치는데, 이 과정에서 다르게 동작함ex - 부모

Content Delivery Network는 전 세계에 분산되어 있는 서버들을 통해 사용자에게 웹 컨텐츠를 빠르고 효율적으로 제공하는 기술웹 사이트의 이미지, CSS, JS파일, 동양상 등 정적 컨텐츠를 사용자와 물리적으로 가까운 서버에서 전달하는 방식작동 방식은 자

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

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

Node는 DOM을 구성하는 가장 기본적인 구성 단위"Document Node"는 HTML 문서 전체를 나타내는 루트 노드"Element Node"는 HTML 태그를 나타내고, "Text Node"는 텍스트 내용을,"Comment Node"는 주석을 나타냄이처럼 Nod

컴포넌트 내에서 변경 가능한 값을 저장하고 관리할 수 있게 해줌DOM 요소에 접근, 값을 유지하면서 렌더링을 트리거하지 않기 위해 사용DOM 요소 접근만약 특정 DOM 요소에 직접 접근하고 싶을 때 useRef()를 사용하여 해당 요소의 참조를 얻을 수 있음이는 use

Test-Driven Development테스트를 먼저 작성한 후 실제 코드를 작성하는 방법론TDD는 일반적으로 'Red-Green-Refactor' 사이클을 따름첫 단계인 Red는 실패하는 테스트를 작성이 테스트는 아직 구현되지 않은 기능에 대한 테스트,코드가 이를

프로토타입은 js에서 객체 간의 상속을 구현하는 메커니즘js의 모든 객체는 기본적으로 \[Prototype]이라는 숨김 프로퍼티를 가지고 있으며, 이 프로퍼티는 다른 객체를 참조하거나 null 값을 가짐.프로토타입 연결은 Object.create()나 함수 생성자의 p

JPEGJoint Photographic Experts Group의 줄임말, 손실 압축 방식 사용하는 이미지 포맷파일크기를 효율적으로 줄일 수 있는 장점이 있음이미지를 저장할 때마다 데이터 손실되어 화질이 점점 나빠짐여러번 편집하고 저장 과정 반복 시 이미지 품질 현저

box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성레이아웃을 스타일링할 때 예상치 못한 크기(너비, 높이) 변화가 발생하곤 함 그때 도움이 됨content-box / border-box 두가지 옵션이 있음box-sizing: content-b

프록시 서버 이용하면 CORS 설정 없이도 SOP 우회 가능프록시 서버 - 브라우저 대신 외부 서버에 요청을 보내고 응답을 받는 역할을 대리 수행하는 서버브라우저 측에서 직접 외부 서버에 요청을 보내지 않고, 클라이언트와 동일한 origin의 프록시 서버를 통해 요청

React에서 사용되는 핵심 개념, 실제 DOM을 JS객체 형태로 복제한 가벼운 복사본브라우저의 DOM은 구조가 복잡하고 직접 조작하는 작업의 성능 비용이 높음가상 돔은 이를 개선하여 웹 애플리케이션의 성능을 최적화할 수 있음핵심 아이디어는 상태 변경이 발생할 때마다

애플리케이션 배포 과정을 자동화하여 더 짧은 주기로 고객에게 서비스를 제공하는 방식CI - Continuous Integration - 지속적 통합CD - Continuous Delivery - 지속적 전달 또는 Continuous Deployment - 지속적 배포C

Ract 구현을 위해선 번들러 설정, 라우팅 설정, 다양한 렌더링 방식을 위한 추가 세팅 등 복잡한 과정을 거쳐야 함Next.JS는 이러한 복잡한 과정 생략하고, 기본적으로 설정된 환경에서 편하게 웹 애플리케이션을 개발할 수 있도록 도와줌ex - 파일 기반 라우팅 시스

애니메이션이나 동적인 위치 변경이 필요한 경우 transform을 선호 transform은 브라우저의 composite 단계에서 실행됨 따라서 reflow나 repaint를 유발하지 않아 성능 상 이점이 있음 반면, position 속성을 이용한 위치 변경은 reflo

내 예상은 a changed / {b: changed} / c: changed 즉 전부 바뀔거라 예상했다그치만a unchanged {b: 'unchanged'} {c: 'changed'}c만 바뀌었고,자바스크립트는 Call by Value 방식으로 매개변수를 전달이는

Next.js에서 제공하는 기능서버에서 실행되며 브라우저에서 호출할 수 있는 비동기 함수이 기능은 서버 로직을 직접 호출함으로써 클라이언트와 서버 간의 상호작용을 간소화할 수 있게 해줌ex - 백엔드 서버와 API 통신을 하는 대신 Next 서버에서 데이터베이스에 직접

오늘 면접을 갔다가 이 xx가 거꾸로 대답한 전설의 쿠키와 세션의 차이아는건데 왜 실수하지? 그건 그만큼 딥하게 공부하지 않았다는 증거버튼누르듯이 물어보면 바로 대답할 수 있게 또 정리하고 정리하다보면 머리속에 들어오겠찌...저장위치쿠키:클라이언트에 저장세션:서버에 저

Stacking Context는 가상의 z축을 상정하여 HTML 요소들을 3차원으로 개념화한 것요소들이 쌓이는 순서에 영향을 미침기본적으로 HTML 요소는 DOM 순서에 따라 쌓임HTML 상에서 위쪽에 위치할수록 아래쪽에 쌓이는 방식또한, position 속성이 적용되

JS는 싱글 스레드 언어 즉 한번에 하나의 작업만을 처리하는 단일 콜 스택을 가짐 그러나 브라우저, Node.js환경이 제공하는 비동기 처리 메커니즘 덕에 여러 작업을 동시에 수행할 수 있음 브라우저의 Web API, Node의 libuv, 이벤트 루프, 테스트 큐를

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

자바스크립트에서 this는 함수가 호출되는 방식에 따라 값이 달라짐전역 호출this는 전역 객체를 참조브라우저 환경에선 window 객체, node.js환경에선 global객체매서드 호출객체의 메서드로 호출된 함수에선 this가 해당 객체를 참조생성자 함수와 클래스새로

컴파일러에게 특정 값이 어떤 타입인지 개발자가 더 잘 알고 있다고 알려주는 방법as를 이용해 타입을 단언하면, 자동 추론된 타입을 덮어쓰게 됨이는 컴파일러가 타입을 자동으로 추론하지 못하거나 잘못 추론하는 상황에서 사용됨ex - DOM 요소를 가져오는 document.

모두 브라우저 간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일Reset CSS는 모든 브라우저의 기본 스타일을 완전히 제거하는 방식ex - HTML 요소에 기본적으로 적용된 여백, 패딩, 글자 크기 등을 초기화하여, 모든 요소를 스타일이 전혀 없는 상태로 만듬개발

이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공하여 사용자에게 콘텐츠를 이해할 수 있도록 돕는 역할ex - 네트워크 문제로 이미지 로드되지 않으면 alt속성의 텍스트가 대신 표시하여 이미지의 의도 전달접근성 측면에서도 큰 도움스크린 리더를 사용하는 시각 장애 사용

mono(단일)과 repo(레포지토리)를 합친 용어, 여러 프로젝트 또는 패키지를 하나의 코드 저장소에 통합하여 관리하는 방식 프로젝트 단위로 분리된 구조

git flow, github flow, trunk-based developmentgit flow에서 기능 개발은 feature 브랜치에서 이루어지고, 완료 후 develop 브랜치에 병합됨. 릴리스를 준비할 땐 release 브랜치를 따로 만들어 QA와 최종 검증을

CSS를 더 효율적이고 체계적으로 작성할 수 있도록 도와주는 도구 = CSS 전처리기CSS는 기본적으로 스타일 규칙을 선언하는 데 필요한 문법만 제공해서 반복적인 작업이나 코드의 재사용성이 떨어짐CSS 전처리기는 이러한 한계를 극복하고 CSS에 프로그래밍적 기능을 추가

문제를 정확히 이해하는 것이 가장 중요가정 먼저 오류 메세지를 꼼꼼하게 읽어 어떤 원인에 의해 문제가 발생한 것인지 구체적이고 명확하게 파악하려 노력문제를 격리하는 과정이 필요코드 베이스가 클수록, 문제가 특정 위치에 국한되지 않고 여러 요소가 얽혀 있을 가능성이 높음

리액트가 state를 관리하는 방식이 useState를 호출하는 순서와 연관되어 있기 때문리액트는 컴포넌트 내부에서 useState()가 호출된 순서를 기준으로 state를 저장하고 업데이트 함but조건문 안에서 호출하면 특정 렌더링 시에는 호출되고, 다른 렌더링에서는

의사 요소는 CSS 선택자에 추가하는 키워드, 특정 요소의 일부분에 스타일을 적용할 때 사용일반적인 CSS 선택자는 요소 전체의 스타일을 지정하지만, 의사요소를 사용하면 요소 내부의 특정 부분에만 스타일을 적용할 수 있음ex - ::before, ::after, ::f

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

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

this 바인딩 차이여기서 바인딩은 함수 내부의 this 키워드가 어떤 객체를 참조할지 결정하는 것인데, JS에서 this의 값은 함수가 어떻게 호출되었는지에 따라 달라짐일반 함수에선 자신만의 this를 가지고, this의 값은 함수가 어떻게 호출되었는지에 따라 결정화

데이터가 최초 생성된 이후 그 상태를 변경할 수 없는 성질불변성을 지키면 예측 가능하고 안정적인 코드를 작성할 수 있음객체, 배열 같은 참조 타입은 기본적으로 가변적ex-객체의 프로퍼티 값을 직접 변경 가능. 여기서 만약 불변성을 유지하고 싶다면 객체의 프로퍼티를 직접

requestAnimationFrame()은 브라우저의 화면 갱신 주기에 맞춰 콜백 함수를 실행하도록 요청하는 API이를 통해 애니메이션을 보다 부드럽게 렌더링하고 성능 최적화 할 수 있음목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신 속도에 맞추는 것브

pnpm은 npm에 비해 성능과 디스크 효율성 개선한 패키지 매니저npm이나 yarn 사용하면 프로젝트의 node_modules 폴더에 각 패키지의 실제 복사본 저장됨pnpm은 content-addressable store라는 전역 저장소에 패키지를 보관한 후, 각 프

인증 - 사용자가 누구인지 확인하는 과정인가 - 사용자가 특정 자원에 접근할 권한이 있는지 확인하는 과정인증 - 사용자의 신원을 검증하는 과정ex - 웹사이트에 로그인할 때 아이디와 비밀번호를 입력받아 해당 사용자가 누구인지 검증하는 것이 이에 해당됨인증 방식엔 비밀번

npm install, npm ci(clean-install) 모두 의존성 목록을 설치하는 커맨드, 세부 동작 차이가 있음npm ci는 npm install에 비해 의존성의 버전을 엄격하게 유지함npm install은 package.json에 명시된 version ra

클라이언트가 백엔드 api를 직접 호출할 때 발생하는 여러 문제를 해결하기 위해, 프론트엔드를 위한 보조 서버를 두는 방식클라이언트와 백엔드 사이에서 데이터 가공 및 전달을 담당하며, 이를 통해 프론트엔드가 효율적으로 동작할 수 있도록 도와줌BFF는 MSA(Micros

infer는 조건부 타입에서 특정 타입을 추론하는 데 사용즉, 타입을 직접 지정하는 것이 아닌 TS가 해당 타입을 유추할 수 있도록 돕는 역할infer는 extends를 사용하는 조건부 타입 안에서 활용, 특정 타입 분해하여 사용할 수 있음함수타입T의 반환 타입을 추출

rel 속성을 적절히 설정하여 중요 정보 유출되지 않도록 해야함rel='noopener'를 설정하여 외부 페이지에서 opener 객체에 접근할 수 없도록 막아야 함기본적으로 target='\_blank'가 설정된 a를 통해 열린 외부 사이트에서 window.opener

순수 함수 - 동일한 입력에 대해 항상 동일한 출력을 반환하는, 부수 효과가 없는 함수부수 효과를 일으키는 비순수 함수는 테스트하기 까다로움ex - 함수 외부의 상태에 의존하거나, API 호출을 하거나, DOM을 직접 조작하는 등의 동작이 포함된 함수는 외부의 영향을

Cache-Control은 클라이언트(브라우저)와 중간 서버(proxy,CN 등)가 어떤 방식으로 캐싱할 지 지정하는 헤더즉 특정 응답을 얼마나 오래, 어떻게 캐싱할 것인가를 결정이를 잘 활용하면 불필요한 네트워크 요청을 줄이고 웹 성능 개선 가능핵심은 특정 리소스를

모바일 앱 내에 포함된 웹 브라우저네이티브 앱 내부에서 웹 페이지를 불러와서 마치 앱의 일부처럼 동작하도록 만들어 줌하이브리드 앱 개발에 사용되며, 안드로이드에선 WebView, ios에선 WKWebView를 통해 구현웹 브라우저 엔진을 활용하여 HTML, CSS, J

리렌더링 시 동작방식 차이let 선언 변수는 컴포넌트가 리렌더링될 때마다 초기화되어서 이전 값을 잃어버리는 반면,useRef()로 만든 변수는 리렌더링 되어도 값 유지더불어 useRef()는 useState()와 다르게 상태 값 변경되어도 컴포넌트가 리렌더링 유발되지

메모리 캐시메모리, 즉 RAM에 저장돼서 빠른 속도가 특징현재 열린 탭에서 CSS,JS같은 리소스들 바로 가져올 때 유용but브라우저 창 닫고나 새로고침 시 해당 리소스들 사라짐반면디스크 캐시는 하드디스크나 SSD 같은 저장장치에 저장돼서, 브라우저를 껐다 켜도 남아

9,1,4,2,3,5,8,6,7을 예상했지만9,5,8,7,1,4,3,6,2 순서였다이벤트루트는 이러한 과정으로 태스크를 처리하는데동기 코드 순차적으로 처리마이크로태스크 큐의 모든 태스크 처리(큐 비워질 때까지)매크로태스트 큐에서 하나의 태스크 가져와 처리다시 1번 돌아

사용성 향상 및 성능 최적화를 빠르게 구현할 수 있기 때문next/image는 placeholder 속성으로 로딩 중일때의 사용자 경험 개선 가능기본 img는 이미지 로등하는 동안 빈공간이지만, next/image는 placeholder 옵션을 활용해 로딩 전에도 이미

뷰포트 높이를 측정하는 새로운 단위기존 vh(viewport height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에선 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어 정확한 높이를 계산하기 어렵다는 단점이 있음dvh(Dynamic V

never는 절대 발생할 수 없는 값을 나타내는 타입함수가 값을 반환하지 않고 항상 예외를 던지거나 무한 루프를 도는 경우, 그 반환 타입은 nevernever는 bottom type 이라고도 불리며 모든 타입의 하위 타입ex이 함수는 어떤 값도 반환하지 않고, 실행될

사용자가 웹 페이지 요청 시 HTML 문서 브라우저로 전송브라우저는 이를 파싱하면서 CSS 파일 로드하고, CSS 내에 font-face가 있는지 확인함이@font-face를 통해 브라우저는 폰트 파일의 위치와 스타일을 파악하게 됨다음으로, 브라우저는 @font-fac

프로그래밍 패러다임 중 하나순수 함수와 불변성 강조하는 방식어떻게 보단 무엇에 집중하고 순수 함수를 조합하는 형태로 코드를 작성한다는 특징핵심 개념 중 하나는 순수함수순수함수란 동일한 입력에 대해 항상 동일한 결과를 반환하고, 외부 상태를 변경하지 않는 함수만약 함수

false부동소수점 형식의 한계 때문JS에서 모든 숫자는 IEEE 754 표준을 따르는 64비트 부동소수점 형식으로 저장됨이 방식은 일부 소수점 연산에서 정확한 값을 저장하지 못하는 한계를 가짐ex - 0.1과 0.2를 이진수로 변환하면 무한 반복되는 소수로 표현되어

실제 풀스택 게시글 작성하기 위해 docker-compose up을 실행 시켜 간단히 button 태그 하나 추가해보았지만 실제 웹 사이트 ui가 변경되지 않았다.그래서 강의에서도 버전 딱히 적어놓지마라 했지만 상관없을 것같아서 기재했지만 아예 속성 자체가 필요가 없어

구글이 웹사이트 사용자 경험을 평가하기 위해 제안한 핵심 지표이 지표들은 사용자 경험과 직결될 뿐 아니라, SEO에도 영향을 미치기 때문에, 프론트엔드 개발자면 꼭 이해하고 최적화할 필요가 있음(ㅗㅜㅑ 몰랐음)LCP,INP,CLS로 구성됨LCP(Largest Conte

최종 번들 크기를 줄이기 위해 사용되지 않는 코드를 제거하는 최적화 방법주로 모듈 시스템을 기반으로 동작하며, 사용되지 않는 데드 코드를 감지하고 번들에서 제거하여 최적화트리 쉐이킹이 작동하려면 ES 모듈 사용해야함.ES 모듈은 정적인 구조를 가지기 때문에, 코드 분석

동적 타입 언어런타임 시점에 변수의 타입이 결정되는 언어ex - js, pythhon,ruby 등이 있음변수의 타입이 고정되어 있지 않아 하나의 변수에 다양한 타입의 값을 할당할 수 있음ex -이처럼 개발자가 타입을 명시적으로 선언할 필요 없이 자유롭게 코드를 작성할

기존 타입 정보를 유지하면서 해당 값이 특정 타입 조건을 충족하는지 확인할 때 사용ex- 유니온 타입 다룰 때 이점palette.green의 타입은 string | RGB로 변환 추론되어서 .toUpperCase() 호출 시 타입 에러 발생함그러나 satisfies를

JavaScript XML의 약자로, React에서 UI를 선언적으로 표현하기 위해 사용하는 확장 문법HTML과 유사한 문법을 사용하여 JS 코드 안에서 UI 구조를 직관적으로 표현할 수 있도록 해줌JSX는 브라우저에서 직접 실행할 수 없음Babel같은 트랜스파일러를

스타일이 충돌할 때 어떤 것이 우선 적용될지를 결정하는 개념웹 페이지에서 여러 개의 CSS 규칙이 동일한 요소에 적용될 수 있음이때 브라우저는 명시도를 계산하여 어떤 스타일을 적용할지 판단함우선순위1\. 인라인 스타일2\. id 선택자3\. 클래스, 가상 클래스, 속성

개발자가 의도치 않게 참조를 유지하는 경우 발생이벤트 리스너 해제하지 않는 경우ex - 특정 DOM 요소에 이벤트 리스너를 등록한 후 해당 요소를 제거할 때, 이벤트 리스너를 명시적으로 제거하지 않으면 해당 요소에 대한 참조가 유지되어 메모리가 해제되지 않음이를 방지하

npm에서 사용되는 의존성의 유형dependency프로덕션 환경에서도 필요한 패키지ex - react 프로젝트면 react 패키지는 실행에 필수적이므로 dependencies에 포함이 의존성은 배포 환경에서도 설치되며, 애플리케이션이 동작하는 데 직접적인 영향 미침de

UI 컴포넌트 개발하고 문서화하는 데 사용되는 개발 도구컴포넌트의 상태와 동작을 독립적으로 테스트할 수 있도록 도와줌Storybook에서 Story는 특정 컴포넌트가 특정 상태에서 어떻게 렌더링되는지를 정의ex - 버튼 컴포넌트가 기본 상태에서 렌더링되는 모습과 비활성

리퀘스트 메모이제이션동일한 요청이 여러 번 발생할 때, 불필요한 추가 요청을 방지하는 기능기본적으로 Nest.js는 서버 사이드에서 동일한 요청이 중복 발생하면 기존 응답을 재사용함이를 통해 하나의 페이지 내에 존재하는 중복된 요청을 방지하여 네트워크 비용을 감소시킴클

3-way handshake는 TCP 연결을 수립하는 과정, 클라이언트와 서버 간에 신뢰성 있는 연결을 보장하기 위해 존재클라이언트가 서버에 SYN 패킷을 보내면서 연결 요청 시작SYN 패킷쉽게 말하면 인터넷에서 컴퓨터 두 대가 서로 대화를 시작하려면, 서로 연결을 맺

코드 설계의 품질을 결정하는 중요한 개념들결합도서로 다른 모듈 간에 상호 의존하고 있는 정도가 얼마나 높은지를 의미만약 결합도가 낮으면 모듈의 독립성이 높아져 변경이 용이해지고 코드의 재사용성이 증가함반면,결합도가 높으면 한 모듈이 변경될 때 다른 모듈도 영향을 받을

JS에서 객체를 생성하는 하나의 방법일반적으로 function 키워드 사용하여 정의,new 키워드와 함께 호출할 경우 새로운 객체 만들어짐생성자 함수 내부의 this 키워드는 새롭게 생성된 객체를 가리킴여기에 속성 추가하면 해당 객체에 저장됨ex-생성자 함수는 유지보수

C와 같은 저수준 언어에선 malloc(), free()와 같은 함수를 통해 개발자가 직접 메모리 할당하고 해제. JS에선 이러한 작업이 언어 차원에서 자동으로 이루어짐변수나 객체 생성할 때 발생.ex - const name = 'maeil-mail'; 와 같은 코드에

국제표준화기구(ISO)에서 제시한 국제 표준 규약으로, 네트워크 통신이 일어나는 과정을 7개의 계층으로 나누어 정의각 계층은 하위 계층의 기능만을 이용하며 상위 계층에게 기능을 제공1계층 물리 계층(Physical Layer)실제로 데이터를 전송하는 하드웨어적인 부분

HTTP 프로토콜에서 사용되는 헤더로, 웹 리소스의 특정 버전을 식별하는 고유한 식별자서버가 클라이언트에게 리소스 전송할 때 ETag 헤더를 포함시키고, 클라이언트는 이후 요청 시 If-None-Match 헤더에 이 값을 포함하여 조건부 요청 보낼 수 있음ETag의 주

JSON 데이터의 형식을 기술하고 검증하기 위한 명세서특정 JSON이 어떤 구조를 가져야 하는지를 명시할 수 있도록 해줌ex - 회원 정보에 대한 명세정확한 활용법먼저, 백엔드 API와의 통신 과정에서 데이터 형식을 검증하는 데 활용될 수 있음ex - 백엔드에서 데이터

브라우저에서 페이지를 전환할 때 전체 페이지를 다시 불러오지 않고, 현재 로딩된 애플리케이션 내에서 필요한 컴포넌트만 교체하는 방식기본적으로 사용자가 <Link to='/about'>About><Link> 같은 요소 클릭 시, 브라우저는 바뀐 URL에 따라

관계형 데이터베이스는 데이터를 테이블 형식으로 저장하고 관리하는 데이터베이스각 테이블은 고정된 스키마를 가지며, 행(Row)은 개별 레코드, 열(Column)은 속성을 나타냄각 테이블은 고유한 스키마를 가지고 있어, 데이터 타입과 구조가 엄격하게 정의되어 있음ex- M

Cache-Control 헤더의 디렉티브임.캐싱 유지 기간이 끝난 오래된 컨텐츠를 어떻게 처리할 것인지에 대한 지시를 표현stale-while-revalidate의 핵심 아이디어는 오래된 캐싱 데이터를 먼저 보여주고, 그 후 새로운 데이터를 백그라운드에서 받아와 갱신하

여러 개의 인자를 받는 함수를 단일 인자를 받는 함수들의 함수열로 바꾸는 기법다시 말해, 여러 개의 인자를 한번에 받지 않고, 하나씩 여러 차례 받는 형태로 변환예를 들어, 두 수를 더하는 함수를 일반적으로 작성하면 add(2,3)처럼 두 개의 인자를 동시에 전달해야

HTTP 2.0이라고도 불리는 HTTP/2는 기존 HTTP/1.1의 성능 한계를 개선하기 위해 등장한 프로토콜로드 속도를 향상시키고 네트워크 자원을 효율적으로 사용할 수 있도록 여러 기능들이 추가됨가장 핵심적인 변화는 MultiplexingHTTP/1.1에서도 Pipe

컴퓨터 자원을 효율적으로 활용하고, 상황에 따라 작업의 안정성 또는 처리 속도를 개선하기 위한 기법하나의 프로그램이 여러 개의 프로세스르르 생성해, 각각이 독립적으로 실행되는 구조각 프로세스는 자신만의 메모리 공간을 가지고 있음.하나의 프로세스에서 문제가 생겨도 다른

크롬 V8 엔진을 기반으로 동작하는 JS 런타임 환경브라우저에서만 동작하던 JS를 서버 사이드 환경에서도 실행할 수 있도록 만들어 줌싱글 스레드 기반 동작기본적으로 하나의 스레드로 연산 작업을 수행한다는 뜻, 요청마다 JS 실행 스레드를 추가 생성하거나 할당하지 않음일

웹 페이지의 로딩 성능을 최적화하는 기법, 페이지의 전체 콘텐츠를 한 번에 로딩하는 대신 중요도에 따라 콘텐츠를 단계적으로 로딩하는 방식사용자는 핵심 콘텐츠를 먼저 볼 수 있게 되어 체감 로딩 시간이 단축됨주요 기법 - 서버 사이드 렌더링(SSR), 클라이언트 사이드

XSS(Cross-Site Scripting)는 공격자가 신뢰할 수 있는 웹사이트에 악성 스크립트를 삽입하여 사용자 브라우저에서 실행되게 하는 공격이를 통해 쿠키 탈취, 세션 하이재킹, 피싱 등이 가능저장형(Stored) XSS악성 스크립트가 서버에 저장되어 다른 사용

JS에서 데이터를 순차적으로 순회하여 탐색할 수 있도록 정해놓은 프로토콜 존재하는 이유는, 다양한 자료구조를 같은 방식으로 순회할 수 있게 하여 일관된 반복 처리 방법을 제공하기 위함 ex- String, Set, Map 등은 서로 다른 구조지만, 이터러블 프로토콜을

브라우저와 서버가 TLS 프로토콜을 통해 암호화된 통신을 시작하기 전, 안전하게 연결을 설정하는 절차먼저 브라우저가 Client Hello 메세지를 보냄여기엔 브라우저가 지원하는 TLS 버전, 사용할 수 있는 암호화 알고리즘 목록, 세션 ID, Client Random

next/link는 선언적인 방식으로 클라이언트 측 라우팅을 구현하는 데 사용되는 React 컴포넌트HTML의 a 태그와 유사하지만 페이지 전체 다시 로드하지 않고 클라이언트 측에서 부드럽게 페이지 전환특징선언적 : JSX내에 <Link href=’/경로’>…&l