I'm a Fig, Not a Pig

Julia and Kate are still studying dogs, and this time they are studying if dogs are eating too much or too little. Eating too much means the dog's current food portion is larger than the recommended portion, and eating too little is the opposite. Eating an okay amount means the dog's current food portion is within a range 10% above and 10% below the recommended portion (see hint). - Hints: Use m..

컴포넌트 전환 애니메이션 주는 법 (transition) - 전환애니이션 만드는 법 1. 애니메이션 동작 전 className 만들기 2. 애니메이션 동작 후 className 만들기 3. className에 transition 속성 추가 4. 원할 때 2번 className 부착 - useEffect: 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행 할 수 있도록 하는 Hook임 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 업데이트 됐을 때, 특정 작업을 처리할 수 있음. - 기본형태 : useEffect(function, deps) - function: 수행하고자 하는 작업 - deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 1. 컴포넌트가 언마운트 됐을 때( 처음 ..

새로운 프로젝트 생성 & Bootstrap 사용하기 - Bootstrap 라이브러리: 레이아웃을 복사붙여넣기 식으로 편하게 개발가능함 (라이브러리 홈 들어가서 설치하면 됨) 설치 후 react-bootstrap 사이트에서 UI 복사 붙여넣기 가능 ex. button 검색 후 코드 복붙하기 - Navbar import {Navbar, Container, Nav} from 'react-bootstrap'; // 상단에 import 적고 import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; function App() { return ( // 코드 복붙하기 Navbar Home Features Pricing ); } export default A..

기초 2강 1. 태그에 class를 주고 싶으면? class 대신 className 작성하기 2. 리액트가 HTML 코딩보다 편리한 이유 1) 데이터 바인딩이 쉬움(데이터 바인딩이 쉬운 React, Vue, Angular) { posts } // {변수명} - 렌더링 시켜주면 됨 - scr, id, href 등의 속성에서도 {변수명, 함수} 등 넣어주면 됨 3. JSX 에서 style 속성 집어넣을 때 style = {object 자료형으로 만든 스타일} 개발 Blog // camelCase로 작성하기 기초 3강 - 데이터 보관법: 1. 변수에 넣거나 2. state에 넣거나 - ES6 destructuring - state: 1) 변수 대신 쓰는 데이터 저장공간 2) useState()를 이용해 만들어..