딘스 딘스

AWS 학습 환경 구성 — Phase 3: S3 + CloudFront (프론트엔드)목표: 정적 파일을 S3에 올리고 CloudFront로 서빙. CloudFront URL로 브라우저 접근 확인.Step 1. S3 버킷 생성S3가 뭐야?Simple Storage Service의 약자. 파일을 무한대로 저장할 수 있는 객체 스토리지다. 빌드된 index.html, CSS, JS, 이미지 파일들을 여기 올려두는 창고 역할이다. EC2 같은 서버가 필요 없고 파일만 올려두면 CloudFront가 가져다 서빙해준다.버킷 이름은 전 세계 모든 AWS 계정을 통틀어 유일해야 한다. study-frontend만 쓰면 이미 누가 쓰고 있을 수 있어서 뒤에 이니셜이나 숫자를 붙여야 한다.study-frontend-xxx..

AWS 학습 환경 구성 — Phase 2: VPC 네트워크 구성목표: 실습용 VPC를 만들고 Public/Private 영역을 분리하는 것.Step 1. VPC 생성VPC는 AWS 안에 만드는 나만의 격리된 네트워크야. 이 안에 모든 리소스가 들어가.study-vpc10.0.0.0/16 — 65,536개 IP 사용 가능아직 비어있음. 여기에 서브넷, 리소스들이 들어갈 예정.왜 "VPC only"? "VPC and more"는 서브넷·IGW까지 자동 생성해준다. 학습 목적이라 각각 직접 만들면서 이해하는 것이 목적이라 VPC only로 진행한다.콘솔 설정① 콘솔 검색 → VPC 진입② 좌측 → Your VPCs → Create VPC③ Resources to create: VPC only④ Name tag..

AWS 학습 환경 구성 — Phase 1: 계정 보안 & 비용 알람 설정AWS 콘솔 실습을 시작하기 전에 반드시 해야 하는 기초 작업.root 계정 보안 + IAM User 생성 + 비용 알람 설정까지 다룬다.왜 Phase 1이 중요한가AWS는 계정을 만들면 즉시 과금 대상이 된다. root 계정이 탈취되면 계정 전체가 날아간다. 실제로 다음 두 가지 사고가 자주 발생한다.▪ root 계정 탈취 → 공격자가 고사양 EC2를 수백 대 띄워 수천 달러 청구▪ 리소스 방치 → NAT Gateway, RDS 등을 켜두고 잊어버려 예상치 못한 청구서Phase 1은 이 두 가지를 막는 작업이다.사전 준비▪ AWS 계정 (유료 or 프리티어)▪ MFA 앱: Google Authenticator 또는 Authy▪ 이메..

Study Log ☁️ AWS 실습 학습 플랜 서버/인프라 운영자 관점으로 AWS 핵심 구조 직접 구축하기 기간: 6~8주 예산: 월 1~2만원 레벨: 중급 전체 진행 현황 예정 1단계 — VPC + EC2 + 네트워크 0% 예정 2단계 — ALB + Auto Scaling + RDS 0% 예정 3단계 — Terraform 코드화 0% ✅ 시작 전 필수 체크리스트 이거 안 하면 나중에 후회함 AWS 계정 생성 Billing Alert 설정 — 월 $10..

JS에서 ${name}이 텍스트로 출력된다.변수는 ' 아니고,`이걸 써야된다. (백틱)❗ 문제 원인JS 코드 중 이 부분이 문제야:greeting.innerText = '안녕하세요, ${name}님!';💥 문제: 템플릿 리터럴 문법 오류' (작은따옴표) 안에서는 ${변수}가 해석되지 않음→ 그냥 문자열로 인식돼서 ${name} 그대로 출력돼✅ 해결 방법greeting.innerText = `안녕하세요, ${name}님!`; // ✔ backtick (백틱) 사용해야 템플릿 리터럴🔄 수정된 전체 코드// script.jsconst input = document.getElementById('nameInput');const button = document.getElementById('greetBtn');c..

javascript 구문을 별도 파일로 빼는 경우가 있고,html 내부 (body -> script)에 넣는 방식이 있다. 어떻게 장단점이 있는지?  👀 HTML 안에 📌 사용 용도빠른 테스트 / 작은 규모의 실습파일 나누기 귀찮을 때 빠르게 실행하고 싶을 때학습용 / 데모용 코드에 적합✔️ 지금 우리가 하고 있는 DOM 기초 학습 실습엔 딱 좋아✅ 방법 2: JavaScript 파일을 외부로 분리 (외부 스크립트)📁 폴더 구조 예시/project ├── index.html └── script.js📄 index.html 눌러봐! 📄 script.jsdocument.getElementById('btn').addEventListener('click', () => { document...

🧑‍💻 코드 리뷰  – To-Do List 프로젝트 전체 점검 ✅📋구성: HTML + CSS + JS기능: 기본적인 체크박스 기반 할 일 리스트 + 선택 삭제 + 전체 삭제1️⃣ HTML 리뷰 📋 할 일 리스트 ➕ 추가 ➕ 아이템 추가 --> ❌ 삭제 ❌ 전체삭제 ✅ 장점구조 간결, 시맨틱 태그 사용 적절 (, , )lang="ko" 및 charset="UTF-8" 세팅 완벽버튼 텍스트 + 이모지 사용은 UX 측면에서 직관적 👌🔧 개선 제안위치 개선 포인트 이유onclick 대신 addEventListener를 JS에서 사용유지보수성 향상, HTML 분리 원칙defer 속성 추가 추천DOM 로드 이후 실행되도록 보장 ()2️⃣ JS 리뷰function..

요건 : Windows Local (MariaDB) -> Windows Server (MSSQL) 시도1)Local에서 MSSQL로 변환-> Local Out of Memory 발생시도 2)Paralles에서 MSSQL로 변환 시도-> 이기종 CPU로 MSSQL 설치 불가시도 3)MAC에서 MSSQL로 변환 시도정상 작동  Mac에서 MariaDB 및 MSSQL 설치 및 DBeaver 연결 방법Mac에서 데이터베이스 환경을 설정하는 과정은 간단하지만, 올바른 순서를 따라야 합니다. 이 글에서는 MySQL 삭제부터 MariaDB 및 MSSQL 설치, 그리고 DBeaver를 활용한 연결 방법까지 상세히 설명합니다.1. MySQL 설치 확인 및 삭제1-1. MySQL 설치 여부 확인mysql --version..