키모스토리

// Classclass Car { color: string; constructor(color: string){ this.color=color; } start(){ console.log("start"); }}const bmw = new Car("red"); 접근 제한자 : public, private , protected다른 언어와 동일.public : 부모클래스 내부, 자식클래스 내부, 외부 객체에서 모두 접근가능private : 부모클래스 내부에서만 접근가능protected : 보모클래스, 자식클래스 내부까지만 접근가능 // Classclass Car { private name: string = "car"; color: st..

리터럴 타입 (Literal Types)// Literal typesconst userName1 = "Bob";let userName2: string | number = "Tom";userName2 = 3;type Job = "police" | "devloper" | "teacher";interface User { name : string; job : Job;}const user: User = { name: "Bob", job: "police", // type Job 의 값들 중에서만 선택가능}interface HighSchooleStudent { name: number | string; grade: 1 | 2 | 3;} 유니온 타입 (Union Types) ,  둘 중 ..

function 사용법// 함수// 매개변수 타입지정, 반환타입 괄호 뒤에 타입지정function add(num1:number, num2:number) : number { return num1+num2;}let c=add(10, 20);console.log(c);function isAdult(age: number) : boolean { return age>19;}console.log(isAdult(22));// 매개변수 optional (?)function hello(name?: string) { return `Hello, ${name || "world"}`; }const result = hello();const result2 = hello('Kim');// const result3..

object let user:object;user = { name: 'xxx', age: 30,}console.log(user.name);위 object 코드는 Property 'name' does not exist on type 'object'. 오류를 반환한다.object 에는 property 속성이 없기 때문이며 이럴때 interface를 사용한다. interface 로 object 구현// grade 의 value를 한정지으려함.type Score = 'A' | 'B' | 'C' | 'F';// property 에 ? 를 지정하면 optionaly 한 속성이 된다interface User { name : string; age : number; gender? : s..

타입스크립트란?타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 아네르스 하일스베르(Anders Hejlsberg)가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한, 프론트백 통합 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영..

https://axios-http.com/ AxiosPromise based HTTP client for the browser and node.js Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.axios-http.comAxios란?Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 htt..

디렉토리 구조 (JavaScript 버전)/src├── app/│ ├── store.js # Redux store 설정│ ├── hooks.js # Custom hooks (useAppDispatch, useAppSelector)│├── features/ # 기능(도메인)별 상태 및 컴포넌트 관리│ ├── auth/ # 인증 관련 기능│ │ ├── authSlice.js # Redux Slice│ │ ├── authAPI.js # API 요청 관리 (RTK Query 또는 fetch/axios)│ │ ├── AuthPage.js # 관련 페이지 컴포넌트│ │ └── components/ # 관련 UI 컴포넌트│ │ ..

https://redux-toolkit.js.org/ Redux Toolkit | Redux ToolkitThe official, opinionated, batteries-included toolset for efficient Redux developmentredux-toolkit.js.org1. Redux Toolkit이란?Redux Toolkit(RTK)은 Redux의 공식 권장 도구로, Redux를 더 쉽고 효율적으로 사용할 수 있도록 도와줍니다.Redux의 기존 단점을 개선하여 보일러플레이트 코드 감소, 비동기 로직 간소화, 더 나은 개발자 경험을 제공합니다.주요 특징configureStore() : Redux 스토어 설정을 단순화createSlice() : 액션과 리듀서를 함께 정의 가능crea..

1. Flux 패턴이란?Flux는 Facebook이 만든 단방향 데이터 흐름(One-way Data Flow) 아키텍처 패턴으로, React 애플리케이션에서 상태 관리를 단순화하고 예측 가능하게 만드는 데 사용됩니다.🔹 특징단방향 데이터 흐름 유지명확한 역할을 가진 4가지 핵심 요소상태(State)를 중앙에서 관리애플리케이션의 예측 가능성을 높임2. Flux 패턴의 주요 구성 요소Flux는 총 4가지 핵심 요소로 구성됩니다.① Action (액션)사용자의 입력이나 외부 이벤트를 기반으로 발생하는 이벤트 객체예: 버튼 클릭, API 요청 응답📌 예제 (액션 생성 함수)const addTodo = (text) => { return { type: "ADD_TODO", payload: text ..

https://react-bootstrap.netlify.app/ React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app 리액트 프로젝트 개발시 디자인 작업을 편리하게 해주는 프레임워크 설치npm install react-bootstrap bootstrap 사용방법1. App.js파일에 css import import 'bootstrap/dist/css/bootstrap.min.css'; 2. 디자인 요소가 필요한 js 파일에서 각각의 필요한 bootstrap 컴포넌트를 import 하여 사용import React from 'react';import Bu..

리액트 라우터 돔(React Router DOM)리액트 애플리케이션에서 페이지 간 이동(라우팅)을 쉽게 처리하기 위한 라이브러리입니다.이 라이브러리를 사용하면 리액트 앱을 여러 페이지처럼 구성하고, 각 페이지의 URL 경로를 정의할 수 있습니다.📌 SPA(Single Page Application)SPA는 기존 웹사이트와 다르게 한 개의 HTML 페이지에서 모든 작업을 처리하는 방식입니다.일반 웹사이트는 사용자가 새로운 페이지로 이동할 때마다 페이지 전체를 새로고침하지만, SPA는 필요한 부분만 업데이트합니다.이렇게 하면 속도도 빠르고 트래픽도 절약할 수 있습니다.📌 React Router 주요 패키지react-router : 웹과 앱 모두에서 사용할 수 있는 기본 라우터 라이브러리react-rout..

CSS in JS?CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹 개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있습니다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS,..