전체 글 검색 결과

해당 글 143건

Next.js 15 instrumentation이 프로덕션에서 안돌아간다면

Next.js 앱에서 서버 시작 시점에 딱 한 번만 실행되는 초기화 로직이 필요했다. 데이터베이스 연결, 캐시 설정, 외부 서비스 연결 같은 것들 말이다. 공식 문서를 보니 instrumentation.ts 파일을 만들면 앱 시작 시점에 한 번 돌아가는 기능이 있었고 register 함수를 export하면 된다고 나와있었다.// instrumentation.tsexport async function register() { console.log('서버 초기화 중...'); // 초기화 로직}개발 환경에서는 잘 되더라. npm run dev 하면 콘솔에 로그도 잘 찍히고, 초기화도 정상적으로 실행됐다. 그런데 프로덕션 빌드 후 실행하니까 아무것도 안 된다. npm run buildnpm start콘솔에 ..
🌕 Front/⚛️ React JS 2025. 6. 20. 22:17

Elasticsearch 대용량 데이터 파이프라인 구축기 - 수십억 건 데이터를 실시간으로 처리하는 법

문제 상황어느 날 갑자기 팀원이 찾아와서 말했다. "지금 로그에서 사용자 선호 국가 데이터를 시각화하는데, 5개를 고른 유저와 1개만 고른 유저의 데이터가 같이 쌓이고 있어서 왜곡이 생기는 것 같아요. 국가별로 광고 캠페인을 집행해야하는데, 빨리 확인해볼 수 있을까요?" 맞는 말이었다. '한국'만을 선호하는 사용자와 5개 국가 중 하나로 한국을 포함시킨 사용자의 데이터가 동일한 가중치로 집계된다면, 실제 선호도를 제대로 반영하기 어려울 것이다. "그럼, 선택한 개수에 따라 가중치를 계산해서 필드로 제공해드릴까요? 예를 들어 1개 선택하면 1.0, 5개 선택하면 각각 0.2씩 부여하는 식이면 정확하진 않아도, 지금보다는 훨씬 정확할 거에요." 팀원도 좋은 아이디어라고 동의하며 바로 현재 상황을 분석하기..
🚛 DevOps 2025. 6. 19. 17:41

Docker COPY에서 node_modules 충돌 해결하기

turborepo + pnpm 환경을 도커 설정을 수정하다가 흥미로운 에러를 만났다.ERROR: failed to solve: cannot copy to non-directory: /var/lib/docker/overlay2/.../app/apps/chat/node_modules/typescriptnode_modules 관련 충돌인 건 분명한데, git에는 node_modules가 없는 상황이라 원인 파악이 필요했다. 상황 분석현재는 캐시 최적화를 위해 다음과 같은 Dockerfile 구조를 사용하고 있었다.COPY apps/chat/package.json ./apps/chat/package.jsonRUN pnpm install COPY apps ./apps # 여기서 에러 발생git 상태를 확인해..
🚛 DevOps/🐳 Docker 2025. 6. 2. 19:05

Tailwind v4 도입하다가 monorepo 빌드 시스템을 뜯어고친 썰

Currency 앱에 새로 나온 Tailwind v4를 적용해보고 싶었다. 기존 앱들은 v3를 쓰고 있었는데, "각각 따로 빌드하니까 상관없겠지"라고 생각했던 게 착각이었다. PostCSS 설정이 충돌하면서 빌드가 망가지기 시작했고, 이를 해결하려다 보니 결국 전체 monorepo 구조를 뜯어고치게 됐다. 일단 Tailwind v4 적용했던 것Tailwind v4의 새로운 CSS 엔진이 궁금해서 Currency 앱에 적용한 코드다. 공식 문서를 보니 설정 방법이 꽤 달라져 있었다.// apps/currency/vite.config.tsimport tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwin..
🌕 Front/⚛️ React JS 2025. 6. 1. 19:01

모듈 시스템을 알아보자. 모듈은 동기적 호출일까? Require vs Import

모듈?관련된 코드들을 하나의 코드 단위로 캡슐화한 하나의 파일을 말한다.  CommonJS (CJS)Require 키워드를 사용한 모듈 시스템을 말한다.Node.js와 구버전의 브라우저에서 주로 사용한다.module.exports와 exports 두 가지 방법으로 모듈을 내보낼 수 있다 예시1. module.exports// arithmetic.jsclass Arithmetic { constructor(a, b) { this.a = a; this.b = b; } add() {return this.a + this.b;} subtract() {return this.a - this.b;}}; module.exports = Arithmetic;// main.jsco..
🌕 Front/🌱 Vanilla JS 2024. 10. 26. 17:34

