React
[GPT, Node.js, React] 실시간으로 ChatGPT 연동하기
일을 하다가~ 요새 핫한 ChatGPT를 활용한 프로덕트를 만들었다. OpenAI의 API는 JSON으로 받아 내는데, 속도가 매우 매우 - 매우 오래 걸렸기 때문에, 유저 경험이 좋지 않았다ㅠ.ㅠ 소켓으로 뚫기로 했다. 나는 유저 경험을 매우 소중히 생각하는 친절하고 배려심있고 착한 낭만 개발자기 때문이다. 그래서 요렇게 만들었다. 1. 프론트에서는 채팅방에 입장하자마자 Socket을 연결한다. 2. 상호작용이 있을 때(채팅) API 호출 3. Node에서 GPT로 Stream를 받는다. 4. 연결된 Socket으로 Stream데이터를 쏜다. Easy~~! 물론 실프로덕트에선.. 시스템 프롬프트와, 각종 예외 처리등등.. MSA.. 여러가지 잔처리 일들이 많았다~ 정말로~ 공식문서에서도 Node는 지원..
[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] 푸쉬 알람 설정 Expo-notifications FCM
부랴부랴 앱을 만드는 중 강한 생산성이 필요했기에, Expo의 노예가 됐다. 앱 생태계를 잘 모르니까 답답쓰 백엔드만 주구장창 하다가 어플 급하게 만드려니 아휴ㅠ.. 그래도 오늘 앱스토어, 구글스토어 모두 승인이 났다 오예~~ 일단 푸쉬 알람같은 경우는 IOS는 nodejs랑 expo-notifications 활용해서 잘 가는데, 안드로이드는... 안드로이드는..... 안됐다.... 이 문제로 삼일 내내 고통받다가, 알고보니 안드로이드는 expo-notifications말고 FCM도 따로 설정해줘야 한다는 충격적인 비밀을 알았다. 이거 expo-notifications 공식문서에도 제대로 설명 안되어 있었는데, 으으 일단 공식문서를 살펴보자.. Using FCM for Push Notifications ..