지눅쓰의 입출력 블로그

Latest

• 

  Computer Science 프로세스가 실행되는 가상 메모리에 대해 알아보자 프로그래밍을 하다보면 Stack 메모리, Heap 메모리, 가비지 콜렉터(GC)와 같은 개념을 자연스레 알게된다. 처음엔 이게 그렇게 중요한가? 라는 생각했지만, 코드를 오래 다룰수록 이 개념들이 단순한 암기 대상이 아니라 프로그램이 실제로 어떻게 실행되는지를 이해하는 핵심 개념이라는 걸 깨닫게 된다. 특정 언어의 특징이 아닌, 더 본질적인 배경은 운영체제와 CPU가 제공하는 가상 메모리 구조에 있다. 이번 글에서는 프로그램 실행 시 생성되는 프로세스라는 게 무엇인지부터 프로세스가 왜 직접 RAM을 쓰지 않고 가상 메모리 공간에서 동작하는지에 대해 작성해보려 한다. 프로세스(Process)란?프로세스란 대체 무엇일까?프로세스는 '실행 중'인 프로그램을 의미한다. 조금 더 정확히 말하면, 단순한 코드 파일..

• 

  CSS TailwindCSS v4, 모노레포에서 Arbitrary Value가 적용되지 않았던 이유 Nx 모노레포 환경에서 Tailwind CSS v4와 shadcn/ui를 함께 사용하던 중, 예상하지 못한 스타일 누락 문제가 발생했다. 공유 라이브러리인 libs/example-ui (예시 폴더명)에 정의한 text-[14px], leading-[20px] 같은 클래스가 DOM에서는 정상적으로 출력되는데, 브라우저 개발자 도구의 Styles 탭에는 해당 CSS가 존재하지 않았다. 반면 font-semibold나 px-3같은 클래스는 정상적으로 적용되고 있었다. 처음에는 cva, tailwind-merge, shadcn 설정을 잘못했나 의심했지만, 원인은 Tailwind v4의 동작방식에 있었다. 특히 v4에서 도입된 자동 스캔 방식과 arbitrary value를 제대로 이해하고 있지 못했기 때문에 발..

• 

  React React state 불변성을 자바스크립트 메모리 모델로 이해해보자 React 공식 문서의 'Updating Objects in State'를 읽다가, "객체 state는 왜 직접 바꾸면 안 되지?"라는 의문이 생겼다. 그동안 개발을 하면서 단 한 번도 생각을 해본 적이 없는데 공식 문서를 읽으면서 궁금증이 생겼다. 문서에서는 state를 직접 변경하지 말고 복사본을 만들어 교체하라고 한다. React 코드를 처음 쓸 때부터 당연하듯 그렇게 해왔었는데 왜 지금까지 그 당연함에 의문을 가지지 않았을까. 문서에서는 sate를 직접 변경하지 말고 복사본을 만들어 교체하라고 말하는데, 처음에는 그게 단순한 규칙처럼 보였다. 그런데 실제로는 React는 상태 변화를 어떤 방식으로 판단하길래, 객체나 배열을 제자리에서 바꾸면 문제가 되는가? 라는 더 근본적인 이유가 있었다. 이 질..

• 

  JavaScript HMR기반 디자인 시스템 Vite 플러그인으로 DX 개선하기 현재 진행 중인 프로젝트는 NX 모노레포 기반으로 구축된 작지 않은 규모의 멀티 플랫폼 애플리케이션 개발 프로젝트다. 모노레포 기반으로 진행을 하다보니 프론트엔드 관점에서 ‘디자인 일관성’이 가장 먼저 문제로 다가왔다. 이 상태로 다음 단계로 넘어가면, 같은 버튼이 플랫폼마다 다른 padding 값을 갖거나, 동일한 색상이 여기저기 하드코딩된 채 조금씩 다른 값으로 존재하는 문제가 자연스럽게 누적될 거라고 판단했다. 초기에는 “그때그때 맞추면 되지~” 같은 차마 한숨이 나올 거 같은 마인드로 버틸 수 있지만, 규모가 커질수록 UI 규칙은 점점 파편화되고, 결국 수정 비용과 커뮤니케이션 비용이 기하급수적으로 늘어난다.이 문제를 근본적을 줄이려면, 시각적 규칙을 중앙에서 관리하는 디자인 시스템이 필요하다고 ..

• 

  JavaScript Next.js Soft Navigation과 Hard Navigation과의 차이에 대하여 현대의 웹 프레임워크인 Next.js나 React를 사용하다 보면 가장 먼저 마주하게 되는 경험이 있다. 페이지를 이동했는데 화면 전체가 새로고침되지 않고, 마치 모바일 앱처럼 필요한 부분만 매끄럽게 바뀌는 현상이다.이 스무스한 UX의 중심에는 '소프트 내비게이션(Soft Navigation)'이라는 개념이 자리 잡고 있다. 오늘은 하드 내비게이션과의 차이점부터, 개인적으로 궁금했던 SEO에 미치는 영향까지 작성해보려 한다. 먼저 고전적인 방식인 하드 내비게이션부터 보도록 하자.하드 내비게이션 (Hard Navigation)이란?하드 내비게이션은 브라우저가 페이지를 이동할 때 사용하는 가장 고전적인 방식이다. 하드 내비게이션은 쉽게 말해서 브라우저가 지닌 현재의 기억을 지우는 과정이라고 할 수 있다. 이..

