웹개발종합반 1주차 회고록

1. 서버/클라이언트/웹 동작 개념
2. HTML, CSS 기본내용
3. 부트스트랩 적용 방법
4. JavaScript 기초 문법
5. 1주차 숙제

1. 서버/클라이언트/웹 동작 개념

서버, 클라이언트, 웹의 아주 기본적인 동작 개념을 배웠다.

기본적으로 웹 페이지에서 HTML로 값을 출력할 때

1. 웹 브라우저 (클라이언트)가 서버에게 데이터를 요청하고
2. 서버는 요청받은 데이터를 HTML,CSS,JS 형식으로 브라우저에게 넘겨주어
3. 브라우저는 내려받은 데이터를 출력한다.

만약 API로 값을 받아올 때는

1. JSON 형식으로 값을 넘겨받아 데이터만 출력을 해준다.
   ※API 형식은 나중에 더 알아볼 예정!

2. HTML, CSS 기본내용

아래와 같이 개념은 크게 나누어 볼 수 있다.
1. HTML : 뼈대
2. CSS : 꾸미기
3. JS : 동적 액션

HTML은 문서 형태 기반이며 크게 Head와 Body로 나누어져 있다.

1. Head : CSS, Title, 서버 정보등 페이지 속성 정보를 정의하는 곳
2. Body : 페이지의 내용을 나타내는 곳

CSS는 웹페이지를 꾸미는 곳이며 태그를 이용할 수 있다.

여기서 사용되는 글 속성과 박스 속성을 다르기 때문에
display : block; 을 사용해서 글 속성을 박스 속성으로 바꿀 수 있다.

3. 부트스트랩 적용 방법

부트스트랩이란 간단히 말해서 이미 개발된 CSS를 정리해 놓은 사이트다.
사용할 때도 아래 Template과 같이 CSS, Jquery, JS를 호출하면 된다.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

<title></title>

CSS 라는 것이 기술적 + 외적인거라 나에게도 조금은 어려운 분야인데
이렇게 부트스트랩같이 무료로 제공되는 CSS들이 있으니 좀 더 공부해서 나중에 프로젝트할 때
잘 활용할 수 있으면 좋겠다.

4. JavaScript 기초 문법

JavaScript란 브라우저가 인식할 수 있는 표준언어.

변수 선언, 기본 연산, 리스트, 딕셔너리, for문, if문을 배웠다.

변수 초기화 시 별도 자료형을 선언하지 않아 편했다.
단어는 '' 또는 "" 구분 가능

for문과 if문도 기존에 Java 형식과 크게 다르지않아 이해하기 쉬웠다.

리스트안에 딕셔너리가 내장될 수 있다는 것을 배웠다.

5. 1주차 숙제

부트스트랩을 이용하여 간단한 상품 페이지를 만들었다.
어떻게보면 이미 만들어진 코드에 정보만 수정하느거라 크게 어려움은 없었다.
하지만 단순히 복사,붙여넣기 한 것이 아닌
전체적으로 어떠한 흐름으로 구조가 만들어졌는지 파악하며 개발을 하니 재밌었다.
아래는..부끄럽지만 내가 만든 페이지! 나중에는 더 완성된 페이지를 만들고 싶은 의욕이 뿜뿜 솟는다.