전체 글

리액트를 다루는 기술 25장을 공부하다가 quill 적용이 잘 안되는 것을 확인했습니다. 1. 문제 발견 quill에서 theme를 정해주는 부분에서 bubble을 적용할 경우, 웹에 quill 관련 ui가 나오기는 하는데, placeholder의 값이 바로 나오지 않고 수많은 엔터가 쳐져있음. 말이 주저리주저리라 사진으로 표현해보겠습니다.. 이 상황에서 저 공백들을 지우면 placeholder 값이 나오기는 하지만 새로고침을 하면 계속 저런 공백이 생깁니다. 2. 해결 방법 도전 useEffect(() => { quillInstance.current = new Quill(quillElement.current, { theme: 'bubble', placeholder: '내용을 작성하세요...', modu..

안녕하세요! delay100입니다. 이번 포스팅에서는 앞에 17장에서 다뤘던 리덕스 애플리케이션을 가져와서 리덕스를 좀 더 편하게 사용하는 방법을 알아보겠습니다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 17.6장 이후의 내용을 다루고 있습니다. 17장의 프로젝트에서 이어서 작업을 합니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch17/react-redux-tutorial2 GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an acco..

안녕하세요! delay100입니다. 이번 포스팅에서는 16장에서 다뤘던 리덕스를 실제 애플리케이션 상태 관리에 적용해보겠습니다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 17장 내용을 다루고 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch17/react-redux-tutorial GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. 프로젝트 준비하기 리덕스를 사용하여 리액..

안녕하세요! delay100입니다. 이번 포스팅에서는 Redux(리덕스)에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 16장 내용을 다루고 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch16 GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. Redux? 1-1. 리덕스란? Redux란? - 가장 많이 사용하는 리액트 상태 관리 라이브러리 - 컴포넌트의..

안녕하세요! delay100입니다. 이번 포스팅에서는 Context API에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 15장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch15/context-tutorial GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. Context API? 기존..

안녕하세요! delay100입니다. 이번 포스팅에서는 외부 API 이용하여 뉴스 뷰어를 만들어보겠습니다. https://newsapi.org에서 제공하는 데이터를 받아와 만들게 됩니다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 14장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch14/news-viewer GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an acc..

안녕하세요! delay100입니다. 이번 포스팅에서는 Router(라우터) & SPA(Single Page Application)에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 13장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch13/router-tutorial GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub...

안녕하세요! delay100입니다. 이번 포스팅에서는 immer을 사용해 쉽게 불변성을 유지하는 방법에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 12장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch12/immer-tutorial GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. im..

안녕하세요! delay100입니다. 이번 포스팅에서는 지난 10장에서 만들었던 투두리스트의 컴포넌트들에 대해 성능을 최적화 해봅시다. 이번 학습에서는 10장 프로젝트의 코드를 그대로 가져온 후 시작합니다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 11장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch11/todo-app GitHub - delay-100/study-react Contribute to delay-100/study-react development by creatin..

안녕하세요! delay100입니다. 이번 포스팅에서는 간단한 투두리스트를 만들어봅시다. 지난 1~9 포스팅들은 작은 개념에 대한 빌드업을 해왔는데, 드디어 무언가를 만들어본다니 설레네요ㅎㅎ. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 10장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch10/todo-app GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an acc..