웹 개발의 시작: 왜 웹 개발을 선택했는가?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보 프로그래머 및 웹 개발에 관심 있는 사람들
- 난이도: 초보자 수준 (HTML/CSS 기초 지식 필요 없음)
핵심 요약
- 웹 개발 선택 이유:
- *🔥 즉각적인 결과** (HTML/CSS로 브라우저에서 바로 확인 가능)
- *🎨 창의성과 코드의 결합** (디자인 요소와 로직의 조화)
- *🛠️ 초보자 친화적 학습 곡선** (HTML → CSS → JavaScript 단계적 접근)
- 필수 도구:
- *Visual Studio Code** (무료, 가볍고 확장성 높은 에디터)
- *Live Server 확장 프로그램** (파일 저장 시 자동 브라우저 새로고침)
- 환경 설정 팁:
- *📁 폴더 구조 정리** (예:
WebDev-Journey/Day-1,Mini-Projects) - *🎨 테마 커스터마이징** (다크 모드, 젤리피시 테마 등)
섹션별 세부 요약
1. 웹 개발 선택 이유
- 즉각적인 결과: HTML/CSS로 코드 입력 즉시 브라우저에 반영
- 창의성과 코드의 결합: 색상, 폰트, 레이아웃 조작 가능
- 무료 자원 풍부: freeCodeCamp, YouTube, 블로그 등 다양한 학습 자료 제공
- 초보자 친화적: HTML/CSS로 시작 후 JavaScript 등 복잡한 개념으로 이동
2. 개발 환경 설정
- 필수 도구:
- Visual Studio Code (무료, 가볍고 확장성 높은 코드 에디터)
- Live Server 확장 프로그램 (파일 저장 시 자동 브라우저 새로고침)
- 설치 방법:
- VS Code에서
Extensions탭 열기 - "Live Server" 검색 → Ritwick Dey의 확장 프로그램 설치
- 사용 방법:
index.html파일 우클릭 →Open with Live Server- 변경 사항 저장 시 자동으로 브라우저 새로고침
3. 파일 관리 및 조직화
- 폴더 구조:
WebDev-Journey/Day-1,Mini-Projects,Experiments등으로 분리- 팁:
- "Clean code starts with clean folders"
- 복잡한 프로젝트 진행 시 폴더 구조가 혼란을 줄임
4. 첫 번째 웹페이지 생성
- index.html 파일 작성:
```html
Hello, World!
```
- 결과:
- 브라우저에서
Hello, World!텍스트 확인 - 간단하지만 첫 번째 성공적인 웹페이지 생성
결론
- 핵심 팁:
- *"Don’t rush to write code. First, set up your tools."** (VS Code, Live Server 등 도구 준비 필수)
- *"Clean folders = clean mind"** (폴더 구조 정리로 생산성 향상)
- 실무 적용:
- Live Server 사용으로 개발 효율성 극대화
- VS Code 확장 프로그램 (Auto Rename Tag, Prettier 등)으로 코드 작성 편의성 증가
- 첫 번째 웹페이지 생성을 통해 자신감 향상 및 개발자 여정 시작