• 

  Infra 소규모 팀 개발자가 IaC 방식을 선택한 이유 나는 자바스크립트 프레임워크로 시스템을 구현하는 개발자를 하고 있다. 설립된지 얼마 되지 않은 법인에서 일을 하고 있는데, 업무가 시스템 구현에서 시스템 설계까지 범위가 넓어지고 있다. 이번에 새로 프로젝트를 시작하는데 본인 포함 두 명이서 설계부터 구현까지 전부 해내야 한다. 팀원은 시스템 기획과 데이터베이스 스키마를 맡았으며, 나머지 인프라 설계부터 구현까지는 내 몫이 되었다. 우리는 Azure Cloud 서비스를 사용하고 있으며, 이번 프로젝트 역시 Azure 기반으로 진행할 예정이다. 문제는 생각보다 규모가 작은 프로젝트가 아니라는 점이다. 인력이 적은 만큼, 인프라 환경을 안정적으로 유지하면서도 빠르게 개발하기 위한 생산성 도구가 필요했다. 이 때문에 인프라를 코드로 관리하는 IaC(Infra..

• 

  JavaScript JavaScript를 더 근본있게 만든 TDZ란? 이전에 스코프 체인에 대한 글을 작성한 적이 있다. 그때 TDZ에 대해 잠깐 언급했었는데, 오늘은 이 개념만 따로 떼어 작성해보려고 한다. TDZ - Temporal Dead Zone (일시적 사각지대)를 한 줄로 표현하면 제목과 같이 표현하고 싶다.TDZ는 자바스크립트를 조금 더 근본있게 만들어주는 장치조금 추상적으로 들릴 수 있지만, 자바스크립트가 단순히 '돌아만 가는 언어'에서 벗어나 논리적인 순서와 일관성을 지키는 언어로 진화했다는 의미를 담아 표현해보았다. TDZ를 제대로 이해하기 위해서는 '호이스팅 (hoisting)'의 동작 방식을 먼저 이해해야 한다. 자바스크립트의 실행 순서는 우리가 눈으로 보는 코드 순서와는 살짝 다르기 때문이다. 이번 글에서는 호이스팅과 TDZ의 관계를 중심으로, 엔..

• 

  JavaScript JavaScript 콜 스택 이해하기 function context_a() { const exe = 1; function context_b() { console.log(exe); const exe = 2; } context_b();}context_a();이 코드를 실행하면 어떤 결과가 나올까? 결과는 바로 "ReferenceError: Cannnot access 'exe' before initialization at ~~~"이라는 에러가 콘솔에 출력된다.콘솔로그가 실행되지 않는 이유는 exe = 1이 context_a의 스코프에 있지만, context_b 안에서도 const exe = 2가 같은 이름으로 선언되어 있기 때문이다. 이때 자바스크립트는 코드를 실행하기 전에 contex..

• 

  JavaScript JavaScript 함수 참조와 함수 호출의 차이 JavaScript와 React를 다뤄본 개발자들은 이런 코드를 본 적이 있을 것이다. 나는 React를 다루면서 했던 실수인데,유저 삭제버튼을 클릭하지도 않았는데 deleteUser가 즉시 실행되어 유저가 삭제된다. 화면이 렌더링되는 순간 유저가 삭제되는 상황이 발생했었다. 아니면 이런 경우도 있다.document.querySelector('.submit-button').addEventListener('click', submitForm());이벤트 리스너를 등록하자마자 폼이 제출되고, 정작 버튼을 클릭했을 때는 아무 일도 일어나지 않는다. 왜 이런 일이 발생할까?바로 함수 참조와 호출의 차이를 이해하지 못했기 때문이다. 오늘은 '참조'와 '호출'의 차이에 대해 작성해보겠다. 함수 참조와 함수 호출J..

• 

  Computer Science 폰 노이만 구조는 과연 완벽할까? IT쪽 대학생이라면 한 번쯤 폰 노이만 구조(Von Neumann Architecture)라는 말을 들어봤을 것이라고 생각한다. 1학년이었나, 2학년때 접하게 되는 개념이며, "현대 컴퓨터의 기본 구조"라고 소개되곤 한다.CPU, 메모리, 입출력 장치로 구성된 단순하고 명료한 시스템.프로그램과 데이터를 함께 메모리에 저장하는 구조이며, CPU가 메모리에서 순서대로 명령을 읽어와 처리한다. 내가 이 내용을 처음 접했을 때는 '오~ 그렇구나~ .....', 그냥 이런 반응이었다. 컴퓨터의 작동 원리를 암기하며 보는 수준이었고, 그 구조가 어떤 의미를 가지는지 혹은 어떤 한계가 있는지는 솔직히 생각해보지 않았다. 그러다 최근 "폰 노이만 구조는 과연 완벽한 구조일까?"라는 생각이 들어 찾아보고 공부한 후 글을..