Atomic Habits

import React from 'react' import { Checkbox, Divider } from 'antd'; const CheckboxGroup = Checkbox.Group; const plainOptions = ['Apple', 'Pear', 'Orange']; const defaultCheckedList = ['Apple', 'Orange']; export default function FormEx1() { const [checkedList, setCheckedList] = React.useState(defaultCheckedList); const [indeterminate, setIndeterminate] = React.useState(true); const [checkAll, set..

Name: Bracket Pair Colorizer Id: coenraads.bracket-pair-colorizer Description: A customizable extension for colorizing matching brackets Version: 1.0.61 Publisher: CoenraadS VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer Name: indent-rainbow Id: oderwat.indent-rainbow Description: Makes indentation easier to read Version: 8.2.2 Publisher..

○ 공식 문서 참조의 중요성 https://ant.design/docs/react/use-with-create-react-app https://ant.design/docs/react/getting-started - 공식 문서를 잘 참조하면 Use in create-react-app 사용할 경우 아래 처럼 특정 코드를 추가해야 하는 경우가 잦으니 잘 살펴보고 초기 세팅을 해야 막힘이 없다. Add antd/dist/antd.css at the top of src/App.css. @import '~antd/dist/antd.css'; ○ Ant Design https://ant.design/docs/spec/introduce - UI library 이지만, components만 제공하는 것을 넘어 desig..

https://onsen.io/ https://onsen.io/v2/guide/react/#react ○ React 기반 설치 $ npm install onsenui react-onsenui --save React-create-app로 만들면, 아래 코드는 불필요 Alternatively, you can also use ES6 imports to specify the modules you want to use in react-onsenui package. import { Page, Toolbar, Button } from 'react-onsenui'; // Only import the necessary components // import * as Ons from 'react-onsenui'; // Im..

○ sass 란? - sass는 library가 아닌 language 이다 ! - sass에서 뭔가 작업을 하면 css로 만들어준다. 결과물이 css https://sass-lang.com/ ○ https://sass-lang.com/guide - Modules : .scss 를 또 다른 .scss 안에 import 시켜서, import된 파일 안 $스타일(변수형태)를 가져다가 쓸 수 있다. nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav 안에 여러 태그를 한번에 적을 수 ..

white-space 구문 selector {white-space: 속성값;} HTML 줄바꿈 안 될 때 CSS에서 지정 @Model.CommentText​ [속성값] normal 연속된 라인공백 보전 X, 연속된 단어간 공백 보전 X, 자동 줄바꿈 O (기본값) 즉, 연속된 모든 공백을 하나로 통합 후, 자동 줄바꿈 출력. nowrap 연속된 라인공백 보전 X, 연속된 단어간 공백 보전 X, 자동 줄바꿈 X 즉, 연속된 모든 공백을 하나로 통합 후, 가로 한 줄로 출력. 튀어 나오는 문자는 overflow 속성을 이용해 처리 가능 pre 연속된 라인공백 보전 O, 연속된 단어간 공백 보전 O, 자동 줄바꿈 X 입력된 공백과 줄바꿈 상태 보전. (※ 태그와 유사) 튀어 나오는 문자는 overflow 속성..

새로운 React 앱 만들기 - https://ko.reactjs.org/docs/create-a-new-react-app.html 1) vscode 설치 2) Node.js 설치 ( 로컬(컴퓨터)에서 리액트 앱이 돌아갈 수 있도록 해주는 환경 ) - https://nodejs.org/ko/ - 좌측 LTS 안정화된 버전 설치 ※ Node 설치 시 npm(node package manager)도 자동 설치 (node 환경에 있는 pakage들을 관리) npm 설치 시 npx(node package runner)도 자동 설치 (node 환경에 있는 pakage들을 실행) 3) npx create-react-app my-app - cmd/터미널 창에서 프로젝트가 담길 폴더 생성 후 해당 폴더 안에서 npx ..

○ styled components vs emotion - https://github.com/jsjoeio/styled-components-vs-emotion ○ props 전달 css /** @jsx jsx */ import { jsx, css } from '@emotion/react' const pinkInput = css` background-color: pink; `; const RedPasswordInput = props => ( ) render( ); MediaQueries - map /** @jsxImportSource @emotion/react */ import {css} from '@emotion/react' const breakpoints = [576, 768, 992, 1200] co..

https://emotion.sh/docs/introduction - 설치 = npm i @emotion/css : 프레임워크와 무관하게 사용하기 위한 설치 = npm i @emotion/react : 리액트와 함께 사욯알 때 설치