본문 바로가기
반응형

토이프로젝트

 (20)
Storybook - (1) 기본 설치 스토리북(Storybook)은 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구입니다. 스토리북(Storybook)을 구성하는 기본 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 스토리북(Storybook) 설치 다음 명령어를 이용해서 스토리북(Storybook) 관련 패키지를 설치해줍니다. npx -p @storybook/cli sb init - @storybook/cli : storybook 관련 명령어 사용이 가능하도록 해주는 패키지 - sb : 스토리북 메인 패키지 패키지 설치가 완료되었으면 yarn storybook을 이용해서 실행해봅시다. 아래의 화면처럼 나오면 성공한 것입니다. - 스토리북(Storybook) 디렉토리를 열어보면 St..
튀어나오는 레이아웃 구현(css, position, transform) 오늘은 간단하게 튀어나오는 레이아웃을 구현해보도록 하겠습니다. 간단하게 결과는 다음과 같이 나옵니다. 먼저 저는 마크업을 다음과 같이 진행하였습니다. header 바로 옆에 div 태그를 만든 후에 id가 root인 컨테이너에 position: relative를 적용하였습니다 (position:absolute를 사용하기 위해서) 그리고 header 옆의 div에 다음과 같이 작성해주었습니다. animation은 transform을 적용하여 translateX로 x좌표를 이동하도록 구현하였습니다. 이렇게하면 390px에서 0만큼 이동하게 됩니다. export const InfoMenu = styled.div` z-index: 1000; background-color: #f6f8fa; border: 1px ..
css 말줄임 구현 사이드 프로젝트를 만들다가 말줄임 구현을 할 경우가 생겼습니다. 결과는 다음과 같습니다. 핵심 코드는 다음과 같습니다. display: -webkit-box; line-clamp와 box-orient를 사용하기 위해 overflow: hidden; // 영역을 넘으면 글자 안보이게 text-overflow: ellipsis; // ...를 표시하기 위해서 사용 -webkit-line-clamp: 2; // 2줄이상 넘으면 ... 표시 -webkit-box-orient: vertical; 1줄일 경우는 line-clamp 대신에 white-space : no-wrap으로 표현이 가능합니다.
webpack devtools failed to load source map 경고 해결 오늘은 webpack devtools failed to load source map 경고를 해결하는 방법에 대해서 알아보겠습니다. 개발을 하다가 여러 라이브러리 파일이 존재하지 않는다는 경고창이 떴습니다. 저는 이 문제를 웹팩 설정 문제라고 생각을 해서 source map을 처리할 때 exclude node_modules로 처리를 해준다면 해결할 수 있을 것이라고 판단했습니다. 이 문제를 해결하기 위해서 source map에 대해서 공부할 필요가 있었습니다. source map이란 난독화된 코드와 원본 코드를 매핑해주는 방법 중 하나입니다. *.map 파일을 통해 제공되고, json 형태로 되어 있습니다. source-map을 잘 몰라서 아래의 사이트를 참고했습니다. https://webpack.kr/l..
scroll 이벤트를 활용한 React 무한 스크롤 구현(feat. throttle) 한 파일 내에서 axios로부터 받은 무한 스크롤을 구현하였습니다. 먼저 저는 상태를 지정하기 위해서 2가지 변수를 지정하였습니다. result는 현재 렌더링되는 playground 리스트를 의미합니다. item은 처음에 axios를 통해서 모든 데이터를 담을 변수입니다. const [result, setResult] = useState([]); const [item, setItem] = useState([]); 3. fetchMoreData는 스크롤할 경우 추가적으로 데이터를 받아오는 함수입니다. const fetchMoreData = async () =>{ setResult(result.concat(item.slice(0, 15))); setItem(item.slice(15)); }; 4. infin..
programmerGround 개발 - 임시 데이터를 활용한 컴포넌트 구축(2021.02.28) 안녕하세요! 새콤하고달콤입니다. 오랜만에 programmerGround를 만져서.. ㅋㅋㅋㅋ 임시 데이터를 활용해서 컴포넌트 구축한 경험을 공유하도록 하겠습니다!! 저는 아직 api호출을 진행하지 않았기 떄문에 mockup 소위 가짜데이터를 이용해서 컴포넌트를 생성하는 로직을 구현하였습니다. 1. 가짜 데이터 만들기 - 일단 id, title, date를 가지는 객체 배열을 생성하였습니다. const playgroundData = { content: [ { id: '1', title: 'TypeScript Making', date: '2021.01.09', }, { id: '2', title: 'SVG Making', date: '2021.01.17', }, { id: '3', title: 'Spring..
programmerGround 다크모드 구현(2021.02.11 ~ 2021.02.12) 안녕하세요! 새콤하고달콤입니다. 오늘은 다크모드 구현과정을 설명하려고 합니다. 1. 다크모드를 위한 뼈대를 마련 검색창 옆에 다크모드를 구현하기 위해서 간단한 UI를 작성해보았습니다. import React from 'react'; import * as StyledComponent from './style'; const Bone = () => { return ( ); }; export default Bone; /* eslint-disable import/prefer-default-export */ import styled from 'styled-components'; export const BoneContainer = styled.div` position: relative; width: 50px; hei..
프론트엔드 테스팅 전략 및 구현 안녕하세요! 새콤하고달콤입니다. 오늘은 프론트엔드 테스팅 전략 및 구현에 대한 이야기를 해보려고 합니다. 테스트 코드 : 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위 자동화 테스트의 중요성 : 대부분의 테스트가 반복적인 행위, 위의 간단한 예제에서도 "해당 항목을 클릭" 하고 결과를 "확인" 하는 과정이 계속해서 반복되는 것을 볼 수 있습니다. 이런 반복된 작업을 수동으로 진행하게 되면 애플리케이션의 복잡도가 증가할수록 테스트 비용만 증가하게 됩니다. 좋은 테스트가 뭔지 알아야 합니다. 1. 실행 속도가 빨라야 합니다. 2. 내부 구현 변경 시 깨지지 않아야 합니다. 3. 버그를 검출할 수 있어야 합니다. 4. 테스트의 결과가 안정적이어야 합니다. 5. 의도가 명확하게 들어나야 합니다. 일..

티스토리툴바