0913 [웹 프로그래밍 A-Z 기초강의~2주차] TIL

<1주차>

- HTML, CSS, Javascript(jQuery, Ajax)

 

서버

-클라이언트에 그릴 것을 줌

-그릴 것 : 데이터 ( 데이터만 주기도함 - json )

 

클라이언트

-서버에 원하는 것 요청

 

*서버와 클라이언트 간의 통신 : Get, Post방식

- Get: 통상적으로 데이터 조회, 보안 x, JSON, ex) 영화목록조회

    - ? : 다음부터 전달할 데이터가 들어감

    - & : 또 다른 데이터가 있다.  

- Post: 통상적으로 데이터 생성(Create), 변경(Update),  삭제(Delete) 요청, ex) 회원가입, 회원탈퇴, 비밀번호 수정 등

 

브라우저 역할

-서버에 요청

-서버에서 받은 것을 그려줌

HTML: 뼈대

   <태그>

    div: 구역을 묶어줌

    p: 문단 

    ul-li: bullet point

    h1: 제목, 하나씩은 있는 것이 좋음

    span: 특정 글자를 꾸밀 때 사용

    a: 하이퍼 링크

    hr: 수평선

    input: 입력창

    button: 버튼

    textarea: 큰 입력창

 

CSS: 꾸미기 ex) 글씨의 굵기, 색상 등 

- 뭔가를 꾸민다는 것 : 꾸밀 것을 가리킬 수 있어야됨. --> '영수의 바지'를 초록색으로, '영희의 머리'를 보라색으로 

    --> 수많은 태그 중 '어떤' 태그를 '어떻게' 꾸밀 것인가? 

    --> '어떤' : 태그에 class 나 id를 줄 수 있다. : ex) <h1 class="mytitle"> --> mytitle이란

 

Bootstrap: 템플릿 같은 것

- 부트스트랩을 사용하기 위해서는 필요한 컴포넌트가 있다.

- 부트스트랩과 내가 만든 CSS를 중첩해서 사용할 수 있다.

 

JS: 동적인 것

- <script> 태그 안에 넣어서 작성한다.

- 변수 선언은 let으로 (강의에서 배운 것에 한하여)

- 함수, 조건문, 반복문 등을 사용할 수 있다.

 

jQuery: HTML 요소를 조작하는 편리한 JS를 미리 작성해둔 것. 라이브러리, JS보다 간결하다.

-사용하기 위해서는 jQuery CDN을 임포트 해야한다. 하지만 부트스트랩 사용시 별도로 추가할 필요가 없다.

-CSS와 같이 가리키는 대상이 필요하다. 하지만 jQuery는 id를 사용한다. (CSS는 class)

 

Ajax: 비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자. HTML만으로 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술

-기본 골격

$.ajax({

    type: "GET", // GET 방식으로 요청한다.

    url: "api url",

    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음

        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성

        // 다양하게 코드를 쓸 수 있음. jQuery 사용가능.

    }

})

 

JSON: 크롬의 JSON 뷰어를 사용하면 가독성이 좋다.