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