전체 글
[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를 임포트해올 수 없는 문제가 있었다 ^^ 여러 블로그들에 글이 있지만, 당연하게도 난 이해할 수가 없었다 ^^ 다행히 깃헙 이슈..
[NodeJs, Notion] Nodejs + Notion database 연동하기 및 만들기
노션에 있는 이런 데이터베이스는 개발자가 아닌 사람들도 편하게 데이터베이스를 만들 수 있고, 접근성도 용이하고 좋은 것 같다. 관련된 쿼리도 제공하고 api도 제공해서 만들기도 괜찮은 것 같고, 이걸 이용해서 나중에 notion-orm을 만들자~ 하고 잠시 생각해서, 누군가 이름을 먹었다.. 코드도 없으면서.. notion-orm, notionorm 둘다 안돼ㅠㅠ 일단 notion으로 뭘 할 수 있을지 하나하나 기록해보려한다. 공식문서 (는 잘되어 있으나, 연결 부분에서 설명이 불친절한 부분도 있었따) Getting started Learn how to make your first API requests using the Notion API developers.notion.com 1. 노션 전체 페이지로..
[NodeJs, Express, Typescript] 전역 에러 핸들링 (express global error handle)
Nest는 @Catch(HttpException) 이런식으로 공식문서에서 쉽게 되어 있던데, Express는 뭔가 불편하다. 내가 여태껏 했던 것들은 API단위에서의 에러를 처리하고, 다음 공통된 에러 미들웨어에서 에러 레벨에 맞게 객체만들고, 클라쪽으로 넘겨서 처리하는 방식이 많았는데, 그렇게 했던 이유는 실력 부족도 있고, 결국은 이게 모든 에러를 다 컨트롤 한다고 잘못된 생각을 했다. 전역에서 에러를 관리하면 더 좋다는 피드백을 들었다. 그전에는 morgan, winston, slack으로 로깅을 할 때도 api단위에서의 에러를 로깅했었다. error.filter.ts import { Request, Response, NextFunction } from 'express'; class AppError..