FrontEnd/Deep Dive
![[React] Deep Dive 모던 리액트(19) 리액트 개발 도구](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FB8eyt%2FbtsDawtoGdW%2FBmAitmYqRMXRc0h4IW3BW1%2Fimg.png)
[React] Deep Dive 모던 리액트(19) 리액트 개발 도구
프로그래밍에서 가장 중요한 것 중 하나는 디버깅이다. 코드에서 잘못된 부분을 파악하고 수정을 할 수 있게 해주는 방법이기 때문이다. 리액트에서는 리액트로 개발된 애플리케이션의 디버깅을 돕기 위한 리액트 내장 도구인 react-dev-tools를 제공한다. 이 react-dev-tools는 리액트 뿐 아니라 리엑트 네이티브 등 다양한 플랫폼에서 사용할 수 있다. 브라우저 확장 프로그램을 사용하면 이를 쉽게 사용할 수 있다. 페이지에 접속했을때 아래와 같이 뜬다면 정상적으로 리액트 개발 도구를 사용할 수 있다는 뜻이다. 리액트를 활용해 정상적인 배포를 진행중이라면 아래와 같이 나오게 된다. 만약 비 정상적인 접근이거나 리액트로 만든 페이지가 아니라면 아래처럼 나온다. 리액트 개발 도구를 키면 개발자도구에 아..
![[React] Deep Dive 모던 리액트(18) Jotai & Zustand](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMx7UV%2FbtsC4IVTsIb%2FpIM1qSiK5seHsdVfrmZYR0%2Fimg.png)
[React] Deep Dive 모던 리액트(18) Jotai & Zustand
Jotai는 공식 홈페이지에서 나와 있는 것처럼 Recoil의 atom 모델에 영감을 받아 만들어 진 상태 관리 라이브러리이다. Jotai는 상향식 접근법을 취하고 있다. 리덕스와 같이 하나의 큰 상태를 애플리케이션에 내려주는것이 아닌, 작은 단위의 상태를 위로 전파할 수 있는 구조를 가지고 있음을 의미한다. 이런 방식은 리액트 Context의 문제점인 불필요한 리렌더링이 일어나는 문제를 해결할 수 있다.메모이제이션 & 최적화 없이도 리렌더링이 발생하지 않는 구조이기 때문이다. atom Recoil과 마찬가지로 최소 단위의 상태를 의미한다. const couterAtom = atom(0) 위와 같이 Atom을 만들면 아래와 같은 정보가 담긴다. console.log(counterAtom) //,... /..
![[React] Deep Dive 모던 리액트(17) Recoil 살펴보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKjWb2%2FbtsC85idlK4%2FY5fHCTV1c9CBC7FgByEeh1%2Fimg.png)
[React] Deep Dive 모던 리액트(17) Recoil 살펴보기
저번글까지 전역 상태관리들을 직접 만들어 보았다. 이번에는 리액트 생태계에서 인기있는 라이브러리들에 대해 알아보자. Recoil과 Jotail는 Context과 Provider , 훅을 기반으로 가능한 작은 상태를 효율적으로 관리하는 데 초점을 맞추고 있다. Zustand는 리덕스처럼 하나의 큰 스토어를 기반으로 상태를 관리한다. Recil , Jotail과는 다르게 이 하나의 큰 스토어는 Context가 아니라 스토어가 가지는 클로저를 기반으로 생성되며 이 스토어의 상태가 변경되면 이 상태를 구독하는 컴포넌트에 전파한다. Recoil 리액트를 만든 페이스북에서 만든 상태 관리 라이브러리이다. 훅의 개념으로 상태 관리를 시작한 최초의 라이브러리들중 하나이며 Atom을 처음 리액트 생태계에서 보였다. 20..
![[React] Deep Dive 모던 리액트(16) 훅을 통한 전역상태관리 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoTP5m%2FbtsCSBQkhRe%2FNsjTVjpRw42v3YwOhSub3k%2Fimg.png)
[React] Deep Dive 모던 리액트(16) 훅을 통한 전역상태관리 구현
이전 글에서 소개했듯이 정말 오랜 기간동안 리액트 애플리케이션의 상태관리는 리덕스에 의존했다. 심지어 일부 개발자들은 리액트 + 리액트를 하나의 프레임워크 정도로 생각할 정도였다. 하지만 지금은 Context API , useReducer , useState의 등장으로 리덕스 외의 다른 상태관리 라이브러리를 선택하는 경우가 많아졌다고 한다. ( 리덕스가 조금 수고스럽긴 하다) useState 해당 훅의 등장으로 리액트에서는 여러 컴포넌트에 걸쳐 동일한 인터페이스의 상태를 생성하고 관리할 수 있다. 아래와 같은 훅이 있다고 생각해보자. const useCounter = () => { const [counter, setCounter] = React.useState(0); function increase() ..
![[React] Deep Dive 모던 리액트(15) 리액트와 상태관리 라이브러리 역사](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdSujKR%2FbtsCZ6gLMou%2FihOMWVQutKdOH0PXp8xSPk%2Fimg.png)
[React] Deep Dive 모던 리액트(15) 리액트와 상태관리 라이브러리 역사
보통 상태관리라고 하면 많은 개발자들이 리덕스를 떠올릴 것이고 최근에 페이스북에서 만들어진 Recoil과 같은 라이브러리를 생각하곤 한다. 하지만 왜 상태관리가 필요하고 어떤 방식으로 전역상태 관리가 이루어지는지 간과하는 경우가 많다. 상태관리 ? 그렇다면 상태관리란 무엇일까? 흔히 웹 애플리케이션을 개발하는 경우 이야기 하는 상태는 어떠한 의미를 가진 값을 의미한다. UI 기본적으로 웹 어플리케이션에서 상태는 상호작용이 가능한 모든 요소의 현재 값을 의미하므로 다크/라이트 모드 , input , 모달 등등 많은 종류의 상태가 존재한다. URL 브라우저에서 관리되고 있는 상태값으로 URL에도 참고할 수 있는 상태가 존재할 수 있다. FORM 로딩중,제출이되었는지 , 접근가능한지 등등 모든 것이 상태이다...
![[React] Deep Dive 모던 리액트(14) Next.js](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRHbQL%2FbtsCQ26RUDI%2Fklk4G7jKrEgaeKLz3yhM31%2Fimg.png)
[React] Deep Dive 모던 리액트(14) Next.js
Next.js는 Vercel이라는 미국 스타트업에서 만든 리액트 기반 서버 사이드 렌더링 프레임워크이다. Next.js가 대세가 되기전 페이스북 팀에서 서버 사이드 렌더링을 위해 고려했던 프로젝트가 있는데 이게 바로 react-page이다. react-page는 페이지를 서버 또는 클라이언트에서 리액트를 손쉽게 사용할 수 있는 것을 목표로 만들어졌다. 물론 이 프로젝트는 현재 개발이 중지되었지만 여기서 구현해 둔 방향성에 Next.js가 영감을 받았다. 특히 Next.js의 페이지 구조가 이를 닮았다. 리액트 기반 프로젝트에서 서버 사이드 렌더링을 고려한다면 현재로는 Next.js를 선택하는 것이 가장 합리적인 선택일 수 있다. Next.js 시작하기 CRA와 유사하게 next.js 에서는 명령어를 제공..