React

1. Redux Redux는 앱 전체 상태를 쉽게 관리할 수 있는 라이브러리이다. Redux는 리액트만을 위한 라이브러리는 아니며, 다른 언어에서도 사용할 수 있는 라이브러리이다. Redux를 사용하면 앱 전체 상태 관리 뿐만 아니라, 비동기 처리 상태 관리에 용이하

0. 상태 관리 기술 상태 관리 기술이란, 여러 컴포넌트에서 데이터를 공유하는 것을 의미한다. 상태 관리 기술을 도입하면 데이터 관리를 더욱 효율적으로 할 수 있고, 성능과 네트워크를 최적화하는 데 유리하다. 로직이 복잡해지고, 잘못 사용한다면 되려 성능이 악화될 수

리액트는 SPA 방식으로 라우팅을 구현한다.React-Router-Dom은 리액트의 라우팅 관련 라이브러리로 현재 v6까지 발표되었다.이전 버전인 v5와 v6는 문법적으로 차이가 있다. v6의 문법과 함께 v5에서 어떻게 바뀌었는지 정리해보겠다.React-Router-

리액트에서 스타일링을 하는 방식은 3가지가 있다.기존의 방식과 동일하게 css 파일을 따로 분리하여 사용하는 방식이다.기존에 html 파일에서 css 파일을 연결할 때는 <link> 태그를 사용하여 연결하였지만, 리액트에서 css를 연결할 때는 import를 사용

Props는 컴포넌트에 값을 전달해줄 때 사용한다. 넘겨줄 수 있는 값은 변수, 배열, 객체, 함수 등 자바스크립트 요소 모두 가능하다.단, props는 읽기전용으로 값이 변경되어서는 안 된다. props의 값을 변경하고 싶다면, props를 직접적으로 변경하는 것이

페이스북이 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리.① JSX자바스크립트 XML의 약자이며, 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트의 확장된 문법이다. HTML과 비슷하게 생겼지만 자바스크

CRA 환경에서 eject하지 않고 Craco를 활용하여 절대경로 설정할 수 있다. 구글링 해보면 craco-alias를 활용하는 방법이 많이 나오는데, 현재는 지원하지 않는다고 한다. 몇 시간의 삽질 끝에 성공한 craco만으로 적용하는 방법을 정리해보려고 한다.\*

1. Next.js란? Next.js는 리액트 기반의 서버사이드 렌더링 프레임워크이다. React는 클라이언트 사이드에서만 작동한다는 특징이 있는데, 이로 인해 SEO 효과가 저조했으며 초기 렌더링시 성능 부담이 크다는 문제점이 존재했다. 이러한 문제점을 해결하기

웹페이지를 이미지로 저장하는 기능을 구현하게 되었다. 하지만 언제나 복병인 ios/safari에서 웹페이지 내부에 자리하고 있는 이미지 요소가 누락되어 저장되는 이미지가 발생했고, 이를 해결한 과정을 기록해보려고 한다.우선 나는 이미지화를 위해 html-to-image