![]()
promisePending : 작업 진행 중(아직 결과 없음)Fulfilled : 작업 성공 → resolve() → .then() 실행Rejected : 작업 실패 → reject() → .catch() 실행// 선언const promise = new Promise((resolve, reject) => { let success = true; if (success) { resolve("성공!"); } else { reject("실패!"); }});// 실행promise .then((result) => { console.log(result); // 성공! }) .catch((error) => { console.log(error); // 실패! });// Promise c..
![]()
기본#include int main() { int num; printf("정수를 입력하세요 : "); scanf("%d", &num); return 0;}타입자료형설명크기(일반적)char문자 1개를 저장1Byteshort작은 범위의 정수 저장2Byteint정수를 저장4Bytelong큰 범위의 정수 저장4Byte 또는 8Bytefloat단정밀도 실수 저장4Bytedouble배정밀도 실수 저장8Bytesigned부호 있는 정수형(양수/음수)-unsigned부호 없는 정수형(0과 양수)-void값이 없음을 의미하며 함수의 반환형 등에 사용-연산자연산자 종류연산자설명산술 연산자+, -, *, /, %덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 계산증감 연산자++, --변수의 값을 1 증가 또는 1..
![]()
설치명령어 입력npm install eslintnpx eslint --init // 환경에 따라 선택"Ctrl + Shift + P"를 누른 후, "settings.json" 입력 후, "기본 설정: 작업 영역 설정 열기 (JSON)" 선택{ "editor.codeActionsOnSave": { "source.fixAll.eslint": "always" }}Prettier을 적용할 경우명령어 입력npm install eslint-config-prettier"eslint.config.mjs" 수정import js from "@eslint/js";import globals from "globals";import { defineConfig } from "eslint/config";import pret..
![]()
React Developer ToolsReact 애플리케이션을 디버깅하고 분석할 수 있게 해주는 브라우저 확장 프로그램주로 Chrome과 Firefox에서 사용 가능React Developer ToolsReact IconsReact 프로젝트에서 SVG 아이콘을 손쉽게 사용할 수 있게 해주는 라이브러리React Iconsimmer불변성(immutable) 상태 관리를 쉽게 해주는 JavaScript 라이브러리불변성(immutable)이란 기존 객체를 직접 수정하지 않고 새 객체를 만들어 상태를 변경하는 것깊은 객체를 업데이트할 때는 immer처럼 불변성을 자동으로 유지해주는 도구를 사용하면 중첩된 속성도 안전하고 간결하게 업데이트할 수 있음import { produce } from "immer";const..
![]()
Code Splitting초기 로딩 시 필요한 코드만 먼저 불러오고, 나머지는 필요할 때 나중에 로드해서 앱 로딩 속도와 성능을 개선하는 기법리액트 앱은 보통 번들러(Webpack, Vite 등)를 사용해 모든 JS를 하나의 큰 파일로 만들기 때문에 다음과 같은 단점이 발생앱이 커질수록 번들 크기가 커짐첫 화면 로딩이 느려짐사용자가 안 쓰는 페이지 코드도 미리 로드됨따라서, 코드 스플리팅으로 페이지/기능 단위로 JS를 쪼갬React에서는 주로 Dynamic import, React.lazy + Suspense 사용사용법기본import React, { Suspense } from "react";const DetailPage = React.lazy(() => import("./DetailPage"));fun..
![]()
Middleware어떤 작업을 중간에서 가로채서 처리하는 코드reducer 호출 이전에 미들웨어에서 작업 처리비동기 처리, 로그 찍기, 조건 처리, 필터링 가능Action → Middleware1 → Middleware2 → ... → Reducer → StoreCustom Middleware (직접 만들기)형태const middleware = (store) => (next) => (action) => { // 미들웨어 기본 구조};store : 전체 상태 접근next : 다음 미들웨어 or reducer로 넘김action : 지금 들어온 액션예시store.dispatch(action) 호출 ↓미들웨어 체인 시작 ↓simpleLogger 실행 ↓console.log(action) ..
![]()
기본 Redux 패턴 (Vanilla Redux + connect)1. Reducer & Store 만들기// src/reducers/counterReducer.js// 1. action 생성 함수 정의export const increment = () => ({ type: "INCREMENT" });export const decrement = () => ({ type: "DECREMENT" });// 2. 초기 상태const initialState = { value: 0 };// 3. reducer 생성function counterReducer(state = initialState, action) { switch (action.type) { case "INCREMENT": return {..
![]()
Redux란전역 상태 관리 라이브러리리액트 앱에서 여러 컴포넌트가 공유하는 데이터를 한 곳(Store)에 모아 관리하도록 도와줌설치npm install redux react-redux원칙단일 store모든 상태는 하나의 store 객체 안에 저장읽기 전용 상태상태를 직접 수정할 수 없으며, 값을 바꾸려면 action을 통해 요청해야 함reducer는 순수한 함수순수 함수: 같은 입력을 넣으면 항상 같은 결과를 내고, 함수 밖의 상태를 절대 변경하지 않는 함수핵심 개념Store상태(state)가 저장되는 유일한 장소앱 전체에서 단 하나만 존재함createStore()로 생성StateStore 안에 저장된 데이터 자체직접 수정 불가하며 항상 reducer를 통해서만 변경됨Action“무슨 일을 할 건지” 설..
![]()
Context컴포넌트 간에 데이터를 전역적으로 공유하기 위한 방법부모 → 자식으로 props를 계속 전달해야 하는 props drilling 문제를 해결사용법1. Context 생성import { createContext } from "react";export const LanguageContext = createContext("한국어");2. Providerimport { useState } from "react";import { LanguageContext } from "./LanguageContext";import Child from "./Child";function App() { const [language, setLanguage] = useState("한국어"); const toggleLan..
![]()
Promise정의비동기 작업을 처리하기 위한 객체메서드설명resolve성공 시 호출reject실패 시 호출then성공 시 실행할 콜백 등록catch실패 시 실행할 콜백 등록finally성공/실패 관계없이 실행사용 방법const promise = new Promise((resolve, reject) => { // 비동기 작업 수행 const success = true; if (success) { resolve("작업 성공!"); } else { reject("작업 실패!"); }});promise .then((result) => { console.log(result); // 성공 시 "작업 성공!" }) .catch((error) => { console.error(err..
![]()
개념리액트(React) 앱에서 페이지 이동(라우팅)을 가능하게 해주는 라이브러리한 페이지(SPA, Single Page Application)로 동작하는 리액트 앱에서 주소가 바뀌어도 새로고침 없이 필요한 컴포넌트만 교체설치npm install react-router-dom기본 동작import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./Home";import About from "./About";import Profile from "./Profile";function App() { return ( } /> {/* 메인 페이지 */} } /> {/* 소개 페이지 */}..
![]()
VSCode extensions에서 Prettier - Code formatter 설치ctrl + , 키를 눌러 설정창 열기Editor: Default Formatter 검색 후 Prettier - Code Formatter 선택Editor: Format On Save 검색 후 체크박스 체크다음 중 한가지 방법으로 설정a. Prettier 검색 후 본인이 원하는 설정대로 설정하기b. .prettierrc 파일을 만들어서 루트 디렉토리 안에 추가{ "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80}
