#3.0 Class Components and State 🍧 이번 시간에는 state에 대해 배워보겠다. 이제 state에 대해 배워볼 것인데, state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 그러나 우리가 지난시간 까지 했던 food 예제는 일일이 데이터를 손으로 입력했기 때문에 state를 배우기에 적절한 예제가 아니므로 지운다. import React from "react"; import PropTypes from "prop-types"; export default App; ( 이 상태에서 시작! ) 🍧 클래스 컴포넌트 사용하기 import React from "react"; import PropTypes from "prop-types"; class App extends Reac..

#2.4 Protection with PropTypes 🍪 이번 시간에는, PropTypes에 대해 알아볼 것이다. (Props의 타입을 체크하거나, 데이터가 반드시 필요한데 없다거나 하는 것들을 체크할 수 있는 것) 우리 foodILike 데이터에 rating이라는 항목을 추가할 것이다. rating은 String 타입이 아니라 number이다. (그냥 평점이라는 항목을 추가 한 것!) 🍪 proptypes 설치하기 prop types를 설치할 것이다. 설치 : npm install prop-types 🍪 proptypes가 하는일? *prop-types가 하는 일은 내가 전달받은 props가 내가 원하는 props인지 확인해주는 것이다. 우리는 실수를 할 수도 있고, 예를 들어 이 경우에 food c..

[백준] 2839. 설탕배달 시간 제한 메모리 제한 제출 정답 맞은 사람 정답 비율 1 초 128 MB 157729 50157 39561 32.945% 문제 상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그램 봉지와 5킬로그램 봉지가 있다. 상근이는 귀찮기 때문에, 최대한 적은 봉지를 들고 가려고 한다. 예를 들어, 18킬로그램 설탕을 배달해야 할 때, 3킬로그램 봉지 6개를 가져가도 되지만, 5킬로그램 3개와 3킬로그램 1개를 배달하면, 더 적은 개수의 봉지를 배달할 수 있다. 상근이가 설탕을 정확하게 N킬로그램 배달해야 할 때, 봉지 몇 개를 가져가면 되는지 그 수를 ..

#2.0 Creating your first React Component (컴포넌트에 대해 알아보기) 🍟 이번 시간에는 컴포넌트에 대해 알아보겠다. 🍟 컴포넌트(Component)란 무엇인가? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); ↑ index.js 기본적으로 이것을 component라고 부른다. react는 component와 함께 동작하며 모든 것은 component이다. component는 무엇일까? component는 보다시피 HTML을 반환하는 함수이다. import React from..

[백준] 2775. 부녀회장이 될테야 시간 제한 메모리 제한 제출 정답 맞은 사람 정답 비율 1 초 128 MB 34064 19275 16818 57.734% 문제 평소 반상회에 참석하는 것을 좋아하는 주희는 이번 기회에 부녀회장이 되고 싶어 각 층의 사람들을 불러 모아 반상회를 주최하려고 한다. 이 아파트에 거주를 하려면 조건이 있는데, “a층의 b호에 살려면 자신의 아래(a-1)층의 1호부터 b호까지 사람들의 수의 합만큼 사람들을 데려와 살아야 한다” 는 계약 조항을 꼭 지키고 들어와야 한다. 아파트에 비어있는 집은 없고 모든 거주민들이 이 계약 조건을 지키고 왔다고 가정했을 때, 주어지는 양의 정수 k와 n에 대해 k층에 n호에는 몇 명이 살고 있는지 출력하라. 단, 아파트에는 0층부터 있고 각층에..

#1.0 Creating your first React App 🍮 이번 시간에는 React를 시작하는 방법에 대해 알아보겠다. 🍒 create-react-app React는 매우 모던한 코드이기 때문에 최신 브라우저가 React를 이해하지 못하기 때문에 Babel, Webpack을 사용해서 못생긴 코드로 바꾸어주어야 한다. -> 그러나 create react app이라는 것을 이용하면 이 작업을 하지 않아도 된다. create-react-app은 기본적으로 하나의 명령을 실행해서 React Web App을 Set up할 수 있게 해준다. 🍒 create-react-app 설치하기 콘솔을 켜고 만들고 싶은 폴더를 지정한 후 만들고 싶은 app이름을 정해서 다음과 같이 작성 후 엔터를 친다. npx crea..