자바스크립트 런타임과 엔진의 차이점: 이벤트 루프는 어디에?

자바스크립트 엔진? 런타임? 이 두 용어의 차이에 대해 햇갈리시는 분이 계실겁니다. 이 글에서는 자바스크립트의 엔진과 런타임을 비교해보고 이벤트 루프의 역할, 추상적 구조를 살펴보겠습니다.   1. 엔진역할ECMAScript(ECMA-262 표준)코드를 파싱하고 실행한다.메모리 관리, 가비지 컬렉션을 수행한다.구성요소파서: 소스 코드를 AST(Abstract Syntax Tree)로 변환.컴파일러: AST를 최적화된 바이트코드 또는 네이티브 코드로 컴파일.가상 머신 (VM): 컴파일된 코드를 실행. JIT(Just-In-Time) 컴파일링을 통해 성능 최적화.주요 엔진V8: Google Chrome, Node.js에 사용SpiderMonkey: Mozilla Firefox에 사용JavaScriptCore..
🌚 Back/🧩 Node.js 2024. 10. 24. 20:41

Node.js 비동기 처리 모델 이해하기 - 실시간 대규모 처리에 적합한 이유

Node.js는 싱글 스레드에서 동작하지만, 놀랍게도 동시성과 효율적이고 빠른 응답 시간을 유지할 수 있는 비동기 처리 모델을 제공합니다. 오케스트라의 지휘자처럼 Node.js는 메인 스레드에서 비동기 작업을 관리하고, 백그라운드에서 실행되는 I/O 작업(네트워크 요청, 파일 시스템 작업)들이 완료되면 그 결과를 처리하는 방식으로 작동하죠. 이 글에서는 Node.js의 비동기 처리 모델과 이를 가능하게 하는 libuv 라이브러리의 역할을 설명하고, 대규모 데이터를 처리할 때 스레드 풀과 외부 API 호출이 어떻게 동작하고 성능을 최적화하는지 알아보겠습니다.   1. Node.js의 이벤트 루프와 비동기 논블로킹 I/O 모델Node.js는 단일 스레드 기반의 자바스크립트 런타임이지만, 모든 작업을 직접 처..
🌚 Back/🧩 Node.js 2024. 10. 2. 15:16

Software Design Decoded: 66 Ways Experts Think 후기

짤막한 느낀 점도대체 전문가들은 어떤 식으로 사고하는지 궁금했다. 이 책을 읽으면서 66가지 주제로 사고방식을 엿볼 수 있었다. 카테고리별로 잘 나뉘어 있었고 문단이 길지 않아 읽기도 수월했다. 특히 좋았던 점은 내가 어떤 부분에서 잘하고 있는지와 부족한지가 뚜렷하게 구분되니깐 어디서 헤매고 있는지 진단하기 좋았다. 부족한 부분은 사실, 강점에서부터 비롯된 '트레이드오프' 현상인데 이를 고칠 수가 있나?라는 의문이 들기도 했다. 약점을 보완해 나가며 균형 잡힌 전문가가 될 것인지, 아니면 강점을 더욱 발전시켜 개성 넘치는 전문가가 될 것인지 고민하기도 했다. 그렇게 내린 결론은 "전문가"라는 직업 자체가 균형 잡힌 역량을 갖추는 것이 중요하다고 생각하기 때문에, 전자를 선택하고자 한다. 후자는 개인적인 ..
📚 Theory/🛖 Architecture 2024. 9. 8. 15:52

브라우저 내의 자바스크립트 동작 원리

1. JavaScript Runtime 구성 요소브라우저 내의 JavaScript *런타임은 크게 JavaScript 엔진과 웹 API로 구성되어있다. 그리고 여기에 테스크 큐와 이벤트 루프라는 개념 또한 존재한다. 이를 통해 싱글 쓰레드 기반의 프로그래밍 언어라 불리는 JavaScript도 비동기적으로 코드를 실행시킬 수 있게 된다. *런타임: 프로그래밍 언어로 작성된 코드가 구동되는 환경 2. JavaScript 엔진JavaScript 코드를 읽고, 해석, 실행을 담당하는 인터프리터이다. 쓰레드 하나로만 동작하기 때문에 스택 영역도 단 하나만 사용하게 된다. 이로 인해 하나의 함수가 실행이 끝나기 전에는 다른 함수가 실행될 수 없는 "Run to Completion" 특성을 가지게 된다.JavaScr..
🌕 Front/🌱 Vanilla JS 2024. 5. 5. 17:09

