Beyond the noise.
Mac이 갑자기 느려지거나 팬이 시끄럽게 돌 때, 우리는 보통 ‘활성 상태 보기(Activity Monitor)’를 켭니다. 하지만 터미널을 사용하면 GUI를 켜는 번거로움 없이 훨씬 빠르고 깊이 있게 시스템의 현재 상태를 진단할 수 있습니다. 이번 포스팅에서는 터미널 명령어를 통해 CPU, 메모리, 디스크, 네트워크 등 Mac의 핵심 자원을 실시간으로 모니터링하는 방법을 알아보겠습니다. ## CPU와 메모리: top 과 htop top은 … Read more
macOS를 사용하면서 개발 도구나 유용한 터미널 유틸리티를 설치할 때, 웹사이트를 일일이 찾아다니며 .dmg 파일을 다운로드하고 설치하는 과정이 번거롭지 않으셨나요? 터미널을 사랑하는 파워 유저라면, 이 모든 과정을 명령어 한 줄로 해결할 수 있습니다. 바로 Homebrew를 통해서 말이죠. 이번 포스팅에서는 macOS 터미널 활용의 첫걸음이자 필수 관문인 Homebrew가 무엇인지, 그리고 어떻게 당신의 Mac을 더욱 강력하게 만들어주는지 알아보겠습니다. ## … Read more
순수 JavaScript(Vanilla JS)와 DOM API만으로도 동적인 웹 페이지를 만들 수 있지만, 애플리케이션의 규모가 커지고 복잡해지면 상태 관리, 컴포넌트 재사용, 렌더링 최적화 등에서 어려움을 겪게 됩니다. JavaScript 프레임워크와 라이브러리는 이러한 복잡한 문제들을 해결하고, 개발자가 더 효율적이고 구조화된 방식으로 애플리케이션을 구축할 수 있도록 도와주는 강력한 도구들입니다. 현재 가장 인기 있는 3대장을 간략하게 소개합니다. 🚀 1. React: 페이스북이 … Read more
웹 페이지에서 버튼을 클릭하거나 키보드를 누르는 등 사용자의 모든 행동은 **이벤트(Event)**로 감지됩니다. JavaScript는 addEventListener를 통해 이러한 이벤트를 처리하는데, 하나의 이벤트가 발생했을 때 여러 요소가 중첩되어 있다면 어떤 순서로 이벤트가 전달될까요? 이 이벤트 전파 방식을 이해하는 데 핵심적인 개념이 바로 **이벤트 버블링(Bubbling)**과 **캡처링(Capturing)**입니다. 👂 1. 이벤트 흐름의 3단계 DOM에서 이벤트가 발생하면, 이벤트는 다음과 같은 3단계의 흐름을 … Read more
JavaScript에서 ‘값이 없음’을 나타내는 두 가지 원시 타입이 있습니다: null과 undefined. 두 값 모두 ‘비어있음’을 의미하는 것처럼 보이지만, 그 의미와 사용되는 맥락에는 명확한 차이가 존재합니다. 이 차이를 이해하는 것은 코드의 의도를 명확히 하고 잠재적인 버그를 줄이는 데 도움이 됩니다. 🤔 1. undefined의 의미 undefined는 “값이 할당되지 않은 상태”를 의미합니다. 변수를 선언만 하고 아무 값도 할당하지 … Read more
웹 애플리케이션을 사용하다 보면 다크 모드 설정, 장바구니 목록, 자동 로그인 정보 등 사용자의 선택이나 데이터를 브라우저에 저장해야 할 때가 많습니다. 이를 위해 웹 스토리지 API는 **로컬 스토리지(Local Storage)**와 **세션 스토리지(Session Storage)**라는 두 가지 간단한 저장소를 제공합니다. 둘 다 키-값(Key-Value) 쌍으로 데이터를 저장하지만, 데이터의 생명 주기에서 결정적인 차이가 있습니다. 💾 1. 로컬 스토리지 (Local Storage) … Read more
웹 애플리케이션이 서버와 데이터를 주고받는 것은 핵심적인 기능입니다. 과거에는 XMLHttpRequest (XHR)라는 다소 복잡한 객체를 사용했지만, 최신 브라우저 환경에서는 Fetch API가 그 자리를 대체하며 표준으로 자리 잡았습니다. Fetch API는 Promise를 기반으로 동작하여 async/await와 함께 사용할 때 비동기 네트워크 요청을 훨씬 더 간결하고 직관적으로 처리할 수 있게 해줍니다. 🌐 1. 기본적인 GET 요청 보내기 fetch() 함수는 네트워크 … Read more
ES6는 JavaScript에 많은 편의 기능을 추가했으며, 그중에서도 **구조 분해 할당(Destructuring Assignment)**과 **전개 문법(Spread Syntax) / 나머지 문법(Rest Parameters)**은 코드의 양을 줄이고 가독성을 획기적으로 높여주어 거의 모든 현대 JavaScript 코드에서 사용되고 있습니다. 이 강력한 문법들을 알아보고 코드에 적용해 보세요. 1. 구조 분해 할당 (Destructuring Assignment) 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 … Read more
애플리케이션의 규모가 커질수록 코드를 여러 파일로 분리하여 관리하는 ‘모듈화’는 필수적입니다. 과거 JavaScript에는 공식적인 모듈 시스템이 없어 CommonJS(Node.js), AMD 등 다양한 방식이 사용되었습니다. ES6(ECMAScript 2015)부터는 언어 자체에 ES6 모듈(ESM) 시스템이 표준으로 도입되어, 브라우저와 Node.js 환경 모두에서 일관된 방식으로 코드를 모듈화할 수 있게 되었습니다. 1. 모듈의 핵심: export와 import ES6 모듈은 각 파일이 독립적인 스코프를 가지는 모듈 … Read more
“JavaScript는 싱글 스레드(Single-threaded) 언어다”라는 말을 들어보셨을 겁니다. 이는 한 번에 하나의 작업만 처리할 수 있다는 의미입니다. 하지만 실제 웹 애플리케이션에서는 사용자의 클릭을 처리하면서 동시에 서버에서 데이터를 받아오는 등 여러 작업이 동시에 일어나는 것처럼 보입니다. 어떻게 이것이 가능할까요? 그 비밀은 바로 JavaScript 엔진 외부의 환경(브라우저, Node.js)과 상호작용하는 **이벤트 루프(Event Loop)**와 동시성 모델에 있습니다. 1. JavaScript 엔진의 … Read more