0. 0주차 플젝: 미니 프로젝트
첫 주차에서는 자율 주제로 웹사이트를 만드는 과제를 수행한다.
입학시험 때 배운 기술들을 토대로, 3박 4일간 미니 프로젝트를 완성해보세요.
과제에서는 두 가지 제약사항이 있었는데
1) Jinja2를 이용한 서버 사이드 렌더링 방식으로 웹페이지 구현
2) 로그인 기능 구현
1. Jinja2
Jinja2는 플라스크에서 제공하는 템플릿 엔진이다. 처음에 doc를 읽었을 때만 해도 Django에서만 지원하는 건가?했는데 플라스크에 기본적으로 내장되어 있다고 한다. 설치를 해줘야 한다고 하기도 하고 내장되어 있다고도 하는데 일단 설치 방법은 아래와 같다.
설치 방법:
pip install Jinja2(*pycharm에서 다루면 preference에 들어가서 설치하면 됨!)
Jinja2는 HTML을 파이썬 코드로 제어한다는 점에서 매우 유용하다.
HTML 내에서 for문, if문부터 변수 제어 등 파이썬 기능을 다 사용 가능하다.
사용하는 방식을 보자.
1. 변수 출력 기능 - {{ 변수명 }}
{{ : 변수 출력 시작 기호(variable start string)
}} : 변수 출력 끝 기호(variable end string)
서버에서 render_template("000.html", 변수명=000)으로 해당 html을 렌더링한다고 하자.
그럼 html 파일에서는 해당 변수를 {{ 변수 }} 와 같이 더블 중괄호 안에 집어넣음으로써 서버에서 사용하던 변수를 클라이언트에서도 편하게 사용할 수 있다!
이때 render_template()은 서버 프로그램과 Jinja 템플릿 엔진을 사용한 html 파일을 통합하는 역할을 하는 메소드라고 생각하면 된다.
2. 프로그래밍 기능 - {% 제어문 %}
{% : 프로그래밍 영역 시작 기호
%} : 프로그래밍 영역 끝 기호
Jinja2의 핵심은 html에서 파이썬 코드를 짤 수 있다는 점이다.
html에서 반복적으로 사용하거나 조건에 따라 기능하는 코드를 만들 때 파이써닉한 코드를 짤 수 있다는 점이 포인트.
예제를 보자.
...
<body>
<div class="container">
<p> 사용자: {{ userName }} </p>
<p> 3번째 상품: {{goodsList[2]}} </p>
<p> 전체 상품 목록 </p>
<ul>
{% for goods in goodsList %}
<li>{{goods}}</li>
{% endfor %}
</ul>
</div>
<body>
문법 관련해 보다 자세한 설명은 아래 링크를 참조하면 더 잘 알 수 있다.
https://ddaaadd.tistory.com/276
jinja2란
Jinja2의 정의 Jinja2는 파이썬에서 가장 많이 사용되는 템플릿 엔진 중 하나입니다. Django의 템플릿 시스템에서 영감을 얻었지만 템플릿 작상자에게 더 강력한 도구 세트를 제공하는 표현 언어로
ddaaadd.tistory.com
https://gosmcom.tistory.com/155
Flask 자료 정리 04 - JinJa2 템플릿 엔진
파이썬의 웹 프레임워크 Flask(Micro Framework) 비슷한 예 : Bottle, 시나트라(Sinatra, Ruby, 시초) 웹 프로그래밍에 있어서 가장 핵심적인 요소만을 포함하고 있다. 자유도가 높다. WSGI 구현체인 Werkzueg와..
gosmcom.tistory.com
Jinja2로 렌더링하기
Jinja2는 HTML에서 작성한 파이썬 코드를 서버 단에서 받아서 render_template 라이브러리를 이용해 렌더링한다.
서버에서 브라우저로 페이지를 넘겨줄 때, 각 항목별로 페이지를 다 만드는 게 아니라 서버에서 render_template를 이용하여 한 개의 페이지에 각각 다른 정보를 입력해줄 때 편리하다(고 한다.)
렌더링 관련해서는 아래 링크를 참조.
jinja2로 렌더링 하는 방법
서버 사이드 렌더링 서버에서 브라우저로 페이지를 넘겨줄때 각 항목별로 페이지를 다 만드는게 아니라 서버에서 render_template을 이용해 한개의 페이지에 각각의 다른 정보를 입력해줄때 편리하
velog.io
2. 서버 사이드 렌더링(SSR)
렌더링이라는 단어부터 알아보자.
렌더링은 우리가 코드로 작성한 것을 브라우저가 웹페이지를 그려주는(요청해서 받은 내용을 브라우저 화면에 표시) 것을 말한다.(자세한 설명)
렌더링을 하는 과정은 아래와 같다.
1. Loader가 서버로부터 정보를 불러옴.
2. 파싱을 통해 문서를 DOM 트리로 만든다. (DOM 트리??)
3. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다
4. CSS 설정 및 레이아웃 위치를 지정한다.
5. 렌더링 트리가 그려진다.
서버 사이드 렌더링(SSR)은 서버 단에서 웹페이지를 생성하고 바로 브라우저에 띄우는 방식을 말한다. 페이지를 이동할 때마다 새로운 페이지를 요청하는데, 그도 그럴 것이 페이지를 이동할 때마다 특정 페이지를 띄우기 위해 서버 연산이 매번 들어가야 하니까. 이후에는 완성된 페이지 형태로 응답한다.
- 장점
- 검색엔진 최적화(SEO)기능: 서버사이드 렌더링으로 얻을 수 있는 가장 큰 장점!
- 성능 개선: 첫 렌더링된 html을 클라이언트에게 전달해주니 초기 로딩속도를 많이 줄이기 가능.
- 단점
- 프로젝트의 복잡도 증가
- 페이지 이동시 화면이 깜빡임 (새 페이지로 이동하는 것이니)
- 서버 렌더링에 따른 부하 발생 (매번 서버 연산 돌려야 하니까)
그럼 클라이언트 사이드 렌더링은? 서버에서는 정보(DB)만 주고 웹페이지를 프론트 단에서 그리는 것을 의미한다. Ajax를 생각해보면, url 주소는 계속 그대로인데 웹페이지가 휙휙 바뀌는 것을 볼 수 있다. React, Ajax 같은 애들이 여기에 속하는데 이런 방식을 Single Page Application(SPA)라고 한다.
Ajax, React 같은 애들의 특징은 필요한 부분만 따로 리로딩 없이 서버로부터 데이터를 받아 화면을 갱신한다. 이때, 갱신하는 주체가 서버에 있지 않고 프론트에 있다는 점!
- 장점
- 필요한 부분만 리로딩 없이 서버로부터 받아 화면 갱신 => 사용자와 빠른 인터랙션 가능 (전체 페이지를 매번 불러올 필요가 없으니)
- 단점
- 초기 구동속도가 느림
- 검색엔진 최적화가 어렵 => 그때그때 페이지 내 정보가 바뀌니까.
레퍼런스
서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)
렌더링 이란 요청받은 내용을 브라우저에 화면에 표시하는 것이다.Loader 가 서버로 부터 정보들을 불러옴파싱을 통해 문서를 DOM 트리로 만든다.DOM 트리가 구축되는 동안 브라우저는 렌더 트리를
velog.io
[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)
서버사이드렌더링 & 클라이언트사이드렌더링 왜 모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)! 고려해야할 점들이 있다. SPA는 최초 한 번 페이지 전체를 로딩한 후 데
velog.io
Server Side Rendering | Cracking Vue.js
서버 사이드 렌더링이란? 서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 뷰 싱글 페이지 애플리케이션을 서버 사이드
joshua1988.github.io
3. Git branch
이제까지는 버전 관리만 쓰다가 여기서는 늘 협업해야 하니 처음 써본 브랜치 기능.
Git의 어마무지한 장점은 버전 관리도 있지만 같이할 때 브랜치를 이용해 독립적으로 작업하고 추후에 main 브랜치로 merge하는 협업 기능에 있다.
개념은 간단한데,
1. 처음 프로젝트를 여는 사람이 default가 되는 main 브랜치를 생성한다.
# git init
# git add .
# git commit -m "프로젝트 시작"
# git remote add origin 깃헙주소
# git push origin master
2. 이를 함께 일하는 사람들이 git clone으로 해당 프로젝트를 내려받은 다음
# git clone 깃헙주소
3. 각각 자기만의 브랜치(독립적으로 작업하는 공간)을 생성한다.
# git branch brchA
# git branch brchB
# git branch brchC
4. 각자 작업이 완료되면 각자 브랜치에 push해서 부분 작업을 마무리하고, 최종적으로 master 브랜치에 merge하는 개념이다.
<브랜치에서 작업한 뒤 커밋할 때>
코드 순서를 잘 기억하자.
1. git add .(해당 디렉토리에서 진행)
2. git commit -m "커밋 내용"
3. git push origin "브랜치 이름"
https://victorydntmd.tistory.com/91
[Git] Github으로 협업하기 ( 토이 팀프로젝트 시나리오, 브랜치 전략 )
이 글은 팀프로젝트를 할 때 처음 Git, Github을 사용해서 협업하는 분들을 대상으로 합니다. 작업하는 과정에서 있을 수 있을 법한 일들을 시나리오로 만들었습니다. 상황 A, B, C 3명이 팀을 이뤄
victorydntmd.tistory.com
https://victorydntmd.tistory.com/75
[Git] 명령어(3) - branch
1. branch 영어 단어 branch는 나뭇가지입니다. 이를 Git에 적용해보면 큰 줄기( master )에서 뻗어나간 가지( branch )라고 생각할 수 있습니다. master 브랜치 git init 할 때 자동으로 생성해주는 기본 브랜
victorydntmd.tistory.com
'정글사관학교 개발일지' 카테고리의 다른 글
| SW사관학교 정글 WEEK01(5일차) 후기 (2) | 2021.11.06 |
|---|---|
| 정글사관학교 3일차 TIL: 프로젝트 결과 발표 (0) | 2021.11.04 |
| 정글사관학교 2일차 TIL: 로그인 - 쿠키&세션 (0) | 2021.11.03 |
| 정글사관학교 첫 날 후기 - 장병규 의장님, Jinja2, 서버 사이드 렌더링(SSR), Git branch, 로그인 - 쿠키&세션 (0) | 2021.11.02 |
| SW정글사관학교 3기 합격 후기! (61) | 2021.10.17 |