반응형
Development
디버거(Debugger) 브레이크 포인트(Break Point)의 구현 원리
디버거(Debugger) 브레이크 포인트(Break Point)의 구현 원리
2026.02.270. 요약 디버거의 소프트웨어 브레이크 포인트는 메모리 패칭(Memory Patching)과 CPU의 예외 처리 메커니즘을 이용해 구현합니다.유저가 특정 라인에 브레이크를 걸면, 해당 주소의 원래 기계어 1바이트를 디버거 메모리에 백업하고, 그 자리를 0xCC (INT 3) 명령어로 덮어씁니다.타겟 프로세스의 스레드(CPU)가 실행되다 0xCC를 만나면 디버그 익셉션(Trap)이 발생하고, OS는 스레드를 블로킹한 뒤 디버거에게 이벤트를 전달합니다.디버거는 이때 CPU 레지스터(Context)와 메모리를 읽어 유저에게 보여줍니다.유저가 실행을 재개(F5)하면, 덮어썼던 0xCC를 백업해 둔 원래 기계어로 복원합니다. 그리고 CPU의 명령어 포인터(RIP)를 1바이트 감소시켜 원래 명령어를 정상적으로 실행..
Windows DPC(Deferred Procedure Call), ISR(Interrupt Service Routine)
Windows DPC(Deferred Procedure Call), ISR(Interrupt Service Routine)
2026.02.270. 요약 ISR과 DPC는 OS가 하드웨어 인터럽트를 효율적으로 처리하기 위한 2단계 메커니즘입니다.랜카드에 패킷이 도착하면 먼저 최우선 순위인 ISR이 실행되어 하드웨어 상태만 빠르게 응답하고, TCP/IP 스택 분석 같은 무거운 작업은 DPC 큐에 지연시켜 처리합니다. 여기서 서버 개발자가 주의해야 할 점은 우선순위(IRQL)입니다. DPC는 일반 유저 스레드(IOCP Worker)보다 높은 IRQL에서 실행되므로, 대규모 트래픽 발생 시 특정 코어에 DPC 처리가 집중되면 해당 코어의 유저 스레드는 CPU를 할당받지 못해 심각한 지연(Latency)이 발생합니다. 이를 해결하기 위해 실무에서는 랜카드의 RSS(Receive Side Scaling) 기능을 활성화하여 하드웨어 인터럽트와 DPC ..
Windows 64-bit Calling Convention (호출 규약)
Windows 64-bit Calling Convention (호출 규약)
2026.02.271. 왜 알아야 할까? 릴리즈(Release) 빌드에서 서버가 죽었을 때, 범인을 찾기 위해서 금요일 밤 10시, 동시 접속자 5천 명인 서버가 갑자기 크래시(Crash)를 내며 죽었습니다. 남은 건 OS가 뱉어낸 메모리 덤프 파일(.dmp) 하나뿐입니다.Visual Studio나 WinDbg로 덤프를 엽니다. 소스 코드가 멈춘 줄은 가리키고 있는데, 변수 값을 확인하려고 마우스를 올려보면 이렇게 뜹니다. (최적화되어 값을 알 수 없음) 릴리즈 빌드는 속도를 위해 컴파일러가 변수들을 다 날려버리고 레지스터에 쑤셔 넣습니다.지역 변수 창을 봐도 다 쓰레기 값입니다. "도대체 어떤 유저가, 어떤 스킬을 쓰다가 죽은 건지" 알 길이 없습니다.이때 Calling Convention(호출 규약)을 알면, CPU..
컨텍스트 스위칭(Context Switching)에 대한 고찰, 정리
컨텍스트 스위칭(Context Switching)에 대한 고찰, 정리
2025.11.06서버 개발을 하다보면 필수적으로 알아야하고 단골 문제로 등장하는 손님이 있다.바로 컨텍스트 스위칭(context switching)인데, 잊어버리지 않도록 해당 포스팅에서 완벽하게 정리하려고 한다. 1. 컨텍스트 스위칭? 시분할 시스템 컨텍스트 스위칭의 개념은 멀티태스킹(Multitasking)을 구현하기 위해 탄생했다.초기 컴퓨터는 한 번에 하나의 작업(프로세스)만 처리할 수 있었는데,CPU의 처리 속도는 I/O(디스크 읽기, 네트워크 수신 등) 속도보다 압도적으로 빨랐다. CPU가 I/O 작업을 요청하고 응답을 기다리는 동안, CPU는 말 그대로 '아무 일도 하지 않고' 놀게 되었다.이러한 비효율을 해결하기 위해 시분할 시스템(Time-Sharing System)이 고안되었다. CPU의 시간을 매우 ..
[프론트엔드] 움직이는 3D 카드 효과 만들기
[프론트엔드] 움직이는 3D 카드 효과 만들기
2025.03.13본 포스팅은 아래 코딩애플님의 동영상 '바로 쿠팡 취업가능한 포트폴리오 만들기'를 참고하여 작성하였습니다.https://youtu.be/YDCCauu4lIk?si=hYyzxZVK5CIwoprZ 0. 준비카드로 사용할 이미지 1장(images/3vx2.webp)HTML 파일(index.html) 1. 카드 이미지 파일 출력 2. 마우스 움직임에 따라 카드 이미지 회전 container영역에 마우스의 좌표(e.offsetX, e.offsetY)에 따라서 transform 속성을 줘서 카드 이미지를 회전시킨다.transform: 요소의 변형을 정의하는 CSS 속성입니다. 회전, 이동, 크기 조절, 기울임 등의 효과를 적용할 수 있습니다.perspective(350px): 3D 변형 효과를 줄 ..
[Ubuntu] Wordpress 플러그인 설치/삭제 시 FTP 정보 입력 창이 나올 때(Connection Information)
[Ubuntu] Wordpress 플러그인 설치/삭제 시 FTP 정보 입력 창이 나올 때(Connection Information)
2023.10.17이슈 상황 플러그인을 설치하려고 하는데, 위와 같이 Connection Information창이 출력되면서 FTP 정보를 묻는다. Connection Information To perforam the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact you web host. 해결법 1. 권한 설정 변경 워드프레스 경로의 디렉토리, 파일들의 권한이 제대로 설정되어있지 않은 경우다. sudo chown -R www-data:www-data /var/www/html..
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치
2023.10.16LAMP 스택 설치 sudo apt update sudo apt install apache2 mysql-server php php-mysql php-curl php-gd php-mbstring php-xml php-xmlrpc MySQL 데이터베이스 및 유저 생성 sudo mysql -u root -p CREATE DATABASE wordpress; CREATE USER '유저 이름'@'localhost' IDENTIFIED BY '비밀번호'; GRANT ALL PRIVILEGES ON wordpress.* TO '유저 이름'@'localhost'; FLUSH PRIVILEGES; EXIT; WordPress 다운로드 cd /var/www/html wget https://wordpress.org/late..
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
2023.10.16Certbot 설치 해당 명령어는 Apache 웹서버를 기준으로 합니다. sudo apt update sudo apt install certbot sudo certbot --apache -d example.com WordPress 설정 업데이트 1. 워드프레스 대시보드 로그인 2. 설정 -> 일반 -> WordPress Address (URL)'과 'Site Address (URL)'을 https://example.com으로 변경 SSL 강제 설정 /var/www/html/(워드프레스 경로) .htaccess 파일에 다음 코드를 추가 Apache 재시작 sudo systemctl restart apache2 SSL 갱신 자동화 sudo crontab -e 0 0 1 * * /usr/bin/certbot ..
SPA(Single Page Application), MPA(Multi Page Application)
SPA(Single Page Application), MPA(Multi Page Application)
2022.11.20서론 전통적인 Web Application의 Page life cycle은 MPA(Multi Page Application)였다. 쉽게 말하면 웹 브라우저에서 특정 페이지에 대한 요청을 서버로 보내면, 서버는 데이터를 웹 브라우저에 응답한다. 이때 페이지를 이동할 때마다 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 되는데, 사용자 입장에서는 답답한 경험을 제공할 수 도 있다. (데이터가 많을 경우 페이지를 불러오는 동안 흰 화면을 보고 있어야 한다던가.. 여러 가지 부분에서) 그래서 요즘은 SPA(Single Page Application) 방식으로 개발된 Web Application을 심심치 않게 볼 수 있을 것이다. 다른 페이지로 이동하지 않더라도 하나의 페이지에서 서버와 통신을 통해 사용자에게..
[React] Create React App 을 이용해서 React 설치
[React] Create React App 을 이용해서 React 설치
2022.11.20React 앱 설치 방법 npx create-react-app 예전에는..? Webpack이나 Babel 같은 모듈을 설치하고, 설정해야 React 앱을 시작할 수 있었다. Webpack 이란? 오픈 소스 코드 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화해주는 라이브러리. Babel 이란? 최신 자바스크립트 문법을 지원하지 않는 브라우저를 위하여, 최신 문법을 구형 브라우저에서도 사용 가능하도록 변환해주는 라이브러리 // 아래와 같은 문법을 구형 브라우저에서는 [1, 2, 3].map((n) => n+1); // 이런식으로 변환 시켜준다. [1, 2, 3].map(function(n) { return n+1; }); npx 란? 노드 패키지 실..
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
2022.04.24프로젝트 생성 및 디렉토리 구성 자 심리테스트 만들기를 본격적으로 시작해보자. 가장 먼저 프로젝트를 생성하자. 필자는 GUIDE라는 이름의 프로젝트를 생성하였고 위와 같이 디렉토리를 구성하였다. GUIDE index.html script.js style.css 이름 설명 index.html 메인 페이지 script.js 페이지에서 기능을 동작하게 하기 위한 자바스크립트 파일 style.css 페이지를 꾸미기 위한 css파일 사실 아주 간단한 프로젝트기 때문에 따로 파일을 분리할 필요가 뭐가 있겠냐고 생각할 수 도 있지만. 필자는 깔끔한 것을 좋아하기 때문에 코드양이 적더라도 분리하였다. 기본적인 html의 소스코드다. 설명할 것도 딱히 없지만, 굳이 설명하자면 link 태그를 통해 style.css 파일..
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
2022.04.23시작하기 앞서.. 친구들끼리 MBTI 테스트 혹은 심리테스트를 웹페이지에서 진행하고, 결과물을 공유해서 서로의 성향을 비교해 재미를 느껴본 경험은 다들 한 번쯤 있을 것이다. 예시) 코인 투자 성향 심리 테스트 https://cjwoov-invesetment-type.netlify.app/ 글을 쓰게된 계기도 나도 그런 테스트를 한 번 만들어보고 싶었고 경험을 공유하면 좋을 것 같아서 글을 남긴다. 사전 지식 해당 과정은 HTML, CSS, JavaScript 언어를 사용한다. HTML, CSS, JavaScript에 대한 많은 지식도 필요 없으며 아주 기본적인 개념만 알고 있으면 된다. 그렇게 어렵게 만들지 않을 것이기 때문에... 준비물 Visual Studio Code : 소스코드 작성을 위한 에디..