끄적끄적 코딩
article thumbnail
마이크로서비스와 모놀리식 아키텍처 알아보기
FrontEnd 2025. 4. 2. 10:48

서론서비스 구조를 고민하다 보면, 모든 기능을 하나로 묶을지, 나눠서 운영할지를 결정해야 할 때가 있습니다. 흔히 사용되는 방식으로는 모놀리식 아키텍처와 마이크로서비스 아키텍처가 있는데, 저도 프로젝트를 하면서 어떤 구조가 더 적절할지 고민하게 되었습니다. 그래서 이번 글에서는 두 아키텍처가 어떻게 다르고, 어떤 상황에 적합한지 정리해보았습니다.마이크로서비스와 모놀리식 아키텍처란?모놀리식 아키텍처모든 기능이 하나의 애플리케이션으로 통합된 구조입니다. 프론트엔드, 백엔드, 데이터베이스 로직이 하나의 코드베이스 안에 포함되어 있으며, 한 번의 배포로 전체 시스템이 함께 배포됩니다. 소규모 프로젝트나 초기 서비스 개발 시 빠르게 개발하고 배포할 수 있다는 장점이 있습니다.모놀리식 아키텍처의 주요 특징단일 코드..

article thumbnail
gRPC와 RESTful API, 언제 어떤 걸 사용 할까?
FrontEnd 2025. 4. 1. 07:19

서론프론트엔드와 백엔드가 분리되는 구조가 자연스러워지면서 시스템 간 통신 방식에 대해 고민할 일이 자주 생기게 되었습니다. 저는 주로 RESTful API를 사용해왔는데, 최근에 gRPC라는 방식도 있다는 것을 알게 되었고, 어떤 특징을 가지고 있는지, 그리고 어떤 상황에서 사용하면 좋을지를 비교해보며 정리해보았습니다.RESTful API, gRPC란?API(Application Programming Interface)는 서로 다른 소프트웨어 시스템이 데이터를 주고받고 기능을 사용할 수 있도록 정의된 인터페이스입니다. 특히 웹 서비스나 마이크로서비스 구조에서는 서버와 클라이언트가 통신할 수 있도록 API를 활용하게 되는데, 이때 주로 사용되는 두 가지 방식이 RESTful API와 gRPC입니다.두 방식..

article thumbnail
HTTPS는 왜 사용할까?
FrontEnd 2025. 3. 31. 06:22

서론웹사이트에 접속했을 때 주소창에 자물쇠 아이콘이 보인다면, 해당 사이트가 HTTPS를 사용하고 있다는 의미입니다. 요즘은 개인정보 보호와 보안이 점점 더 중요해지면서 HTTPS는 선택이 아닌 기본이 되어가고 있습니다. 이 글에서는 HTTPS가 무엇인지, 왜 필요한지, 그리고 어떻게 동작하는지를 간단하게 정리해보았습니다.HTTP와 HTTPS란HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받기 위한 기본적인 규칙입니다. 웹페이지의 텍스트, 이미지, 영상 등 다양한 정보를 브라우저로 전달하는 데 사용되며, 간단하고 빠르다는 장점이 있습니다. 하지만 데이터를 암호화하지 않기 때문에 누군가 통신을 가로채면 내용을 그대로 볼 수 있다는 단점이 있습니다.이러한 문제를 해결하기 ..

article thumbnail
JWT(Json Web Token)
FrontEnd 2025. 3. 30. 05:48

서론웹 애플리케이션에서 사용자 인증은 매우 중요한 역할을 합니다. 특히 RESTful API 기반의 시스템에서는 세션 방식이 아닌 토큰 기반 인증 방식이 많이 사용되며, 그 중심에는 JWT(Json Web Token)가 있습니다.세션 방식은 서버가 사용자 상태를 저장해야 하므로 확장성에 제약이 생기지만, JWT는 클라이언트가 상태를 유지하므로 SPA, 모바일 앱, 마이크로서비스 아키텍처 환경에서 유용합니다. 이번 글에서는 JWT의 개념과 특징, 동작 방식, 장단점에 대해 쉽고 명확하게 정리해보겠습니다.JWT란?JWT(JSON Web Token)는 사용자 인증과 정보 전달을 위해 사용되는 토큰 기반 인증 방식입니다. 서버가 상태를 저장하지 않는 Stateless 인증을 지원하며, 클라이언트가 토큰을 저장하..

