MEI

프로젝트를 하면서 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..

2023년도의 연간 회고는 전혀 생각 안하고 있었는데 해리의 독촉에 의해 쓰게 되었습니다.... 이번 회고를 작성하면서 작년 회고글 ⏤ 2022년 회고 ⏤ 글을 다시보게 되었는데 감회가 새롭습니다. 작년에도 야근을 하며 보냈었는데 올해 연말에도 야근하며 보내기 :) KEP 인턴 종료 퇴사라고 해서 웅장해지는 것 같은데 인턴 기간이 종료 되었다 ! 다이어리를 쓰는 편이 아니어서 그 때의 감정이 어땠는지 딱히 기억이 안난다. 기억이 남는건 '이런 나 제법 개발자에요' 였다. 진짜 많은 부분들을 배울 수 있었고, 심지어 하는 일이 재밌기도 했다. 처음 해보는 Jira 처리나, PR 머지 방식이라던가 Issue 등록 방법이라던가 (.. ) 장어와 함께 mlops 파트 안녕..... 퇴사 다음 날 세이지가 졸업(..