Hello World...

리액트 데브 툴즈에서 하이라팅 기능을 이용하면 어떤 컴포넌트가 렌더링 되는 지 시각적으로 확인할 수 있다. 크롬 웹스토어에서 React Developer Tools 를 다운 받고 설치한 후, 리액트로 만들어진 사이트에서 개발자 도구를 열고 Components 탭에서 톱니바퀴를 클릭한다. 그리고 Highlight... 를 체크해주면 된다~

책 131페이지 3분 코딩 부분을 입력해보니 타입에러가 나면서 정상적으로 작동하지 않았다. 내 node 버전은 12이고 책의 버전은 10인데 달라서 그런 것일까?? 콘솔 에러를 보니 스트릭트 모드여서 에러가 나나 싶어서 부분을 지웠지만 여전히 동일한 에러가 발생했다. 그래서 그냥 render 를 추가해주니 해결되었다. class MyComponent extends React.Component { componentDidUpdate() { console.log('MyComponent 새로 고침'); } render() { return MyComponent; } }

John Ahn 님의 강의를 보면서 알게 된 내용을 작성. 노드 리액트 기초 강의 #23 Proxy Server ? 리액트에서 cors 문제를 해결할 수 있는 방법 중 하나로 프록시를 설정을 하는 것이다. (Express 서버에서 설정도 가능하다.) 자세한 내용은 잘 모르겠지만, 다음과 같이 설정을 해주면 해결할 수 있다. Create React App · Set up a modern web app by running one command. Create React App · Set up a modern web app by running one command. > Note: this feature is available with `react-scripts@0.2.3` and higher. create-re..

credentials 설정을 해주지 않으면, fetch 가 제대로 안 되는 경우가 많다. Access-Control-Allow-Credentials Access-Control-Allow-Credentials 응답헤더 Access-Control-Allow-Credentials 는 요청의 자격증명 모드(Request.credentials)가 "include" 일때, 브라우저들이 응답을 프로트엔드 자바스트립트 코드에 노출할지에 대해 알려줍니다. developer.mozilla.org 다음과 같이 credentials 를 해주어야 한다 예1 postLogin(body) { fetch('http://localhost:5001/users/login', { method: 'POST', body: JSON.string..

input tag 에 날짜 시간을 동시에 입력 받을 수 있게 하려면, type="datetime-local" 이런 식으로 지정해 주면 된다. 날짜와 시간을 입력할 수 있는 태그가 생긴다. #input tag #html #datetime-local http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Types.html HTML Input 요소의 타입들(types) HTML Input 요소의 타입들(types) 이 장에서는 요소의 입력 타입(type) 들을 설명한다. Input Type: text 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input: Example First name: Last name: jun.hansung.ac.kr

리액트에서는 input 의 값(value) 을 가져오고 싶어도, 직접적으로 오리지널 DOM 을 건드리면 안 된다. document.getElementById('myInput').value (x) 그래서 ref 를 이용해야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 import React from 'react'; // import { searchYouTube } from '../searchYouTube'; class S..

recast.ly 구조를 그려보았다. fetch 같은 비동기 함수는 componentDidMount() 메서드에 작성하는 것이 좋다. 만약 사용자가 페이지에 접속했을 때 fetch 작업이 10초 정도 걸린다고 하자. 그렇다면 사용자는 기다리지 않고 페이지를 떠날 것이다. 10초 정도 걸려도 일단 페이지를 렌더링하면 UX 적인 부분에서 이점이 생긴다. 리액트에서는 익명함수는 가급적 지양해야 한다. 이벤트 등록 해제시 어렵기 때문이다. (화살표 함수는 실행 컨텍스트를 만들지 않음) recast.ly 구현 스크린샷 search 에 fetch, 디바운싱 및 watch later 에 localStorage 기능도 적용해 보았다. 테스트를 계속 하다보니 api 할당량이 넘기도 했다. 하루가 지나니 다시 풀렸다 ㅎㅎ..