본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 02. CSS Module 이번에는 CSS Module 이라는 기술에 대해서 알아보자. 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다. CRA 로 만든 프...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 01. Sass Sass (Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 00. 개요 이번에는 리액트 컴포넌트를 스타일링하는 방법에 대해서 알아보자. 리액트에서 컴포넌트를 스타일링 할 때에는 다양한 기술이 사용될 수 있다. 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에서 impor...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet 이번에는 리액트 개발을 할 때 사용하면 편리한 도구들에 대하여 알아보도록 하겠다. 이번에 다루게 되는 도구들은 모두 VS Code 와 연동해서 사용하는 ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 이번에는, componentDidCatch 라는 생명주기 메서드를 사용하여 리액트 애플리케이션에서 발생하는 에러를 처리하는 방법을 알아보자. 먼저, 이번 튜토리얼을 진행 하기...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 25. LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부른다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 이다. 추가적으로 컴포넌트에서 에러가 났...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 24. 클래스형 컴포넌트 이제는 잘 사용하지 않지만, 그래도 클래스형 컴포넌트에 대해서 알아보자. 앞으로 클래스형 컴포넌트를 사용하는 일은 거의 없겠지만 그래도 알아둘 필요는 있다. 나중에 클래스형 컴포넌트를 사용하는 프로젝트를 유지보수하게 되는 일이 있...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 23. Immer 를 사용한 더 쉬운 불변성 관리 리액트에서 배열이나 객체를 업데이트 해야 할 때에는 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해주어야 한다. 예를 들면 다음과 같이 하면 안되고 const object = { a: 1, ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 22. Context API 를 사용한 전역 값 관리 우리가 현재 만들고 있는 프로젝트를 보면, App 컴포넌트에서 onToggle, onRemove 가 구현이 되어있고, 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에게 전달이 되...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 21. 커스텀 Hooks 만들기 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생하게 된다. 예를 들면 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복된다. 이번에는 그러한 상황에 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽...