jineecode

개요: 매장 map을 구현하다가 각 지역 시/군/구의 option 값을 하드코딩하는 게 비효율적이라서 JS를 찾아보았다. imivory.tistory.com/9 [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 selectbox의 선택에 따라 두번째 selectbox의 값이 변해야하는 경우가 있습니다. 지역 선택을 해야할 때나 품목 선택을 해야할 때가 그런 경우죠. imivory.tistory.com 위 코드를 참고했다. HTML 시/도 를 선택할 수 있는 select 태그 하나, 군/구 를 선택할 수 있는 select 태그 하나를 만든다. 시/도를 담은 select 태그에는 on..

개요: li를 하나하나 DOM을 만들고 클릭 이벤트를 걸고 한땀한땀 active를 거는 막노동을 하고 있을 때 뭔가 이상하고 비효율적임을 느낀 나는 언젠가 들어봤던 이벤트 위임을 떠올리고 적용해보기로 함. 간단히 말해, 부모를 클릭하면 자식이 수행하는 원리이다. (이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 출처: ko.javascript.info/event-delegation) HTML GODIVA 역사 Our Belegian Heritage GODIVA 기원 The legend of Lady Godiva GODIVA 초콜릿 GODIVA chocolate GODIVA 쉐프 Meet Our Che..

어떤 개념인지는 대충 아는데 논리적으로 설명하기 어려운 것을 모아 적는다. 1. 자바스크립트에서의 비동기 코드(언제 실행될 지 모름)는 코드 상의 순서대로 실행되지 않는 코드를 말함. ex. 콜백함수, setTimeout private.tistory.com/24 동기와 비동기의 개념과 차이 데이터를 받는 방식인 동기와 비동기. 이 둘의 개념에 대해 설명하는 게시물은 매우 많은데 프로그래밍적으로 생각했을 때 이해가 가지 않아서 쉽게 이해를 할 수 있는 동기와 비동기의 예가 private.tistory.com

import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { return {this.state.isLoading ? "Loading" : "We are Ready"}; } } export default App; /// {this.state.isLoading ? "Loading" : "We are Ready"} 이것은 ES6 문법으로 바꿔 써볼 수 있다. class App extends React.Component { ... render() { const { isLoading } = this.state ; return {isLoading ? "Loading" : "We are Read..

class App extends React.Component{ } React class component에서 가져오고 있음. function이 아니기 때문에 return을 가지고 있지 않음. render method를 가지고 있음. extends > react가 가진 컴포넌트를 app에 상속해준다고 보면 된다. class App extends React.Component{ render() { return Im a class component; } } render : App의 렌더가 어떻게 표시해줄 것인지 결정해주는 메서드. 바로 만들어 주는 것이 아닌, '이렇게 만들겠다' 라고 보면 된다. function component와 class component의 차이 :function component는 fun..

내가 전달받은 props가 내가 원하는 prop인지 확인하는 도구. 터미널에 npm i prop-types 를 해준다. 잘 설치됐는지 확인하는 방법은 package.json 파일에서 prop-types 가 있는지 확인한다. 본격적으로 prop를 검사하는 코딩을 넣어 확인해보자. import React from "react"; import PropTypes from "prop-types"; const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { id: 2, name: "Samgyeopsal", image: "https:/..

1. 컴포넌트에 prop name과 value를 주기. import React from 'react'; function Food() { return I love potato } function App() { return ( hello! ); } export default App; 은 HTML 구조와 몹시 유사하게 생겼다. 꼭 name이 아니어도 괜찮다. import React from 'react'; function Food() { return I love potato } function App() { return ( hello! ); } export default App; fav라는 이름의 프로퍼티를 김치라는 value로 준 것. 당연히 이런 식으로도 된다. function App() { return ..

1. 컴포넌트 ReactDOM.render( , //△컴포넌트를 사용하고자 할 때 컴포넌트의 형태 document.getElementById('here') ); 컴포넌트 을 App처럼 사용할 수 없다. 이러한 형태는 리액트로 동작하지 않는다. 2. component는 HTML을 반환하는 함수이다. function App() { return ( hello! ); } App() 함수는, HTML을 반환return한다. 3. js와 html 사이의 이러한 조합을 우리는 jsx 라고 부른다. react에서 나온 개념이다. 4. 컴포넌트를 작성할 때마다, import React from "react"; 를 써준다. 대소문자를 꼭 구분하자. 이것을 하지 않으면 react는 jsx가 있는 컴포넌트를 사용하는 것을 이..