FrontEnd
![[FrontEnd] MFA(Micro Frontend Architecture) 란?!<img src=](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번노드에서 단방향으로 퍼져나가는 구조라고 생각할 ..
![[React] 리액트 19 beta 변경점 알아보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fvy1SQ%2FbtsGYyPHR2V%2FPfhCKYmyURZXLHnkRZCET1%2Fimg.png)
[React] 리액트 19 beta 변경점 알아보기
리액트 19 Beta 버전이 4.25일 이틀전에 나왔다! 리액트 팀에서 19에 어떤 변경사항을 적용할지 알아보자. 본 글은 리액트 팀블로그를 참고했다.https://react.dev/blog/2024/04/25/react-19#improvements-in-react-19 React 19 Beta – ReactThe library for web and native user interfacesreact.dev 먼저 크게 보면 아래 항목들을 중점적으로 개발한 것 같다. 1. 비동기 작업의 편의성 ( 동시성에 초점을 둔게 느껴진다 )2. ref 개선3. 성능 개선 1. useTransition에서 비동기 함수 지원useTransition은 startTransition으로 감싼 상태변화의 우선..