FrontEnd
">
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%2Fdn%2FccnPsO%2FbtsME9iatiR%2F9eWmvQle2eiahPCb1qopfK%2Fimg.png)
[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%2Fdn%2FBi7MK%2FbtsHTEOFzF8%2F2ueE4ubrhK8YiTFzymAz6k%2Fimg.png)
[ 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%2Fdn%2FQNhlW%2FbtsHDxP38N8%2FJLs9FJCUcCNRPwSLME5WqK%2Fimg.png)
[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%2Fdn%2FbEy4zv%2FbtsHaeBCdvR%2F6duhwYaQsdH1vucO5SKFIk%2Fimg.png)
[JS] 행렬과 연산
Deque를 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/118670 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 자체는 단순했다. 행렬을 밑으로 밀어내거나 시계방향으로 회전하는 기능을 구현하면 되었다.단, 시간복잡도를 생각해야 하는 문제이다. 행렬을 밑으로 밀어내는 것 자체는 어렵지 않다. Deque로 쉽게 구현할 수 있다. 시계방향으로 회전하는 기능또한 Deque로 구현할 수 있다. 이 두가지를 동시에 할 수 있게 하기 위해 Deque를 아래와 같이 조금은 특이하게..
![[JS] 매출하락 최소화 (2021 카카오)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fn9XBV%2FbtsG4Bdh7JH%2FIKTG9FAiCrfapcekaqZNt0%2Fimg.png)
[JS] 매출하락 최소화 (2021 카카오)
tree + dp로 해결할 수 있는 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/72416 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 트리구조와 DP를 활용하면 해결할 수 있는 문제이다. 문제를 처음 읽었을때의 생각은 선택을 했거나, 안했거나를 나누어서 계산을 하는 거였다.(결과적으로 완전 틀린 접근은 아니었음) 다만 완전탐색으로 이를 해결하기에는 300,000명까지 사원이 있기에 불가능 했다. 주의를 둘 점은 트리구조이기 때문에 1번노드에서 단방향으로 퍼져나가는 구조라고 생각할 ..