Coding Story

사전 준비 import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { const { isLoading } = this.state; return {isLoading ? "Loading..." : "Ready"} } } export default App; mount(생겨나는 것) 되자마자 isLoading은 기본적으로 true 값을 갖는다. 삼항연산자를 사용해 isLoading이라면 "Loading" 텍스트를, 그렇지 않을 경우에는 "Ready"를 보여준다. 여기서 처음에 render()를 할 때 호출되는 life cycle 메서드는 componentDidMount()이다. impor..

노마드코더 - ReactJS로 영화 웹서비스 만들기 State는 보통 동적 데이터와 함께 작업할 때 만들어진다. import React from "react"; import PropTypes from "prop-types"; class App extends React.Component { state = { count: 0, }; add = () => { this.setState((current) => ({ count: current.count + 1 })); }; minus = () => { this.setState((current) => ({ count: current.count - 1, })); }; render() { return ( The number is: {this.state.count} Ad..

노마드코더 - ReactJS로 영화 웹서비스 만들기 prop-types: 내가 전달받은 props가 내가 원하는 타입의 props인지 확인해줌 터미널에 npm i prop-types 를 쳐 설치한다. 전달받을 prop들의 데이터 타입을 Food.propTypes안에 지정해 놓으면 타입이 다른 경우에 에러가 발생한다.

노마드코더 - ReactJS로 영화 웹서비스 만들기 foodILike라는 배열에 오브젝트들을 넣고, map 함수를 이용해 각각 원소에 접근한다. 컴포넌트를 동적으로 생성해 오브젝트의 name과 image를 Food함수의 인자로 받아 출력한다. function renderFood(dish) { return ; } function App() { return {foodILike.map(renderFood)}; } 이렇게 함수를 만들어 map함수에 넣을 수도 있다. 이 때 콘솔창에는 Each child in a list should have a unique "key" prop. 이러한 에러가 뜬다. 이 말의 뜻은 모든 리액트의 엘리먼트들은 유일해야만 한다는 것이다. 이를 해결하기 위해선 각각의 오브젝트에 구별할..

노마드코더 - ReactJS로 영화 웹서비스 만들기 여기서 는 HTML이 아닌 컴포넌트다. 컴포넌트란 HTML을 반환하는 함수다. 리액트는 컴포넌트와 함께 동작하고 모든것은 컴포넌트이다. 리액트는 컴포넌트를 가져와서 브라우저가 이해할 수 있는 일반 HTML으로 만든다. 자바스크립트안의 HTML을 리액트에선 JSX라고 부른다.(리액트에 특화된 유일한 개념) src폴더 안에 Potato.js 파일을 작성해보자. 리액트 앱은 한번의 하나의 컴포넌트만 렌더링 할 수 있다. 따라서 모든 것은 App안에 들어가야만 한다. App안에 많은 컴포넌트를 넣을 수 있고, 이러한 컴포넌트 안에 더 많은 컴포넌트를 import할 수 있다. App안에 Potato컴포넌트를 넣는다면 정상적으로 Hello와 I love Potat..

노마드코더 - ReactJS로 영화 웹서비스 만들기 리액트 홈페이지 https://reactjs.org/ 필요사항 Node.js / npm Node.js 설치 -> npm 자동 설치됨 설치 확인: node -v / npm -v npx node.js와 npm이 있는것을 확인 한 후 npx 설치하기 npm install npx -g React 앱 생성하기 create-react-app 하나의 명령으로 React Web app을 셋업할 수 있게 해준다. npx create-react-app movie_app_2021 Document안 movie_app_2021의 폴더 안에 생성한다. 완료 된 후, code movie_app_2021 -> 바로 vscode 열기 script부분의 test와 eject를 지워준다..

[javascript] 캔버스(Canvas)로 그림판 만들기(1) 캔버스에 선그리기 [javascript] 캔버스(Canvas)로 그림판 만들기(2) 선 색상, 굵기 바꾸기 [javascript] 캔버스(Canvas)로 그림판 만들기(3) 색상 채우기-fillRect() if(saveBtn){ saveBtn.addEventListener("click", handleSaveClick); } 1. canvas의 데이터를 image 처럼 얻기 const image = canvas.toDataURL("image/jpeg"); const image = canvas.toDataURL(); // 디폴트는 png파일이다. HTML.CanvasElement.toDataURL() https://developer.mozil..

[javascript] 캔버스(Canvas)로 그림판 만들기(1) 캔버스에 선그리기 [javascript] 캔버스(Canvas)로 그림판 만들기(2) 선 색상, 굵기 바꾸기 CanvasRenderingContext2D.fillRect() CanvasRenderingContext2D.fillRect() CanvasRenderingContext2D.fillRect() - Web APIs | MDN The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current fillStyle. developer.mozilla.org 너비 와 높이에 따라 크기가 결..

[javascript] 캔버스(Canvas)로 그림판 만들기(1) 캔버스에 선그리기 선 색상 바꾸기 html파일에서 각각의 색상 팔레트에 jsColor라는 클래스를 추가한다. js파일에 클래스를 color라는 변수로 가져온다. const colors = document.getElementsByClassName("jsColor"); array.from () array.from 메서드는 object로부터 새로운 array를 만든다. console.log(Array.from(colors)); jsColor라는 이름의 클래스를 가진 9개의 색상 팔레트들이 array의 원소들로 출력되어 나오는 것을 볼 수 있다. forEach() forEach() 메서드는 주어진 함수를 배열 원소 각각에 대해 실행한다. Arra..

quotes.js const quotes = [ { quote: "quote1", author : "author1", }, { quote:"quote2", author : "author2", }, { quote:"quote3", author : "author3", } ]; const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)]; quote.innerText = todaysQuote.quote; author.in..