"리액트를 다루는 기술" 책에 있는 블로그 제작 프로젝트를 리뷰한 내용입니다. 전체 코드는 이 곳에서 확인하실 수 있습니다. Blog 프로젝트 리뷰 24-27 장에 거친 프론트엔드 블로그 프로젝트의 리뷰를 진행하도록 하겠습니다. 최대한 프론트 부분의 모든 코드를 꼼꼼하게 보고 넘어가는 것이 목표이고, 이를 통해 리덕스 사가에 대한 이해와, 전체적인 프로젝트 구조를 이해하게 되는 것이 목표입니다. 현재 프로젝트의 구조는 아래와 같습니다. 📦src ┣ 📂components ┃ ┣ 📂auth ┃ ┃ ┣ 📜AuthForm.js ┃ ┃ ┗ 📜AuthTemplate.js ┃ ┣ 📂base ┃ ┣ 📂common ┃ ┃ ┣ 📜AskModals.js ┃ ┃ ┣ 📜Button.js ┃ ┃ ┣ 📜Header.js ┃ ┃ ┣..
React
코드 스플리팅 기술에 대해 알아보았다. SPA의 경우, 사용하지 않는 컴포넌트들도 처음에 모두 가져오기 때문에, 초기 페이지가 나타나는데 시간이 SSR 보다 오래 걸린다는 단점이 있다. 이를 해결하기 위한 방법 중 하나가 코드 스플리팅인데, import 를 동적으로 한다는 것으로 보면 될 것 같다. import('./SplitMe').then(result => result.default()); 자바스크립트에서는 위의 방식으로 진행할 수 있다. 리액트에서는 크게 두 가지 방법이 있는데, 클래스형 컴포넌트를 사용해서, state에 로드하는 것과 React.laze 와 Suspense 를 사용하는 것이다. 일단 클래스형 컴포넌트의 사용법은 아래와 같다. class App extends React.Compone..
리액트 시작 과거 자바스크립트는 웹에서 간단한 연산을 사용하거나 시각적 효과를 주는 단순한 스크립트 언어였지만, 현재 웹 애플리케이션에서 핵심적인 역할을 하고 있습니다. 자신의 영역을 넘어서서 화면에 보여지는 프론트 뿐 아니라 서버도 자바스크립트로 만들 수 있고, 더 나아가서 현재 많은 사람들이 사용하고 있는 슬랙, VSCode와 같은 데스크탑 앱을 만드는데도 자바스크립트가 사용되고 있습니다. 자바스크립트 엔진이 발전하면서 자바스크립트로 큰 규모의 애플리케이션을 만들 수 있게 되었지만, 자바스크립트만 가지고 대규모 애플리케이션을 관리하기는 쉽지 않습니다. 애플리케이션 관리를 조금 더 쉽게 하기 위해 프레임워크가 생겨났고, 대표적인 프레임워크들로 Angular, Backbone.js, Vue.js 등이 있..
Portal Slate.js 를 사용하면서 에디터의 기능을 수정할 때 Portal 을 사용해 메뉴를 생성하는 코드를 보게 되었고, Portal이 뭐지? 하는 궁금증이 생겼다. 이 궁금증을 해소하기 위해 찾아간 곳은 리액트 포탈 공식 문서였습니다. 리액트에서는 포탈을 아래와 같이 설명한다. Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 처음에는 이게 무슨 뜻인지 이해가 잘 되지 않았는데 Slate.js의 코드와 문서의 예제들을 보면서 이해하게 되었다. 일반적인 부모-자식 컴포넌트 구조 모든 컴포넌트는 독립적으로 존재할 수도 있고, 부모 또는 자식 컴포넌트를 가지고 있을 수도 있다. 여기서 파란색은 부모, 주황색은 파란색 컴포넌트의 자..
Momentum을 만들던 도중 input 태그의 onChange 이벤트 핸들러에서 아래와 같은 에러 메시지를 출력했다. 문제가 컴포넌트의 코드는 아래와 같다. class SearchBar extends React.Component { constructor(props) { super(props); this.state = { inputValue: this.props.inputValue }; console.log(this.state.inputValue); this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } handleSubmit(event) { event.preventDefault..
이번에는 리액트 공식 사이트의 튜토리얼의 추가 미션 진행해보도록 하자. 추가 미션의 목록은 아래와 같다. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시. 이동 목록에서 현재 선택된 아이템을 굵게 표시. 사각형을 만들 때 하드코딩 대신에 두 개의 반복문을 사용하도록 Board를 다시 작성. 오름차순이나 내림차순으로 이동을 정렬하도록 토글 버튼 추가. 승자가 정해지면 승부의 원인이 된 세 개의 사각형 강조. 승자가 없는 경우 무승부 메시지 표시. 이 미션을 모두 달성한 화면은 아래 사진과 같을 것이다. 빨간 상자는 1번, 주황색은 2번, 노란색은 4번, 초록색은 5번이다. 이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시 이동 기록 목록을 (행, 열) 형식으로 표현해보..
Reat로 사고하기 React는 JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. React는 Facebook과 Instagram을 통해 확장성을 입증했습니다. React의 가장 쿨한 점은 앱을 설계하는 방식이다. 이번 섹션을 통해 React로 상품들을 검색할 수 있는 데이터 테이블을 만드는 과정을 진행해보자. 목업으로 시작하기 이 장에서 목업이라고 말하는 것은 나는 학부 과정 중 테스팅 과목을 들으면서 얼핏 배운적이 있다. mock 객체라고 해서 아직 완료하지 못한 경우 이를 테스트하기 위해 mock 객체를 붙여 테스트 한다고 알고 있는데 확실하진 않으니 따로 찾아보고 다시 글을 수정하도록 하겠다. 일단 JSON API와 목업을 디자이너로부터 받았다고 가정해보자. ..
합성 (Composition) vs 상속 (Inheritance) React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용해 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 이번 섹션에서 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제점과 합성을 사용해 이를 해결하는 방법을 살펴볼 것이다. 컴포넌트에서 다른 컴포넌트를 담기 Sidebar나 Dialog를 생각해보자. 우리는 이 안에 어떤 자식 엘리먼트가 들어와야할지 모든 것을 예상할 수 없다. 이러한 컴포넌트에는 children prop을 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다. 화면에 출력할 내용을 prop으로 받는 것이다. 아래 코드를 보자. function FancyBorder(props)..
State 끌어올리기 종종 동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 이런 일을 어떻게 할 수 있을지 지금부터 살펴봅시다. 이번 섹션에서는 주어진 온도에서 물의 끓는 여부를 판단하는 온도 계산기를 만들 것이다. 먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어보자. 이 컴포넌트는 섭씨 온도를 의미하는 celsius prop을 받아서 이 온도가 물이 끓는지 아닌지를 출력한다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would ..
폼 제어 컴포넌트 (Controlled Componenet) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 여기서 눈치챈 사람들도 많을 것이다. 자신의 state를 관리하면 되므로 클래스형 컴포넌트를 사용해 setState()로 상태를 업데이트 하면 된다. "제어 컴포넌트 (controlled component)"는 React에 의해 값이 제어되는 입력 폼 엘리먼트를 말한다. 아래 코드를 보며 제어 컴포넌트를 알아보자. class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange..
