K-digital 기초역량훈련[패스트 캠퍼스] 코딩 1:8 | 웹 개발 왕초보 입문 (1주차)
패스트 캠퍼스 프론트엔드 부트캠프 5기에 지원하면서
서류전형 얼리버드 혜택으로 '코딩 1:8 | 웹 개발 왕초보 입문' 무료 강의를 지원받았다.
처음부터 완전 무료인 것은 아니고 내일배움카드로 90% 지원 + 자기부담금 10% 결제 후,
수강 진도율 80% 달성 인증하면 자기부담금 환급 + 캠프 선발 가산점이 주어진다 하여 수강하기로 결심했다.
📍 수강 기간 : 2023. 02. 07(화) ~ 2023. 03. 14(화) | 총 5주, 30시간
📍 수강료 : 40만원 (내일배움카드 90% 지원, 자기부담금 4만원)
🔎 커리큘럼 :
1주차 화면 구현 - html, css, javascript
2주차 서버 통신 - jQuery, ajax, API
3주차 서버 데이터 - Python, MongoDB, DB의 필요성, 웹스크래핑(크롤링)
4주차 서버 응답 - Flask, JSON
5주차 서버 실행 - 웹 사이트 배포, AWS, 도메인
1️⃣ WEB 동작 원리
[웹 사이트 동작 원리 순서]
1. 사용자가 웹 브라우저에 'http://도메인' 입력
2. 브라우저가 DNS 서버에서 해당 도메인의 IP 주소 확인 (e.g. 63.245.217.105)
3. 브라우저가 해당 서버에게 HTTP 요청
4. 해당 서버가 브라우저에게 소스 코드 전달
5. 브라우저에서 코드 해석
6. 웹 페이지 구현
[예시 : '네이버' 포털 사이트]
1. 사용자가 웹 브라우저에 'https://www.naver.com' 입력
2. 브라우저가 DNS 서버에서 네이버의 IP 주소 확인 (23.201.36.184)
3. 브라우저가 네이버 서버에게 해당 IP 주소의 HTTP 요청
4. 네이버 서버가 브라우저에게 해당 IP주소의 소스 코드 전달
5. 브라우저가 해당 소스 코드 해석
6. 네이버 웹 페이지 구현
2️⃣ HTML & CSS 기초
(1) HTML (Hyper Text Markup Language)
웹 페이지의 구조를 만들기 위한 마크업 언어 (프로그래밍 언어X)
- <html> 으로 시작해서 </html> 로 끝나는 구조
- <html> ~ </html> 사이에 <head>~</head>, <body>~</body> 구조가 포함
<html>
<head>
문서의 머리 부분
</head>
<body>
문서의 몸 부분
</body>
</html>
(2) CSS (Cascading Style Sheet)
마크업 언어로 작성된 문서를 실제로 웹 상에 표현하기 위한 스타일을 지정하는 언어
html 문서 안에서는 <head> 태그 안에 <style> 태그를 이용하여 작성할 수 있으며,
css 파일을 별도로 만들어 html 문서에 <link>로 연결하는 것이 보편적이다
* <head> 태그 안에 <style> 이용
<html>
<head>
<style>
body {
font-family: 'Noto sans Korea';
font-size: 1rem;
}
</style>
</head>
<body>
문서의 몸 부분
</body>
</html>
* <link> 태그를 사용하여 별도 파일 연결
<html>
<head>
<link rel="stylesheet" href="연결할 css파일 경로">
</head>
<body>
</body>
</html>
3️⃣ Bootstrap (부트스트랩) - FE 프레임워크
부트스트랩이란 무엇인가❓
웹 사이트를 쉽게 만들 수 있도록 도와주는 html, css, javascript 프레임워크
CDN 사용방법 :
CSS, JS CDN 코드를 사용하고싶은 문서에 복붙해서 사용
<!-- Bootstrap v4.6 CSS CDN 예시 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Bootstrap v4.6 JavaScript CDN 예시 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
👩🏻💻 1주차 학습 후기
드디어 시작한 코딩 기초강의! 기초 내용을 어느 정도 알고 있었기 때문에 1주차 내용은 쉽게 공부할 수 있었다. 부스트캠프는 처음에 사용해보지 않았던 프레임워크라고 생각했는데 이전에 mbti 서비스 클론코딩 해보면서 사용해본 적 있는게 스멀스멀 기억나서 복기하는데 도움이 됐다. (현업에서 사용하는지는 모르겠지만) 그리고 한 가지 아쉬운 점은 VScode에서 사용하기 편리한 'Open with Live Server' 없이 항상 '탐색기-크롬으로 열기' 식으로만 알려주시는 부분이다. 강의 촬영 시점 최근은 아닌 것 같은데... 우클릭 한 번으로 수정사항을 실시간으로 쉽게 확인할 수 있는 것을 초보자에게 알려주지 않은 점이 살짝 아쉬운 부분으로 남는다. 라이브 서버 이용하면 초보들이 더 쉽게 장벽을 깨뜨리지 않을까? 그래도 알음알음 알고있던 정보들을 다시 한 번 다져볼 수 있는 재미있는 시간이었다. 완주를 목표로 나머지 주차들도 열심히 따라가봐야겠다. 화이팅 화이팅.
'K-Digital Training > 패스트캠퍼스 1:8 코딩 입문' 카테고리의 다른 글
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 5주차 학습일지 (0) | 2023.03.03 |
|---|---|
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 4주차 학습일지 (0) | 2023.02.23 |
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 3주차 학습일지 (0) | 2023.02.21 |
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 2주차 학습일지 (0) | 2023.02.13 |
K-digital 기초역량훈련[패스트 캠퍼스] 코딩 1:8 | 웹 개발 왕초보 입문 (1주차)
패스트 캠퍼스 프론트엔드 부트캠프 5기에 지원하면서
서류전형 얼리버드 혜택으로 '코딩 1:8 | 웹 개발 왕초보 입문' 무료 강의를 지원받았다.
처음부터 완전 무료인 것은 아니고 내일배움카드로 90% 지원 + 자기부담금 10% 결제 후,
수강 진도율 80% 달성 인증하면 자기부담금 환급 + 캠프 선발 가산점이 주어진다 하여 수강하기로 결심했다.
📍 수강 기간 : 2023. 02. 07(화) ~ 2023. 03. 14(화) | 총 5주, 30시간
📍 수강료 : 40만원 (내일배움카드 90% 지원, 자기부담금 4만원)
🔎 커리큘럼 :
1주차 화면 구현 - html, css, javascript
2주차 서버 통신 - jQuery, ajax, API
3주차 서버 데이터 - Python, MongoDB, DB의 필요성, 웹스크래핑(크롤링)
4주차 서버 응답 - Flask, JSON
5주차 서버 실행 - 웹 사이트 배포, AWS, 도메인
1️⃣ WEB 동작 원리
[웹 사이트 동작 원리 순서]
1. 사용자가 웹 브라우저에 'http://도메인' 입력
2. 브라우저가 DNS 서버에서 해당 도메인의 IP 주소 확인 (e.g. 63.245.217.105)
3. 브라우저가 해당 서버에게 HTTP 요청
4. 해당 서버가 브라우저에게 소스 코드 전달
5. 브라우저에서 코드 해석
6. 웹 페이지 구현
[예시 : '네이버' 포털 사이트]
1. 사용자가 웹 브라우저에 'https://www.naver.com' 입력
2. 브라우저가 DNS 서버에서 네이버의 IP 주소 확인 (23.201.36.184)
3. 브라우저가 네이버 서버에게 해당 IP 주소의 HTTP 요청
4. 네이버 서버가 브라우저에게 해당 IP주소의 소스 코드 전달
5. 브라우저가 해당 소스 코드 해석
6. 네이버 웹 페이지 구현
2️⃣ HTML & CSS 기초
(1) HTML (Hyper Text Markup Language)
웹 페이지의 구조를 만들기 위한 마크업 언어 (프로그래밍 언어X)
- <html> 으로 시작해서 </html> 로 끝나는 구조
- <html> ~ </html> 사이에 <head>~</head>, <body>~</body> 구조가 포함
<html>
<head>
문서의 머리 부분
</head>
<body>
문서의 몸 부분
</body>
</html>
(2) CSS (Cascading Style Sheet)
마크업 언어로 작성된 문서를 실제로 웹 상에 표현하기 위한 스타일을 지정하는 언어
html 문서 안에서는 <head> 태그 안에 <style> 태그를 이용하여 작성할 수 있으며,
css 파일을 별도로 만들어 html 문서에 <link>로 연결하는 것이 보편적이다
* <head> 태그 안에 <style> 이용
<html>
<head>
<style>
body {
font-family: 'Noto sans Korea';
font-size: 1rem;
}
</style>
</head>
<body>
문서의 몸 부분
</body>
</html>
* <link> 태그를 사용하여 별도 파일 연결
<html>
<head>
<link rel="stylesheet" href="연결할 css파일 경로">
</head>
<body>
</body>
</html>
3️⃣ Bootstrap (부트스트랩) - FE 프레임워크
부트스트랩이란 무엇인가❓
웹 사이트를 쉽게 만들 수 있도록 도와주는 html, css, javascript 프레임워크
CDN 사용방법 :
CSS, JS CDN 코드를 사용하고싶은 문서에 복붙해서 사용
<!-- Bootstrap v4.6 CSS CDN 예시 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Bootstrap v4.6 JavaScript CDN 예시 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
👩🏻💻 1주차 학습 후기
드디어 시작한 코딩 기초강의! 기초 내용을 어느 정도 알고 있었기 때문에 1주차 내용은 쉽게 공부할 수 있었다. 부스트캠프는 처음에 사용해보지 않았던 프레임워크라고 생각했는데 이전에 mbti 서비스 클론코딩 해보면서 사용해본 적 있는게 스멀스멀 기억나서 복기하는데 도움이 됐다. (현업에서 사용하는지는 모르겠지만) 그리고 한 가지 아쉬운 점은 VScode에서 사용하기 편리한 'Open with Live Server' 없이 항상 '탐색기-크롬으로 열기' 식으로만 알려주시는 부분이다. 강의 촬영 시점 최근은 아닌 것 같은데... 우클릭 한 번으로 수정사항을 실시간으로 쉽게 확인할 수 있는 것을 초보자에게 알려주지 않은 점이 살짝 아쉬운 부분으로 남는다. 라이브 서버 이용하면 초보들이 더 쉽게 장벽을 깨뜨리지 않을까? 그래도 알음알음 알고있던 정보들을 다시 한 번 다져볼 수 있는 재미있는 시간이었다. 완주를 목표로 나머지 주차들도 열심히 따라가봐야겠다. 화이팅 화이팅.
'K-Digital Training > 패스트캠퍼스 1:8 코딩 입문' 카테고리의 다른 글
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 5주차 학습일지 (0) | 2023.03.03 |
|---|---|
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 4주차 학습일지 (0) | 2023.02.23 |
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 3주차 학습일지 (0) | 2023.02.21 |
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 2주차 학습일지 (0) | 2023.02.13 |
