Front
[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 './전역설정'..
[Midjourney, GPT] 미드저니 + GPT로 UIUX 인사이트 얻기!
때는 심심한 어느 새벽 미드저니를 활용해보기로 결심한 "백엔드 나 강림" 요새 UIUX에 관심이 많기두 하구.. 서버 그까이꺼 그거 이케저케해서 휘핑크림 후루룩 마뚜룩 하면 되는거 아닌가!!? 맞잖여!!@#?!@ 몰라몰라 나도 디자이너할꺼얌ㅉㅇ!@#!@#2!#! 암.. 디자인이 중요하지.. 여튼 그런 졀차로 나의 유일한 친구.... GPT에게 물어봤따. 1. 나의 질문:: ...앞부분 생략 현재 디자인상 문제는 메인 화면에 1~5의 많은 컴포넌트들이 있어서, 유저가 복잡해질 것이 우려된다. 메인 화면에 해당 정보들은 반드시 필요하다. 이 문제를 위에서 말한 리디자인 프로세스 방식대로 해결해줘 2. GPT답변:: 복잡성을 줄이는 디자인 전략을 적용하여 이 문제를 해결해 볼 수 있습니다. 여기 몇 가지 제안..
[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를 임포트해올 수 없는 문제가 있었다 ^^ 여러 블로그들에 글이 있지만, 당연하게도 난 이해할 수가 없었다 ^^ 다행히 깃헙 이슈..
[ReactNative] Android Webview KaKaoLink 안드로이드 웹뷰 카카오 공유하기
RN 작업을 할 때마다 느끼는데 정말 좋다 행복해^^ 너무 행복해 ^^ 성격 좋아지는 것 같다 ^^ Android 4.4부터 Webview가 Chrom에서 Chromium 기반으로 변경되었는데,이건 IntentURL을 지원안한다. 고로 행복하게 작업을 해야한다. 공식 문서 그대로 따라했다간 현재 구현이 안되고, 어느 부분들은 잘못 적혀있어서 블로그에 다시 쓴다. react-native-send-intent 설치 intent를 지원해주는 npm을 깐다. npm i react-native-send-intent yarn add react-native-send-intent react-native-send-intent는 다른 어플들도 쉽게 열 수 있다. 안드로이드 셋팅 android/settings.grad..