리눅스를 공부하다 보면 실제 USB 없이도 마운트 실습을 해야 할 때가 있습니다. 저는 오늘 실습을 통해 loop 디바이스를 활용해 가상 디스크를 만들고, 이를 /etc/fstab에 등록하여 자동 마운트까지 성공한 과정을 정리해보았습니다. 특히 처음에는 이해가 어려웠던 개념들을 중심으로 설명드리겠습니다.마운트(Mount)란?처음 리눅스를 접했을 때, "마운트(mount)"라는 개념이 매우 생소했습니다. 윈도우에서는 USB를 꽂으면 자동으로 드라이브(E:, F:)가 생기지만, 리눅스에서는 그렇게 자동으로 인식되지 않습니다. 리눅스는 모든 저장장치를 디렉토리처럼 취급합니다. 어떤 장치를 사용하려면 특정 디렉토리에 "연결"해주는 과정이 필요한데, 이게 바로 "마운트"입니다. 예를 들어, /dev/sdb1이라는..

🧁 개요Expo로 앱 개발을 시작하려는 분들 중 많은 사람들이 여전히 App.js 기반의 구형 구조에 머물러 있습니다.하지만 2025년 현재, Expo는 expo-router와 TypeScript 기반 .tsx 구조를 중심으로 발전 중이며, 더 빠르고 유연한 앱 개발을 가능하게 해줍니다.이번 글에서는 제가 실제로 겪은 시행착오를 바탕으로:.tsx를 사용하는 최신 Expo Router 구조 소개기존 App.js 방식과의 차이점npx create-expo-app 중 발생한 의존성 충돌 문제들을 정리해보려 합니다. 1. 최신 Expo 프로젝트의 구조: .tsx와 expo-router기본 특징.tsx 기반 TypeScript 프로젝트app/ 폴더 기반 자동 라우팅expo-router 사용으로 Next.js 스..

