Study Note

개요 카카오톡, 페이스북 등 sns에 링크를 공유했을 때, 위 그림과 같은 미리보기가 나올려면 HTML 파일에 따로 작업이 필요하다. HTML에 og태그를 추가해 미리보기에 사용되는 사진, 제목, 설명을 지정한다. og(open graph) 태그 위 태그를 HTML의 사이에 위 태그를 추가한다. 주의점 og태그를 수정해도 미리보기가 수정되지 않고, 이전에 작성한 og태그가 적용되는 경우가 발생한다. 이는 sns에서 이미 공유된 링크들의 og태그들을 저장해 놓고, 저장해 놓은 정보들을 보여주기 때문에 업데이트가 되지 않은 것이다. 따라서 og태그를 업데이트하기 위해서는 우리가 따로 아래 sns사이트에서 og태그를 초기화 해줘야한다. 페이스북: https://developers.facebook.com/too..

🔥 클래스와 객체 클래스(Class) : 객체(object)를 만들어 내는 틀, 변수와 메소드(객체 내에 정의된 함수)를 정의하는 틀 객체(Object) : 틀에 의해 생성된 것. 클래스의 instance라 부른다. 1개의 클래스는 무수히 많은 객체를 만들어 낼 수 있다. class Calculator: pass cal1 = Calculator() cal2 = Calculator() print(type(cal1)) # print(cal1 == cal2) # False 객체와 인스턴스의 차이는 무엇일까? Calculator()의 결괏값을 돌려받은 cal1과 cal2는 객체이다. 그리고 cal1과 cal2 객체는 Calculator의 인스턴스이다. 인스턴스라는 말은 특정 객체가 어떤 클래스의 객체인지 관계 ..

🔥 requests 라이브러리 requests는 파이썬으로 HTTP 통신(요청 ↔ 응답)이 필요한 프로그램을 작성할 때 많이 사용된다. 👉 패키지 설치 pip install requests 👉 응답 상태 상태코드를 통해 요청이 잘 처리되었는지 확인할 수 있다. 응답 객체의 status_code 속성을 통해 응답 상태를 얻을 수 있다. import requests response = requests.get("https://jsonplaceholder.typicode.com/users/1") print(response.status_code) # 200 url "https://jsonplaceholder.typicode.com/users/1"로 get 요청을 하고, response로 응답 결과를 받는다. re..

🔥 서버 - 클라이언트 통신 👉 CRUD API: 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계 [1] Create(생성해줘), Read(불러줘), Update(바꿔줘), Delete(삭제해줘)로 클라이언트가 서버에 요청할 때 어떤 요청 종류인지 응답하는 서버에 정보를 알려주는 것 [1,2] 👉 RESTful API CRUD vs REST: What's the Difference? [2] HTTP protocol 의 데이터 조작을 위한 고유한 method (HTTP method)인 GET, POST, DELETE, PUT, PATCH 을 사용하여 데이터 베이스 응용 프로그램(서버)과 클라이언트 통신 CRUD와 HTTP method는 아래와 같이 대응될 수 있..

🔥 JQuery 란? HTML의 요소들을 조작하는 Javascript를 미리 작성해둔 것 라이브러리 사이에 를 삽입해 jquery를 import 한다. (https://www.w3schools.com/jquery/jquery_get_started.asp) 🔥 JQuery 다뤄보기 div 보이기, 숨기기 Script : function open_box(){ $('#post-box').show() } function close_box(){ $('#post-box').hide() } post-box에 jquery를 먹일껀데, post-box를 보여줘라 post-box에 jquery를 먹일껀데, post-box를 숨겨라 HTML : 내 생애 최고의 영화들 영화 기록하기 영화URL 별점 -- 선택하기 -- ⭐ ⭐..

🔥 JavaScript 프로그래밍 언어 브라우저가 알아들을 수 있는 언어 동적으로 사용자와 상호작용할 수 있도록 하는 언어 HTML파일 태그안에 태스로 공간을 만들어 작성 크롬 개발자 도구 콘솔창(마우스 오른쪽 클릭 → 검사 → console/ 윈도우 F12) 을 이용하여 띄어놓은 페이지에 빠르게 자바스크립트를 테스트할 수 있다. console.log(변수) : 콘솔 창에 괄호 안의 값을 출력해줌 primitive type의 값을 제외한 모든 것들이 객체로 이루어진 객체 기반 스크립트 언어이다. 🔥 Data types 자바스크립트는 인터프리터가 알아서 변수의 타입을 파악하고 값을 저장해서 변수의 타입을 따로 쓰지 않는다. primitive values 와 object 로 나눌 수 있다. 👉 변수 선언 v..

구글 웹 폰트 https://fonts.google.com/?subset=korean 1. 마음에 드는 폰트 클릭 2. 선택하고 싶은 style 클릭 3. View Selected famillies 클릭 4. link 태그를 복사해서 사이에( 아래에), CSS를 복사해서 사이에 넣기 /* '*'은 모든 tag에 먹이겠다는 의미*/ /* style 사이에 넣기 */ *{ font-family: 'Do Hyeon', sans-serif; } Source 스파르타코딩클럽 내일배움단 웹개발 종합반 1주차 : https://spartacodingclub.kr/nb

🔥 HTML , CSS 기본 내용 HTML 구역과 텍스트를 나타내는 코드 head 와 body로 구성됨 head 안에는 페이지의 속성정보 (meta, script, link, title) 를 담음 body 안에는 페이지의 내용을 담는다. 구역을 만들려면 div태그를 이용한다. div로 묶여져 있는 것은 내용물이 변경되면 같이 변경된다. (block element) 문자 일부만 선택해서 지정할려면 span태그를 이용한다. (inline element) 특정 부분을 지정하기 위해서 class와 id를 사용한다. 지정 범위는 class > id 이다. class 는 무언가를 그룹핑한다는 말. 그룹핑하고 싶은 것들을 같은 class로 지정. ex> 반 id는 무언가를 식별한다는 말. 하나만 존재할 수 있음. 정..

👉 입력 input input을 통해 사용자가 입력한 값을 변수로 받을 수 있다. input은 입력된 모든 것을 문자열로 취급한다. a = input() input() 괄호 안에 질문을 입력하여 사용자에게 입력할 때 안내문구가 나오도록 할 수 있다. name = input('이름을 입력하시오: ') 👉 출력 print 자료형을 출력 a = [1,2,3] print(a) # [1,2,3] 큰따옴표(")로 둘러싸인 문자열은 + 연산과 동일 print('gone''with''the wind') # gonewiththe wind print('gone'+'with'+'the wind') # gonewiththe wind 콤마는 띄어쓰기를 한다. print('gone','with','the wind') # gone..

abs abs(x) 어떤 숫자를 입력받았을때, 절댓값을 반환 abs(3) # 3 abs(-3) # 3 abs(-0.7) # 0.7 divmode divmod(x,y) : x를 y로 나눈 몫과 나머지를 튜플 형태로 반환 divmod(7,3) # (2, 1) sum sum(iterable) iterable 객체의 모든 요소의 합을 반환 print(sum([1,2,3])) # 6 print(sum((2,3,4))) # 9 max max(iterable) 반복 가능한 자료형을 입력받아 그 최댓값을 반환 max([1,2,3]) # 3 min min(iterable) 반복 가능한 자료형을 입력받아 그 최솟값을 반환 min([1,2,3]) # 1 pow pow(x,y): x의 y 제곱한 결과값을 반환 pow(2,3)..