JAN's History

웹 개발을 하다 보면 SPA(Single Page Application)와 MPA(Multi Page Application)라는 개념을 자주 접하게 되는데요.둘 다 웹 애플리케이션을 만드는 방식이지만, 사용자 경험과 기술 구조에서 큰 차이가 있어요!이 글에서는 두 방식의 개념, 동작 방식, 장단점, 그리고 React를 예시로 한 구현 방식까지 상세하게 살펴보겠습니다 ✅ SPA(Single Page Application) SPA는 말 그대로 하나의 HTML 페이지에서 모든 동작이 이루어지는 방식이에요.브라우저는 최초에 하나의 HTML 파일 (index.html)과 필요한 자바스크립트 번들을 서버로부터 받아오고, 이후에는 사용자의 동작(클릭, 이동 등)에 따라 필요한 컴포넌트를 클라이언트에서 동적으로 렌더..

프론트엔드 프로젝트를 하다 보면 npm run build 혹은 yarn build 같은 명령어를 자주 만나게 되는데요!프론트엔드 개발을 하다 보면 npm run build 같은 명령어를 자주 접하게 됩니다.그리고 그 결과로 생성되는 dist/ 폴더, VITE_APP_MODE, NODE_ENV=production 같은 설정도 나오죠..이게 도대체 뭘 의미하고, 왜 필요한 걸까요?!(처음 개발을 시작할 때에는 이 "build"가 도대체 뭘 하는 명령어인지, 왜 필요한지 궁금했었거든요)오늘은 프론트엔드 개발에서 build의 진짜 의미와 역할, 그리고 번들러의 개념, 개발용 vs 배포용의 차이까지 알기 쉽게 정리해보겠습니다! 1. 개발 중: 코드가 복잡한 이유개발할 땐 우리가 TypeScript, 최신 Java..

1. 브라우저의 기본 렌더링 방식우리가 웹사이트를 만들 때 흔히 사용하는 세 가지 언어가 있어요: HTML, CSS, JavaScript.HTML은 웹페이지의 뼈대(구조)를 만들어요.CSS는 그 뼈대에 색이나 크기 같은 꾸밈(스타일)을 입혀줘요.JavaScript는 웹페이지를 움직이게 해주는 역할을 해요 (예: 버튼 클릭 시 반응하기)렌더링이란?렌더링이란, 이 HTML, CSS, JS로 작성된 코드들을 화면에 실제로 보이게 그려주는 과정을 말해요. 이때 브라우저는 다음과 같은 순서를 따릅니다: HTML 파싱 → DOM 생성HTML을 읽어들이고, 웹페이지의 구조를 객체 형태로 바꿔서 DOM(Document Object Model)이라는 트리를 만듭니다.CSS 파싱 → CSSOM 생성CSS도 마찬가지로 읽어..

🌐 1. HTTP란?HTTP는 인터넷에서 웹페이지나 데이터를 주고받는 약속(프로토콜)입니다.예를 들어:너가 브라우저에서 http://naver.com 이렇게 입력하면브라우저가 서버에 “페이지 줘~” 라고 요청서버가 “자, 여기 있어” 하면서 HTML 문서를 보냄그냥 그렇게 "요청하고 응답하는 구조"를 HTTP 프로토콜이라고 불러요.2. HTTP의 문제점HTTP는 데이터가 암호화되지 않고 그냥 평문으로 오고 가요누가 중간에서 엿보면:로그인 아이디, 비밀번호카드 정보개인정보다 보일 수 있습니다… 😨3. HTTP의 문제점을 해결한 것이 HTTPSHTTPS = HTTP + S(Secure) 즉, HTTP에 보안(암호화)을 추가한 게 HTTPS 입니다.기존 HTTPS의 S란 Secure이라는 보안을 나타내며 ..

🌐 웹 서버(Web Server)란?웹 서버는 정적 콘텐츠를 처리하는 역할을 해요.예를 들어, 사용자가 브라우저에서 웹페이지를 요청하면,웹 서버는 그 요청을 받아서 HTML, CSS, 자바스크립트, 이미지 같은 변하지 않는 파일을 그대로 클라이언트에게 전송합니다.즉, 웹 서버는 요청받은 파일을 그대로 응답해주는 역할이라고 볼 수 있어요.대표적인 웹 서버로는 Nginx, Apache가 있습니다.💾 WAS (Web Application Server)란?WAS는 동적 콘텐츠를 처리하는 서버입니다.즉, 단순히 파일을 보내는 게 아니라,사용자의 요청에 따라 비즈니스 로직을 실행하고, 데이터베이스에 접근해서 결과를 만들어내는 역할을 합니다.예를 들어, 사용자가 "내 주문 내역 보여줘"라고 요청하면,WAS는 DB..

웹 개발을 하다 보면 단순히 코드를 짜는 것뿐만 아니라, 배포 과정도 중요한 부분이인데요. 하지만 처음 접하면 "도대체 이걸 어떻게 배포하지?"라는 고민이 들 수밖에 없죠..ㅠㅠ 특히 도커, 쿠버네티스, 컨테이너 같은 용어들이 많이 등장하는데, 총 정리 시간을 가져보려고 합니다!1. 웹 애플리케이션 배포란?웹 개발을 했다면, 내 로컬에서만 실행되는 코드가 아니라 누구나 접속할 수 있는 형태로 배포해야 해요.배포를 하기 위해서는 크게 다음과 같은 요소들이 필요하답니다. 애플리케이션 코드 (백엔드 & 프론트엔드)데이터베이스 (DB) - MySQL, PostgreSQL, MongoDB 등서버 (웹 서버 & API 서버) - Nginx, Apache, Express.js 등도메인 및 네트워크 설정 - DNS, ..

최근 AI 챗봇이나 검색 서비스에서 RAG(Retrieval-Augmented Generation, 검색 증강 생성) 라는 개념이 자주 언급되고 있어요. 특히 GPT 같은 생성형 AI의 한계를 보완하는 방법으로 주목받고 있는데요. 오늘은 RAG가 무엇인지, 왜 중요한지, 그리고 실제로 어떻게 사용되는지 알아보겠습니다!RAG란 무엇일까?RAG는 간단히 말해서 "검색(Retrieval)과 생성(Generation)을 결합한 AI 방식" 이에요.일반적인 GPT 모델은 학습된 데이터만으로 답변을 생성하는데, 여기엔 두 가지 문제가 있어요.최신 정보 부족 – AI가 학습한 이후의 정보는 반영되지 않음할루시네이션(Hallucination, 환각) – AI가 없는 정보를 만들어내는 문제👉 이를 해결하기 위해 외부 ..

요즘 IT 업계에서 MSA(Microservices Architecture, 마이크로서비스 아키텍처) 라는 말을 많이 들어봤을 거예요. 기존의 모놀리식 아키텍처와 비교하면서 장점이 많다고 하는데, 도대체 뭐가 그렇게 좋은 걸까요?모놀리식 아키텍처 vs. 마이크로서비스전통적인 웹 서비스 구조는 하나의 커다란 애플리케이션으로 개발되는 모놀리식 아키텍처 방식이었어요. 모든 기능이 한 프로젝트에 담겨 있어서 유지보수가 어렵고, 새로운 기능 추가나 배포 과정에서 전체 서비스에 영향을 미칠 수 있었죠.반면 마이크로서비스 아키텍처(MSA) 는 애플리케이션을 여러 개의 독립적인 서비스로 쪼개서 개발하는 방식이에요. 예를 들어, 쇼핑몰을 만든다고 하면 "상품 관리", "결제", "회원" 기능을 각각 독립적인 서비스로 나..