차근차근 배움터

npm install sass 만 하면 설치되는 줄 알았으나 아래와 같이 두 가지를 설치해야 한다. $ npm install node-sass $ npm install sass-loader node-sass는 "Sass 코드를 CSS 코드로 컴파일(변환)"해주는 역할을 한다 loader webpack loader로서 build 중 SASS 파일을 만나면 node-sass를 내부적으로 실행해준다 (babel-loader와 유사하다)

리액트 처음 공부 이후에 복습 겸 다시 만들어 봤다 확실히 두 번째 만드니까 훨씬 나아진 모습인데 코드를 보면 조금 난장판이라 역시 조만간 다시 한 번 만들어보거나 정리해 보려고 한다 영화 API로는 Tmdb API를 사용했고 각 카테고리 별로 나누어서 페이지를 구성했다. 현재 상영 영 화 On screen 인기 많은 영화 Popular 영화 순위 별 Top 개봉 예정인 영화 Upcoming 상세 페이지 화면 수정사항으로는 Home 화면에 전체 카테고리가 나오도록 수정할 것이고 반응형으로 [핸드폰] 만들기 글자 크기가 약간 애매한 부분이 있다 네이게이션 바 글자 크기도 살짝 수정해야 할 것 같다 React App yujinkimkr.github.io

App.js 에 있는 expenses 배열 변수에 값을 추가해야 한다. 그리고 우리가 이미 알다시피 변수만 바꾸는 것은 화면 상의 데이터를 변경하지 않기 때문에 useState 를 사용해야 한다. setState와 관련된 에러에 멈췄다 prev 이전 함수들과 섞는 과정에서 문제가 있는데 왜 이렇게 결과가 나왔는지 몰라서 헤매고 있다.. import { useState } from 'react'; import './App.css'; import Expenses from './components/Expenses/Expenses'; import NewExpense from './components/NewExpense/NewExpense'; const DUMMY_EXPENSES = [ { id: 'e1', ti..

JSX에서 동적인 구문을 실행하고 싶을 때 {} 중괄호 안에서 작성한다 map() 을 사용해서 를 개수만큼 출력할 수 있다 이미 아는 개념이라 가볍게 넘어감 아래 네 줄의 코드를 위의 한 줄로 간단하게 만들 수 있다 {props.items.map((expense) => )}

페이지에서 어떻게 배열을 출력할 수 있는지 다양한 조건에서 다양한 컨텐츠들을 보여줄 수 있는 방법을 살펴볼 것이다

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

두 가지 용어를 기억하자 presentational vs stateful component dumb vs smart component 리액트 어플리케이션에는 일부 상태를 관리하는 몇 개의 컴포넌트를 갖게 되는데 예를 들면 filter의 state를 관리하는 Expenses 컴포넌트 같은 것이나 input state를 관리하는 ExpensesForm 같은 컴포넌트의 것들이 있다 또 다른 컴포넌트로는 state를 관리하지 않는 컴포넌트들이 있는데 ExpenseItem 같은 것들이 그 예다 아무 상태를 갖지 않고 단지 데이터를 출력하기 위해서만 존재하는 컴포넌트이다 대부분의 리액트 프로그램에서 무언가를 출력하는 컴포넌트들이 있다 그래서 일반적으로는 상태를 관리하는 컴포넌트들이 더 적은 편이다 props를 분산..

약간 헷갈렸던 과제 자손 컴포넌트에서 부모 컴포넌트로 전달하는 과제였다 먼저 자손 컴포넌트였던 ExpensesFilter.js 에서 select 태그에 움직임이 감지될 때마다 함수가 실행되게끔 해야 한다 1. Handler 만들기 const dropdownChangeHandler = (event) => { props.onChangeYear(event.target.value); } 2021 2022 2023 2024 2. Expenses.js에 ExpenseFilter 컴포넌트 추가하기 return 3. ExpenseFilter.js 에서 Expenses.js 로 year 값 전달하기 그리고 그 값을 state로 관리한다 ExpensesFilter.js import './ExpensesFilter.css'..

지난 강의에서는 아주 중요한 개념인 데이터를 자식 컴포넌트에서 부모 컴포넌트로 이동하는 방법을 배웠다. props를 사용해서 부모 컴포넌트로부터 함수를 받고 자식 컴포넌트에서 그 함수를 불러왔다 이것은 다른 핵심 개념과 아주 깊은 관련이 있는데, 여러분은 인식하지 못했지만 이미 사용하고 있었습니다 "상태(State) 끌어올리기" 라는 개념이다. 이 데모 프로그램을 간단히 묘사한 컴포넌트 트리를 한 번 보자 Expenses와 NewExpense를 렌더링하는 App 컴포넌트가 있는 프로그램이다 여기서 NewExpense 컴포넌트는 몇몇 데이터를 생성하는 컴포넌트이다 우리의 예제 프로그램에서는 일부 사용자 입력을 여기서 가져오고 있다 컴포넌트에서 데이터를 생성하거나 가져오는 것은 꽤 흔한 일이다 하지만 그 컴..