프론트엔드(JS&TS&REACT&NODE&NEXT) 공부

Node.js와 Next.js는 모두 JavaScript 생태계에서 중요한 역할을 하지만, 그 용도와 기능에는 큰 차이가 있습니다.Node.js는 Chrome V8 JavaScript 엔진을 기반으로 하는 JavaScript 런타임입니다. 이를 통해 서버 측에서 Jav

JavaScript에서 함수는 일련의 과정을 수행하는 코드 블록입니다. 함수를 사용하면 코드의 재사용성이 향상되고, 프로그램의 구조가 명확해집니다. JavaScript에서 함수를 만드는 주요 방법은 두 가지입니다: 함수 선언(함수 선언문)과 함수 표현식.함수 선언은 f

아래는 TypeScript와 JavaScript의 주요 차이점과 각각의 장단점을 비교한 표입니다. 이 표는 간단한 코드 예제를 사용하여 두 언어 간의 차이점을 설명합니다.이 표를 통해 JavaScript와 TypeScript의 주요 차이점과 각각의 장단점을 비교하고,

React에서 상태 관리는 컴포넌트의 동적 데이터를 다루는 핵심적인 부분입니다. 각 상태 관리 방법은 특정한 사용 사례에 맞게 설계되어 있으며, 그에 따른 장단점이 있습니다.가장 기본적인 React Hook으로, 함수 컴포넌트에서 상태를 관리할 수 있게 해줍니다.간단한

: 현대의 웹 애플리케이션은 매우 동적이며, 사용자의 상호작용에 따라 많은 변화가 발생합니다. 상태관리를 통해 애플리케이션의 상태(데이터)를 중앙에서 관리하며, 이를 통해 애플리케이션의 복잡성을 효율적으로 관리할 수 있습니다.: 상태관리 시스템을 사용함으로써 애플리케이

AJAX(Asynchronous JavaScript and XML)는 JavaScript를 사용하여 비동기적으로 서버와 통신하고, DOM을 업데이트하는 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 필요한 데이터만 서버로부터 가져와서 웹 페이지의 일

Node.js 서버 설정:먼저 Node.js가 설치되어 있어야 합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 설치할 수 있습니다.새 Node.js 프로젝트를 시작하려면, 프로젝트 디렉토리를 생성하고 그 안에서 npm init을 실행하여 package.j

1) 리액트 프로젝트 생성npx create-react-app my-app2) 프로젝트 폴더로 이동cd my-app3) 프로젝트 폴더에서 node 프로젝트 시작 (package.json 생성)npm init4) express 설치npm install express5)

함수(function)는 일련의 처리를 모아 이름을 붙인 것으로, 특정 작업을 수행하거나 값을 계산하여 그 결과를 반환합니다. JavaScript에서 함수는 '일급 객체'로 취급되어, 값처럼 변수에 할당하거나 다른 함수의 인자로 전달될 수 있습니다.함수는 JavaScr

JavaScript 연산자 JavaScript 연산자는 변수와 값에 대해 연산을 수행합니다. 연산자는 크게 할당, 비교, 산술, 논리, 조건(삼항) 등 여러 종류로 분류할 수 있습니다. 할당 연산자 할당 연산자는 값 또는 표현식의 결과를 변수에 할당하는 데 사용

JavaScript에서는 다양한 반복문을 제공하여, 컬렉션 또는 반복 가능한 객체를 순회할 수 있습니다. 여기서는 for, for...of, for...in 반복문에 대해 알아봅니다.기본적인 for 반복문은 조건이 거짓으로 평가될 때까지 코드 블록을 반복 실행합니다.반

JavaScript에서 콜백(callback) 함수는 다른 함수에 인자로 전달되는 함수입니다. 콜백은 비동기 작업이 완료된 후 실행되거나, 어떤 이벤트가 발생했을 때 호출되는 등 다양한 상황에서 사용됩니다. 콜백 함수를 사용하는 예는 다음과 같습니다.JavaScript

JavaScript에서 콜백(callback) 함수는 특정 코드의 실행이 완료된 후 실행되어야 할 함수를 말합니다. 콜백 함수는 주로 비동기 처리에서 사용됩니다. 하지만, 비동기 처리를 콜백으로만 관리할 경우, 코드의 중첩이 심해져 "콜백 지옥(Callback Hell

JavaScript에서 클래스(class)는 객체를 생성하기 위한 템플릿입니다. ES6에서 도입된 클래스는 기존의 프로토타입 기반 상속을 보다 명확하고 간단하게 표현할 수 있게 해줍니다. 클래스는 데이터(속성)과 이를 조작하는 코드(메서드)를 하나로 묶는 방법입니다.클

JavaScript에서 상속은 객체의 프로토타입 체인을 통해 구현됩니다. 클래스 기반 언어와 달리, JavaScript는 프로토타입 기반 언어입니다. 하나의 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있습니다.extends 키워드를 사용하여 다른 클래스를 상속

this는 함수의 실행 컨텍스트에 따라 그 값이 결정됩니다. 함수의 호출 방식에 따라 this의 값이 다르게 결정되며, 일반적으로는 함수를 호출한 객체를 가리킵니다.전역 실행 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저에서는 window 객체가 전역 객체입

클로저(Closure)는 JavaScript의 강력한 기능 중 하나로, 함수가 선언될 때의 환경을 기억하여 그 환경 외부에서 호출되어도 해당 환경에 접근할 수 있게 하는 기능입니다. 클로저는 자바스크립트의 스코프와 실행 컨텍스트에 대한 이해를 필요로 합니다.클로저는 다

