웹개발 4주차

와우... 4주차는 개인적으로 정말 어려웠다.

프론트엔드와 백엔드를 연결하는 API(Application Programming Interface)를 직접 만들어보았는데,

같은 형식을 연습 문제를 통해 4번이나 반복했는데도 아직도 아리송하다.

숙제도 수업 자료 보면서 힘들게 따라갔다. 5주차에 복습을 한다고 하니 다행이다.

 

우선 로컬 개발 환경에 대해 배웠다.

로컬 개발 환경은 내 컴퓨터에 서버를 만들고, 그것을 내 컴퓨터에서 접속해 보는 것이라고 할 수 있다.

프레임워크란, 서버를 만들 수 있는 큰 라이브러리 개념이고,

우리는 이번 주에 Flask라는 프레임워크를 다뤘다.

 

파이참에서 어떤 프로젝트를 새로 시작할 때 새 파일과 디렉토리를 만드는 방법에 대해 배웠다.

우리는 이것을 "프로젝트 세팅"이라고 불렀다. 쉽게 말해 Flask 폴더 구조 만드는 방법이다.

우선 새로운 디렉토리(경로)로 static과 templates를 만들어주고, 파이썬 파일인 app.py도 만들어준다.

그리고 templates 아래에 index.html을 만들어준다. templates 안에 HTML이 담기기 때문에

이미지나 CSS 등을 담는 static보다 templates를 주로 썼다.

 

API에 대해 잠깐 복습하자면, get과 post로 나뉜다.

우리는 app.py에서 이를 나누고, 데이터를 조회하는 것과 데이터를 생성하는 것을 따로따로 작성했다.

순서는 post부터 작성한 후, get으로 결과값을 도출했다.

 

처음 몇 강에서 5주차 내용이 이해하기 쉽지 않았던 건

프론트엔드와 백엔드를 지칭하는 말이 두 가지 이상되었다는 점에 있다.

우리 연습문제와 숙제에서는 프론트엔드를 html, ajax를 작성하면서 이를 "클라이언트"라고 칭했다.

반대로 백엔드는 python으로 작성하고 우리가 이번에 사용했던 Flask 서버라고 말했다.

지금에야 메모해놓고, 구분할 수 있지만,

처음에는 클라이언트에서 서버 연결할 땐 index.html을,

서버에서 클라이언트 확인할 땐 app.py에서 코드를 입력해야 한다는 것을 모르고 버벅였다.

 

이미 배운 내용이지만 너무 빠르게 진도를 나가는 바람에 특별히 새로웠던 개념은

Jquery 임포트를 통해 Ajax로 요청한다는 점 정도였다.

 

연습문제로 화성땅 공동구매와 스파르타피디아(영화 포스팅)를 연습했고

숙제로 팬명록에 코멘트를 달고 쌓아서 보여주는 것을 했다.

 

api에서 get은 작성한 코멘트들을 DB에서 가져와서 보여주면 되었으므로 쉬웠지만

post는 의외로 순서가 헷갈렸다.

1. 연결 확인 *조각기능(프로젝트에 필요한 기술들을 먼저 구현해 보는 것)

2. 서버 만들기

3. 클라이언트 만들기

4. 완성 확인

 

이 모든 과정에서 id를 정확하게 쓰고, 들여쓰기를 신경쓰며,

콤마나 햅틱, 중괄호와 소괄호 등에 집중하며 쓰기가 참 어려웠다.

그리고 app.py와 index.html을 오며가며 이를 연결시키는 과정도 무척 생소했다.

특히 내용 전체를 for 반복문으로 쌓아 올리는 과정을 혼자 해보는 연습이 필요하며,

let temp_html 부분을 아래 카드 형식에서 긁어올 때 햅틱을 반드시 써야한다는 걸 기억해야 한다.

 

5주차를 한 시간 반만에 끝내야 한다니 믿을 수가 없다 ㅠㅠ

#9시개강