🧑🏼💻 시작하기에 앞서
진짜로 항해99 일주일이 지났다. 정말 한 달 같은 일주일을 보낸것같다. 거의 맨날 새벽 3~4시까지 작업하다보니 하루하루가 길게 느껴졌나보다.
미니프로젝트를 하면서 정말 많은 것을 배운 것 같은데 대략적으로 어떤 키워드들이 있었는지 정리 해보려고한다.
🧷 이번주에 새로 배운것들
🔎 JinJa2
jinja2는 어떤 파일, 실재하는 파일에 어떤 변수들을 집어넣어서 약간 변경시켜서 html로 만들어주는 엔진, 같은 것이다.
다시말해서 jinja2라는 파이썬의 템플릿 엔진인데, 여기서 템플릿 엔진이라는 것은 템플릿(문서원형)과 데이터를 혼합해서 새로운 문서(document)를 만드는 것이다.
실제로 보면 실제 html문서에 {{데이터}}이런 형식으로 작성된다.
⚙️ jinja2코드 예시 1
예시에서 볼수 있듯이 실제 html에 carInfo.car_price_full이라는 데이터를 끼워 넣으므로써 서버에서 html파일을 클라이언트에 보낼때 데이터를 아예 html파일에 끼워넣어서 보낸다. 이렇게되면 브라우저가 렌더링할때 데이터가 들어가있는 html파일을 렌더링 하게되어 페이지가 빠르게 렌더된다.
<li><span>가격</span>{{carInfo.car_price_full}}</li>
<li><span>연비</span>{{carInfo.car_fuel_efficiency}}</li>
<li><span>연료</span>{{carInfo.car_fuel}}</li>
<li><span>차타입</span>{{carInfo.car_type}}</li>⚙️ jinja2코드 예시 2
예시코드에서 보면 클라이언트에서 서버에게 요청할때 detail/뒤에 keyword라는 데이터를 넣어서 서버에 전달 할 수 있다.
예시코드에서는 클라이언트에서 자동차의 고유 id값을 url에 추가로 붙여서 서버에 요청한다. 그럼 서버에서 이 keyword를 받아서, carId라는 변수에 저장하여 detail.html에 바로 넘겨줄 수 있다.
@api_car.route('/car/detail/<keyword>')
def detail(keyword):
carId = keyword
carInfo = db.carInfo.find_one({'_id': ObjectId(carId)})
carInfo["_id"] = str(carInfo["_id"])
return render_template('detail.html', carInfo= carInfo , carId= carId)⚙️ 기타 jinja2 문법들..( 다 html안에서 적용한다.)
- 변수에 저장하기
{% set gu_name = rows[0].MSRSTE_NM %}
{% set gu_mise = rows[0].IDEX_MVL %}
<li>{{ gu_name }}: {{ gu_mise }}</li>- 반복문
% for row in rows %}
{% set gu_name = row.MSRSTE_NM %}
{% set gu_mise = row.IDEX_MVL %}
<li>{{ gu_name }}: {{ gu_mise }}</li>
{% endfor %}- 조건문
{% if gu_mise >= 50 %}
<li>{{ gu_name }}: {{ gu_mise }}</li>
{% endif %}🙋🏼♀️ 뭔가 이런식의 데이터 바인딩이 리엑트 JSX문법 이랑 비슷한 것 같았다.
🔎 서버사이드 렌더링
서버 사이드 렌더링은 따로 정리한 내용이 있으니 서버사이드 렌더링 정리
🔎 JWT토큰
- 인가를 좀 더 간편하게 위해 고안된 것이 JWT 토큰방식이다.
- JSON Web Token 줄여서 "JWT"라고 부른다.
- 사용자가 로그인을 하면 토큰이라는 표를 제공해준다.
- 서버는 그 정보를 따로 저장하지 않는다.
- 토큰은 엄청나게 긴 문자 숫자를 조합한 문자열로 전달된다.
- 즉 암호화된 3가지 데이터를 이어 붙인것이다.
- 토큰에 담긴 사용자 정보등의 데이터를 Claim 이라고 한다.
- 사용자가 로그인 하면 받는 token은 Claim으로 전달된다.
- token은 요청이 있을때마다 사용자로부터 서버에게 전달된다.
🔎 API 요청
API(Application Programming Interface)는
응용 프로그램(application, 애플리케이션)에서 기능을 사용하거나 데이터를 주고 받기 위한 기능을 이야기합니다.
사실 이번 프로젝트를 진행하면서 클라이언트가 요청을 보내면 서버는 응답데이터를 넘겨준다. 그 사이에서 클라이언트에서 요청을 보냈을때, 요청에대하여 어떤 명령을 수행하고 응답을 보내준다.(뭔가 의미는 알겠는데 설명하기 애매한......)
API 예시)
1.클라이언트: 나의 chrome 창 에서
2.요청(Request): 요청 URL을 입력하고 엔터를 치는 것은 아래와 같은 의미
2-1 요청(Request) URL: https://api.thecatapi.com/v1/images/search
2-2 api.thecatapi.com 이라는 서버 주소의
2-3 - v1/images/search 인 API에
2-4 브라우저 주소창에서 엔터치기 = GET 요청을 보내기
3.서버 기능: 서버는 정해진 동작인 데이터를 조회 를 실행하고
4. 응답(Response) : 데이터(JSON )를 클라이언트에 응답해줍니다.
🔎 CRUD
이번 프로젝트에서 댓글기능을 맡으면서 CRUD기능을 구현했다.
- Create : 댓글을 달때, User정보들과 댓글을 POST 방식으로 서버에 전달한다.
- Read : 클라이언트에 ajax로 요청해서 고유식별자로 db에서 조회후 list로 뿌려줌
- Update : 클라이언트에 ajax로 요청해서 고유식별자로 db에서 조회후 db에서 그 정보를 수정
- Delete : 클라이언트에 ajax로 요청해서 고유식별자로 db에서 조회후 그 정보를 삭제
🔎 CRUD + Auth
이번 프로젝트에서 머리아팠던 부분이었다. Create 부분에서 클라이언트에서 데이터를 전달할때 유저정보와 토큰 그리고 고유 차 ID를 같이 넘겨주고 동시에 처리하느라 머리아팠다.... 좀 더 자세히 정리해봐야겠다.
추가로 정리해야할 정보들
- 파일 모듈화 : 장점 ! 깃 충돌이 잘 안난다. 각자 다른 파일에서 작업하기 때문!!!
- 몽고 Atlas 연결
- 자바스크립트에서 썼던 ES6 문법들
🧷 어려웠던 점
정리해야 할 내용들을 그때그때 정리해야하는데 조금 밀리다보니 기하 급수적으로 늘어났다... 아무래도 처음 접하는 내용들이 많다보니ㅜㅜ
🧷 개선해야 할점
앞으로는 처음 본 내용들, 키워드가 나오면 노트나 종이에다 적어놓고, 그날그날 그 정보들을 찾아서 블로그에 정리 하도록 해야겠다!!!
