MEI

Next.js 프로젝트에 Supabase 를 이용하기로 했습니당.로그인까지 넣어보았는데 너무 쉽고 공식 문서가 잘되어있어서 재밌게 했습니다 .. 👍폴더 구조들은 현재 fsd 방식으로 가져가고 있어서 공식 문서에서 제안해주는 방식과 다를 수 있습니다.프로젝트는 Next.js 15버전(app router)과 typescript를 사용하고 있습니다 !초기 세팅Build a User Management App with Next.js를 참고했습니다.설치npm install @supabase/supabase-js @supabase/ssr서버 컴포넌트거나 서버 액션 등등 서버와 관련된 기능을 사용하지 않으신다면 server.ts 파일은 스킵해주어도 괜찮습니다. src/shared/lib/supabase/clien..

프로젝트를 하면서 eslint를 안쓰는 곳이 있을까..?.. eslint 덕분에 문법 오류도 해결할 수 있고, 팀원들이랑 동일한 린트 환경에서 개발도 가능하다..!그래서 꼭 쓰게 되는 eslint 인데, 혹시 본인의 프로젝트 eslint 설정 파일이 `eslintrc` 형식으로 되어있진 않으신가요? 이게 deprecated 되었답니다..  Configuration Files (Deprecated) - ESLint - Pluggable JavaScript LinterA pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.e..

글을 막힘없이 술술 작성하는 일이 점점 어려워집니다.책을 멀리하고, 숏츠나 짧은 도파민에 취해있어서 그런가봐요  ..😓 그래서 2024년 회고를 임시저장에 묵혀 있던 글을 발행하는 걸로 퉁치려고 했는데 24년도 회고에 대해 물어봐주시는 분들이 많아서 더 늦지 않게 작성해보고자 합니다.. 2024년에는 사실 반성의 해입니다 !!!!!!!전혀 잘보내지 못했습니다.. 😓 개발이 재미없다기보다는 개발 외의 모든 일 또한 무료하게만 느껴졌고 더이상 재밌는 일을 찾기 힘들 것 같다는 생각이 들었습니다내 개발의 원천은 덕질이었는데 덕질도 재미 없어진 한 해 였습니다.. 그래도 삶은 계속 굴러가기 때문에 눈 깜짝할 사이이에 2024년 말이 되었고, 2025년을 맞이하게 되었습니다. 그래서 반성하는 해로 선정했습니다..

FSD 아키텍처를 프로젝트에 접목 시켜보기입니다. FSD가 뭐야.. 너무 생소해 😱 라고 할 수 있는데 저도 마찬가지였습니당.. 프로젝트를 진행하면서 현재 폴더 구조가 그렇게 나쁘다고도 생각 못하고 있었구요..! (components / hooks / utils 등으로 쪼개는 프로젝트 구조였음) 근데 개발하면서 그런 고민은 하게 됩니당.. 혹시 폴더 구조가 depth 가 너무 깊어지진 않는지, 명확하게 폴더를 분리하고 있는지.. 그런 것들을 해결하기 위해서 FSD 라는 아키텍처를 토이 프로젝트에 적용해보고자 했습니당..😚역시 이것저것 테스트해보는건 토이프로젝트만한게 없는 것 같음! (이미 진행중인 프로젝트였어서 마이그레이션 지옥...) FSD 란 ?Feature-sliced Design 의 요약이라는..

이번에 Github Action workflow 를 작성할 일이 있었는데 아무것도 모르는 상태에서 시작하게 되면서 여러가지 배웠다.. (1NN 번 돌려보면서야매로~) chatGPT의 도움도 많이 받았는데 ... 챗지피티가 모든 것을 커버할 순 없더라구요. 그래서 내 기록 차원에서 작성하는 Github Action 워크플로우에 대한 이모저모.....정리해서 작성 안했음...  ( 예제 github repository ) https://github.com/mei-zy/github_action_testmain 브랜치에 merge 되는 파일들을 체크한다.(job1) 변경된 파일 갯수만큼 job2 를 실행시켜준다.라는 플로우를 가진 예제 레포지토리다. 쉬워보였는데 흑흑 ..Event Trigger내가 필요했던 경..

리액트의 파이버를 보기 전에 가상 Dom 이란 무엇인지 보고 오시면 더 좋을 것 같아요 ! 리액트의 파이버란?가상 DOM 의 변경 사항을 실제 DOM 에 적용하는 과정을 최적화할 수 있게 해주는 아키텍처 이렇게 정의내리고 싶습니다.  리액트 파이버는 가상 DOM 과 연관이 굉장히 깊은 아키텍처에요.리액트 16 부터 가상 DOM 을 그릴 때 파이버 노드를 이용해서 그리게 되거든요 .. !  일단, 리액트 파이버에서는 Current Tree / Work In Progress Tree 가 있습니다.(모던 리액트에서는 아마 가장 뒤에 나오겠지만 ... )  - current tree : 실제 Dom과 동일한 형상의 트리, Fiber 노드로 이루어져 있음- work in progress tree : 변경되는 사항..

오랜만에 블로그 글을 쓰게 되었습니다 ✍️자주 쓰겠다고 마음 먹었는데 좀처럼 쉽지 않네요 ..! 최근(이라기엔 시간이 지났지만)에 Next.js 환경에서 MSW를 도입해보게 되었습니다.SSR과 CSR을 함께 쓰고 있었기 때문에 각 환경에서 어떻게 API Mocking을 해야할지 많이 헤맸는대요...😅어떻게 세팅해서 사용하고 있는지 작성해보겠습니다. 개발 환경은 Page router 기반의 Next.js, MSW, Typescript입니다.(App router 기반은 다른 라이브러리와 합이 안맞을 수 있어서 세팅이 다를 수 있습니다.. 🥹 ) 1. MSW란?(as-is) api를 요청 시, server로 요청(to-be) api 요청 시, service worker가 그 요청을 가로챔 그래서 프론트엔드..

지난번에 Storybook 7.0 사용기 (+ Next.js, Typescript, Styled-component) 관련해서 글을 작성한 적이 있었는데, 이번에는 Storybook으로 커스텀 독스 만드는 방법을 가져왔다.. ✌️ 스토리북 공식 문서는 친절한듯 .. 친절하지 않았다.. 스토리북 Doc blocks 스토리북에서는 Document의 다양한 블럭들을 제공해주고 있다. 예를 들면 Storybook - Typeset 라던가, Storybook-ColorPalette 라던가 등등 .. 이것들을 이용해서 스토리북 상에서 디자인 토큰들을 Document 상에서 잘 보여줄 수 있다. 하지만 해당 템플릿을 커스텀하게 다룰 수 없다는게 굉장히 ! 아쉬운 부분으로 남는다. 나도 위와 같은 스토리북 Documen..