안녕하세요

1. 타입을 지정하고 const AttachmentButton: React.FC = 2. 프롭스를 매개변수로 넣고 const AttachmentButton: React.FC = ({ children, onChange }) => { 3. 매개변수를 이용할 위치를 정하고 const AttachmentButton: React.FC = ({ children, onChange }) => { return ( {children} ); }; 4. 속성을 주면 된다 대화 추가하기 import React from "react"; import styled from "styled-components"; import RadiusButton from "../atoms/Button"; const Label = styled.labe..

보호되어 있는 글입니다.

선요약 styled-components에서 span, div, button 컴포넌트를 만들고, 이들을 조립하는 것과 동일한 방식으로 보인다. 사실상 css라이브러리를 잘 쓰는 것과 별반 차이가 없어보이지만 차별점을 꼽는다 하면 Atom, Molecule, Organism, Template, Page 이라는 명확한 기준으로 분류한다는 점 디자인 단계에서 컴포넌트의 재사용성과 확장성을 미리 고려한다는 점 이 아닐까? 아토믹 디자인 패턴(Atomic Design Pattern) 디자인 시스템을 구축하는 방법론 중 하나로, 웹 UI를 구성하는 모든 구성 요소들을 구체적인 기준에 따라 구분하고 조합하여 일관성 있는 디자인 시스템을 만들어 내는 방법론입니다. 이 패턴은 다섯 가지 구성 요소로 구성됩니다. Atoms..

카카오 돋보기(Kakao Magnifying Glass)란? - 프로젝트 소개 카카오 돋보기 프로젝트는 카카오톡 대화를 가져와서 분석하는 웹 애플리케이션입니다. 카카오톡 대화를 txt 파일로 가져와서 해당 파일을 분석하면, 여러 채팅방에 대한 대략적인 정보를 확인할 수 있습니다. 사용자는 분석된 각 채팅방을 클릭하여 손쉽게 상세 정보를 확인할 수 있습니다. KakaoTalk 대화 분석 도구로써 .txt 형식으로 저장된 KakaoTalk 대화를 분석하고, 분석한 대화를 시각화하여 정보를 제공합니다. 사용된 기술은? - 기술 스택 카카오 돋보기 프로젝트는 다음과 같은 기술 스택을 사용합니다. React TypeScript Styled-components Redux Toolkit Recharts React-T..