자바스크립트 (10) 썸네일형 리스트형 [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.. [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 등을 의미합니다.이제 실행 컨텍스트 중에서 전역 실행 컨텍스트와 함수 실행 컨텍스트를 알아보겠습니다.전역 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행하면서 생성합니다.단 하나의 컨텍스트가 만들어지고 전역 객체와 변수를 관리합니다.콜 스택에 호출된 전역 실행 컨텍스트는 프로그램이 종료하기.. [JavaScript] 자바스크립트의 일급 함수 리액트를 배워보면서 일급 함수라는 개념이 종종 등장하였습니다.자바를 주로 사용하던 저에게는 생소한 개념이었습니다.왜 자바스크립트의 함수는 일급 함수라고 부르는 걸까요?이번 글에서는 일급 함수가 무엇인지 그 조건에 대해서 작성해보겠습니다.일급 함수단어의 생김새만 봐서는 무언가 뛰어난 함수를 의미하는 것 같습니다.단어의 의미를 말하기에 앞서, 일급 객체의 조건에 대해서 살펴보겠습니다.일급 객체는 변수나 자료구조에 저장할 수 있어야 합니다.일급 객체는 매개변수의 인자로 전달할 수 있어야 합니다.일급 객체는 함수의 반환값으로 사용할 수 있어야 합니다.보셨듯이 간단한 정수와 실수 자료형은 대부분 일급 객체에 속합니다.그럼 자바스크립트의 함수는 일급 객체의 조건을 만족하는 것일까요?예제를 통해 이를 확인해보겠습니다.. [Javascript] Promise와 async/await의 비동기 처리 저번 글에서 말했듯이 자바스크립트는 비동기 방식으로 동작합니다.비동기 코드에서 작업의 순서를 보장하기 위한 방법 중 하나는 콜백이 있습니다.하지만 순서를 지켜야 할 작업이 여러 개라면 어떨 것 같나요?호출한 콜백은 또다른 콜백을 호출하고 그 콜백은 또 다른 콜백을...이렇게 가독성을 떨어뜨리는 문법을 해결할 또 다른 방법이 있습니다.이번에는 Promise와 async/await의 비동기 처리에 대해서 알아보겠습니다.🐸 PromisePromise라는 객체에는 작업에 대한 상태를 가지고 있습니다.가지고 있는 상태의 종류는 다음과 같습니다.Pending(대기)Fulfilled(이행) Rejected(거부)const promise = new Promise((resolve, reject) => { if (/*.. 이전 1 2 다음