Multi Developer SuHo

안녕하세요~ 저번시간에는 타입스크립트의 개념에 대한 내용을 중점으로 학습하였습니다. 이번에는 타입스크립트에서 자료형에 대해 알아보도록 하겠습니다.📑목차1. 타입스크립트 자료형1-1. String1-2. Number 1-3. Array1-4. Boolean1-5 Tuple1-6. Any1-7. unknown1-8. null1-9. undefined1-10. object1-11. void1-12. Generic 서론타입스크립트 자료형하면 아마도 자바스크립트에서 자료형이 생각하실 수 있습니다. String, Number, Array, Tuple, Boolean, Symbol 등등 다양한 자료형들이 떠오르시죠? 타입스크립트에서도 비슷한 매락이지만 개발 목적, 사용 방식은 각각 다릅니다. 그럼 무엇이 다른지 살..

이번에는 타입스크립트가 무엇이고, 왜 사용해야하는지, 그리고 자바스크립트와 어떤 관계가 있는지에 대해 살펴보는 시간이 되겠습니다. 📑목차1. 타입스크립트(TypeScript) 1-1. 타입스크립트의 개념 1-2. 타입스크립트의 특징 1-3. 타입스크립트를 사용하는 이유 1-4. 자바스크립트 VS 타입스크립트2. 타입스크립트 문법 2-1. 타입스크립트 node의 런타임 환경 2-2. 타입스크립트 설정 파일 tsconfig.json 2-3. 타입스크립트 빌드(트랜스파일)3. 타입스크립트와 객체지향 3-1. 객체지향의 개념 3-2. 클래스와 인스턴스 3-3. 상속과 캡슐화 3-4. 추상화 && 다형성서론본문에 들어가기전 혹시 타입스크립트에 들어본 적이 있으실까요? 자바스크립트를 공부하셨거나, 프론트엔드..

안녕하세요~ 화면을 구성하는 리액트(React) 과정이 끝나고, 이제 그 기반 위에서, 보이지 않는 곳의 신뢰를 구축하는 블록체인 기술을 탐험하며 저의 기술 스펙트럼을 넓혀가고자 합니다. 아직까지는 문접적으로 아쉬운 부분이 있지만, 이런 부분들을 보완하여 사용자들에게 새로운 경험을 선사하는 의미있는 개발자가 되겠습니다. 📑목차1. 블록체인(BlcokChain)1-1. 블록체인의 개념1-2. 블록체인의 역사와 배경1-3. 블록체인 키워드1-4. 블록체인 주요한 특징 3가지1-5. 블록(Block)의 개념1-6. 블록의 구성요소 (블록 헤더, 거래 목록, 해시)1-7. 분산원장1-8. 트랜잭션 서론이번에는 앞으로 학습할 블록체인의 개념과, 역사와 탄생, 그리고 주요한 특징들에 대해 알아보고, 현대사회에..

이번에는 리액트에서 전역적으로 데이터를 컴포넌트들에 전달하는 데 사용되는 Context와 useContext에 대해 알아보겠습니다.📑목차1. Context1-1. Context란?1-2. Context의 특징1-3. Context 문법1-4. Provider2. useContext 2-1. useContext 훅이란2-2. useContext를 사용한 예제 코드서론리액트에서 컴포넌트 간 데이터를 전달할 때 가장 일반적인 방법은 props를 사용하는 것입니다. 하지만 컴포넌트 구조가 깊어지고 여러 단계에 걸쳐 같은 데이터를 전달해야 할 경우, props 전달은 번거롭고 코드가 복잡해질 수 있습니다. 이러한 문제를 해결하기 위해 리액트는 Context API를 제공합니다. Context를 사용하면 전역적으..

안녕하세요~ 이번에는 리액트에서 커스텀 훅에 대해 알아보도록 하겠습니다. 커스텀 훅이 무엇이고, 언제 사용되는지, 왜 사용해야하는지 알아야 커스텀 훅을 사용할 수 있겠죠? 함께 알아보시죠~ 📑목차1. 커스텀 훅1-1. 커스텀 훅이란?1-2. 커스텀 훅의 특징1-3. 커스텀 훅을 사용하는 이유1-4. 커스텀 훅의 목적1-5. 커스텀 훅의 동작 원리1-6. 커스텀 훅의 문법서론 리액트를 사용하다 보면 여러 컴포넌트에서 동일한 로직을 반복적으로 작성하게 되는 경우가 많습니다. 이럴 때 코드의 재사용성과 가독성을 높이기 위해 사용하는 것이 바로 "커스텀 훅(Custom Hook)"입니다. 이번 글에서는 커스텀 훅이 무엇인지, 왜 사용해야 하는지, 커스텀 훅이 어떻게 동작하는지 살펴보시죠~본론1. 커스텀 훅1..

