프로젝트 준비하기 요구사항 분석하기 오늘의 날짜를 요일, 월, 일, 연도 순으로 표시한다. → Header To do를 작성하는 입력 폼이 있고, 추가 버튼을 클릭하면 할 일 아이템 생성한다. → TodoEditor 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일 추출 가능하다. → TodoList 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 토글 하는 체크박스, 아이템 이름, 등록 날짜, 삭제 버튼으로 구성한다. → TodoItem *토글: 디지털 신호가 1 또는 0을 되풀이하는 상태 (이 일을 마쳤는지 아닌지) 리액트 앱 만들기 폴더 만들기 → CORNERSTUDY/week910 npx create-react-app . 불필요한 파일과 코드 삭제하기..

23-24/React.js 3 2023. 12. 1. 10:00

리액트에서는 다양한 방식으로 컴포넌트를 스타일링할 수 있습니다. 이번 장에서는 자주 사용하는 4가지 방식을 알아보도록 하겠습니다. 먼저 이번 예시에서는 create-react-app을 이용해 새로운 프로젝트를 만듭니다. styling-react 프로젝트를 만들고 열어주세요. $ yarn create react-app styling-react $ cd styling-react $ yarn start 9.1 가장 흔한 방식, 일반 CSS 기존의 CSS 스타일링에 불편을 겪지 않고, 새로운 기술을 배우고 싶지 않다면 일반 CSS를 계속 사용해도 괜찮습니다. 실제로 소규모 프로젝트에서는 새로운 스타일링 시스템을 적용하는 것이 불필요할 수도 있습니다. 방금 만든 프로젝트에는 App.js 파일과 App.css 파일..

22-23/22-23 리액트 스타터 1 2022. 12. 1. 10:00

일반 CSS : 컴포넌트 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 작성 CSS Module : 스타일 작성 시, CSS 클래스가 다른 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식. 9.1 가장 흔한 방식, 일반 CSS CSS 작성 시, 가장 중요한 점 : CSS 클래스를 중복되지 않게 만드는 것 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태 (예: App-header) BEM 네이밍 : 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 (예: .card_title-primar..

21-22/21-22 리액트 마스터 2021. 11. 15. 13:00