Coding Story

노마드코더 - 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를 지워준다..

Typing game with Vanilla Javascript 실행화면 기능 랜덤한 단어 제시 선택한 레벨 로컬 스토리지에 저장, 새로고침해도 유지 게임 시작버튼 누르면 게임 시작 => 시간 1초씩 줄어듬 타이핑한 값이 입력 값과 같을 경우 => 점수 1증가, 레벨에 따른 시간 증가, 새로운 단어 제시, 입력창 비움 최고 기록 갱신할 경우 로컬스토리지에 저장 const wordSpan = document.querySelector(".word"); const typing = document.getElementById("typing"); const scoreSpan = document.querySelector(".scoreSpan"); const timeSpan = document.querySelector..

input 태그에서 비활성화 form 태그에서 비활성화

https://chloeting.com/program/2020/two-weeks-shred-challenge.html Chloe Ting - 2 Weeks Shred Challenge - Free Workout Program + - Can I really get abs in two weeks? It depends on a number of factors. The leaner you start out this challenge the higher the chances you’ll be able to see strong definition in the ab area. Most people won’t get the shredded defined abs look in 2 we chloeting.com 우연히 유..

이벤트 위임이란? 여러개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다. 1 2 3 4 5 6 안 좋은 예 부모 안에 있는 자식들에게 공통적으로 무언가 처리해야 할 때 이렇게 일일히 이벤트 리스너를 자식 노드에 추가하는 것은 좋지 않다. 이벤트 위임을 사용한 예 ul에 이벤트 리스너를 한번만 등록한다. 이벤트에는 currentTarget과 target이라는 정보가 있기 때문에 원하는 target에만 집중적으로 처리를 해줄 수 있다. 이렇게 부모에 등록하는 Event Delegation 이벤트 위임을 쓰는 것이 좋은 방법이다.

참고 - https://github.com/bradtraversy/vanillawebprojects 사용한 API 사이트 https://www.themealdb.com/ TheMealDB.com www.themealdb.com API 호출 개념 참고 https://www.daleseo.com/js-window-fetch/ [자바스크립트] fetch() 함수로 API 호출하기 Engineering Blog by Dale Seo www.daleseo.com 결과 화면 코드 API 사이트에서 Lookup full meal details by id www.themealdb.com/api/json/v1/1/lookup.php?i=52772 Lookup a single random meal www.themealdb..