Next.js가 v13으로 버전 업데이트가 되면서, 기존에 page 폴더에서 해왔던 작업들이 app 폴더에서 진행되게 변경되었고 추가적인 변화들이 생겼습니다. 그중에서 이 글에서 알아볼 것은 server componet 입니다. Server Componet 란? server 컴포넌트란 서버를 벗어나지 않는 컴포넌트입니다. 조금더 길게 써보면, server 컴포넌트의 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공합니다. 즉 해당 컴포넌트의 js 코드가 클라이언트에서 실행되지 않는다는 것을 의미합니다. 이게 무슨 의미가 있을까요? 일반적인 CSR에서는 컴포넌트의 js 코드가 클라이언트로 전송되고, 클라이언트에서 실행됩니다. 반면 server 컴포넌트는 앞서 언급했듯이 클라이언트로 js 코드를 ..
마이크로서비스를 구축하면 가장 먼저 마주하게될 큰 이슈는 서비스간의 커뮤니케이션입니다. 기존의 모놀릭서비스는 하나의 서버에서 돌아가므로 이러한 이슈가 없지만, 마이크로서비스는 각 서비스마다 각자의 서버를 가지고있기 때문에 이슈가 발생합니다 예를들어 post 서비스에서 글을 삭제하였을때, comment 서비스에서 글 존재여부를 판단할 수 없습니다. 왜냐하면 comment 서비스는 A라는 서버에서만의 스코프가 있고, post 서비스는 B라는 다른 서버의 스코프이기 때문입니다. 이를 해결하는 방법으로는 두 방법을 떠올릴 수 있습니다. sync 통신 하나의 서비스에서 다른 서비스와의 커뮤니케이션을 직접적인 요청을 통해 수행 ex) x라는 사용자의 모든 구매 항목을 표시해달라는 클라이언트 요청을 A 서비스에 보냄..
저번 글에서 올린 사진에서 알 수 있듯이, 제가 구축하려하는 마이크로서비스의 흐름은 아래와 같습니다 여기서 저는 Load Balancer Service 를 구축하였습니다 Load Balancer Service란 트래픽을 여러 서버 간에 분산시키는 역할을 합니다. 이는 네트워크 트래픽을 처리할 수 있는 서버의 수를 늘려 가용성과 안정성을 향상시킵니다 이러한 로드밸런스를 구축하는데 Skaffold와 Ingress를 사용하였습니다 Skaffold Skaffold는 쿠버네티스에서의 지속적인 배포와 개발을 가능하게 합니다. 클라이언트에서 요청이 오면 Skaffold는 요청을 로드밸런싱하여 서비스의 부하를 분산시킵니다. 또한, 개발 중에는 소스 코드의 변경을 감지하여 자동으로 코드를 빌드하고 테스트하며 쿠버네티스에..
Microservice 프로젝트 로그 더보기 01_Microservice 프로젝트 시작하기-기획01 02_Microservice 프로젝트 시작하기-기획02 03_Microservice 프로젝트 세팅하기-Docker, Kubernetes 최종적으로 사용하게 될 기술은 아래와 같습니다 프론트엔드 NextJs, Redux, RTK-query, Styled-componets, Typescript 백엔드 Node.js(MicroService), NATS-streaming-server, postgreSQL, Prisma, mongoDB, mongoose, Redis, Typescript Microservice를 구축하기 위한 기본 아이디어는 다음과 같습니다 모든 서비스를 Docker 컨테이너로 만듭니다 Kubern..
Microservice 프로젝트 로그 더보기 01_Microservice 프로젝트 시작하기-기획01 02_Microservice 프로젝트 시작하기-기획02 아래와 같은 순서로 각 서비스에 대한 솔루션을 작성해보려 합니다. 각 서비스에서 필요한 기능 Auth → 로그인, 회원가입, 로그아웃, 인증여부 확인 Post → 게시글: 생성, 읽기, 업데이트, 삭제, 좋아요(추천), 해쉬태그 Comment → 댓글: 생성, 읽기, 업데이트, 삭제, 좋아요(추천), 신고 (진행중…미정) Recommend → 댓글 많은 게시글, 추천 많은 게시글 Filter → 추천순, 댓글순, 검색, 해쉬태그 Notification → 자신의 글 반응 Profile → 유저 정보 수정, 설정(다크모드, 알림 on-off) 라우터 A..
Microservice 프로젝트 로그 더보기 01_Microservice 프로젝트 시작하기-기획01 저는 보통 하나의 웹 애플리케이션을 구축할 때, 아래와 같은 순서도를 따라 기획을 시작합니다 어떤 앱을 구축? 커뮤니티는 이미 많이 존재하지만, 정말 바르셀로나만을 위한 커뮤니티가 있었으면 좋겠다는 간단한 아이디어에서 출발한 프로젝트입니다. 커뮤니티에 존재해야할 기본적인 기능은 포함시키고, 추가적으로 레퍼런스 사이트들의 장점들을 다 합치는 실험적인 프로젝트인 측면도 존재합니다. 레퍼런스: 트위터, 디스코드, 기타 커뮤니티 필요한 서비스/기능 Auth → 기본적으로 자체 로그인/회원가입 기능을 구현하고, 추가적으로 소셜 로그인까지 구현하는 서비스입니다. Post, Comment → 트위터에서 흔히 피드라 불..
올해 초부터 제가 구독 또는 관심있게 보는 해외 개발자들이 비슷한 주제로 영상, 글들을 올렸습니다. 이들이 공통적으로 말하는 것은 React에 대한 전망과 create-react-app에 대한 이야기 였습니다. 두 주제 모두 관심있게 보았지만, 이번글에서는 좀 더 체감되는 주제인 create-react-app에 대해서 글을 작성 해보려 합니다. 1. 왜 create-react-app에 대한 우려(불만)의 소리가 나오는가 아마 react를 공부하고 사용할 때, 대부분 CRA를 통하여 프로젝트를 생성할 것입니다. 저또한 그래왔고 공식문서에도 그렇게 하라고 써져있습니다. 근데 왜 많은 개발자들이 CRA에 대해서 의문을 던지고 심하게는 사용하지 말라는 소리가 나왔을까요? 개발자들 마다 여러 이유들을 제시하고, ..
[기존 프로젝트 링크] 깃허브: https://github.com/joseph0926/project_02-MoneyNote GitHub - joseph0926/project_02-MoneyNote Contribute to joseph0926/project_02-MoneyNote development by creating an account on GitHub. github.com 배포링크: https://project02expensenote-deploy-production.up.railway.app/land 전체적인 문제점 및 개선 방향 처음 이 웹 애플리케이션을 만들 때는 단순히 풀스택 앱을 만들어보고 싶고, 또한 연습해보고 싶었기 때문이였습니다. 때문에 기능은 단순히 CURD와 필터 기능 정도만 존재하..
