차근차근 배움터

해당 강의에서는 장바구니 모달 창을 만들 것이다 React Portal을 이용해서 먼저 만들어보기 ! Cart.js import classes from './Cart.module.css'; const Cart = props => { const cartItems = ( {[ { id: 'c1', name: 'Sushi', amount: 2, price: 12.99 } ].map((item) => {item.name})} ) return {cartItems} Total Amount 30.33 } export default Cart;

양식 입력 IDs 수정하기 현재 MealItemForm의 적용은, 모든 MealItem 이 똑같은 id 받으며, 이전 강의에서 보여준 코드에서 다음을 수행합니다: 이 방식도 작동하지만 두 가지 주요 단점이 있습니다. 즉시 이해되지 않습니다. (따라서 불행히도 녹음 중에 미끄러졌습니다): 1. 어떤 레이블을 클릭하던 실제 MeatItem에 속한 것이 아니더라도 항상 동일한 첫 번째 입력 요소가 선택됩니다. 2. 스크린리더는 레이블 + 입력을 올바르게 연결할 수 없습니다(모든 레이블이 동일한 입력을 가리키기 때문에). 비디오에 표시된 모든 것은 표시된 대로 작동하며 이것을 수정하는 것은 선택 사항입니다, 하지만 이 문제를 수정하는 것은 쉽기 때문에 아래 조정을 고려할 수 있습니다. 한 가지 가능한 해결 방법..

요소에 전개 연산자를 사용할 수 있다 아래와 같이 완성 Card의 css 파일을 조금 변경해야 했다 .card { padding: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); border-radius: 14px; background-color: white; max-width: 45rem; margin: 3% auto; }

기억나는가? Card 와 같이 공통 css를 주기위해서 Wrapper 처럼 사용할 수 있었다. 먼저 Card.js 를 보면 import classes from './Card.module.css'; const Card = (props) => { return {props.children} } export default Card; 위와 같이 props.children 을 괄호 안에 작성해줌으로써 Card를 Wrapper로 사용하는 컴포넌트들의 내용이 들어갈 수 있게 한다. const AvailableMeals = () => { const mealsList = DUMMY_MEALS.map(meal => {meal.name}); return {mealsList} }; 아래처럼 완성이 되었는데 보다시피 하얀 부분의..

아래 화면까지 완성했다 다음은 해당 컴포넌트를 하얀 테두리로 감싸는 작업을 할 것이다

여기까지 완성 Header.js import { Fragment } from 'react'; import mealsImg from '../../assets/meals.jpg'; import classes from './Header.module.css'; import HeaderCartButton from './HeaderCartButton'; const Header = props => { return React Meals } export default Header; HeaderCartButton.js import CartIcon from './CartIcon'; import classes from './HeaderCartButton.module.css'; const HeaderCartButton = pr..

내장 css 모듈 지원을 사용할 예정이기 때문에 Header.module.css 라는 형식으로 css 이름을 작성한다. create-react-app으로 만든 모던 리액트 프로젝트에서는 설정이 제공되지 않습니다 따라서 이 css 파일이 필요합니다 (?) Header.module.css 파일은 그대로 복사 완료 .header { position: fixed; top: 0; left: 0; width: 100%; height: 5rem; background-color: #8a2b06; color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 10%; box-shadow: 0 2px 8px rgba(0..

선생님이 올려 주신 프로젝트 다운로드 받고 npm install로 모든 의존성을 다운로드하고 npm start로 기본 화면 확인하기 그리고 기능 별로 src 폴더 하위에 components 폴더 내에 폴더들을 생성한다

섹션 11: 연습 프로젝트: 음식 주문 앱을 만들어보자(Building a Food Order App) 지난 시간에 배운 많은 개념들을 해당 프로젝트와 함께 적용하며 복습하는 시간을 가질 것이다 음식 주문하는 앱을 만들어 본다

여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/10-side-effects-reducers-context-api 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.