본문 바로가기
SMALL

분류 전체보기527

React) 일정 관리 웹 애플리케이션 만들기 - 2 (todoList 렌더링, 항목 추가 기능 구현하기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. * 프로젝트 준비 및 UI 구성은 아래 포스트 참고 https://chanychu.tistory.com/450 React) 일정 관리 웹 애플리케이션 만들기 - 1 (프로젝트 준비 및 UI 구성) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 프로젝트 준비하기 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn cr chanychu.tistory.com 기능 구현하기 App에서 todos 상태 사용하기 추후 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리합니다. 따라서 App에서 useStat.. 2022. 11. 19.
React) 일정 관리 웹 애플리케이션 만들기 - 1 (프로젝트 준비 및 UI 구성) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 프로젝트 준비하기 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app create-react-app을 이용해 프로젝트를 생성해주었습니다. $ cd todo-app $ yarn add sass classnames react-icons 해당 디럭토리로 이동하여 필요한 라이브러리를 설치해줍니다. ※ react-icons 리액트에서 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리 (SVG 형태로 이루어진 아이콘을 컴포넌트처럼 쉽게 사용) Prettier 설정 코드 스타일을 깔끔하게 정리하기 위해 Prettier를 설정해줍니다. .prettie.. 2022. 11. 19.
React) 컴포넌트 스타일링④ - styled-components 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 styled-components - 자바스크립트 파일 안에 스타일을 선언하는 방식 (CSS-in-JS) 사용을 위해 설치해보겠습니다. $ yarn add styled-components StyledComponent.js import styled, { css } from 'styled-components' const Box = styled.div` /* props로 넣어준 값을 직접 전달 가능 */ background: ${props => props.color || 'blue'}; padding: 1rem; display: flex; `; const Button = s.. 2022. 11. 19.
React) 컴포넌트 스타일링③ - CSS Module (classnames) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 CSS Module - CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 → 자동으로 [파일 이름]_[클래스 이름]_[해시값] 형태로 만들어줌 - 컴포넌트 스타일 클래스 이름 중첩되는 현상 방지 - v1의 create-react-app에선 웹 팩에서 css-loader 설정을 별도 해줘야 하지만, v2 버전 이상부턴 설정할 필요 없이 .module.css 확장자로 파일 저장만 한다면 CSS Module 적용 CSSModule.module.css /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */ .wrapper { bac.. 2022. 11. 19.
React) 컴포넌트 스타일링② - Sass 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 Sass 사용하기 - CSS 정처리기로 복잡한 작업을 쉽게 할 수 있도록 도와줌 - 스타일 코드의 재활용성을 높여줌 - 가독성을 높여 유지 보수가 쉬움 확장자 종류 .sass .scss ① .sass 문법 $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $parimary-color 중괄호와 세미콜론을 사용하지 않는 것을 확인할 수 있습니다. ② .scss 문법 $font-stack: Helvetica, sans-serif; $primary-color: #.. 2022. 11. 18.
React) 컴포넌트 스타일링① - 일반 CSS 방식 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 일반 CSS (가장 흔한 방식) - CSS 클래스를 중복되지 않게 만드는 것이 중요 중복되지 않게 하기 위해 클래스 명을 특별한 규칙을 사용하여 짓거나, CSS Selector를 이용합니다. 새로운 프로젝트를 생성하여 App.js와 App.css를 살펴보겠습니다. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; App.css .App { .. 2022. 11. 18.
LIST

티스토리툴바