자바스크립트 this바운딩에 대해 알아보자

대전제this는 함수를 호출할 때 결정된다.함수를 함수로서 호출할 경우에는 this가 지정되지 않는다.this에는 호출한 주체에 대한 정보가 담긴다. 실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다.function func1() { console.log(this);}obj ={ func1:func1,}func1(); // Windowobj.func1() // obj 메서드는 객체의 메서드로서 호출할 경우에만 메서드로 동작하고, 그렇지 않으면 함수로 동작한다.this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지)는 중요하지 않다.오직 해당 함수를 호출하는 대상, 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건..
🌕 Front/🌱 Vanilla JS 2024. 4. 20. 23:30

[책] TCP/IP가 보이는 그림책

들어가며 현역 시절 연등하며 읽었던 책, 복습겸 정리해보자. 주제 TCP/IP는 인터넷을 사용할 수 있도록 컴퓨터 네트워크를 구현하는 통신프로토콜이다. 목차 1. 용어 설명 2. TCP/IP 개요 3. 에플리케이션층 4. 트랜스포트층 5. 네트워크층 6. 데이터 링크층, 물리층 7. 라우팅 1. 용어 설명 네트워크 케이블 등을 연결해, 다양한 데이터를 주고받을 수 있는 상태 컴퓨터, 장비, 서버, 기기 등을 연결하여 정보를 교환할 수 있도록 하는 시스템 LAN, WAN, 인터넷 네트워크 규모에 따라 나눌 수 있다. 프로토콜 컴퓨터 네트워크에서 정보를 주고받을 때 사용되는 통신 규칙 정보를 전송할 때 어떤 형식 및 순서로 전송할 것인지, 언제 전송을 중단할 것인지 등을 정의 이를 통해 정보를 원활하게 송수..
📚 Theory/🧑🏻‍💻 CS 2023. 2. 3. 19:58

[GIT] git config 모음

Git Config git config --global -e # git config 파일 수정 git config --global core.editor "code" # vscode로 수정하기 git config -h # help option git의 global config 파일은 ~/.gitconfig에 있다. 1. git pull 할 때 rebase를 기본값으로 git config --global pull.rebase true Pull시 rebase 자동 설정: http://theeye.pe.kr/archives/1980 Git Pull시에 자동으로 Rebase적용하기 | 아이군의 블로그 이번글은 git pull시에 rebase를 사용할것인지 말것인지에 대한 이야기는 아닙니다. 프로젝트를 진행하다 보..
🚛 DevOps/🟥 GIT 2022. 6. 9. 18:20

[CDN]: 사용자와 가까운 곳에서 제공하자

CDN 이란? (Contents Delivery Network) - 지리적, 물리적으로 떨어져있는 사용자에게 컨텐츠 제공자의 컨텐츠를 더 빠르게 제공할 수 있는 기술 - "세계에 널리 퍼진 중계서버들의 집합" - 대용량 또는 사용자의 잦은 요청이 있는 컨텐츠들을 Cache 서버에 분산 배치하여 컨텐츠의 전송 중 발생하는 트래픽 집중 & 병목현상 및 데이터 손실을 해결하기 위해 등장한 컨텐츠 전송 기술 - CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. CDN은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달한다. CDN이 필요한 이유 S3 와 같은 "일반적인..
🌕 Front/📚 Theory 2022. 5. 14. 16:19

[CSS] 마진 상쇄 (Margin collapsing) 현상 이해하기

1. 마진 상쇄란? Block 요소들의 상하 마진이 겹칠 때, 한 쪽의 마진 값만 적용하는 렌더링 규칙 2. 마진 상쇄가 일어나는 3가지 상황 1) 인접 형제간 겹침 마진이 더 큰 값 (≥) 으로 랜더링이 일어난다. 2) 빈 요소의 상하 마진간 겸침 빈 요소란? block 요소의 height이 0인 경우를 말함 height, padding, border 상하로 늘어나는 프로퍼티 값이 없는 경우 내부에 inline 컨텐츠가 없는 경우 빈 요소 + 인접 박스들 간에 마진 겹침이 연쇄적으로 일어나는 경우, 상쇄가 여러번 일어난다. 마크업을 진행할 때, 빈 요소를 만들어놓는 상황이 있으니 꼭 인지해두자. 빠른 레이아웃 구성을 위해, div로 영역을 구분할 경우 나중에 append 하기 위해 빈 컨테이너를 만들어..
🌕 Front/✨ CSS 2022. 4. 19. 09:58