article thumbnail
웹 페이지 요청부터 렌더링까지의 흐름
FrontEnd 2025. 3. 29. 05:55

서론웹 브라우저에 google.com을 입력하고 Enter를 누르면 구글 페이지가 나타납니다. 이 짧은 순간에는 네트워크, 보안, 렌더링 기술이 유기적으로 작동하고 있습니다. 이 글에서는 사용자가 google.com을 입력했을 때 브라우저 내부에서 어떤 일이 순차적으로 일어나는지 DNS 조회부터 렌더링까지 단계별로 살펴보겠습니다.google.com 입력부터 화면 출력까지DNS 조회브라우저는 먼저 google.com의 IP 주소를 알아내야 합니다. 이 과정은 다음 순서로 이루어집니다.브라우저 캐시 → OS 캐시 → 라우터 캐시 → ISP의 DNS 캐시를 차례로 확인합니다.캐시에 없다면 DNS 리졸버가 루트 서버부터 도메인을 재귀적으로 질의하여 IP를 찾습니다.최종적으로 얻은 IP 주소는 TTL(Time T..

article thumbnail
FSD 아키텍처 적용하기
FrontEnd 2025. 3. 28. 02:16

서론프로젝트 규모가 커질수록 폴더 구조와 코드의 의존성이 복잡해집니다. 특히 협업이나 유지보수를 고려해야 하는 상황에서는 기존의 레이어드 아키텍처(Page, Components, Hooks 등)가 한계를 드러냅니다.이런 문제를 해결하기 위한 대안으로 최근 프론트엔드 커뮤니티에서 FSD(Feature-Sliced Design) 아키텍처가 주목받고 있습니다.FSD 아키텍처란?FSD 아키텍처는 Feature-Sliced Design의 약자로, 기능 중심의 프론트엔드 아키텍처 설계 방식입니다. 기존의 레이어 기반 구조와는 달리, 도메인 기반의 기능을 중심으로 코드를 구성함으로써 유지보수성과 확장성을 높일 수 있습니다. 각 계층은 명확한 역할을 가지며, 복잡한 애플리케이션 구조를 더 잘 관리할 수 있도록 돕습니다..

article thumbnail
프론트엔드에 SOLID 적용하기
FrontEnd 2025. 3. 27. 04:36

서론프론트엔드는 점점 더 복잡해지고 있습니다. 단순한 화면 구성에서 벗어나 상태 기반 UI, 사용자 인터랙션 등 다양한 역할을 담당하면서, 구조적인 설계의 중요성이 커지고 있습니다.이 글에서는 객체지향 설계 원칙인 SOLID를 프론트엔드에 어떻게 적용할 수 있을지를 설명해보려고 합니다.SOLID란 무엇인가? SOLID는 객체지향 설계 원칙의 앞글자를 딴 용어로, 유지보수성과 확장성을 높이기 위한 기본적인 설계 지침입니다.S: 단일 책임 원칙 (Single Responsibility Principle)→ 하나의 클래스는 하나의 책임만 가져야 하며, 변경 이유도 하나여야 합니다.O: 개방-폐쇄 원칙 (Open-Closed Principle)→ 소프트웨어 구성 요소는 확장에는 열려 있고 변경에는 닫혀 있어야 ..

[Javascript] 프로그래머스 - 섬 연결하기
알고리즘 2025. 3. 25. 21:05

문제 설명n개의 섬 사이에 다리를 건설하는 비용이 주어질 때, 모든 섬이 서로 통행 가능하도록 만드는 최소 비용을 구해야 합니다. 섬들은 직접 연결되지 않아도, 중간 섬을 통해 도달할 수 있으면 통행 가능한 것으로 간주합니다.제한 사항섬의 개수 n은 1 이상 100 이하입니다.costs[i]는 세 개의 정수로 구성되며, 두 섬을 연결하는 데 필요한 비용을 의미합니다.같은 연결은 중복되어 주어지지 않으며, 모든 섬이 연결될 수 있는 입력만 주어집니다.해결 방법알고리즘: 프림 알고리즘 (Prim's Algorithm)프림 알고리즘은 하나의 정점에서 시작해 방문하지 않은 정점 중 가장 비용이 적은 간선을 선택해 최소 신장 트리를 구성하는 방식입니다.우선 각 섬들을 노드로 보고, 주어진 비용 정보를 바탕으로 인..

검색 태그