React

React.js란 Facebook(현재 Meta)에서 만든 Javascript 사용자인터페이스(UI)로, Facebook의 매우 복잡한 사용자 인터페이스와 수많은 컴포넌트를 기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 201

Redux(리덕스)란 JavaScript의 상태관리 라이브러리이다. React와 같은 컴포넌트 기반의 애플리케이션을 개발 해봤다면 (당연히 상태관리 라이브러리를 썼겠지만) 상태관리 라이브러리의 필요성을 절실히 느낄 것이다. 여기서 말하는 상태(State)란 간단하게 말

이 포스팅은 CRA (Create-React-App) 명령어를 사용하여 React 애플리케이션을 세팅하는 방법에 대해 정리한다. 주의할 점은, CRA의 장점이자 단점은 자동으로 환경설정 파일을 overloading한다는 점인데, 만약 Webpack이나 Vite와 같은

앞선 포스팅에서 redux란 무엇인지에 대해 알아봤었다. 이제 react 애플리케이션에 redux를 적용시켜 보자. 참고로, 이 포스팅은 React를 활용하기만 할 뿐 redux의 세팅 방법을 위주로 작성되며 React관련 내용은 다루지 않는다. React 세팅방법

앞선 포스팅에서 Redux를 세팅했는데 이제 실제로 사용을 해보자.AuthTokenReducer를 생성 했으니 로그인 로그아웃을 예로 들어보자.이렇게 빈 페이지에 로그인 버튼이 있을 때 클릭하면 로그인/로그아웃이 되도록 해보자. 이 포스팅은 redux의 사용법에 대한

redux-persist앞서 redux에 대하여 알아봤었다. redux를 사용하다 보면 가장 불편한 점 중 하나가 바로 새로고침이 되면 저장된 상태가 초기화 된다는 것이다. store는 createStore 함수를 통해 생성되는데, javascript 객체의 형태로 생

react-queryFrontEnd 애플리케이션을 독립적으로 개발을 하다보면 필연적으로 독립된 API 애플리케이션을 개발하고 HTTP 요청을 통해 받아온 데이터로 애플리케이션을 구동하게 된다. 일반적으로 HTTP 요청에는 javascrip의 내장 라이브러리인 Fetch

커스텀 훅react의 핵심 요소 중 하나는 훅(hook)이라고 할 수 있다. 보통 처음 react를 배울 때 투두리스트 또는 숫자 카운터를 만들어 보며 개념을 익히는데, useState를 사용하여 상태를 관리하고 useEffect를 사용해 바뀐 상태를 렌더링 하는 법을

여기서 PrismJS 는 소스코드 하이라이팅 라이브러리이다. Toast UI Editor에서 코드 블록을 하이라이팅하는 기능을 사용할 때, PrismJS를 함께 사용하여 다양한 프로그래밍 언어의 구문을 강조하기 위해 함께 추가해준다.처음에 이 과정 없이 그냥 Toast

React는 내장 웹서버를 포함하고 있어서 개발단계에서 실행할 때는 별도의 웹서버를 사용하지않고 start, dev 또는 Vite와 같은 별도의 번들러 라이브러리를 사용한다면 vite, preview 등의 명령어로도 실행이 가능하다.하지만 이러한 개발 서버는 프로덕션