본문 바로가기

비전공자개발자
4

📌 S3, CloudFront를 활용해 React 프로젝트 배포하는 방법 React로 프로젝트를 만들고 개발 모드로만 확인하는 게 아니라,진짜 웹사이트처럼 URL로 접근 가능한 형태로 배포까지 해보고 싶었음.그래서 이번엔 AWS S3 + CloudFront를 활용해 직접 배포해봤고, 그 과정을 정리했보았다.1️⃣ React 프로젝트 만들고 빌드하기npm create vite@lates 위 명령어로 vite 기반의 React 프로젝트를 만들었음React + JavaScript를 선택해서 프로젝트 생성 완료했음프로젝트 디렉토리로 들어가서 패키지를 설치했음cd my-vite-appnpm install 이후, 아래 명령어로 프로덕션 빌드를 진행했음npm run builddist/ 폴더가 생성되고, 여기에 정적 파일들이 모두 들어있었음 (index.html, js, css 등)2️⃣ .. 2025. 5. 27.
📌 AWS S3에 웹 프로젝트 호스팅하는 법 완성된 결과물을 실제 웹에 올려서 공유하고 싶을 때가 많았다.AWS S3를 활용해서 정적 웹사이트를 직접 배포해봤고, 그 과정을 하나하나 정리해보았다.🪪 1. AWS 계정 만들고 로그인하기먼저 AWS 공식 홈페이지에 접속해서 회원가입을 했음.계정 생성 시 결제 정보를 요구하긴 하지만, S3는 프리 티어로 기본적인 기능을 무료로 쓸 수 있어서 부담 없음.가입을 마치고 로그인한 뒤, 상단 검색창에 S3를 입력해서 S3 콘솔로 이동함.📁 2. S3 버킷 만들기S3는 ‘버킷’이라는 단위로 파일을 저장함.버킷은 일종의 폴더 개념인데, 웹사이트 하나당 버킷 하나라고 생각하면 됨.[버킷 만들기] 버튼을 클릭함버킷 이름은 전 세계적으로 고유해야 해서 my-portfolio-project처럼 나만의 이름으로 설정함리.. 2025. 5. 26.
📝 [250320/오답노트] 사용자 정보 저장 & 필터링 과제 피드백 정리 프론트엔드 공부를 하면서 제출한 과제에 대한 피드백을 받았다.처음엔 무슨 말인지 잘 이해되지 않았지만, 하나씩 뜯어보면서 어떤 의도였는지, 어떤 부분을 놓쳤는지 정리해보았다.🎯 이 과제의 의도는?이번 과제의 핵심은 단순히 버튼을 눌러 정보를 저장하는 게 아니라,브라우저에서 데이터를 받아 저장하고, 다시 꺼내어 보여주는 전 과정을 직접 구현해보는 것이었다.📌 과제를 통해 배우는 핵심 개념사용자 입력을 받아 객체로 만들기JSON.stringify, JSON.parse를 통해 문자열 ↔ 객체 변환localStorage에 데이터 저장하고 다시 불러오기배열을 조건에 따라 필터링하고 화면에 출력화면 출력 시 HTML 줄바꿈, 텍스트 처리 방식 이해하기📦 부가 설명: JSON과 localStorage 쉽게 이해.. 2025. 3. 22.
🏡 프로세스와 스레드, 쉽게 정리해 봄 안녕하세요! 😊 오늘은 프로세스와 스레드에 대해 아주 쉽게 정리해보았습니다!어려운 말은 다 빼고, 우리 주변에서 쉽게 볼 수 있는 예시로 작성했습니다.📌 프로세스란? "집"이라고 생각하자!컴퓨터에서 실행되는 프로그램을 프로세스라고 합니다.프로세스를 쉽게 "집"이라고 생각하면 이해하기 쉽습니다~🏠 프로세스 = 하나의 집프로세스(집)마다 자기만의 공간(메모리)을 가지고 있습니다.다른 프로세스(다른 집)와 직접 소통하기 어렵고, 편지를 보내야 합니다.한 집이 무너지면(프로세스가 종료되면) 그 안에서 하는 일도 모두 끝납니다.예시: 프로세스는 이렇게 생각하세요크롬 브라우저를 실행하면? → 하나의 프로세스가 만들어짐!게임을 실행하면? → 또 하나의 프로세스가 만들어짐!📌 스레드란? "집 안에서 같이 사는 .. 2025. 2. 27.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바