리액트 애플리케이션에서 상태 관리를 하다 보면, 서버와의 비동기 통신이 필요한 상황이 자주 발생합니다. 이때 redux-thunk를 사용하면 Redux 안에서 비동기 작업을 효율적으로 처리할 수 있습니다. 이번 글에서는 redux-thunk에 대해 알아보도록 하겠습니다.📑목차1. redux-thunk1-1. redux-thunk란?1-2. redux-thunk의 등장1-3. redux-thunk의 동작1-4. redux-thunk 문법1-5. redux-thunk의 목적1-6. Todo-List 실습 서론Redux를 사용하다 보면 "비동기 로직은 어디에 작성해야할까"라는 고민을 하게 됩니다. 예를 들어, API 요청을 보내고 그 결과를 상태에 반영하려고 할 때, Redux의 기본 구조만으로는 이를 처리..

안녕하세요~ 리액트에서 리덕스(Redux) 상태 관리 라이브러리에 알아보도록 하겠습니다. 리덕스를 왜 사용하는지 그리고 이전에 사용하던 useReducer랑은 무슨 관련이 있는지 살펴봅시다~ 📑목차1. 리덕스(Redux)1-1. 리액트에서 리덕스란?1-2. 리덕스의 장점과 단점1-3. 리덕스의 핵심 개념 Store, Action, Reducer1-4. 리덕스 문법1-5. useReducer와 redux 공통점 1-6. Store1-7. Action1-8. Reducer2. react-redux2-1. react-redux란?2-2. useSelector 2-3. useDispatch2-4. Provider 컴포넌트서론리액트는 컴포넌트 기반으로 구성되어 있어 UI를 효율적으로 개발할 수 있지만, 규모가..

안녕하세요~~ 이번에는 useReducer에 대해 알아보도록 하겠습니다. useReducer가 무엇이고 이 훅을 왜 사용하는지 한번 살펴보도록 하겠습니다.📑목차1. useReducer1-1. useReducer란?1-2. useReducer를 왜 사용할까?1-3. useState VS useReducer 차이점1-4. useReducer 기본 문법1-5. useReducer 동작 순서1-6. reducer 함수 구조1-7. useReducer 사용 예제 코드 서론useReducer 를 학습하시기 전에는 상태 관리를 useState로 했을겁니다. 하지만 애플리케이션이 복잡해지거나 상태 업데이트 로직이 길어지게 되면 useState만으로는 한계가 있기때문에 이런 복잡한 상태 관리 및 업데이트를 해줄 수 있..

안녕하세요~ 리액트에서 중요한 라우터에 대해 알아보겠습니다. 라우터가 무엇이고 왜 사용하는지 살펴보도록 하겠습니다.📑목차1. 라우터(Router)1-1. 리액트에서 라우터란?1-2. 리액트에서 라우터를 사용하는 이유1-3. react-router VS react-router-dom 차이2. react-router-dom 라이브러리2-1. react-router-dom 라이브러리란?2-2. BrowserRouter2-3. Routes2-4. Route2-5. Route 속성 (path, element)2-6. 라우팅 구조2-7. Link2-8. useParams2-9. useNavigate서론이전에는 라우팅을 했을때 이런식으로 하셨을 겁니다. node 환경에서는 다음 코드처럼 라우팅을 해서 클라이언트에게..

이번에 알아볼 내용은 리액트에서 css-in-javscript 즉, 자바스크립트 안에서 css 스타일을 작성하여 적용하는 방식에 대해 알아보도록 하겠습니다.📑목차1. css-in-javascript 1-1. css-in-javascript 란?1-2. css-in-javascript 특징1-3. css-in-javascript 라이브러리 종류2. styled-componenets2-1. styled-components 란?2-2. styled-components 설치2-3. styled-components 문법2-4. styled-components 적용 코드서론리액트로 프로젝트를 하다 보면, 컴포넌트마다 스타일을 어떻게 관리할지 고민하게 됩니다. 전통적인 CSS 방식은 점점 복잡해지고, 클래스명이 겹..