슬로

==========================================================================================

토이프로젝트 구현 중, 로그인 토큰을 관리하는 쿠키를 저장하고, 특정 조건에서 이 쿠키를 활용하여 로그인 여부를 확인하는 Auth() 함수를 만들었다. 활용되는 곳에서 return을 받아보니 계속 undefined가 받아와져서 return의 위치가 잘못됐다고만 생각하고있었는데, ajax의 async 옵션을 false로 설정해줘야 하는 경우였다.

관련내용 : https://recollectionis.tistory.com/167

==========================================================================================

AWS elastic beanstalk의 경우 한달에 750시간의 무료 호스팅을 제공한다. 웹페이지 하나를 deploy하면 한달에 720시간이니 사실상 하나의 웹만 유지할 수 있다는 것. 내가 만들어본 페이지랑 부트캠프 입과시험 배포, 토이프로젝트 배포 등 다 내 AWS 계정으로 진행했어서 일단 다 내렸다. 시간날 때 내 페이지만 AWS에 올리고, 나머지 프로젝트는 https://www.netlify.com/    에서 무료 호스팅을 제공한다고 하니 여기에 올려보도록 하자

==========================================================================================

<토이프로젝트 진행 중 낙서>

HTML로 체크박스 체크/해제 기능은 <input> 태그의 옵션 중 type=checkbox를 통해서 구현 가능하다

<input> 태그의 옵션 중 type=password는 패스워드 입력 시 이를 가려줌

웹페이지를 이동시키는 JS코드는 window.location.href = 'url'      그밖에 window.location의 함수들 공부해보자

GET요청에도 파라미터를 쿼리형식으로 담을 수 있다. 요청을 보낼 url 뒤에 ?id=asdf 이런식으로 썼던걸로 기억

=> requests.args.get('파라미터이름')

Pymongo DB의 객체 중 _id필드는 고유id를 담고있는데, 이는 ObjectId 클래스여서 json형식으로 내려보내줄 수가 없다.

이걸 string으로 바꿔서 쓸일이 있을지 모르겠지만, 있다면 str()에 넣어줘서 바꿔주고, 다시 ObjectId로 만들어주고 싶으면 from bson import ObjectId      ==>  ObjectId(str)

로그인 토큰 저장 방식은 쿠키, 세션스토리지, 로컬스토리지

<div class = 'image_box'>

- 백그라운드 사진과 텍스트를 담은 박스

- width, height로 크기 조절,

- border-radius로 테두리 둥글게

- text-align 글씨 가운데 정렬

- padding으로 글씨 위치 조절 (padding한 만큼 width와 height도 변함)

- background-image로 url에서 이미지 가져오고, position, size로 박스 사이즈에 맞게 이미지를 보여주는 위치 조절

<div class = 'wrap'>

- 로그인박스와 ID, PW창을 묶어주는 div

- margin 옵션을 통해 이 div를 가운데로 옮겨줌 (auto 시 좌우 기준으로 가운데정렬)

- auto로 가운데정렬할 때 width가 정의되어있지 않으면 정렬이 안된다

- 여러가지 해봐도 상하 기준 가운데정렬은 안됨(다른 방법이 필요할 것으로 예상)

<폰트 씌우기>

google fonts : https://fonts.google.com/?subset=korean 

Select Regular 400

import에서 style 내부 복사 -> 내 코드 style부분에 붙여넣기

CSS rules to specify familites 부분 복사 ->

*{} 안에있는 부분이 적용하는 부분인듯 함 -> 일괄 적용이고, 이 부분에 대해서 좀 더 알아볼 필요有

<CSS파일 분리>

1.style부분 드래그해서, 생성한 style.css 파일에 붙여넣기

2.내 head 부분에 이 style.css를 가져오는 코드를 넣어줄 수 있음

코드가 깔끔해지는 부분도 있지만, 더 중요한 것은 남들이 작성해놓은 style(라이브러리)을 가져올 수 있다는 점이 핵심.

<유명한 CSS 모음 bootstrap 활용해보기>

bootstrap 홈페이지에서 오른쪽 위 점 세개 누르면 버전을 고를 수 있음

https://getbootstrap.com/docs/5.0/getting-started/introduction/

==> layout, content, component등 다양한 모음이 있다.

head에 이걸 복붙해주면 라이브러리 가져옴 

버튼 하나를 가져와서 LOGIN 버튼을 파랗고 귀엽게 만들어주었다.

<라이브러리를 활용한 페이지 만들기 연습>

bootstrap 라이브러리를 활용하여 간단한 웹 페이지를 만들고, github을 통해 배포해보았다.

버튼은 아무 기능 없지만, 배워가면서 업데이트 해볼 예정

https://mottoslo.github.io/web-rate_my_send/