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

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

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 안녕하세요! 제 포트폴..

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