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

🌐 웹 접근성이란?웹사이트에서 제공하는 정보를 모든 사람(장애인, 고령자)이 동등하게 접할 수 있도록 보장해주는 것입니다.웹 접근성은 꼭 필요하지만 대기업 페이지를 제외하고 쇼핑몰, 작은 사이트 등을 볼 경우 웬만하면 웹 접근성을 지키지 않은 사이트들이 많습니다.이 페이지에서는 웹 접근성을 지키는 방법에 대해 주로 설명하겠습니다.웹 접근성 설명에 관한 자세한 내용은 안나옵니다...📌 웹 접근성 지키는 방법제가 생각하기에 주로 사용된다고 생각되는 것들을 소개하겠습니다.input, selectinput, select를 사용할 때, label이랑 한 세트처럼 써야 하지만, 보통은 그냥 input만 쓰는 경우가 있습니다.스크린 리더기로 읽을 경우, 어떤 역할의 input인지 알 수 없습니다.이를 해결하려면,..

🤔 Addon-controls 란?공식문서를 해석해보면, 따로 코드화 작성 없이 동적으로 상호 작용할 수 있는 그래픽 UI를 제공한다고 정의되어 있습니다.현재 최신 storybook을 설치하면 예제에는 있지만 사용하려면 다운을 받아야 합니다.해당 글은 react + typescript 기준으로 작성됩니다.🔨 설치하기npm i -D @storybook/addon-controls설치가 끝나면 .storybook/main.js에 addon을 추가해줍니다.//main.jsmodule.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/ad..

💉 react에 storybook 적용하기react + typescript + storybook 프로젝트를 만들어보려고 합니다.React 설치먼저, 타입 스크립트가 적용된 리액트 프로젝트를 생성해보겠습니다.npx create-react-app 프로젝트명 --typescript생성된 프로젝트의 src 폴더 에서 안 쓰는 파일들을 지워줍니다.(필수로 지워야 하는 것은 아닙니다.)// 삭제 후 목록src├── App.tsx├── index.tsx├── react-app-env.d.ts├── reportWebVitals.ts└── setupTests.tsstorybook 적용콘솔 창에 아래 명령어를 쳐줍니다.npx -p @storybook/cli sb init --type react_scripts위 명령어를 ..

문법문자보간선택자나 속성은 일반 변수로 처리가 불가능합니다.이를 처리하려면, #{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}을 사용하여 변수 값을 넣어줍니다. 가변 인수가변 인수..