| 서론안녕하세요, 팡일입니다. 이번 글에서는 Angular CSR 기반 프로젝트에서 특정 페이지만 SSG(Prerender)로 전환한 경험을 정리해보았습니다. 기존 프로젝트는 전체가 CSR 구조로 구성되어 있었기 때문에, 브라우저에서 JavaScript를 실행한 이후에야 화면이 렌더링되는 방식이었습니다. 이로 인해 초기 HTML이 비어 있는 상태로 전달되었고, 특히 SEO가 중요한 랜딩 페이지에서는 크롤링과 초기 렌더링 성능 측면에서 한계를 느끼게 되었습니다. 이를 해결하기 위해 모든 페이지를 SSR로 전환하는 대신, SEO가 중요한 홈 페이지만 SSG로 전환하고, 나머지 페이지는 CSR을 유지하는 전략을 선택했습니다. 이 접근을 통해 초기 렌더링 속도와 SEO를 개선하면서도, 기존 CSR 구조의 단순..

| 서론안녕하세요, 팡일입니다. Angular를 시작하면서 상태는 어떻게 관리할지, 템플릿에서 변수는 어떻게 사용할지, 조건문과 반복문은 어떤 형태로 사용할지에 대해 정리할 필요가 있었습니다. 특히나, Angular의 signal, @if, @for 문법이 더 낯설게 느껴지곤 했습니다. 그래서 이 글에서는 Angular 최신 문법 기준으로 아래 4가지만 딱 잡고 빠르게 정리해보고자 합니다.상태 관리: signal, computed변수 사용: 컴포넌트 변수 + 템플릿 바인딩조건문: @if, @else반복문: @for, track | Angular에서 상태(state) 사용하는 방법1) signal 로 상태 만들기(1) 상태 생성 : Angular에서는 상태를 signal로 관리합니다.readonly c..

| 서론안녕하세요, 팡일입니다. 이번 글에서는 Angular 프로젝트를 처음 시작하는 방법부터, 프로젝트 구조와 기본 동작 흐름까지 한 번에 정리해보려고 합니다. Angular는 React와 비교했을 때 구조가 비교적 정해져 있고, 초기 설정 과정도 포함되어 있기 때문에 처음 접하면 “어디서부터 이해해야 할지” 막막하게 느껴질 수 있습니다. 그래서 이번 글에서는 단순히 프로젝트를 생성하는 방법만 다루는 것이 아니라, 프로젝트 생성 과정에서 등장하는 선택 옵션들의 의미와 폴더 구조, 실행 흐름, 그리고 실제 페이지를 추가하는 방법까지 전체적인 흐름을 한 번에 이해할 수 있도록 구성했습니다. Angular를 처음 시작하시는 분들이나, React 기반에서 Angular로 넘어오시는 분들께 도움이 되었으면 합니..

| 서론let num = '123';console.log(+num); 123을 문자가 아닌 숫자로 출력하려고 하는데, 혹시 위의 코드에서 의문이 드시는 점이 있으신가요? 저는 이 코드를 봤을 때, "문자가 아닌 숫자로 형변환은 어디서하지? +는 왜 있지?"라는 생각이 가장 먼저 들었습니다. 이처럼, 자바스크립트 코드를 보다 보면 변수 앞에 뜬금없이 + 기호가 붙어 있는 것을 본 적이 있을 겁니다. 이것을 Unary Plus(단항 더하기) 연산자라고 부릅니다. 단순히 숫자를 더하는 기호가 아니라, 실전에서는 강력한 형 변환 도구로 사용됩니다. 오늘은 Unary Plus에 대해서 다뤄보려고 합니다. | Unary Plus(+)란 무엇인가?단항 연산자 +는 피연산자 앞에 위치하여 해당 값을 숫자(Numbe..

| 서론안녕하세요, 팡일입니다. 최근 많은 기업들이 MSA(Microservice Architecture)라는 아키텍처를 도입하고 있습니다.특히 대규모 트래픽을 처리하거나 여러 팀이 동시에 서비스를 개발해야 하는 환경에서는 MSA가 하나의 중요한 선택지가 되기도 합니다. 하지만 MSA는 단순히 “요즘 많이 쓰는 아키텍처”라는 이유만으로 도입하기에는 고려해야 할 요소가 많은 구조이기도 합니다. 실제로 많은 서비스들은 처음부터 MSA로 시작하기보다는 모놀리식 아키텍처로 시작한 뒤, 서비스 규모가 커지면서 점진적으로 MSA로 전환하기도 합니다. 따라서 MSA를 이해하기 위해서는 먼저 모놀리식 아키텍처와 어떤 차이가 있는지, 그리고 MSA가 어떤 문제를 해결하기 위해 등장한 구조인지를 함께 이해하는 것이 중요합..

| 서론안녕하세요, 팡입입니다! 최근, 취업 준비를 하면서 백엔드 JD도 살펴보게 되었는데요? 약 80% 기업들이 자주 사용하는 대규모 트래픽 처리에 필수적인 Apache Kafka(아파치 카프카)의 기본 개념을 핵심 위주로 쉽게 풀어서 정리해보려고 합니다. | Kafka란 무엇인가Apache Kafka는 수많은 데이터를 실시간으로 안전하게 주고받기 위해 만들어진 분산 이벤트 스트리밍 플랫폼입니다. 쉽게 말해, 애플리케이션들 사이에서 발생하는 다양한 데이터(이벤트)를 마치 흐르는 강물처럼 끊김 없이 전달하고 저장하는 역할을 합니다. 1) 특징메시지 형태의 통신: 데이터를 '메시지'라는 단위로 주고받으며, 이를 안전하게 저장할 수 있습니다.높은 처리량과 확장성: 데이터 양이 갑자기 늘어나도 서버를 늘..

