Code Playground

< h1 > Code Playground </ h1 >

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/react-core-concepts https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state ..

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/getting-started-with-react From JavaScript to React (JavaScript에서 React까지) #2 여러분의 프로젝트에 리액트를 사용하기 위해서는 unpkg.com이라고 불리는 외부 웹사이트로부터 두 개의 리액트 스크립트를 로드할 수 있다. react는 리액트 코어 라이브러리이다. react-dom은 리액트를 DOM과 함께 사용할 수 있도록 만들어주는 DOM에 특화된 method를 제공해준다. const app = document.getElementById('app'); 순수 자바..

Next.js 공식 문서에 상단 Learn 버튼 누르면 나오는 튜토리얼 문서인데 좋은 내용인 것 같아서 시리즈로 번역해서 올리려고 한다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript [Next.js Learn - 현재까지의 번역본] [#1] From JavaScript to React (React는 선언형 UI 라이브러리이다) [#2] From JavaScript to React (React와 JSX) [#3] From JavaScript to React (React..

처음에 회사에서 서비스 개발 프로젝트를 맡았을 때 내가 작성했던 테스트 코드는 util성 함수들에 대한 unit 테스트 코드가 전부였다. 거기에 조금 더 덧붙여서 Redux Saga의 Generator 함수에 대한 간단한 unit 테스트들을 작성하였는데 방법은 매우 간단했다. Saga Generator 함수들을 실행했을 때 어떤 이펙트들이 순차적으로 실행되는지 각 단계 별로 mocking하여 테스트하는 방식이다. 그 때 내가 작성했던 테스트 코드 한 대목을 가져와봤다. describe('1. success scenario', () => { let gen: any; beforeAll(() => { gen = fetchAllSaga(); }); it('yield user and example API call..

import { ExampleComponent } from './example'; // ... 회사에서 react-router를 쓰면서 주로 위와 같은 방식으로 routing을 하다가 router v5 버전부터 아래와 같이 Route 컴포넌트 안에 child 컴포넌트를 합성하는 방식이 더 권장되는 것을 발견하고 바꾸었다. import { ExampleComponent } from './example'; // ... 근데 이걸로 바꾸는 순간 한 가지 이슈가 발생했는데... 😨 바로 이 이슈였다. 탭을 이동할 때마다 주소 뒤에 query parameter가 바뀌고, 이 query parameter가 바뀔 때마다 UI가 바뀌는 화면이 있었는데, Routing 방식을 바꾸니까 갑자기 탭을 아무리 클릭해도 화면이..

리액트 상태 관리 리액트로 개발을 할 때 리액트에서 기본으로 제공하는 상태 관리 메소드들을 사용하는 것이 가장 간단하고 편리하겠지만, 약간의 한계는 분명히 있다. 리액트 컴포넌트의 상태는 상위에서 하위로 단방향으로 흘러갈 수밖에 없는데, 이 과정에서 거대한 트리 구조가 만들어지고, 무수히 많은 re-render가 일어난다. 자식 컴포넌트에서 부모 컴포넌트의 상태를 제어하기 위해서는 부모 컴포넌트가 본인이 가지고 있는 상태를 제어할 수 있는 메소드들을 자식 컴포넌트에 전달을 해주어야만 가능하다. 그러니까 자식 컴포넌트에서 상위에서 전달된 메소드들로 무언가 상태를 변경하면 부모 컴포넌트들부터 하위에 연결된 컴포넌트들 전부가 re-render 된다. 리액트에 Context API라는 것이 생기면서 리액트에서도..

useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); 대부분 useState hook으로 리액트의 상태 관리를 하게 되는데, 가끔 상태 로직을 상태 변화가 일어나는 컴포넌트로부터 분리시키고 싶을 때 useReducer를 유용하게 사용할 수 있다. useReducer는 주로 복잡한 상태 로직을 가졌거나 다음 state가 기존 state에 의존성을 가질 때 사용된다. 또한 useReducer를 사용하면 하위 컴포넌트에게 callback 함수가 아니라 dispatch 함수를 넘겨줄 수 있어 유지보수 관점에서 매우 편리해진다. (하위 컴포넌트들에게 계속 prop으로 전달, 전달, 전달을 할 필요가 없어지니까!) 사실 Redux의 ..

Kent C. dodds의 Epic React 강의에서 React hooks - useEffect: HTTP requests 챕터를 정리해보려고 한다. 일단 간단하게 API를 호출해서 화면에 API 응답으로 온 랜덤 강아지 이미지를 보여주는 예시를 만들어보려고 한다. const fetchRandomDog = (error) => fetch("https://dog.ceo/api/breeds/image/random").then((data) => { if (error) { throw error; } return data.json(); }); 그리고 에러가 나는 상황을 연출하기 위해 인자로 error가 넘어오면 error를 throw하고, 그 외의 경우에는 fetch받은 data를 JSON format으로 변환해..

정말 오랜만에 글을 쓰려고 블로그를 켰더니 너무 낯설다. 회사 일이 바쁘다는 핑계로 살짝 멀리했었는데 블로그야 미안... 회사 슬랙에 Kent C. dodds의 Epic React 강의에 관심있는 사람 있으면 같이 공동구매해서 듣자는 제안이 올라왔는데 쿨하게 회사에서 지원을 해줘서 공짜로 들을 수 있게 되었다. 🎉 강의 챕터는 요렇게 구성되어있다. 넘나 알찬 구성 🥰 React Fundamentals React Hooks Advanced React Hooks Advanced React Patterns React Performance Testing React Apps React Suspense Build an Epic React App Epic React Expert Interviews 오늘은 React ..

지난 주부터 회사에서 해결이 안되서 골머리를 앓았던 문제에 대해서 얘기해보려고 한다. 보통의 UI에서 대부분 모달(팝업이라고도 부른다)이 뜨면 모달 뒤에 body 영역을 반투명한 검정색 레이어로 덮어서 모달의 컨텐츠가 더 도드라지게 만든다. 이 반투명한 검정색 영역을 주로 Dim 영역이라고 부른다. 보통 팝업창 내에 컨텐츠가 길어서 스크롤이 있는 경우에는 팝업 내부에만 스크롤이 잘 되게 하기 위해서 Dim 영역 뒤에 있는 body의 scroll은 막는 경우가 많다. 그리고 웹에서는 scroll 막는 것도 쉽게 처리할 수 있다. 바로 팝업이 떴을 때 body 태그에 overflow: hidden을 걸어줘서 scroll을 못하게끔 막아버리는 방법이다. 1. body 태그, overflow: hidden; 코..