항해99 TIL [9/20]

이지연·2021년 10월 10일

항해99 TIL

목록 보기

9/33

추석연휴가 시작되었고, 항해 2주차도 시작되었다. 짧고도 긴 자유시간 아닌 자유시간이 주어졌다. 나는 이 시간들을 좀 더 유용하게 보내고 싶었기에 그 전에 들었던 항해99의 강의들을 한 번더 복습하고 공부하는 시간을 보내기로 했고, 내가 선택한 것은 "웹개발 플러스" 강의이다.

웹개발 플러스 - 1주차

[수업 목표]

웹서비스 만들기 전 과정을 복습한다.
파일 올리기 기능을 구현한다.
AWS에 배포 과정을 복습한다.

[복습을 위한 주요 질문들]

1. 서버는 특수한 컴퓨터다? No! 🙅
- 서버는 컴퓨터의 '역할'. 컴퓨터도 여러 역할을 맡을 수 있음. DB, 서버, 게임 등
- 서버는 요청을 받으면 HTML+CSS+JavaScript 파일을 주기도 하고, JSON 형식으로 데이터를 주기도 함!

2. API란?
- 서버가 요청을 받게 위해 뚫어놓은 '창구'.
- 요청에는 POST(주로 데이터를 수정할 때), GET(주로 데이터를 가져올 때) 요청 등 여러가지 타입이 있음!

3. HTML, CSS, JS는 각각 어떤 역할을 하나?
- HTML은 뼈대 / CSS는 꾸미기 / JavaScript는 움직이게 하는 것!
- CSS로 꾸밀 때에는 이름표를 붙여주고(class="클래스명"), 안에 .클래스명 으로 썼음.

4. JQuery란?
- JQuery는 JavaScript의 라이브러리로, HTML 조작을 쉽게 만들어줌.
- 라이브러리는 남이 만들어 놓은 갖다쓰기 좋은 코드! 그렇기에, 임포트 를 해야했음.
- id로 이름표를 붙여주고(id="아이디"), $('#아이디').val() 과 같이 input 박스의 값을 가져올 수 있었음.

5. Ajax는?
- Ajax는 서버 통신을 위해 쓰임. 아래는 Ajax의 생김새.

        $.ajax({
            type: "GET",
            url: "요청할 URL",
            data: {},
            success: function (response) {
                // 서버가 준 데이터가 response에 담깁니다!
            }
        })

Flask란?

서버를 만드는 프레임워크.

     아래 코드를 run 하고, `http://localhost:5000/`으로 접속하면,
     index.html 페이지를 볼 수 있었음.
     
     ```python
     from flask import Flask, render_template, jsonify, request
     app = Flask(__name__)
     
     @app.route('/')
     def home():
         return render_template('index.html')
     
     if __name__ == '__main__':
         app.run('0.0.0.0', port=5000, debug=True)
     ```

웹개발 플러스 - 2주차

[수업 목표]

Flask의 더 많은 기능을 배울 것.
API에 보안 키를 전달할 수 있음.
멀티페이지 사이트를 만들 수 있음.

2주차에 배울 것

동적 웹페이지와 템플릿 언어
정적 웹페이지 vs. 동적 웹페이지
정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것!
- 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법임.
- 정적 웹페이지는 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있음.
- 동적 웹페이지는 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 (많은 경우 주소도 같이 변함.) 검색 엔진 최적화(search engine optimazation, SEO)가 어려움.