Coding Story

노마드코더 - 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..

이벤트 위임이란? 여러개의 하위 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..

행맨 게임 with vanilla javascript 실행 화면 플레이 화면 결과 화면 기능 랜덤으로 선택된 단어의 길이에 따라 빈칸 생성 누른 알파벳 키보드는 색상이 바뀌고, 한번 더 클릭할시 팝업창이 뜨고 목숨에 영향을 받지 않음 누른 알파벳이 맞을 경우 => 빈칸이 알파벳으로 바뀜 누른 알파벳이 틀릴 경우 => 행맨 그림 선이 생기고 목숨 하나 감소 결과에 따라 결과창 띄우기 코드 const alphabet = [.. ]; const words = [.. ]; const buttons = document.querySelector(".keyboardBtn"); const chosenWord = words[Math.floor(Math.random() * words.length)]; // 랜덤으로 선택된..

const items = document.querySelector(".items"); const input = document.querySelector(".footer__input"); const addBtn = document.querySelector(".footer__button"); function onAdd() { // 1. 사용자가 입력한 텍스트를 받아옴 const text = input.value; if (text === "") { input.focus(); return; } // 2. 새로운 아이템을 만듬 (텍스트 + 삭제 버튼) const item = createItem(text); // 3. items 컨테이너 안에 새로 만든 아이템을 추가한다. items.appendChild(item)..

element.scrollIntoView(); element가 있는 위치로 스크롤 된다. element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); behavior: 기본 값은 auto. smooth하면 부드럽게 스크롤링 됨 block: 수직으로 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 start inline: 수평에서 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 nearest 예제