차근차근 배움터

리액트 개발자 도구를 알아보자 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에 아래..

style component를 사용할 때 미디어 쿼리를 사용하는 방법은? 간단하다 그저 `` 안에 @media와 같이 작성하고 클래스 명 없이 그냥 필요한 스타일을 적용하면 된다 Button.js import styled from 'styled-components'; const Button = styled.button` width: 100%; font: inherit; padding: 0.5rem 1.5rem; border: 1px solid #8b005d; color: white; background: #8b005d; box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); cursor: pointer; @media (min-width: 768px) { width: auto; } &:f..

두 가지 방법이 있는데 첫 번째는 FormControl 컴포넌트에서 className 을 동적으로 주는 방법이 있고 두 번째는 Formcontrol 컴포넌트에 invalid 값을 넘겨서 css에서 동적으로 바뀌게 하는 방법이 있다 & input { display: block; width: 100%; border: 1px solid ${props => props.invalid ? 'salmon' : '#ccc'}; background-color: ${props => props.invalid ? 'rgb(255, 209, 209)' : 'transparent'}; font: inherit; line-height: 1.5rem; padding: 0 0.25rem; }