WannaBeDeveloper

리액트 관련 프로젝트를 진행하기 위해 구글링을 하던 중 react 모듈로부터 useState, useEffect 함수를 사용하는 것을 보고 이 함수들이 무엇인지 궁금해졌다. 그래서 검색해 보니 이 함수들은 React Hook과 관련있는 함수임을 알게 되었다. 이번 글에서는 React Hook에 대해서 간단하게 정리해 보려고 한다. 1. React Hook 개요 Hook은 React 16.8에 새로 추가된 기능이다. 기존의 react에서는 상태를 가질 수 있는 컴포넌트는 class 컴포넌트뿐이었으나, Hook을 이용하면 함수형 컴포넌트도 상태를 가질 수 있다! 2. State Hook useState는 상태의 초기 값을 인자로 받아 상태 변수와 상태 변수를 갱신할 수 있는 함수를 원소로 가지는 배열을 반환..

1. 문제 create-react-app에서 image src가 없거나 제대로 연결되지 않은 경우 default image를 표시하기 위해 구글에서 default image를 다운받아 local file로 사용하려고 했었다. 구글링해서 찾은 결과 public 폴더 안에 image를 넣고 이를 참조할 때는 '/(public 폴더 안에서 file의 위치)'로 하면 된다고 하길래 그렇게 했더니 file을 계속 찾지 못하는 오류가 발생했다. 특히 default image를 넣기 위해서 img 태그에 onError attribute를 추가하고 거기에 image를 넣었는데 그마저도 오류가 발생해서 onError 함수가 계속해서 재실행되는 상황이 발생했다. 그래서 이를 해결하려면 default image를 creat..

1. 문제 create-react-app으로 react app을 만들었을 때 index.html은 한글을 입력해도 한글이 깨지지 않는데 App.js에 한글을 입력하면 깨지는 문제가 발생했다. // App.js function App() { return 안녕; } export default App; 2. 해결 구글링한 결과 iwantadmin.tistory.com/121에서 다룬 인코딩 문제일 수도 있겠다고 생각했고, App.js를 '다른 이름으로 저장하기' -> '저장' 버튼의 삼각형 -> '인코딩하여 저장'을 통해 인코딩 방식을 UTF-8로 바꿔줬다. 인코딩을 유니코드 UTF-8로 바꾼 결과 다음과 같이 정상적으로 한글이 출력되는 것을 볼 수 있었다. 한국어로 인코딩되어 있는데 한국어가 안 나오다니....

지금까지 다룬 리액트 앱들은 데이터를 브라우저에서 수집해 브라우저의 저장소에 저장했다. 리액트는 view 계층이기에 브라우저에서 모든 것을 처리해야 하기 때문이다. 하지만 대부분의 앱은 실제로는 백엔드 계층이 필요하다. 즉, 서버를 염두에 두고 구조를 잡아야 한다. 리액트를 isomorphic하게 렌더링한다는 것은 브라우저가 아닌 플랫폼에서 리액트를 렌더링한다는 것을 의미한다. 이는 UI를 서버에서 렌더링하고 브라우저에 보내 표시한다는 뜻이다. 서버 렌더링의 강점을 살리면 애플리케이션의 성능, 이식성, 보안을 향상시킬 수 있다. 1. isomorphism과 universalism 비교 isomorphic과 universal이라는 용어는 클라이언트와 서버 양쪽에서 작동하는 애플리케이션을 의미한다. isom..

단일 페이지 앱에서는 한 페이지 안에서 모든 일이 벌어지기 때문에 브라우저 방문 기록, 책갈피, 이전 페이지, 다음 페이지 등의 기능은 적절한 routing 솔루션이 없으면 제대로 작동하지 않는다. routing이란 클라이언트의 요청을 처리할 endpoint를 찾는 과정이다. endpoint는 브라우저의 위치, 방문 기록 객체와 함께 작동해 요청받은 content를 식별한다. javascript는 이렇게 식별한 content를 가져와서 적절히 UI를 렌더링할 수 있다. react router는 리액트 앱을 위한 routing 솔루션이다. 1. router 사용하기 router를 사용하면 웹사이트의 각 section에 대한 경로를 설정할 수 있다. 각 경로는 브라우저의 주소창에 넣을 수 있는 endpoin..

