살펴보기DOM은 웹페이지의 구조와 내용을 나타내는 트리 구조입니다. 개발자는 DOM을 통해 웹페이지의 요소를 추가, 삭제, 변경할 수 있습니다. 이러한 DOM의 변화는 이벤트를 통해 감지할 수 있습니다.MutationObserver는 DOM의 변화를 주기적으로 감시하는 API입니다. 이를 통해 개발자는 DOM의 변경을 실시간으로 감지하고, 그에 따라 동적으로 페이지를 업데이트할 수 있습니다. 특징1. MutationObserver는 다음과 같은 특징을 가지고 있습니다.DOM의 모든 변경을 감지할 수 있습니다.특정 요소의 변경만 감지할 수 있습니다.변경의 종류를 구분하여 감지할 수 있습니다.2. MutationObserver를 사용하면 다음과 같은 작업을 수행할 수 있습니다.입력 양식의 데이터 변경을 감지..

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

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

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

안녕하세요! 👏지난 글에서는 기본 세팅을 완료했습니다.이번에는 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 잠시..

안녕하세요! 👏이번에 다방을 클론 코딩 강의 글을 남기려고 합니다.클론 코딩이라고 하지만 이 글에서는 StoryBook, React와 TypeScript를 이용하여 화면만 구현할 예정입니다. 사실.. 화면만 만드는 것이 클론 코딩인지는 잘 모르겠습니다......또한, 중복된 디자인과 레이아웃이 많아 모든 페이지를 만드는 것이 아닌 아래 항목 페이지들만 제작합니다.메인방 찾기관심 목록회원가입 팝업※ 참고로 이 글은 다른 강의나 영상을 참고한 것이 아닌 제 생각대로 작성한 것이기 때문에 코드가 혼잡하거나 클래스명이 길거나 할 수 있습니다.... 완성 코드: https://github.com/STHyeon/dabang_clone STHyeon/dabang_cloneContribute to STHyeon/da..