JavaScript (22) 썸네일형 리스트형 [NestJS] NestJS 초보자의 입문기 이번 국비교육의 최종 프로젝트를 NestJS로 진행하게 되었습니다.NodeJS 환경에서 동작하는 프레임워크 중 Express만 사용해보았기에, 프로젝트 시작에 앞서 NestJS를 익혀보려고 합니다.1. NestJS란?NestJS는 NodeJS 환경에서 적용가능한 웹 프레임워크로 다음과 같은 특징을 가지고 있습니다.타입스크립트 지원: 코드의 안정성을 높여주고 유지보수성을 올려줍니다.모듈 아키텍처: 모듈 기반의 구조를 통하여 코드의 재사용성을 높여줍니다.유연성: Express나 Fastify를 내부적으로 사용할 수 있습니다.강력한 CLI: 프로젝트 생성과 설정 자동화를 지원합니다. 2. NestJS 설치공식 문서에 나와있는 단계를 따라하면 쉽게 애플리케이션을 생성할 수 있습니다.2-1. NestJS CLI .. [React] Context 알아보기 리액트는 상태를 공유할 때 Props를 사용합니다.우리가 다크 모드를 적용하려고 한다면,자식 컴포넌트들은 최상위 App 컴포넌트로부터 Props를 전달받을 것입니다.애플리케이션이 고도화될수록 컴포넌트는 무수히 증가합니다.이 때, Props에 변경점이 있다면 하위 컴포넌트를 수정하고 또 수정하고...😵이를 해결할 수 있는 Context를 오늘 알아보겠습니다.🐸 Context리액트 컨텍스트란 전역으로 데이터를 공유할 수 있도록 고안한 방법입니다.컨텍스트를 사용하면 컴포넌트마다 Props를 넘겨주지 않아도 데이터를 사용할 수 있습니다.🐸 Context API// /context/ThemeContext.tsimport { createContext } from 'react';const defaultValue.. [Redux] 개념과 React에서의 활용 Redux는 자바스크립트 애플리케이션의 상태 관리 라이브러리입니다.특히 React와 함께 사용될 때 매우 강력한 기능을 발휘합니다.처음 사용했을 때, 보일러플레이트 코드가 많아 이해하기 힘들어 글을 작성해보려고 합니다.Redux의 핵심 개념부터 먼저 알아보겠습니다.Store애플리케이션의 전체 상태를 보관하는 중앙 저장소입니다.한 애플리케이션에는 하나의 스토어만 존재합니다.상태는 읽기 전용이며, 직접 수정할 수 없습니다. Action상태 변경을 위한 명령입니다.반드시 type이라는 속성을 가져야 합니다. Reducer이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. Redux의 흐름사용자 상호작용 발생액션 객체 생성 및 디스패치리듀서가 이전 상태와 액션을 처리새로운 상태가 스토어에 저장UI.. [React] 리액트의 useState useState는 리액트에서 가장 기본적이면서도 강력한 Hook입니다.이번 글에서는 리액트의 useState에 대해서 살펴보도록 하겠습니다.useStateuseState는 리액트의 Hook 중 하나로, 컴포넌트에서 상태를 관리할 수 있게 해줍니다.const [count, setCount] = useState(0);위 예시는 useState의 기본 형태입니다.count: 현재 상태값setCount: 상태를 업데이트하는 함수useState(0): 초기값을 0으로 설정이처럼 useState를 사용하면 다양한 타입의 상태관리가 가능하고 여러 상태를 개별적으로 관리할 수 있습니다. setState리액트의 상태 업데이트는 비동기적으로 동작합니다.const [count, setCount] = useState(0);c.. [React] 리액트의 동작 원리 리액트는 프론트 엔드에서 가장 많이 사용하는 프레임워크입니다.이번 글에서는 리액트의 핵심이라고 할 수 있는 동작 원리에 대해서 알아보고자 합니다.DOMDOM은 웹 페이지를 프로그래밍 언어로 제어할 수 있게 해주는 인터페이스입니다.HTML 문서의 요소들을 트리 구조로 표현해서, 각 요소에 접근하고 조작할 수 있게 해줍니다. 제목 내용 document └── html ├── head │ └── title │ └── "예시 페이지" └── body └── div#root ├── h1 │ └── "제목" └── p .. [TypeScript] 클래스 알아보기 자바스크립트에서는 객체의 속성과 메서드를 포함한 클래스가 있습니다.타입스크립트는 이 기능에 더해 타입 지정과 접근 제어자 기능을 제공해 코드의 안전성을 높입니다.이번 글에서는 타입스크립트의 클래스에 대해서 알아보겠습니다.클래스 선언class Mountain { name: string; height: number; constructor(name: string, height: number) { this.name = name; this.height = height; } guide() { console.log(`이 산은 ${this.name}이고 높이는 ${this.height}미터입니다.`); }}const hallasan = new Mountain('한라산', 1947.06.. [TypeScript] 타입스크립트 알아보기 자바스크립트는 동적 타입 언어이기 때문에 유연하게 코드를 작성할 수 있다는 장점이 있습니다.이런 유연성은 때로는 오류를 발생하기도 합니다.타입스크립트는 이 점을 보완하여 컴파일 단계에서 타입 오류를 발견할 수 있도록 합니다.정적 타입 지원타입스크립트의 가장 큰 특징은 함수의 인자, 반환값 등에 타입을 지정할 수 있다는 것입니다.function add(a: number, b: number): number { return a + b;}console.log(add(5, 3)); // 8 출력console.log(add('5', 3)); // 오류 발생예시처럼 숫자만 인수로 받을 수 있게 작성하면 잘못된 데이터가 들어왔을 때 컴파일러가 오류를 미리 알려줍니다. 기본 타입number: 숫자형 타입입니다. 정수,.. [JavaScript] 실행 컨텍스트와 렉시컬 환경 자바스크립트를 공부하면서 스코프, 호이스팅, 클로저 등 주요 동작을 이해하는 데 어려움이 있었습니다.자바스크립트가 어떻게 코드를 처리하는지 기본적인 개념이 잡혀있지 않아서 생긴 문제였고,실행 컨텍스트와 렉시컬 환경에 대해서 개념을 잡고자 글을 적게 되었습니다.실행 컨텍스트실행 컨텍스트는 코드를 실행할 때 필요한 환경 정보를 모아놓은 객체를 의미합니다.여기서 환경 변수는 선언된 변수와 함수, this, arguments 등을 의미합니다.이제 실행 컨텍스트 중에서 전역 실행 컨텍스트와 함수 실행 컨텍스트를 알아보겠습니다.전역 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행하면서 생성합니다.단 하나의 컨텍스트가 만들어지고 전역 객체와 변수를 관리합니다.콜 스택에 호출된 전역 실행 컨텍스트는 프로그램이 종료하기.. 이전 1 2 3 다음