차근차근 배움터

위와 같이 입력하고 아래와 같이 올바르지 않은 값을 입력했을 때 모달창이 뜨게 끔 만들어보기 모달창 빼고 과제 완료 alert 로 대신했다 (일단 ... ) 추후에 다시 모달 창 만들어 보는 것으로 이번 과제는 배운 것들을 복습할 수 있었던 좋은 과제였다 특히 자손들 간에 직접적으로 데이터를 주고 받을 수 없다는 점을 다시 인식할 수 있었다 User 내부에 UserForm 컴포넌트와 UserList 컴포넌트를 넣어서 이용했다 User.js import UserForm from './UserForm'; import UserList from './UserList'; import Modal from './Modal'; import { useState } from 'react'; const User = () =..

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

리액트 개발자 도구를 알아보자 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 2468a8735 on 5/19/2023. chrome.google.com 파이어폭스에서도 가능하지만 크롬에서 사용할 것을 강력하게 추천한다 간단하게 설치 완료 설치하게 되면 Components와 Profiler라는 탭을 갖게 된다 위의 컴포넌트에서는 리액트 컴포넌트만 볼 수 있다 useState가 리액트 훅이고, 리액트 개..

브라우저에 내장된 디버깅 기능을 이용해서 코드를 분석할 수 있다

삭제가 잘못 이루어지는 경우를 살펴 보았고 다음에는 디버깅 하는 방법을 알려주겠다

여러가지 오류의 경우가 있을 수 있다 대표적인 것 중 하나가 return 에 하나의 요소만 반환해야 한다는 것 두 가지 이상을 반환하려고 하면 에러가 뜬다 또는 오타가 발생하면 정의되지 않은 함수라고 뜨기도 한다. 기본적으로 오류 메세지를 읽으면 실수들은 어렵지 않게 해결할 수 있다

프로젝트를 하면서 피할 수 없는 에러 이번에는 디버깅하는 방법을 알려주겠다 바로 물어보는 것이 아니라 처음에 스스로 해결하려고 하는 자세가 필요하다 에러를 해결하는 것이 개발의 한 부분이라고 할 수 있기 때문이다 특정 상황에서 여러분을 옴짝달싹 못하게 하는 리액트의 오류 메시지를 이해하는 방법을 탐색해 보고 일반적으로 리액트 앱을 디버그하고 분석하는 방법과 앱이 실행되는 동안 코드를 이해하는 방법을 배울 것이다 그리고 더 나은 리액트 경험을 위해 브라우저에 확장 설치할 수 있는 리액트 개발 도구를 살펴보겠다

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

자주 쓰이는 부분이다 !isValid ? styles.invalid : null 과 같다고 보면 될 듯 하다 !isValid && styles.invalid Button.js import React from 'react'; import styles from "./Button.module.css"; const Button = props => { return ( {props.children} ) } export default Button; Button.module.css .button { width: 100%; font: inherit; padding: 0.5rem 1.5rem; border: 1px solid #8b005d; color: white; background: #8b005d; box-shadow..

스테판 선생님은 css 와 js 는 따로 분리하는 것을 더 선호한다 아마 이전 시간에 배운 것처럼 css를 styled component를 이용해서 컴포넌트 안에 `` 넣는 것은 비선호한다는 것 같고 나 역시 기능의 분리가 더 깔끔할 것 같다 하지만 우리는 말했듯이 css 를 전역적으로 사용하지 않고 다른 컴포넌트들과 겹치지 않게 하기 위한 방법을 알아봤다 그리고 다른 방법 중에 하나는 CSS Module을 이용하는 것이다 . css모듈은 그 기능을 지원하도록 설정된 프로젝트에서만 사용가능한데 왜냐하면 브라우저에서 코드가 실행되기 전에 코드의 변환이 필요하기 때문다 다행스럽게도 우리가 사용하는 리액트 앱으로 생성한 리액트 프로젝트는 이미 css모듈을 지원하도록 설정되어 있다 다시 Button.js에 아래..