슬로

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

토이프로젝트 구현 중, 로그인 토큰을 관리하는 쿠키를 저장하고, 특정 조건에서 이 쿠키를 활용하여 로그인 여부를 확인하는 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)

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

Javascipt란 ?

=> 브라우저에 명령을 내리는 표준 언어로, Java와 관련X

=> html의 head 안에 <script></script>라는 태그에 쓴다

script 안에 function을 만들어주고,

button에 onclick했을 때 hey를 호출하도록 하기

<Javascript문법>

변수만들기:     let a = 1

함수만들기:     function name(){       }

리스트:            let lst = ['one', 'two', 'three', 'four']

리스트접근:     lst[0] 

딕셔너리:        let dic = {'name' : '영수',  'age' : 27}

딕셔너리접근: dic['name']

console.log() : print와 비슷한 역할. 브라우저의 개발자도구 -> console에 결과값이출력

반복문: iterable.forEach( (a) => { 수행할 동작 } )

조건문: if (조건 > 기준) { 수행할 동작 } else { 수행할 동작 }

문자열 표현 시, " 문자 " 보다 ` 문자 ` (백틱)로 표현하는게 더 유연한듯함. (문자열 내 줄바꿈 허용, ${변수} 를 통해 포맷팅 가능. 마치 파이썬의 f'문자열'같이)

<jQuery>

Javascript로 구현할 수 있는 기능들을 편리하게 해줄 수 있는 많은 기능들이 있는 라이브러리

import:   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>  </style>부분에 작성하며, $('#변수명').함수(인자) 이런식으로 사용가능.

변수명은 html 블록에 id로 지정할 수 있다.

div블록에 q1이라는 id를 주고,

style에서 이 변수에 대한 함수를 작성한 뒤, 안에 jquery구문 작성

q1의 텍스트를 '바꿀 텍스트'로, 색깔을 red로 바꿔주기

.append() 함수 자주쓰임 (데이터를 받아와서 html 만들어두고 html블록에 append해줄 때)

$( '#변수명' ).empty()   : 변수명에 해당하는 블록을 비워줌

$( '#변수명' ).append()

$(window).load()
: 해당 페이지의 모든 외부 리소스 ... 즉 모든 요소가 로드 된 후에 처리

$(document).ready()
: DOM 객체만 로드 되자마자 처리

<Fetch>

---문법---

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})

url은 데이터를 받아올 수 있는 url

=========fetch 예시코드=============

============jQuery, Fetch 연습==================

        $(document).ready(function () {
            setInterval(function () {
                // console.log('갱신')
                fetch("날씨 받아오는 url").then(res => res.json()).then(data => {
                    let temp = data['temp']
                    $('#weather').empty()
                    $('#weather').append(`${temp}˚C`)
    
                    let now = new Date()
                    $('#timenow').text(`${now.getHours()}시 ${now.getMinutes()}분 ${now.getSeconds()}초`)
                })

            }, 1000);  //1000은 갱신되는 시간으로, 1초 = 1000
        
           function submit_boulder(){
                alert('준비중임 ㅋ')
        }
        })