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를 발견하였고, 여기서 여러 영감을 얻을 수 있는 웹사이트를..

AWS Free Tier에서 EC2 인스턴스를 운영하다 보면, CPU 사용률이 100%로 고정되면서 SSH 접속이 불가능한 문제가 발생할 수 있습니다. 이 문제는 주로 다음과 같은 원인으로 발생합니다.특정 프로세스가 CPU를 과부하시키는 경우 (예: 무한 루프, 폭주하는 패키지 업데이트 등)AWS Free Tier의 t2.micro / t3.micro 인스턴스에서 CPU 크레딧 부족으로 인해 성능 제한이 걸린 경우네트워크 문제, 보안 그룹 설정 오류, 또는 VPC 라우팅 문제제 경우는 htop command를 설치하기 위해 여러가지 패키지를 설치하는 과정에서 과부하가 온 것으로 추정하고 있습니다. 이 글에서는 SSH 접속이 멈추거나 불가능할 때 제가 이 문제를 해결한 단계별 가이드를 알려드리려고 합니다...

Linux에서 파일과 디렉토리를 다루다 보면 파일의 속성과 권한을 이해하는 것이 중요합니다. 특히, ls -l 명령어를 실행하면 파일이나 디렉토리 앞에 나타나는 문자들이 무엇을 의미하는지, 그리고 chmod 명령어를 통해 파일 권한을 어떻게 변경할 수 있는지 알아보겠습니다.파일 타입 체계Linux에서는 파일을 유형별로 구분하며, ls -l 명령어를 사용하면 해당 파일의 속성을 확인할 수 있습니다. 아래는 ls -l 실행 결과의 예시입니다. 출력 결과에서 가장 왼쪽의 문자는 파일의 타입을 나타냅니다.문자파일 타입설명-일반 파일텍스트 파일 등 일반적인 파일d디렉토리 (Directory)폴더l심볼릭 링크 (Symbolic Link)다른 파일을 가리키는 링크b블록 장치 (Block Device)하드디스크, US..

Linux OS 환경을 구축하기 위해서는 디바이스에 Linux OS를 직접 설치하거나, Virtual Machine을 통한 가상 환경 내에서 Linux OS를 구축하는 방법이 있습니다. 만약 현재 이용하고 있는 PC가 Windows OS인 경우 Virtual Box나 VMWare 등의 프로그램을 통해 가상 환경 구축이 용이합니다. 하지만 Mac OS의 경우, Windows에 비해 가상 환경 셋팅을 위한 범용적인 프로그램이 수가 적고 퀄리티가 좋은 경우 일부 비용이 발생할 수 있습니다. 현재 제가 사용하고 있는 MacBook의 경우, M1 칩이 내장되어 있어 Oracle VM VirtualBox를 이용할 수 없는 상황입니다. VirtualBox는 x86 기반 가상화를 사용하지만, M1(M2) 칩은 ARM ..

고차함수란? 고차함수는 다른 함수를 인자로 받거나, 함수는 반환하는 함수입니다. Swift에서는 이런 고차함수를 활용하면 보다 더 간결하고 유연한 코드를 작성할 수 있습니다. 예를 들어, 특정 배열을 나타내는 데이터를 다룰 때 반복문 대시 고차함수를 쓰면 코드를 더 직관적이고 짧게 작성할 수 있습니다. 이를 통해 가독성을 높이고 실수를 줄일 수 있습니다. "배열의 모든 값을 2배로 만들고 싶다면?" 고차함수를 사용하지 않았을 때,let numbers = [1, 2, 3, 4, 5]var doubleNumbers : [Int] = []for number in numbers { doubleNumbers.append(number * 2)}print(doubleNumbers) 고차함수 map를 사용하였을 때,l..