JAN's History

최근 혼자서 사이드 프로젝트를 하고 있는데 SvelteKit를 사용하기로 했다.이유는 SSR를 사용해보고 싶었기 때문인데, 내 프로젝트는 화면도 적고 정~말 단순한 프로젝트라서 CSR를 할 필요가 없다고 느꼈고, SEO가 더 중요했기 때문이다.SvelteKit를 처음 사용해보기도 하고 CSR만 항상 사용해봤던지라 SvelteKit에서 SSR이 어떻게 동작하는지 알아보고자 정리해본다!먼저 SvelteKit을 처음 프로젝트에 시작하면 이렇게 routes에 +layout, +page.svelte가 보인다.SvelteKit의 파일 기반 라우팅SvelteKit은 파일 기반 라우팅과 통합 서버를 통해 SSR을 자동으로 처리한다.위 +layout은 React에 App.svelte처럼 공통 컴포넌트를 렌더링해야할 때 ..

which node​---@DESKTOP-TR7M33V MINGW64 /c/Users/sifvg/Documents/learning$ npx sv create my-project┌ Welcome to the Svelte CLI! (v0.9.13)│◇ Which template would you like?│ SvelteKit minimal│◇ Add type checking with TypeScript?│ Yes, using TypeScript syntax│◆ Project created│◇ What would you like to add to your project? (use arrow keys / space bar)│ none│◇ Which package manager do you wan..

1. Fast-foward mergemaster 브랜치에서 dev1이 분기해 나가는 지점(commit), 즉 두 브랜치가 공통으로 가지고 있는 commit을 base라고 한다. 그런데 master와 dev1이 각각 참조하는 commit은 동일 선상에 위치하고 있다. 이 때 두 브랜치는 Fast-foward 상태에 있다고 한다.fast-forward 관계에 있는 브랜치를 관계에서 git merge 명령을 입력하면 새로운 commit이 생기지 않는다. 뒤에 쳐진 브랜치(여기서는 master)의 참조 개체가 앞서있는 브랜치가 가리키는 개체를 참조하도록 이동할 뿐이다. 마치 브랜치가 점프 하듯 상대 브랜치 참조 값으로 이동하는 모습을 본따서 fast-forward(빨리감기)라고 불린다.2. 3-way merge..

git pull의 2단계 작동 원리git pull이 git fetch + git merge 를 합친 명령어라는걸 알고 계셨나요? 이 원리에 대해서 알아보겠습니다.그 전에 git merge는 언제 사용할까요 ? 먼저 일반적인 git merge의 사용 시나리오에 대해서 알아보겠습니다.개발자는 보통 로컬에서 기능 개발 브랜치(feature-A)를 완료한 후, 이를 메인 브랜치(main)에 합칠 때 git merge를 사용합니다. git checkout main (메인 브랜치로 이동)git pull (혹시 모를 서버의 최신 변경 사항을 먼저 받아옴)git merge feature-A (로컬 feature-A 브랜치를 main에 합침)git push origin main (합쳐진 최종 결과를 서버에 전송)이처럼,..

안녕하세요! Git을 사용하면서 git rebase와 git merge 중 어떤 것을 사용해야 할지 고민해 본 적 있으신가요?이 두 명령어는 브랜치 통합이라는 동일한 목표를 가지고 있지만, 그 과정을 처리하는 방식과 최종적인 커밋 이력(History)에 남는 형태가 완전히 다릅니다.Git 워크플로우를 한 단계 업그레이드하기 위해, 두 명령어의 차이점과 적절한 사용 시점을 자세히 알아보겠습니다. 1. Git Merge: 통합의 흔적을 남기는 병합 융합 (Non-linear History) git merge는 두 브랜치의 변경 사항을 합칠 때, 새로운 커밋(Merge Commit)을 생성하여 통합 과정을 기록합니다.동작 방식feature 브랜치와 main 브랜치가 각각 분기하여 독자적인 커밋을 쌓았을 때, ..

React에서 컴포넌트를 설계할 때 우리는 흔히 UI와 상태 로직 관리를 한 컴포넌트 안에 섞어서 작성합니다.예를 들어 드롭다운 메뉴를 만든다고 하면 버튼 클릭, 메뉴 열고/닫기 상태, 선택된 항목 관리, 렌더링 되는 리스트 아이템과 스타일까지 모두 한 컴포넌트에서 처리하는 경우가 많죠. 이렇게 작성하면 초기에 빠르게 기능을 구현할 순 있지만, 컴포넌트가 커지고 다양한 UI 요구사항이 생기면 재사용성과 유지보수성이 떨어질 수 있습니다. 여기서 등장한 것이 바로 헤드리스(Headless) 컴포넌트 입니다. 헤드리스 컴포넌트는 UI를 직접 렌더링하지 않고, 상태와 동작(로직)만 제공하는 컴포넌트를 말하는데요! 즉, 어떻게 보여줄지는 사용자에게 맡기고 기능과 상태만 제공하는 구조라고 할 수 있습니다.드롭다운 ..

네트워크를 이해하려면 데이터가 어떻게 이동하는지와 각 장치가 어떤 역할을 하는지를 아는 것이 중요합니다.이 글에서는 이더넷 프레임, MAC 주소, NIC, 라우터, 스위치를 중심으로 로컬 네트워크(LAN)와 인터넷 통신 구조를 설명하려고 합니다!NIC(Network Interface Card)와 MAC 주소NIC는 컴퓨터나 서버가 네트워크에 연결될 수 있도록 해주는 하드웨어 장치입니다.NIC는 데이터링크 계층(2계층)과 물리계층(1계층) 역할을 담당하며, 이더넷 프레임이라는 단위로 데이터를 주고받습니다.MAC 주소: NIC마다 고유하게 부여된 48비트 식별자LAN에서 목적지 장치를 식별하는 데 사용IP와 달리 LAN 내부에서만 의미가 있으며, 각 홉마다 변경될 수 있음예: 노트북 NIC MAC = 00:..

개발하는 프로젝트가 멀티프로세스로 떠있는데, Node.js는 싱글 프로세스인데 어떻게 멀티프로세스로 떠있다는거지..? 라는 의문이 생겨서 정리해보았습니다.먼저 멀티 프로세스와 싱글 프로세스의 개념을 알아보겠습니다.싱글프로세스하나의 프로세스에서 모든 작업을 처리합니다.Node.js는 기본적으로 싱글스레드 이벤트 루프 기반이므로, 기본 서버는 싱글프로세스입니다.CPU 코어가 여러 개라도, 기본 싱글프로세스는 한 코어만 사용 가능 → CPU 자원 활용이 제한적입니다.멀티프로세스CPU 코어 수만큼(또는 지정한 수만큼) 프로세스를 띄워 병렬로 작업 처리합니다.Node.js에서는 cluster 모듈이나 throng 같은 라이브러리를 사용해 구현할 수 있습니다.각 프로세스는 독립적인 메모리 공간을 가지므로 메모리 사..