반응형 웹개발14 storybook에서 public 폴더에 있는 에셋을 사용하고 싶을 때 😥 문제상황 storybook으로 컴포넌트를 테스트하는 과정에서 public 폴더에 있는 파일들을 절대경로로 불러왔더니 제대로 렌더링되지 않는 것을 볼 수 있었다. 🔨 해결책 package.json 파일에서 scripts 부분을 수정해주면 된다. // package.json { "scripts": { "start-storybook": "start-storybook -s ./public -p 9001" } } 이렇게 코드를 수정해주면 storybook에서도 static 파일을 가져올 수 있다. 2021. 8. 8. storybook에서 svgr 웹팩 설정이 동작하지 않을 때 😥 문제상황 storybook은 file-loader가 기본 설정으로 되어 있어서 @svgr/webpack을 설정하고 싶은 경우에는 main.js에서 unshift를 사용해 웹팩 설정을 해주어야 한다. config.module.rules.unshift({ test: /\.svg$/, use: ["@svgr/webpack"], }); next.js에서 storybook을 설치하고 @svgr/webpack을 설정해줄 때는 잘 동작했었는데, cra에서 storybook을 설치하고 @svgr/webpack을 설정하려니 동작하지 않았다. 🔨 해결책 @svgr/webpack 대신에 babel-plugin-inline-react-svg을 사용하였다. 이 경우에는 main.js에서 설정하는 방식이 웹팩과 달라진다. /.. 2021. 8. 5. 📚 Storybook을 사용해보자! 📢 개발환경: React.js, typescript, styled-components 사용 ❗ 혹시 storybook 세팅이 되어있지 않다면 이전 게시물을 참고하자! 2021.07.25 - [웹개발/개발환경 설정] - next.js 에 typescript, storybook 설정하기 next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측 carpediem9911.tistory.com storybook을 사용하기 위해 블로그 글을 읽어보니 addon-knobs를 사용해서 컴포넌트 props를 제어하.. 2021. 7. 27. next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측했다. 카톡으로 웹 사이트 링크를 전달하는 경우 카톡에서 자체적으로 메타태그들을 인식해서 사이트 이름, 썸네일 등을 띄워준다. 그런데 spa 특성상 공유 링크를 전달하게 되면, 디렉토리에 해당하는 메타태그들 값이 뜨는 것이 아니라 모든 페이지가 동일한 값이 뜬다는 불편함이 있었다. 그래서 이 문제를 해결하기 위해 웹 사이트를 next.js로 바꾸기로 결정했다. 앞으로 추가하게 될 기능들이나, SEO를 위해서도 next.js로 바꾸는 것이 맞는 선택이라고 생각했다. 이왕 옮기는 김에 typescript로 전환하.. 2021. 7. 25. ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기 ReactComponent를 통해 svg 파일을 컴포넌트처럼 사용하면 fill 속성을 변경하여 svg 에셋의 색을 설정할 수 있다! svg 파일 코드를 뜯어보면 다음과 같다 혹은 이런 형식이다. 첫번째 svg의 경우 색상을 바꾸는 방법은 다음과 같다. import styled from "styled-components"; import { PlusIcon } from "@assets/icons/common"; const IconBox = () => { return ( ); }; const Container = styled.div` width: 20px; height: 20px .plus_icon{ width: 10px; height: 10px; path { fill: #ffffff; } } `; 이렇게 s.. 2021. 7. 24. 웹 사이트의 렌더링 동작 방식을 이해해보자! 🔗 클라이언트/서버 - 클라이언트 인터넷을 통해 서버에 데이터 요청을 하는 주체를 말합니다. 우리가 사용하는 핸드본, 웹 브라우저 등이 클라이언트가 될 수 있습니다. - 서버 클라이언트가 보낸 요청을 받아서 처리한 후 결과를 다시 전송해주는 주체를 말합니다. 📜 웹 페이지 발전사 1. static sites 우리가 웹페이지에 접속하면 보게 되는 화면들은 어디서 오는 것인지 생각해보신적 있으신가요? 웹을 공부하다 보면 CSR, SSR 등의 용어를 들어본 적 있지만 정확한 개념을 알아볼 기회가 없었을 경우가 많았을 것입니다. 1990년대 중반까진 웹사이트 대부분은 정적인 웹사이트(static sites)였습니다. 서버에 여러 개의 html 문서들이 저장되어 있고, 사용자가 웹페이지에 접속할 때마다 서버로 부.. 2021. 5. 24. 이전 1 2 3 다음 반응형