| 서론안녕하세요, 팡일입니다. 이전 글에서는 React + Node.js 기반의 풀스택 모노레포 환경을 구축하는 과정을 정리했고,이번 글에서는 그 환경 위에서 실제로 데이터를 저장하고 조회할 수 있는 CRUD 기능을 구현해보겠습니다. 전체 데이터 흐름은 다음과 같습니다.React ↓Express API ↓Prisma ↓SQLite Database 간단한 Todo API를 만들어 React에서 데이터를 저장하고 조회해보겠습니다. | 1단계 : Prisma 설치1) Prisma ORMNode 서버에서 데이터베이스를 사용하기 위해 Prisma ORM을 사용합니다. Prisma는 TypeScript 환경에서 매우 사용하기 편한 ORM입니다.타입 자동 생성DB 마이그레이션 지원직관적인 API 2) 설치: ..

| 서론안녕하세요, 팡일입니다. 보통 웹 개발을 하면 프론트엔드 프로젝트와 백엔드 프로젝트를 각각 관리해왔었는데요? 혹시 모노레포라고 들어보셨나요? 모노레포란?: 두 개 이상의 프로젝트, 애플리케이션 또는 라이브러리 코드를 하나의 버전 관리 저장소(Repository)에서 통합하여 관리하는 개발 전략 프론트엔드와 백엔드를 각각 관리할 수도 있지만, 최근에는 모노레포(monorepo) 구조를 사용하는 경우가 많다는 점을 알고만 있었고, 실제로 세팅을 해본 경험은 없었습니다. 그러나, 드디어 환경 세팅에 성공하였고, 보다 쉽게 세팅하는 과정을 공유하고자 포스팅을 작성하게 되었습니다. 1) 모노레포의 장점본격적으로 시작하기에 앞서, 모노레포를 사용하면 다음과 같은 장점을 한 번 살펴보고 싶은데요?프론트엔드..

| 오늘 할 일1) 성장(1) 리트코드 풀기 (9, 13)(2) 코어 자바스크립트 포스팅 작성하기 2) 취준(1) 포폴 다듬을 부분 찾기(2) 기업 알아보기(3) 기업 지원하기(4) 잡코리아 이력서 작성하기 3) 에스드럼(1) 정기 미팅(2) 채린 공유사항 확인하기 4) 총학(1) 개발자 온보딩 5) AMJ(1) 오멘토 질문하기 | 오늘 일정1) 11시 - 에스드럼 미팅2) 15시 - 치과3) 17시 - 총학 개발자 온보딩 | 드는 생각어제는 생각보다 할 일을 잘 해내지 못했다. 그리고 새벽 6시가 되어서야 잠들었다. 밤낮이 바뀐 게 큰듯 하다. 그래서 오늘은 조금 부지런히 하루를 시작하려고 했는데, 11시에 에스드럼 미팅을 마친 뒤에, 피곤한 몸을 핑계 대면서 계속 침대에 누워 있었다. 오후 ..

| 서론명절이면 온 가족이 모여 즐기던 윷놀이, 하지만 막상 판을 벌이려 하면 준비 과정이 생각보다 번거로울 때가 많았습니다. 종이에 말판을 직접 그리거나, 말을 대신할 바둑알이나 동전을 찾고, 게임이 진행되는 동안 말의 위치를 관리하는 일까지 생각보다 손이 많이 가는 과정이었습니다. “말판을 넘기다가 말이 섞여버렸네…”“이 경로로 가는 게 맞나? 지름길이 어디였지?” 이런 사소한 불편함들이 반복되다 보니, 게임 자체의 재미보다는 판을 관리하는 데 더 많은 에너지를 쓰고 있다는 느낌이 들었습니다. 그래서 이런 생각이 들었습니다. “윷은 직접 던지는 손맛을 그대로 살리면서, 말판만큼은 디지털로 관리할 수 없을까?”“디지털 기술을 활용하면 게임의 몰입감도 더 높일 수 있지 않을까?” 이런 고민을 계기로 전..