1. 스냅샷 테스팅 UI 개발에 TDD를 적용하기가 어렵고 때로는 비실용적이다. UI가 자주 바뀌면 UI 테스트를 유지보수하는데 시간이 오래 걸릴 수 있기 때문이다. 또한 이미 프로덕션 환경에서 작동 중인 UI component에 대한 테스트를 작성해야 하는 경우도 자주 있다. 스냅샷 테스팅을 사용하면 UI component에 원치 않는 변화가 생기지 않았음을 확신할 수 있는 테스트를 빠르게 진행할 수 있다. 제스트는 렌더링한 UI의 스냅샷을 저장할 수 있고 나중에 진행하는 테스트에서 SUT가 렌더링한 결과를 스냅샷과 비교해 소스 코드 변경이 UI에 변화를 주지 않았음을 빠르게 확인하면서도 UI 테스트 구현의 어려움을 덜 수 있다. 스냅샷 테스팅은 처음 테스트를 실행할 때 DOM의 스냅샷을 저장하고 그 ..

1. ESLint 대부분의 프로그래밍 언어는 코드 실행 전 컴파일해서 코드 작성 규칙을 지켰는지 확인하는 반면, javascript는 컴파일러를 사용하지 않아 코드를 작성한 뒤 브라우저에서 직접 프로그램을 실행해야 오류가 있는지 확인할 수 있다. 그러나 이를 보완하기 위해 javascript에는 코드 분석을 해주는 많은 도구들이 있다. javascript를 분석하는 과정을 hinting 또는 linting이라고 하는데, JSHint와 JSLint는 원래 javascript를 분석하고 형식에 대한 제안을 제공하는 도구였다. ESLint는 최신 javascript 문법을 지원하는 코드 linter다. 여기에 플러그인을 추가할 수 있어 ESLint의 기능을 확장하기 위해 플러그인을 만들어서 공유하거나 다른 사..

1. store를 명시적으로 전달하기 store를 UI와 통합하는 가장 논리적인 방법은 store를 component tree의 프로퍼티로 명시적으로 UI에 전달하는 것이다. 이 접근 방식은 단순하며 내포된 component가 몇 개 안 되는 작은 앱에서 아주 잘 동작한다. // Aoo을 렌더링할 때 store를 프로퍼티로 전달하고 // store가 변경될 때마다 render 함수가 호출된다. import React from 'react' import ReactDOM from 'react-dom' import App from './components/App' import storeFactory from './store' const store = storeFactory() const render = () ..

Redux는 Flux와 유사하나 약간의 차이가 존재한다. Flux에 있는 action을 받아서 적절한 store에 보내는 dispatcher가 없다. 대신 애플리케이션 상태를 불변 객체 하나로 표현했다. Redux는 reducer를 가지고 있다. reducer는 현재 상태와 action에 따라 새로운 상태를 반환하는 함수다. 즉, '(상태, action) => 새 상태'라고 할 수 있다. 1. 상태 Redux에는 상태를 한 장소에 저장해야 한다는 규칙이 있다. 상태 데이터를 여러 component가 나눠 가지는 것은 작동을 잘 되지만 크기가 커짐에 따라 애플리케이션 전체 상태를 결정하기 어려울 수 있고, 각 component가 setState를 호출해서 자신의 상태를 변경하기 때문에 왜 갱신이 이루어졌는..

1. 리액트 밖에서 상태 관리하기 애플리케이션의 규모가 커질 경우 상태 데이터를 UI로부터 분리해서 상태만 처리하는 계층을 만드는 것이 더 나을 수도 있다. 상태를 리액트 밖에서 관리할 경우 클래스 component를 상태가 없는 함수형 component로 바꿀 수 있어 보다 더 나은 함수형 애플리케이션이 될 수 있다. 하나의 예시로 앞에서 다뤘던 시계를 log에 출력했던 startTicking 함수를 수정해 브라우저에 표시한다. // 기존의 startTicking 함수 const startTicking = (() => setInterval( compose( clear, getCurrentTime, abstractClockTime, convertToCivilianTime, doubleDigits, for..