React

안녕하세요. 딜레이입니다. 이번 포스팅에서는 React Native개발 시, ios에서 발생하는 노치를 없애보겠습니다!! 사실 상 제거한다기보다는 에러를 해결하는 느낌입니다.. 삽질하는 과정이 있으니 결과만 보실려면 "최종 해결" 을 ctrl+f해서 보시면 됩니다. 이거때문에 3시간 넘게 찾아봤음..ㅠㅠ 이렇게 너무 거슬리는 노치를 제거해보겠습니다. 현재 코드 * src/App.js import React from "react"; import styled, { ThemeProvider } from "styled-components/native"; import { theme } from "./theme"; import { StatusBar } from "react-native"; import Navigat..

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

안녕하세요! 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입니다. 이번 포스팅에서는 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입니다. 이번 포스팅에서는 간단한 투두리스트를 만들어봅시다. 지난 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입니다. 이번 포스팅에서는 컴포넌트의 라이프사이클 메서드에 대해 공부해봅시다. 대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요! 책 리액트를 다루는 기술, 개정판의 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입니다. 이번 포스팅에서는 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(이벤트)란? 사용자가 웹 브라우저에서..