안녕, 반가워 안녕, 반가워

[코드숨 리액트 4기] 4주 프로젝트 (2021.6/28~2021.7/25) 🐜 Mine React & Redux 자산 관리 애플리케이션 🚀 Getting Started 다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다. 📌 프로젝트 목적 ✔️ 데스크탑 타겟의 웹 앱을 구현하며 가계부 작성을 기반으로 나의 것을 지키는 습관을 만들어주고 더 나아가 자산 관리로 이어지도록 다양한 정보를 제공하는 서비스를 도출해봅니다. ✔️ 상태 관리를 위해 Flux Architecture 기반의 Redux를 활용합니다. ✔️ Router를 활용해 여러 페이지 전환을 고려합니다. 🎨 시안 홈 Page 예산 Page 캘린더 Page

자바스크립트 데이터 타입 자바스크립트의 데이터 타입은 상대적으로 유연하다. 상황에 따라 데이터 타입이 변할 수 있다는 특징을 가지고 있다. 데이터 타입은 기본형과 참조형이 있고, 다음과 같은 종류가 있다. ✏️ 기본형과 참조형의 차이점에 대해 알아보자. 우리는 변수를 선언하고 할당하는데 두 타입의 대표적인 차이점은 다음과 같다. 👀 값이 그대로 할당된다는게 뭐예요? 실제 메모리 저장 공간은 두 개의 표처럼 별개의 저장 공간을 가지는 것은 아니다. 실제로 메모리에 값이 어떻게 저장되는지 이해를 돕기 위해 주소와 데이터로 구성된 아래 표로 표현하여 흐름 파악을 위한 추상화를 해보았다. Step1 변수 a를 선언하면 실제 메모리는 데이터를 담을 공간을 미리 확보한다. 아래와 같이 임의로 201 공간을 확보했다..

이번 시간은 HTTP 요청 메서드에 대해 알아보려고 한다. 아래 그림과 같이 데이터를 주고받기 위해서 요청과 응답에 대한 이해가 필요하다. 웹 개발을 하는 사람이라면 알고 있어야 할 기본 개념 먼저 알아보자. 웹(Web)이란? World Wide Web으로 전 세계적인 연결망으로 클라이언트(Client)라고 부른다. 클라이언트라는 단어 잘 기억해두자! 프로토콜(Protocal)이란? 통신을 하는 두 주체가 지켜야 하는 통신 규약이다. HTTP(Hypertext Transfer Protocol) 프로토콜이란? WWW(World Wide Web)상에서 데이터를 주고 받을 수 있는 프로토콜로 주로 HTML문서를 주고 받는 것에 사용되고 TCP 및 UDP를 사용하며 80번 포트를 이용한다. URL(Uniform..

Redux Thunk 란? 리덕스 창시자인 댄 아브라모프가 만든 가장 많이 사용되는 비동기 작업 미들웨어다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다 📌 미들웨어(middleware)란? 리덕스에서 미들웨어는 주로 비동기 작업을 처리 할 때 사용한다. 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 미들웨어를 활용할 수 있다. 미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수로 액션과 리듀서 사이의 중간자라고 볼 수 있다. 리덕스 미들웨어 라이브러리 redux-thunk, redux-saga, redux-observable, redux-promise-middleware등을 서치하여 사용할 수 있고, 만들어서 사용할 수도 있다. 실제 프로젝트를 작업 할 때에는, 미..

시작하기 전에.. Hook이란 무엇인가? 번역해보면 "갈고리"라는 뜻을 가지고 있다. 아이스크림을 훅해서 퍼먹는 것처럼 무언가 가져오는 느낌이다. 우리가 React에서 useState라는 Hook을 사용하여 상태를 관리하였다. 마찬가지로 Redux의 상태를 가져와서 사용하려면 react-redux의 Hook을 사용하면 된다. Redux Hook 중 가장 많이 사용하는 useDispatch 와 useSelector 에 대해 알아보자. 📌 리액트 훅이란? 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 📌 훅킹(Hooking)이란? 이미 작성되어 있는 코드의 특정 지점을 가로채서 동작 방식에 변화를 주는 일체의 기술이다. react-redux 패키지 설치하기 먼저 react-..

Redux란? 리덕스는 자바스크립트를 위한 상태 관리 프레임워크이다. 🙋 React를 사용하면 Redux도 같이 사용하는데 그 이유는 뭘까? 결론을 먼저 말씀드리면 Redux로 상태를 관리하기 위해서이다. React는 부모 컴포넌트인 App컴포넌트에서 모든 것(state와 동작)을 관리하고 데이터를 아래로 내려주는 구조로 부모컴포넌트의 데이터를 props로 자식컴포넌트에게 전달해준다. 앱이 커지고 깊은 곳에 있는 자식 컴포넌트에 상태값을 전달할 때 데이터 흐름 파악이 어려워 지고 복잡성으로 관리하기가 어려워지는 문제가 발생한다. 그러나 Redux를 사용하면 state를 중앙에서 상태를 관리하여 상태 관리 코드를 분리하여 사용할 수 있기 때문이다. 공식문서를 읽다보면 Redux는 상태를 관리하기에 좋은 도..

리액트에서 가장 유명한 패턴인이자 가독성과 생산성을 고려한 방법인 프레젠테이션 컴포넌트와 컨테이너 컴포넌트에 대해 알아보려고 한다. 🔎 Presentational Components 와 Container Components 패턴으로 왜 나누는 걸까? 화면을 표현하는 부분(Presentational Components)와 데이터를 다루는 부분(Container Components)으로 나눠서 개발하는 패턴으로 재사용성과 유지보수의 장점이 있다. 📌 Presentational 컴포넌트 데이터 출력, 데이터 처리 능력은 없음, no logic DOM 마크업과 스타일 담당(UI) Redux와 관련 없음 부모 컴포넌트로부터 받은 Props인 데이터와 콜백(callback)을 사용 📌 Container 컴포넌트 데..

안녕하세요. 이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext 중 useEffect 에 대해 공부 한 내용을 정리해보겠습니다. useEffect Hook이란? 공식 문서를 보니 아래와 같이 정의 되어 있고, 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다. useEffect(didUpdate); useEffect는 컴포넌트에서 부수 효과 처리할 때 사용하는 훅입니다. 📌 부수 효과란 무엇일까? 함수 실행시 함수 외부의 상태를 변경하는 연산을 부수 효과하고 부른다. useEffect를 언제 사용하면 좋을까? 특별한 이유가 없다면 모든 부수 효과는 useEffect hook에서 처리하는게 좋다. Hook에 대해 더 알고 싶다면 공식 문서를 ..