이 글에서는 각각의 React의 Hook이 무엇인지, 장단점, 사용 예시, 그리고 어떤 상황에서 사용하는 것이 적절한지 자세히 설명하겠습니다.useState는 함수형 컴포넌트에서 상태를 관리하는 기본적인 Hook입니다. 이 Hook을 사용하면 상태 값을 선언하고 그 값

업로드중..Framer Motion은 React 애니메이션 라이브러리로, 간단하고 직관적인 방식으로 동적 애니메이션을 구현할 수 있습니다. 특히 motion, useMotionValue, useSpring, useTransform 같은 훅과 컴포넌트를 제공하여 강력한

Jest는 JavaScript와 TypeScript 프로젝트에서 테스트를 작성하고 실행하기 위한 강력한 테스트 프레임워크입니다. Jest는 단위 테스트(Unit Test), 통합 테스트(Integration Test), 스냅샷 테스트(Snapshot Test)를 지원하

웹 애플리케이션의 렌더링 방식은 크게 네 가지로 나뉩니다: SSR, CSR, SSG, 그리고 LSR. 각각의 작동 방식, 장단점, 그리고 API 호출 방식을 포함하여 자세히 설명합니다.클라이언트가 서버에 요청을 보냄.서버는 필요한 데이터를 API로 가져와 HTML을 생

이벤트 전파(Event Propagation)는 브라우저가 DOM 요소에서 발생한 이벤트를 부모 요소로 전달하는 방식을 의미합니다.이벤트 전파는 두 가지 단계로 이루어집니다.이벤트가 가장 깊은 요소에서 시작하여 부모 요소로 전파되는 방식사용자가 자식 요소를 클릭하면, 

PWA(Progressive Web App)는 웹 기술을 활용하여 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. PWA는 오프라인에서도 작동할 수 있으며, 푸시 알림을 지원하고, 홈 화면에 추가하여 앱처럼 실행할 수 있습니다.다양한 화면 크기(모바

뮤테이션(Mutation)은 데이터를 변경하는 작업(쓰기 작업, POST, PUT, DELETE 요청 등)에 사용됩니다.즉, 사용자의 액션(예: 게시글 수정, 좋아요 클릭, 댓글 작성 등)에 의해 데이터가 변경될 때 뮤테이션을 활용할 수 있습니다.일반적으로 SSR(Se

Zustand를 사용하다 보면 middleware라는 개념을 마주치게 됩니다. 처음에는 생소하지만, 조금만 이해하면 강력한 기능을 간단하게 붙일 수 있어요. 이 글에서는 Zustand 미들웨어가 뭔지, 왜 필요한지, 그리고 실전에서 어떻게 사용하는지를 예시와 함께 정리

파일 안에 적을지, 전역으로 뺄지 헷갈리는 당신에게타입스크립트를 쓰다 보면 이런 상황이 자주 생겨요:“이 타입… 그냥 이 파일 안에서 선언할까?”“아니면 types/ 폴더 만들어서 분리해야 할까?”“근데 분리하면 오히려 파일 왔다갔다 불편한데…?”이런 고민의 본질은 단

React 프로젝트에서 조직도/구성원 같은 더미 데이터를 mockData.ts로 관리하고 있다면,실제 API 서버와 연결될 때 코드를 대거 뜯어고치지 않고도 "그대로 전환"할 수 있는 구조를 만들어둘 수 있습니다.mockData.ts에 있는 데이터를 실제 API처럼 a

Zustand, Recoil, Redux 등 상태 관리 라이브러리를 사용하다 보면 "selector" 라는 개념을 자주 접하게 됩니다.처음에는 “굳이 이걸 왜 써야 하지?” 싶은 생각이 들 수 있지만, 실제 프로젝트가 커질수록 selector의 필요성과 효율성을 체감하

“Vite와 Webpack, 둘 다 프론트엔드 빌드 툴인데 대체 뭐가 다르고 언제 써야 할까?” 궁금하신 분들을 위해 더 자세하게, 재밌게, 그리고 정의(What is…)까지 콕 집어 정리해 보았습니다. 🚀프론트엔드 개발을 하다 보면 “번들러(bundler)”를 한

프론트엔드 개발을 하다 보면 회원가입, 로그인, 프로필 수정 같은 화면을 정말 많이 만들게 됩니다.그리고 매번 반복해서 고민하게 되죠.❓ "이 입력값은 필수인가요?"❓ "비밀번호는 8자 이상이어야 하나요?"❓ "이메일 형식이 맞는지 어떻게 확인하죠?"이런 고민을 덜어주

프론트엔드 프로젝트를 하다 보면 함수 이름 앞에 \_(언더스코어)가 붙은 코드를 종종 보게 됩니다.예를 들면 \_getUser, \_registerLeader 같은 함수들이죠.처음엔 단순한 스타일 차이 정도로 생각하기 쉽지만,실제로는 이 방식이 실무에서 꽤 널리 쓰이는

프론트엔드 개발을 하다 보면 코드 리뷰에서 이런 말을 자주 듣게 됩니다.“이거 구조분해 안 했어?”“props에서 구조분해 해주세요”“store 값 구조분해해서 써주세요”그렇다면 이 구조분해란 정확히 무엇일까요?그리고 왜 쓰는 게 좋고, 언제 쓰면 오히려 독이 되는 걸

프론트엔드 개발자라면 누구나 한 번쯤 console.log("확인")을 찍어본 경험이 있을 겁니다. 저도 그랬습니다.디버깅의 든든한 친구, 언제 어디서나 호출하면 나타나는 log 친구.하지만 Electron 프로젝트에선 이 친구가 성능 병목의 주범이 될 수도 있습니다.