https://console.cloud.google.com/getting-started

들어가서 로그인하고, 좌측 탭에 API 및 서비스 클릭

 

Google Cloud console

 

console.cloud.google.com

 

프로젝트 생성하고, 사용자 인증 정보 탭 ->   +사용자 인증 정보   -> API 키 발급

 

 

https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&channelId=채널고유ID&type=video&key=발급받은API키

 

위 주소에 채널고유ID, 발급받은 키 붙여넣기 후 이동하면 (개수변경은 maxResults 등)

 

json으로 반환한다.

 

 

https://developers.google.com/youtube/v3/getting-started?hl=ko 

 

시작하기  |  YouTube Data API  |  Google Developers

시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었

developers.google.com

카테고리별 가져오기, 지역으로 명시해서 인기동영상 가져오기, 내가 종아요한 동영상 가져오기 등 여러가지 해볼 수 있음

 

 

 

'공부 > 잡다' 카테고리의 다른 글

IntelliJ 디버거 활용 - Exception 조건설정  (0) 2023.04.10
Twitter recommendation system code revealed  (0) 2023.04.06
Open-AI ChatGPT plugin  (0) 2023.04.06
ajax async // 웹관련 몇가지  (0) 2023.04.01
Git Bash  (0) 2023.03.23

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()

 

checkResult함수가 작동하니 텍스트와 색깔이 바뀜

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

 

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

 

 

 

<Fetch>

---문법---

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

 

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

 

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

 

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                console.log(data)
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((elem) => {
                    let gu_name = elem['MSRSTE_NM']
                    let mise_level = elem['IDEX_MVL']
                    if (mise_level > 40) {
                        $('#names-q1').append(`<li class= 'bad'>${gu_name} : ${mise_level}</li>`)
                    }
                    else{
                        $('#names-q1').append(`<li>${gu_name} : ${mise_level}</li>`)
                    }

                })
            })
        }
    </script>

 

============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('준비중임 ㅋ')
        }
        })

 

'공부 > Web' 카테고리의 다른 글

MongoDB / Flask  (0) 2023.03.25
API 활용 / 웹스크래핑  (0) 2023.03.24
CSS  (0) 2023.03.21
HTML  (0) 2023.03.21
Web 동작원리, HTML, CSS  (0) 2023.03.21

 

 

 

<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 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

 

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/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

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

 

 

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

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

 

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

 

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

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

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

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

 

 

 

 

 

 

'공부 > Web' 카테고리의 다른 글

MongoDB / Flask  (0) 2023.03.25
API 활용 / 웹스크래핑  (0) 2023.03.24
Javascript // jQuery // Fetch  (0) 2023.03.22
HTML  (0) 2023.03.21
Web 동작원리, HTML, CSS  (0) 2023.03.21

 

 

 

 

 

 

 

 

 

'공부 > Web' 카테고리의 다른 글

MongoDB / Flask  (0) 2023.03.25
API 활용 / 웹스크래핑  (0) 2023.03.24
Javascript // jQuery // Fetch  (0) 2023.03.22
CSS  (0) 2023.03.21
Web 동작원리, HTML, CSS  (0) 2023.03.21

<Web 동작원리>

 

브라우저의 역할 - 서버에 요청을 전달하고, 정보를 가져와서, 정보를 보여주는 역할

                              => 개발자도구에서 나에게 보여지는 네이버 페이지 수정가능, 새로고침하면 돌아옴, 와이파이꺼도 페                                       이지그대로

                              => 서버에 요청을 하면 HTML, CSS, Javascript를 받아옴  (front-end)

'공부 > Web' 카테고리의 다른 글

MongoDB / Flask  (0) 2023.03.25
API 활용 / 웹스크래핑  (0) 2023.03.24
Javascript // jQuery // Fetch  (0) 2023.03.22
CSS  (0) 2023.03.21
HTML  (0) 2023.03.21

1월1일 다이어트 시작 후 4KG가량 무게가 줄었다. 클라이밍 할 때 체감이 된다.

 

써볼만한 채용공고가 많이 올라오고 있다. 자소서 쓰는 것은 여전히 쉽지 않다. 몸이 거부하는 느낌이다.

 