[Python] 파일 다루기 (JSON, CSV)

1. 파일 읽기 open() 함수를 이용해 파일을 불러와 변수에 저장한다. read() 메서드를 이용해 파일을 읽을 수 있는 형태로 변환한다. close() 메서드를 이용해 사용하지 않는 파일을 닫아 메모리를 절약한다. # 파일 열기/닫기 file = open('data.txt') content = file.read() file.close() with open() as file: 구문을 활용해 indent 범위가 끝나면 파일이 자동적으로 닫히게 한다. # 파일 자동으로 닫기 with open('data.txt') as file: content =file.read() 줄 단위로 읽기 with open('data.txt') as file: for line in file: print(line) 두번째 인자에 ..
🐍 Python 2022. 4. 1. 19:37

HTTP / HTTPS 동작 원리를 살펴보자

1. 어떤 보안 위험이 있다는 거지? 첫 째: 개인정보가 담긴 정보를 서버로 보낼 때, 어떤 놈이 갈취해갈 수 있음 둘 째: 피싱 사이트에 접속해 개인 정보를 갈취해갈 수 있음 HTTPS는 사이트에 보내는 정보를 제 3자가 보지 못하게 하며, 접속한 사이트가 믿을 만한 사이트인지 알려준다. 2. HTTPS를 이해하려면 1) 대칭키 방식: 암호화에 쓰이는 키와 복호화에 쓰이는 키가 동일한 기법 클라이언트와 서버가 대칭키 방식으로 통신을 한다면 클라이언트, 서버 모두 키를 가지고 있어야한다. 하지만 애초에 클라이언트에게 키를 전달하는 것 자체도 위험하며, 또한 클라이언트의 스코드는 누구든지 열어볼 수 있으므로 가지고 있기도 굉장히 위험하다. 즉, 원거리에서 대칭키를 안전하게 전달하는 것이 매우 어렵다. 2)..
🌕 Front/📑 Web Theory 2022. 3. 31. 22:40

[DNS] 동작 원리를 꼼꼼하게 살펴보자!

1. Domain 네트워크 통신에는 고유의 주소(IP 주소)가 필요하다. 이때 IP는 사람이 이해하고 기억하기 어렵기 때문에, 각 ip에 이름을 부여했고 이를 도메인이라고 한다. 예를 들어 142.250.207.14의 도메인은 google.com이다. 2. DNS (Domain Name System) DNS는 도메인을 입력하면 IP 주소를 변환해준다. 정확히는, 인터넷 도메인 주소 체계로 TCP/IP의 응용 계층에서, www.example.com과 같은 주 컴퓨터의 도메인 이름을 192.168.1.0과 같은 IP 주소로 변환하고, 라우팅 정보를 제공하는 분산형 데이터베이스 시스템이다. 쉽게 말해, 도메인에 연결된 서버의 주소를 찾아주는 역할을 하며 도메인 서버, 네임 서버라고도 불린다. 3. DNS 서버..
🌕 Front/📑 Web Theory 2022. 3. 31. 21:12

[React] 깜빡임 현상 해결 (useLayoutEffect, API호출)

분명 다 만들었지만, 보기엔 흉한 깜빡임 현상!! 이 글에선 두 가지 깜박힘 현상에 대해 다룰 것이다. 1. useEffect 호출에 의한 깜빡임 2. API 호출에 의한 깜빡임 1. UseEffect 호출에 의한 깜빡임 const [duckUrl, setDuckUrl] = useState(''); useEffect(() => { setDuckUrl('/duck.png'); }, []); Hook Flow에 의하면 DOM 배치 → 페인트 작업 → useEffect 호출 순서를 따른다. 따라서 useEffect로 이후 페인트 작업이 한 번 더 이루어짐에 따라(리페인트) 깜빡이는 현상이 나타난다. 2. UseLayoutEffect 을 통한 해결 const [duckUrl, setDuckUrl] = useSt..
🌕 Front/⚛️ React JS 2022. 3. 30. 13:02