프론트엔드 기본기 정리

자바스크립트는 단일 스레드 언어이기 때문에 한 번에 하나의 작업만 실행할 수 있다. JS가 실행되는 과정에서 함수가 호출되면 해당 함수가 콜스택에 올라갔다가 실행이 끝나면 바로 빠져나간다. 만약 오래 걸리는 작업이 콜스택에서 실행되고 있다면

일반 로그인 vs 소셜 로그인 (프론트 기준) 일반 로그인 1. 회원가입 버튼 클릭 2. 아이디 중복 체크 3. 비밀번호 입력 4. 서버에 회원가입 요청 (POST) 5. 서버가 DB에 사용자 정보 저장 6. 프론트에서 아이디 + 비밀번호로 로그인..

우리가 흔히 사용하는 웹사이트 주소를 보면 대부분 https://로 시작하는 것을 볼 수 있다. 웹 주소는 사실 IP 주소이며, 142.250.206.14 와 같은 숫자 조합으로 이루어져 있다. 하지만 이런 주소는 외우기도, 입력하기도 어렵기 때문에

Postman은 API 요청과 응답을 쉽게 테스트할 수 있는 도구이다. 주로 백엔드는 서버에 올리기 전, 로컬 환경에서 API 동작을 직접 확인하기위해, 프론트엔드는 백엔드가 작성한 API 명세서의 응답 형태가 빠져있을 경우나 API가 실제로 잘 동작하는지 확인하기 위

타입은 무엇을 기준으로 정의되고, 어떤 관계로 이어지며, 어떻게 오류를 잡을까? 타입스크립트는 구조적 타입 시스템을 사용합니다. 타입을 명시할 때는 부모–자식 처럼 보이는 계층적 할당 가능성 규칙에 따라 값이 허용되거나 거부됩니다.

리액트 컴포넌트 종류에는 클래스형, 함수형 컴포넌트가 있습니다. 훅이 나오기 이전에는, 클래스형에서만 상태관리나 생명주기 제어가 가능했는데, 러닝커브가 길고 생명주기 메서드마다 코드를 작성해야 해서 중복코드와 복잡성이 있었습니다. 훅이 등장하면서 함수형에서도 제어가

TanStack Query란? TanStack Query는 React Query가 확장되면서 이름이 바뀐 라이브러리입니다. 단순히 fetching, 캐싱, 동기화만 지원하는 것이 아니라 페이지네이션, 무한 스크롤, 다양한 캐시 전략 등 성능 최적화를

상대경로 현재위치를 기준으로 상대방의 위치를 찾아가 나타내는 경로이다..

css에서 가장 많이 쓰이는 padding, margin 두 개 차이점 정리 보통 강의에서나 공식문서상에서는 ~ 이라 설명하는데 안쪽 여백, 바깥 여백이란 말 자체는 이해된다해도 실제 코드를 짤 때면 상황마다 어떻게 써야하는지 헷갈리더라구요 제 느낌대로

Rest Api란 ? 웹은 기본적으로 프론트엔드(화면) ← 서버 ← 데이터베이스 순서로 연결되어 동작합니다. 이때, 프론트엔드가 서버와 데이터를 주고받기 위해 따라야 하는 통신 규칙이 REST입니다. REST에는 대표적으로 다음과 같은 메서드가..

Q1. CSR SSR 차이 크게는 브라우저에서 JS로 화면을 구성하느냐, 서버에서 완성된 화면을 전달하느냐의 차이이다. - CSR : 브라우저(클라이언트)에서 렌더링하는 방식으로, 대표적으로 React가 있다..

우리가 보이는 지금 이 화면이 사용자에게 보여지려면, 결국 컴퓨터가 이해할 수 있는 형태로 전달되어야 한다. 하지만 사람이 기계어를 직접 작성하기는 어렵기 때문에 HTML, CSS, JavaScript 같은 코드로 작성하고, 이를 브라우저나 엔진이 해석해서 실행한다.

호이스팅이란 무엇일까? 호이스팅은 보통 끌어올려진다 라고 표현한다. 하지만 실제로 코드가 위로 올라가는 것은 아니다. 코드 실행 전에 변수나 함수를 미리 메모리에 등록해놓고 실행 단계에서 참조하는 것이라 할 수 있다.

렌더링이란? 컴포넌트 함수가 호출돼서 JSX를 반환하는 과정이다. setState가 호출되면 함수 컴포넌트가 호출되고 그 결과가 가상 dom tree에 들어가고 이전 가상 dom과 실제 dom을 비교한 뒤 달라진 부분이 있으면 실제 dom에 반영되어 브라우저 렌더링이

원시값이란? 변경 불가능한 값이다. 변수에는 실제값이 저장되며, 복사하면 값 자체가 복사된다. 쉽게 말하면 일반 값이다. ex) string, number, boolean, null, undefined, symbol 객체란? 변경 가능한 값이다.

리액트 렌더링 원리 리액트 렌더링과 브라우저 렌더링은 공통적으로 자체적인 렌더링 프로세스가 있지만 과정이 아예 다르다.