Front/React
[Storybook, React] S3로 후뚜룩 마뚜룩 배포하기
디자이너 파티?에서 스토리북 초안을 작업 하면서, 그떄그떄 핑퐁칠 일이 많았다. 크로마틱 Chormatic 등으로 배포할 수 있지만, 대부분 로컬 컴퓨터에서 작업하고, 바로 확인하는 일들이 많았다. - 매번 githubaction 돌려서 배포하는 것도 규ㅣ찮고,, 바로바로 보여주고 핑퐁을 치고 시펐다. 예전 인아웃에서 그 Ec2에 github로그인해서 백엔드 순팍팍 배포 2초컷 했던 낭만마냥... 그런 낭만이 필요했던 것이다. 그래서 깔끔하고 쉽고 심플하게 로컬에서 명령어 치면 빌드해서 나오는 storybook-static파일을 S3에 통짜로 올리자~! 했따. - 1. S3 버킷 생성 버킷을 생성한다. 이때 속성에 들어가서 웹으로 설정해주고, index.html 넣어놓는다. 버킷 설정도 대강해놓쟈 { "..
[React, Storybook] Provider, Context 설정
어느순간.. 다시 Storybook을 하게 된 나.. Nextjs로 Storybook 연동해서 하고 있는데, 아 이거 전역으로 주입하는 친구들은 Storybook에서 잘 못읽는다. 나같은 경우는 MUI나 커스텀 테마등등을 Nextjs에서 셋팅한 것과 똒같이 하고 싶었당. 찾아도 안나오고 아효 ㅡㅡ Nextjs AppRouter경우는 layout.tsx 일반은 page.tsx에 전역으로 설정하는 친구들을 Storybook에선 요렇게 한다. .storybook 전역설정(테마, 주입 기타등등)하고 싶은 친구들 만든다. 전역설정.tsx const 개인테마 = 테마 (); export const 이걸쓰세여 = (Story) => ( ); preview.tsx import { 이걸쓰세여 } from './전역설정'..
[React] 프론트 Builder 패턴 적용기
때는 한 달 전 - 나는 빌더패턴을 좋아해 헤헤 우헤 ^^ 프론트에도 한번 적용해볼까^^? 근데.. 혹시 같이 협업할 프론트 개발자분이나, 백엔드 개발자 분이 싫어하시지 않을까ㅠ? 힝 생각해보니까 전부 나네 나 : 괜찮나요 나? 나 : 네 괜찮습니다. 꿈을 펼쳐 보세요. 허락도 맡았고 좋다. 컴포넌트, 뷰, 디자인, 컨테이너, 훅 등등 오 빌더같은 느낌으로 만들어주는거야 ㅇ오.. 좋은데? 오. 오?? 옴ㄴㅇ 오? (사실 이때 쯤 이미 뇌가 피클처럼 절어있어서, 정상적인 사고가 안됐음) 구글 검색을 해보니, 프론트 개발 디자인 패턴에 그딴건 없었지만, 한번 사는 인생 그냥 해보기로 했다 ㅎㅎㅎ 여하튼 매우 흥분해버린 것이다. 대강 이런 느낌으로 진행하려 한 것이었따 export default functio..
[React, ChakraUI, Storybook] ChakraUI, Styled Components
재밌는 갑자기 프론트 ^^ 이번 프로젝트에서 나는 차크라Ui를 선택했다. 마이크로 프론트 패턴을 적용 중이라, Next 앱별로 선택할 수 있는 부분에 자유도가 높기도 해서, 편하게 고를 수 있었다. 선택한 이유는 이름이 멋있다. 다양한 훅과, 개발 편의성을 제공한다. 작업하다 보니 스타일컴포넌트와 혼용이 안되는 문제가 있었다. 깃헙 이슈에는 앞으로도 지원하지 않을 예정이라고 한다.. 그래도 이런 식으로 사용하면 styledComponent 처럼 사용할 수 있다.... ㅎㅎ import { chakra, Box } from '@chakra-ui/react'; export const CustomRow = chakra(Box, { baseStyle: { display: 'flex', flexDirection:..
[React, NextJs, Storybook] NextJs Storybook next/image 오류
오류 내용 Failed to parse src "static/media/public/${ImageName}.png" on 'next/image', if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) ???? 최강 디자이너 피카소님 짱 ^^ 프론트를 열심히 해보자 ^^ 예에~ 오류 발생 ^^ 디자인 시스템을 구축하기 위해, 고민을 하다가 StoryBook을 선택했는데, NextJs의 Provider에서 자동적으로 제공하는 모듈 중에 image를 임포트해올 수 없는 문제가 있었다 ^^ 여러 블로그들에 글이 있지만, 당연하게도 난 이해할 수가 없었다 ^^ 다행히 깃헙 이슈..
React react-router-dom 라우팅 기능 사용
App에서 import를 하고 사용 import React from 'react'; import { BrowserRouter, Route } from "react-router-dom" 페이지를 이동하는데 사용할 수 있고, Fragment는 의 사용성 때문에 Fragment를 사용하여 태그를 없애고 사용가능한 것