React로 제작한 포트폴리오 웹사이트를 AWS EC2에 배포하고, 구매한 도메인 genie95.net에 연결하였습니다. 그러나 도메인에 접속해보니 제 포트폴리오가 아닌, Nginx의 기본 페이지가 보였습니다. 이 문제를 해결하기 위해 어떤 과정을 거쳤고, 어떻게 완전히 연결에 성공했는지 기록해보았습니다.문제 상황 요약AWS EC2 인스턴스에 Nginx 설치 및 실행 완료React 앱 개발 완료도메인 genie95.net 구매 후 A 레코드 설정 완료EC2 보안 그룹에서 80, 443 포트 허용도메인 접속 시 Nginx 기본 페이지만 노출 원인 분석🔸 React 앱이 빌드되지 않음EC2 서버에서 npm run build 명령어를 실행했지만, 진행이 멈춘 것처럼 보였습니다.실제로는 EC2의 메모리 부족(..

설치 배경MCP를 사용해보기 위해 Claude AI Desktop App 을 다운받으려 했으나... 공식 홈페이지에서는 Linux OS의 desktop app 을 지원하지 않습니다. 그래서 방법을 찾던 중 Debian 계통의 Linux OS에서 지원되는 Claude AI app 을 찾았습니다. https://github.com/aaddrick/claude-desktop-debian GitHub - aaddrick/claude-desktop-debian: Claude Desktop for Debian-based Linux distributionsClaude Desktop for Debian-based Linux distributions - aaddrick/claude-desktop-debiangithub...

React에서 props란?리액트 컴포넌트끼리 데이터를 주고받을 때는 어떻게 해야 할까요?Windows 95 테마 포트폴리오 웹사이트를 만들면서 직접 겪은 props의 개념과 실전 적용 방법을 정리해보았습니다.🧩 상황: 컴포넌트 간 데이터 전달, 어떻게 해야 할까요?프로젝트 초반, 데스크탑 UI를 구현하기 위해 아이콘을 클릭하면 창이 열리도록 만들고자 했습니다.이때 아이콘 컴포넌트는 클릭 이벤트를 감지하고,창 컴포넌트는 열리고 닫히는 상태를 제어해야 하는 구조였는데요. 두 컴포넌트가 서로 다른 파일로 분리되어 있어 데이터를 어떻게 주고받아야 할지 고민이 생겼습니다. ✅ 해결 방법: props로 함수 전달하기React에서는 컴포넌트 간의 데이터 전달을 props를 통해 처리합니다.부모 컴포넌트가 자식 컴..

🔥 문제 상황: Webamp가 여러 개 실행되고 빈 모달이 뜨는 문제 React에서 Webamp를 실행할 때, 여러 개가 중복 실행되거나 빈 모달이 뜨는 문제가 발생할 수 있습니다. 이를 해결하기 위해 전역 변수를 사용하여 Webamp를 한 번만 실행하고, Taskbar에서 직접 Webamp를 실행하는 방법을 정리해보았습니다.전역 변수란 무엇인가?전역 변수(Global Variable)는 애플리케이션 전체에서 접근할 수 있는 변수입니다. React에서는 컴포넌트가 리렌더링될 때마다 내부 변수들이 초기화되지만, 전역 변수는 값이 유지됩니다.📌 지역 변수 vs. 전역 변수변수 위치특징Webamp 적용지역 변수 (컴포넌트 내부 변수)함수 실행될 때마다 새로 생성됨startWebamp() 호출 시 Webam..

React에서 상태(state)와 생명주기(lifecycle)를 다룰 때 가장 많이 사용하는 두 가지 Hook이 있습니다: useState & useEffect. 이 글에서는 이 두 Hook의 개념과 사용법을 정리하고, 홈페이지 코드에서 사용한 예시를 들어 이해를 돕겠습니다.Hook이란?Hook은 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 기능을 사용할 수 있도록 해주는 함수입니다. 기존 클래스 컴포넌트에서 사용하던 this.state와 componentDidMount, componentDidUpdate 등의 기능을 대체할 수 있습니다. 대표적인 Hook에는 다음과 같은 것들이 있습니다:useState: 상태 관리useEffect: 부수 효과(side eff..

프론트엔드 웹개발은 보통 HTML + CSS 개발로 이뤄집니다. 만약 동적인 요소를 추가하고 싶다면 Javascript까지 이용하여 웹페이지를 개발할 수 있습니다. 하지만 홈페이지에 들어가는 모든 asset을 하나하나 개발한다면 굉장히 시간이 많이 소요될 것입니다. 그래서 이를 보완할 수 있는 라이브러리로 React가 있습니다. Windows 95 테마의 컴포넌트를 제공하는 @react95 라는 패키지를 발견하여서 홈페이지 개발에 많은 시간이 절약될 것으로 예상됩니다. 기존 HTML + CSS 개발은?우리가 일반적으로 HTML + CSS로 웹사이트를 만들 때는 정적인 구조를 직접 코딩을 해야합니다. 📌 예제 (HTML + CSS 방식) 내 포트폴리오 X 안녕하세요! 제 포트폴..

제 티스토리 도메인인 genie-world.com 은 Gabia에서 구매하였습니다. 최근 AWS Route 53을 이용하면서 현재 운영 중인 도메인을 한 플랫폼에서 관리하고 싶어 Gabia에서 구매한 도메인을 Route 53으로 이전하고자 합니다.Route 53으로의 도메인 이전 방법도메인 이전 방법은 크게 두가지가 있습니다. 1. 네임서버 변경: 도메인은 Gabia에 그대로 두고, AWS Route 53에서 DNS를 관리하는 방식2. 도메인 이전 (Transfer): 도메인을 완전히 AWS로 옮기는 방식 일반적으로는 네임서버 변경 방식이 더 간단하고 빠르지만, 저는 도메인을 통합 관리하고 싶어 2번째 방법을 택하였습니다. 도메인 이전 (Transfer)1. Gabia에서 도메인 이전을 준비합니다. "도..

수영을 배운 지 두어 달이 지났다. 화요일과 목요일 오전 9시에 수영장에 간다. 사실 나는 머리가 물속에 완전히 들어가는 것도 무서울 정도로 물을 무서워했다. 하지만 꾸준히 하다 보니 이제 킥판 없이도 수영장 레인의 절반 정도는 자유형으로 갈 수 있다. 사실 저번 주까지만 해도 킥판 없이 자유형을 하면 물을 너무 많이 먹어서 하기 싫다는 생각이 계속 들었다. 오늘도 어김없이 물을 먹어가며 꾸역꾸역 자유형을 연습하고 있었는데, 이를 지켜보던 강사 선생님이 (원래 강사분은 아니고 오늘 대타로 오신 분) 몇 가지를 짚어주셨다.  1. 내가 왜 물을 계속 먹는지 원인을 분석해주고 2. 그에 대한 해결책을 알려주며 3. 내가 이해할 수 있는 방식으로 설명해 주셨다. (1) 상체가 수면 위로 너무 떠 있다. 그래서..

오늘은 AWS EC2를 활용한 포트폴리오 웹사이트 구축과 GitHub Actions를 이용한 자동 배포 시스템을 설정하였습니다. 처음 진행하면서 여러 문제가 발생했지만, 하나씩 해결하며 최종적으로 로컬에서 GitHub에 코드 푸시 → EC2에 자동 배포되는 환경을 완성하였습니다. 이 과정에서 발생했던 주요 문제와 해결 방법을 공유합니다. EC2 vs S3+CloudFront: 왜 EC2를 선택했을까?웹사이트를 배포하는 방법에는 크게 두 가지 옵션이 있습니다.✅ AWS EC2 (Elastic Compute Cloud)서버를 직접 운영하며 원하는 환경을 구축 가능Nginx/Apache를 이용해 동적 콘텐츠 제공 가능SSH를 통한 직접 접근 및 설정 가능CI/CD 자동 배포 시스템 구축 가능✅ AWS S3 +..

태초에 MS-DOS라는 것이 있었다. 우리 엄마는 개발자는 아니지만 컴퓨터를 잘 다뤘다. 그래서 아주 갓난쟁이일 때부터 처음 본 컴퓨터가 CLI 기반이었고, 지금까지도 컴퓨터하면 아주 투박한 모니터에 코드가 빼곡한 쉘이 떠오른다. 30살에 개발을 처음 시작하면서 내가 생각하는 개발자의 stereotype은 MS-DOS에서 쉘에 명령어를 입력하는 투박한 모습으로 남아있는듯 하다. 그래서 나의 첫 개발 포트폴리오는 내가 생각하는 컴퓨터의 모습을 그리면 어떨까 생각했다. 내가 처음으로 컴퓨터를 배울 때 사용한 Windows 95 테마를 차용하여 포트폴리오 웹사이트 페이지를 만들어보려 한다. 관련 내용을 검색하면서 React95라는 github repo를 발견하였고, 여기서 여러 영감을 얻을 수 있는 웹사이트를..