내가 알아가는 내용을 같이 공유하는 공간

안녕하세요. 오늘은 리액트 차트에 대해 알아볼게요. React에서 그래프나 차트를 시각화할 때 주로 사용되는 라이브러리는 Chart.js(react-chartjs-2)와 Recharts 가 있어요. 두 라이브러리는 렌더링 방식이 다르기 때문에, 프로젝트 성격에 따라 선택하는 것이 중요해요. Chart.js + react-chartjs-2 VS Recharts Chart.js + react-chartjs-2는 Canvas 기반으로 렌더링 되어 웹 브라우저에 직접 픽셀을 그리는 방식으로 애니메이션이 화려하고 고성능이며, 대량 데이터 처리에 상대적으로 강해요. 다양한 차트 타입 지원(막대형, 라인, 도넛, 레이더 등) + 플러그인 시스템이 잘 갖춰져 있고, 이미지로 내보내기 쉬워요. Rechar..

안녕하세요. 오늘은 리액트의 이벤트 핸들러에 대해 알아볼게요. 이벤트 핸들러 (Event Handler) 이벤트 핸들러는 사용자가 웹 페이지와 상호작용할 때(클릭, 입력, 제출 등) 실행되는 함수(Function) 에요.즉, React에서 사용자의 행동에 따라 특정 동작을 수행하도록 연결하는 역할을 해요. 이벤트 등록 방법 1. 함수 이름 전달 버튼 클릭 시 특정 함수가 실행되도록 함수 이름을 전달해요.클릭해주세요 2. 익명 함수 사용 이벤트에 직접 함수를 정의할 수도 있어요. console.log('버튼 클릭!')}>클릭 이벤트 핸들러 전달 (부모 → 자식) React에서는 부모 컴포넌트가 이벤트 로직을 정의하고, 자식 컴포넌트는 해당 함수를 props로 전달받아 실행할 수 있어요..

안녕하세요. 오늘은 리액트 렌더링에 대해 알아볼게요. 렌더링(Rendering) 렌더링은 우리가 작성한 코드(JSX/TSX)를 실제로 브라우저 화면(UI)에 출력하는 과정이에요. React는 코드의 상태(state)나 속성(props)이 변경되면 전체 화면을 다시 그리는 대신, 변경된 부분만 효율적으로 다시 렌더링 해요. 이러한 방식 덕분에 React는 빠르고 효율적인 UI 업데이트가 가능해요. 조건부 렌더링(Conditional Rendering) 조건부 렌더링은 특정 조건에 따라 UI를 다르게 보여주는 것을 의미해요. React에서는 여러 가지 방법으로 조건부 렌더링을 구현할 수 있어요. 1. if문 사용 JSX 바깥(return 위)에서 조건문을 사용하여 조건에 맞는 컴포넌트를 선..

안녕하세요. 오늘은 React의 Props에 대해 알아볼게요. Props(Properties) Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 매개체예요. HTML에서 속성을 전달하는 것과 비슷한 개념으로, React에서는 이를 통해 컴포넌트 간의 데이터 흐름을 제어해요. 즉, 부모 → 자식으로만 전달되는 단방향 데이터 흐름(one-way data flow)**을 갖아요.자식 컴포넌트는 props로 전달된 데이터를 읽기만(read-only) 할 수 있고, 직접 수정할 수 없어요. 만약 자식이 부모의 데이터를 변경해야 한다면, 부모가 전달한 콜백 함수를 실행하는 방식으로 제어해야 해요. 기본적인 Props 전달 React에서 컴포넌트는 일반적으로 ..

안녕하세요. 오늘은 리액트 JSX에 대해 알아볼게요. JSX JSX(JavaScript XML)은 자바스크립트 코드 안에서 HTML과 유사한 구조를 작성할 수 있게 해주는 문법 확장이에요. 즉, 리액트에서 UI를 설계할 때 “화면 구조를 직관적으로 코드로 표현하기 위한 문법”이라고 이해하면 돼요. 기존의 React.createElement()를 직접 쓰는 대신,HTML처럼 보이는 문법으로 더 가독성 좋고 직관적인 UI 코드를 작성할 수 있게 해 줘요. JSX 필요성 기존 리액트 코드는 다음처럼 생겼어요. function Hello() { return React.createElement('h1', null, '안녕하세요!');}이 방식은 문법적으로는 정확하지만, HTML 구조를 한눈에 파악하기 어..