외국계회사에 지원했더니 새벽 한 시에 전화로 영어 fluency test를 본다고 한다. 영어 안한지 오래됐는데 긴장이 된다.

 

각종 영양제를 챙겨먹기 시작했다. 체감상 활력이 더 생긴 느낌이다.

 

요샌 즐거운 일이 별로 없다. 원래는 평소에 잘 웃고다녔는데, 그것도 마음이 여유로워야 되는건가보다.

 

뭔가 일이 꼬이고 있는 느낌이 계속 드니까 즐거운 생각이 잘 안 든다.

'일기 > 하루일기' 카테고리의 다른 글

2023/01/02 - 두 번째 일기  (0) 2023.01.02
22/11/23 - 첫 일기  (0) 2022.11.23

2022년 12월 23일, 약 11년을 함께한 강아지 만두가 세상을 떠났다.

 

9월에 췌장, 갑상선 등 암이 많이 전이되었다는 소견을 받아 약 4개월정도 남았다는 말을 듣고도,

믿기지 않을 정도로 활력 넘치고 해맑은 탓에 그보다는 오래 볼 수 있겠거니 생각했었다.

 

설사가 잦아 소화기에 문제가 있나 싶어 방문한 초음파 병원에서 종양이 의심된다는 말을 들을 줄은 몰랐기 때문에

당황스러움과 걱정이 합쳐져 누나와 나는 많이 울었다. 수술 가능 여부도 알아보았으나 전이가 많이 되어 위험하다고 하여

경구항암제로 종양이 더 자라지 않기만을 바라는 수 밖에 없다고 했다. 내가 할 수 있는건 남은 날들을 최대한 즐겁게 보내도록 해주는 것 밖에 없었다.

 

입맛의 변화가 가장 먼저 찾아왔다. 내가 봐온 평생을, "밥먹을까?" 라는 말에 표정이 바뀌며 신난 듯 앞발을 구르고 제자리돌던 만두가 한 끼 걸러 한 끼씩 먹기 시작했으며, 시간이 지날수록 입맛이 없는지 간식도 잘 안 먹기 시작했다. 뭐라도 먹이기 위해 닭가슴살, 황태 등 좋아하던 것들을 섞어주기도 했으나 한 두번 먹으면 그마저도 먹지 않았다.

 

변 상태 역시 점점 악화되어 10번중 8번은 설사를 하였으며, 그마저도 색깔이 좋거나 휴지로 집히기라도 하면 다행이었다. 이 무렵 기운이 없어보이는 날이 잦아져 보고있는 내 가슴이 저려오는 적이 많았다. 병원에서는 처방해주는 약들의 약효과 크지 않다는 점과, 약이 독해 만두가 먹는 데 스트레스 받아하는 점을 고려해 투약을 중단할 것을 고려해보라고 했고, 우리는 그렇게 했다. 멈출 수 없는 속도로 죽음으로 가고있는 만두가 집에서 깨어있는 시간을 밥과 약을 억지로 먹이며 스트레스 주고싶지 않았다.

 

2022년을 약 2주정도 남겨두고 항암제 급여를 멈추자 상태가 정말 빠르게 악화되기 시작했고,

만두는 크리스마스에 찍을 예정이었던 가족사진을 끝내 찍지 못하고 무지개 다리를 건넜다.

전 날 저녁부터 만두는 숨을 몰아쉬며 굉장히 힘들어했는데, 그래서인지 새벽에 바닥에 토를 해놓았더라.

토를 치우고 아침마다 맞히는 수액과 진통제 주사를 놓아주려고 방석을 가져왔더니 만두가 천천히 걸어와 위에 누웠다.

수액과 진통제를 맞는 동안 만두는 누운 자리에서 전혀 움직이지 않고, 눈만 굴려 나와 누나를 번갈아 보는 듯 했다. 그렇게 주사가 끝나고 조용히 털을 쓰다듬어주는 누나와 내 품 안에서, 자기가 평소에 제일 좋아했던 방석 위에서 만두는 갔다.

누나와 나에게 마지막 인사를 하기위해 2022년 가장 추웠던 밤을 버텨준 만두가 너무 고맙다.

 

 

2021년 크리스마스

 

 

+ Recent posts