![]()
안녕하세요! 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..
![]()
안녕하세요! delay100입니다. 이번 포스팅에서는 컴포넌트 스타일링 중에 가장 자주 쓰이는 4가지에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 9장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch9/styling-react GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. CSS 소..
![]()
안녕하세요! delay100입니다. 이번 포스팅에서는 Hooks에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 8장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch8/hooks-tutorial GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. Hooks? 리액트 v16.8에 도입된 기능으..
![]()
안녕하세요! delay100입니다. 이번 포스팅에서는 컴포넌트의 라이프사이클 메서드에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 7장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch7/hello-react GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. 라이프사이클? 모든 리액트 컴포..
![]()
안녕하세요! delay100입니다. 이번 포스팅에서는 map에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 6장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch6/hello-react GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. map? map이란? - 배열 객체의 내장 함수 - 반..
![]()
안녕하세요! delay100입니다. 이번 포스팅에서는 ref에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 5장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch5/hello-react 1. ref(reference)? ref(reference)란? - 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법(HTML에서 id를 사용하여 DOM에 이름을 다는 것과 유사) - DOM을 꼭 직접적으로 건드려야할 때 사용함 간단한 ref 예시 // id가 root인 요소에 ..
![]()
안녕하세요! delay100입니다. 이번 포스팅에서는 이벤트 핸들링에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 4장 내용을 다루고 있습니다. 프로젝트 실행 방법에 대한 설명은 여기에 있습니다. 이번 포스팅의 Github 링크 https://github.com/delay-100/study-react/tree/main/ch4 GitHub - delay-100/study-react Contribute to delay-100/study-react development by creating an account on GitHub. github.com 1. event(이벤트)? event(이벤트)란? 사용자가 웹 브라우저에서..
