FrontEnd
![[FE] FE 폴더구조 - 프랙탈 폴더구조 (FSD와 유사한?)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fc2nS0x%2FbtsPVInIMFr%2FAAAAAAAAAAAAAAAAAAAAAABinYn7BJ5z3TeH44jGB4Epy3aex-0JL7rz1UjjhT2J%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DQR9%252B1MM3wsedg7p1cyVd5T%252F7trA%253D)
[FE] FE 폴더구조 - 프랙탈 폴더구조 (FSD와 유사한?)
최근 회사에서 실제로 적용하고 있는 폴더구조에 대해서 이야기를 해보고자 한다 ㅎㅎ.FSD폴더구조와 유사한점이 많지만 자유도 측면에서 장점이 많은 프랙탈 폴더구조를 우리팀에선 채택하고 있다. 사실 프랙탈 폴더구조란 말은 없긴하다. FSD에서 영감을 받아서 커스터마이징한 폴더구조인데, 구조가 프랙탈처럼 같은 형태가 계속 반복되는 폴더구조라 네이밍을 붙이게 되었다. 좋은 폴더구조 ? 좋은 폴더구조는 뭘까? 좋은 폴더구조는 아래 항목중에 어떤게 잘 되어야 할까? 1. 내가 봐야할 부분을 바로 찾을 수 있는 구조2. 공통화된 파일들을 추적하기 좋은 구조3. 파일의 영향범위를 파악하기 쉬운구조 등등이 있을 것이다. 무엇보다 1번이 가장 중요한 것 같다라고 최근 생각한다. 기능을 추가하던, 고치던 내가 해당 레포의 ..
AI에 MCP로 날개달기 (Cursor + MCP로 깃,노션 등 연동하기)
요즘은 AI를 쓰고 안쓰고에 따라서 개발 생산성이 사람마다 천지차이로 나는 것 같다. 최근에 커서를 알게 된 이후로, VSCODE는 내 컴퓨터에서 거의 fade-out 되기 직전이다.https://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com 커서?VSCODE를 포크떠서 만든 에디터로, 코파일럿처럼 IDE 내에서 AI를 사용할 수 있다. 월 20달러 (GPT 유료플랜이랑 동일)한 가격으로 이용할 수 있다. 개인적으로 코파일럿보다 매우매우 똑똑한 친구라고 생각한다. 내 프로젝트의 구조를 전반적으로 알..
![[FrontEnd] MFA(Micro Frontend Architecture) 란?!](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FccnPsO%2FbtsME9iatiR%2FAAAAAAAAAAAAAAAAAAAAAHibmNzwx2DkGo-4DRHxcybVjiL8B_LgXu771tfSH8zh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DRmcZAdNEr%252FKw%252BxN2VXViDTLF4ro%253D)
[FrontEnd] MFA(Micro Frontend Architecture) 란?!
알면 좋은 배경지식먼저 MFA는 MSA(Microservices Architecture) 의 프론트엔드 버전이다. MSA이란?- 커다란 하나의 모노리스 백엔드를 작은 서비스로 나누고 각 서비스는 느슨하게 결합되고 독립적으로 배치 가능한 서비스 말은 어렵지만.. 쉽게 생각해서 엄청나게 큰 프로젝트가 모놀리식하게(한개의 레포에서) 관리된다면 어떤 일이 발생할까? 한 프로젝트에 위와 같이 3개의 도메인이 존재한다고 생각해보자. 더 쉬운 이해를 위해, 각 도메인마다 팀이 존재한다고 생각해보자. A팀에서 작업한 A도메인의 API만 변경되어도 전체의 배포 시나리오를 동작시켜야 한다. 그렇기 때문에 각팀의 배포 시나리오를 항상 맞춰야 하고, 각 팀의 독립성이 떨어지게 된다. 이를 위해 각 도메인 별 배포를 독립적으..
![[ Front ] Zustand 상태관리 라이브러리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FBi7MK%2FbtsHTEOFzF8%2FAAAAAAAAAAAAAAAAAAAAABbdxrDtUeK56pZLCjCg-gIWSzpcNaL_om6HAYL2lL1v%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DF8li18yn0mTxktc6GZKS1kTAZXg%253D)
[ Front ] Zustand 상태관리 라이브러리
zustand는 최근 많이 인기가 올라온 전역상태 관리 라이브러리이다!!최근 1년 사용량에 비해서도 jotai나 recoil에 비해서 많은 다운로드 수를 자랑하는 것을 확인할 수 있다.특히 기간을 조금 더 늘려 보았을 때 현재 가장 성장세가 가파른 것을 확인할 수 있다. 재밌는 점은 zustand만든사람이 jotai까지 만들었다고 한다! zustand jotai 두 라이브러리의 차이는 아래 개발자가 직접 설명을 잘해 주었다.https://github.com/pmndrs/jotai/issues/13 How is jotai different from zustand? · Issue #13 · pmndrs/jotaiName Jotai means "state" in Japanese. Zustand means..
![[React] react에서 next처럼 라우팅하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FQNhlW%2FbtsHDxP38N8%2FAAAAAAAAAAAAAAAAAAAAAPtQd4BQtFgLk5WC97N5zXKyu69XBQyzDKFcGdqa6o52%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DlSIsMhWCA1V6kZjK32eSsEL%252B9So%253D)
[React] react에서 next처럼 라우팅하기
https://github.com/zoubingwu/vite-plugin-next-react-router GitHub - zoubingwu/vite-plugin-next-react-router: A Next.js style routing vite plugin for react.A Next.js style routing vite plugin for react. Contribute to zoubingwu/vite-plugin-next-react-router development by creating an account on GitHub.github.com 리액트에서도 next와 같은 폴더구조 기반 라우팅을 할 수 있는 플러그인이 있다. react-router-dom 기반이기 때문에 아래와 같이 두가지 패..
![[JS] 행렬과 연산](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbEy4zv%2FbtsHaeBCdvR%2FAAAAAAAAAAAAAAAAAAAAALrnY3g1Ph5U2X7OluHm5VW4KakoCM-tBc5LJB4iCeqM%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DMXCD%252FrPJibIAHorqEemS%252FB5Y1wU%253D)
[JS] 행렬과 연산
Deque를 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/118670 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 자체는 단순했다. 행렬을 밑으로 밀어내거나 시계방향으로 회전하는 기능을 구현하면 되었다.단, 시간복잡도를 생각해야 하는 문제이다. 행렬을 밑으로 밀어내는 것 자체는 어렵지 않다. Deque로 쉽게 구현할 수 있다. 시계방향으로 회전하는 기능또한 Deque로 구현할 수 있다. 이 두가지를 동시에 할 수 있게 하기 위해 Deque를 아래와 같이 조금은 특이하게..