안녕하세요. 오늘은 리액트의 컴포넌트에 대해 알아볼게요. 컴포넌트(Component) 리액트의 핵심 철학은 "UI를 독립적인 조각으로 나눠서 관리한다."에요. 그 독립적인 조각이 바로 컴포넌트예요. 하나의 컴포넌트는 화면(UI)의 한 부분을 담당하고, 여러 컴포넌트를 조합해 하나의 완성된 페이지를 만들어요. 컴포넌트의 필요성 일반적인 HTML, JS 코드에서는 다음과 같은 문제가 있어요. 특정 UI를 반복해서 사용할 때 같은 코드를 여러 번 작성해야 하고, UI를 수정하면 모든 관련 파일을 수정해야 해요. 그리고 화면이 복잡해질수록 코드 관리가 어려워요. 리액트 컴포넌트는 이런 문제를 해결해요. 컴포넌트의 구조 (JSX 없이 표현) 리액트 컴포넌트는 일반적인 자바스크립트 함수 형태예요. JS..

안녕하세요. 오늘은 리액트(React)에 대해 알아볼게요. 리액트(React) 리액트는 사용자 인터페이스(UI)를 효율적으로 구축하기 위한 자바스크립트 라이브러리예요. 즉, 웹 애플리케이션의 화면(View)을 관리하는 데 초점을 맞춘 도구예요. 우리가 기존에 HTML, CSS, JS(또는 TS)를 각각 따로 사용했다면,React는 이들을 컴포넌트 단위로 통합하여 개발자가 UI를 더 구조적이고 직관적으로 관리할 수 있도록 도와줘요. 프레임워크(Framework)와 라이브러리(Library)의 차이 React를 이해할 때 자주 나오는 개념이 바로 “라이브러리 vs 프레임워크” 에요. 둘 다 개발을 돕는 도구이지만, 제어의 주체가 달라요. 다음 표로 비교해 볼게요.구분프레임워크라이브러리제어의 주체프..

안녕하세요. 저번 포스팅 때 자바스크립트에서 비동기에 대해 알아본 내용을 알아봤었는데요. 오늘은 비동기를 다시 한번 알아보고 동기, async와 await에 대한 특징, 장*단점에 대해 알아볼게요. 1. 동기(Synchronous) 프로그래밍 동기 프로그래밍은 코드가 작성된 수서대로 실행되는 방식을 의미해요. 이 말은 하나의 작업이 완료되어야만 다음 코드가 실행된다는 뜻이에요. 이 방식의 장점은 단순하고 직관적인 것이에요. 코드의 실행 순서를 예측하고 쉽고, 디버깅도 간단해요. 그러나 단점은 시간이 오래 걸리는 작업이 있으면 프로그램 전체가 멈춘 것처럼 보여요. 이 때문에 응답성이 떨어지고, 사용자 경험(UX)이 나빠질 수 있어요.// syncExample.tsfunction syncTask1() ..

안녕하세요. 오늘은 타입스크립트 제네릭의 응용편(실무 활용 중심)에 알아볼게요. 제네릭 응용편 이번 포스팅은 제네릭의 단순 를 쓰는 수준을 넘어서 "제네릭을 이용해 유연하면서도 안전한 타입 구조를 만드는 법"을 알아볼게요. 1. 유니온 타입(Union Type) + 제네릭 확장type StringOrNumber = string | number;function unionGeneric(value: T) { if (typeof value === 'string') { return value.toLowerCase(); } return value; // 숫자는 그대로 반환}const result1 = unionGeneric('sTrInG'); // 'string'const result2 = uni..

안녕하세요. 오늘은 타입스크립트 제네릭(Generic)에 대해 알아볼게요. 제네릭(Generic) 제네릭은 "한 번 만든 코드로 여러 타입을 다루는 기술"이에요. 즉, 코드를 재사용하면서도 타입 안정성을 유지할 수 있게 해 줘요.function generic(arg: T): T { return arg;}generic("안녕");generic(123);는 “타입 변수(type variable)”로, 함수를 호출할 때 타입을 정할 수 있어요. 제네릭은 여러 타입 변수를 사용할 수 있는데요.function pair(first: T, second: U): [T, U] { return [first, second];}let pair1 = pair("안녕", 123);console.log(pair1); // ..