우리는 useState를 알고있고, 활용할 수 있다. 또한, 이 훅을 통해 상태관리를 문제없이 진행하고 있었다. 하지만, 작업을 하다보면 state들이 많이 존재하거나, 서로 엉켜있어 상당히 골치아픈 경우가 종종 발생한다. 이런 경우에도 useState를 활용해서 당연히 해결할 수 있다. 그래도 마음속으로는 좀 더 편한 기능이 있었으면 좋겠다 라고 바라는게 정상일것이다. 이러한 고민을 해결해주는 리액트 훅이 useReducer 훅이다. 이 글에서 알아볼 것 useReducer useEffect와 useReducer 같이 사용할 때 발생하는 사소한 문제점 1. useReducer 앞에서 간략하게 소개했지만 다시 자세히 알아보자 useReducer란? state를 관리하는 리액트 훅이다. 정확히 말하면, 복..
이전 글중에 순수함수를 알아보면서 부수효과 (side effect)에 대해서 알아본 적이 있었다. 리액트에서도 이런 부수효과와 관련된 기능이 존재한다. (자바스크립트에서의 사이드이펙트와 리액트에서의 사이드이펙트는 살짝 느낌이 다르다) 이 기능은 앞서 알아본 useState와 마찬가지로 리액트에서 제공하는 리액트 훅이다. 이 글을 시작으로 중요한 리액트 훅 3 + 1 개를 알아보면서 리액트에 대해서 더 깊게 이해해보자 이 글에서 알아볼 것 React에서의 Side Effect useEffect 1. React에서의 Side Effect 자바스크립트에서의 사이드 이펙트는 함수의 동작으로 인해 외부가 바뀌는 것을 말했었다. (https://joseph0926.tistory.com/21) 리액트에서의 사이드 이..
https://joseph0926.tistory.com/25 [Javascript] 자바스크립트 비동기(Async)_01 (sync & async 코드, 이벤트 루프, 콜백함수, async / await 키워 앞선 글에서 내가 생각하기에 자바스크립트에서 개념적으로 가장 중요한 2 파트가 있는거 같다고 언급한 적이 있었다. 그중 두번째가 지금 알아볼 파트다 저번 중요 파트에서 개인적으로 자바 joseph0926.tistory.com 이 주제에 대해서는 위의 링크에서 자세히 알아본 적이 있다. 그럼에도 글을 하나 더 쓰는 이유는, 프로미스에 대한 설명이 없는 것과 위 글에서 설명이 부족한 부분의 보충이다. 이 글에서 알아볼 것 콜백 지옥 (Callback Hell) 이란? 프로미스 (Promise) 란? a..
보통 데이터를 저장할 때, 서버..즉 데이터베이스에 저장하는 경우가 대부분이다. 하지만, 브라우저에도 저장소가 마련되어있고, 상황에 따라서는 브라우저 저장소에 저장하는 것이 더 나은 상황도 존재한다. 서버에는 보통 중요한 데이터를 저장한다. 지속되어야하는 데이터로, 사용자에게서 분리하여 안전하게 저장한다 브라우저에는 여러 간단한 데이터를 저장할 수 있다. 웹사이트를 방문하였을 때 자바스크립트 코드에 의해 브라우저 저장소와 의사소통하여 사용할 수 있다 또는, 사용자가 브라우저에서 조작할 수 있지만, 다른 사용자와 공유는 할 수 없다 이 글에서 알아볼 것 LocalStorage, SessionStorage Cookies IndexedDB 1. LocalStorage, SessionStorage 특징 단순한 ..
자바스크립트는 매우 훌룡한 언어다. 상당히 유연하고 자유로우며, 범용성 또한 넓다. 하지만, 때로는 이러한 장점들이 문제가 되는 경우도 종종 존재한다. 그러면 자동적으로 이런 생각이 떠오를것이다. 자바스크립트의 장점은 챙겨가면서, 필요할 때는 엄격한 그런 언어는 없는지.. Typescript는 이러한 고민을 한번에 해결해준다. 이 글에서 알아볼 것 Typescript 란? Typescript의 장점 Typescript 시작하기 1. Typescript 란? 타입스크립트는 자바스크립트 슈퍼셋(Superset)이다. 즉, 타입스크립트는 자바스크립트를 기반으로 하는 프로그래밍 언어다 자바스크립트 장점 + 새로운 기능 추가 자바스크립트도 이미 충분히 훌룡한데, 거기에서 장점은 챙기고 단점은 보완하며 새로운 기능..
대부분의 웹 사이트에는 사용자의 입력을 활용한다. 따라서 사용자 입력값을 컨트롤하는 것은 매우 중요한 주제이다. 리액트에도 당연히 사용자 입력값을 컨트롤하는 방법이 존재한다. 그것도 두개나... 하나는 이미 state를 살펴보면서 알아보았다. (https://joseph0926.tistory.com/19#2.%20%EC%82%AC%EC%9A%A9%EC%9E%90%20%EC%9E%85%EB%A0%A5%EA%B0%92%20%EC%BB%A8%ED%8A%B8%EB%A1%A4-1) 이 방법은 사용자 입력을 컨트롤 하는 훌룡한 방법이지만, 약간의 단점도 존재하고 상황에 따라 맞지 않을 수 있다. 이럴때 대안으로 생각해볼수있는 것이 "ref"다. 이번 글에서는 기존에 알고있던 사용자 입력값 컨트롤 방법을 다시 자세히..
보통 프론트엔드를 공부할 때, HTML & CSS -> 자바스크립트 -> 자바스크립트 라이브러리(React, Vue, Angular..)순으로 익혀나간다. 하지만 나는 자바스크립트 기본 문법만 공부하고 바로 React로 넘어갔었다. 이유는 자바스크립트 공부가 너무 지겨웠기 때문이였다. 그래서 나는 프로젝트를 시작하고 파일을 구성할 때, 기능 or 역할별로 파일들을 분리해놓고 시작한다. 이런 방식을 자바스크립트에 적용하고 싶었으나 여러 문제가 발생하였고, 자바스크립트 모듈을 활용하여 해결하였다. 이 글에서 알아볼 것 자바스크립트 모듈 1. 자바스크립트 모듈 내가 위에서 말한것처럼 많은 개발자들이 개발할 때, 로직을 여러 파일로 나눠서 관리하고 개발한다. 왜냐하면, 기본적으로 가독성이 좋아지고, 문제가 발생..
하나의 웹페이지를 구성하기 위해서는 보통 프론트엔드 - 백엔드 - DB 가 갖춰져야한다. 사용자가 웹페이지를 이용하면서 어떤 데이터를 저장하려하거나, 데이터를 읽을려면 프론트엔드에서 특정 행동을 취하고(버튼 클릭등..) -> 백엔드에서 관련 로직을 실행하고 -> DB에서 데이터를 저장하거나 읽는다. 여기서 프론트엔드와 백엔드의 통신에 HTTP가 활용된다. 이 글에서 알아볼 것 HTTP 통신의 이론 JSON XMLHttpRequest vs fetch() vs axios 1. HTTP 통신의 이론 위에서 언급했듯이, HTTP 통신은 프론트와 백엔드의 의사소통에 홯용된다. 이를 자세히 알아보자 브라우저 - 프론트 - 백엔드 소통 사용자 화면에 HTML 문서를 렌더링하는 작업은 흔히 프론트엔드라 불리는 기술없이..
