안녕하세요! 👏 지난 글에 이어서 Atoms(재료)를 만들어보겠습니다. 목차 📋 기본 세팅 Atoms 생성 - 1 Atoms 생성 - 2 Molecules 생성 Organisms 생성 안녕하세요. 이제 거의 마지막 단계네요. Organisms는 Atoms, Molecules를 조합해서 만드는 형태입니다. 먼저, 카드 그룹을 만들겠습니다. 카드 모음(CardGrid) Organisms/CardGrid 폴더를 만들고 index.tsx, style.ts, index.stories.tsx를 만듭니다. // style.ts import styled from 'styled-components'; interface Props { boxWidth?: string; // box 크기 } export const GridI..

안녕하세요! 👏 지난 글에 이어서 Atoms(재료)를 만들어보겠습니다. 목차 📋 기본 세팅 Atoms 생성 - 1 Atoms 생성 - 2 Molecules 생성 Molecules는 Atoms를 조합해서 만드는 형태입니다. 먼저 Atoms를 사용할 수 있게 components 폴더 아래 index.ts를 만들어주세요. src └───components │ └─ atoms │ └─ molecules │ └─ organisms │ └─ index.ts ... // index.ts export { Btn, LinkBtn } from './atoms/Btn'; export { EventDate } from './atoms/EventDate'; export { Icon } from './atoms/Icon'; ex..

안녕하세요! 👏 지난 글에 이어서 Atoms(재료)를 만들어보겠습니다. 목차 📋 기본 세팅 Atoms 생성 - 1 Atoms 생성 - 2 아이콘(Icon) 아이콘은 FontAwesome을 사용할 겁니다. 설치 - 공식문서 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome 사용법 이런 형식을 이용합니다. 파일 구조 ㄴatoms │ └───Icon │ │ index.tsx │ index.stories.tsx └── styles.ts 스타일을 먼저 정의해줍니다. // style.ts import..

안녕하세요! 👏 지난 글에서는 기본 세팅을 완료했습니다. 이번에는 Atom 요소들을 만들어 보겠습니다. 최소한의 기본 지식이 있어야 이해하기 편하실 것 같습니다! 목차 📋 기본 세팅 Atoms 생성 src 폴더 내부를 아래와 같이 세팅해주세요 ㄴsrc │ └───assets │ └───components │ │ │ └───atoms │ │ │ └───molecules │ │ │ └───organisms │ │ │ └───index.ts │ └───pages │ └───templates │ └───untils │ │ App.tsx │ index.tsx │ react-app-env.d.ts │ reportWebVitals.ts └── setupTests.ts 잠시 폴더 설명을 하고 가자면 assets 폴더:..

문법 문자보간 선택자나 속성은 일반 변수로 처리가 불가능합니다. 이를 처리하려면, #{var_name}을 사용하면 코드의 어디든지 변수 값을 넣을 수 있습니다. // SCSS $font-family: "Roboto"; @import url("/fonts/#{$font-family}"); .header { font-family: #{$font-family}; } === Compile === // CSS @import url("/fonts/Roboto"); .header { font-family: Roboto; } 위 코드는 .header 클래스에 Roboto 폰트를 적용하는 코드입니다. font-family 속성은 일반 변수로 처리할 수 없기 때문에, #{var_name}을 사용하여 변수 값을 넣어줍니다...