회고장

👣 개요 Open Graph의 줄임말로 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌다. Open Graph는 SNS에 웹 사이트 링크가 공유될 때, 링크의 미리보기 정보를 제공하는 역할을 수행한다. 사용자는 단순히 URL만 복붙했을 뿐인데, 아래와 같은 이미지, 설명이 표시된다. 👣 적용 방법 Open Graph 태그는 태그 내부에서 정의되고 다음과 같은 형식으로 사용된다.

👣 개요 pymongo는 파이썬 진영의 공식 MongoDB 드라이버다. MongoDB의 쿼리로 데이터를 조회, 생성하는 것이 아니라 Python 코드로 데이터를 입출력하는 라이브러리다. 👣 라이브러리 설치 pip install pymongo dnspython 참고로 dnspython은 Python에서 DNS 프로토콜을 다룰 수 있게 도와주는 라이브러리다. 👣 DB 연결 from pymongo import MongoClient client = MongoClient('여기에 URL 입력') ... # 연결을 해제하는 코드. client.close() 위 코드는 MongoClient는 서버를 실제로 연결하는 명령어다. 객체가 만들어지는 과정에서 실제로 MongoDB와의 연결이 수립된다. 만약 사용하고 연결을 ..

👣 개요 웹 스크래핑은 웹 사이트의 HTML 파일에서 원하는 정보를 추출하는 작업을 일컫는다. 예를 들어, 네이버 뉴스 페이지에서 각 기사의 제목, 내용, 댓글 등등을 가져오는 작업을 웹 스크래핑이라고 부를 수 있다. 웹 크롤링은 웹 사이트 소유자가 허용하지 않으면 법적으로 문제가 생길 수도 있으니 주의해야 한다. 뿐만 아니라 웹 크롤링을 하기 위해 서버에 허용 횟수 이상의 Request를 보낼 수도 있는데 이는 DDos 공격으로 간주될 수도 있으니 주의해야 한다. 👣 robots.txt User-agent: * Disallow: /private/ Disallow: /admin/ Allow: /public/ Robot.txt는 웹 사이트 사용자가 어떤 페이지를 크롤링해도 되는지를 명시해놓은 웹페이지다. ..

👣 개요 'Jinja2 템플릿 엔진'이란 Python 진영에서 사용하는 템플릿 엔진으로 동적으로 생성된 데이터를 정적인 템플릿 파일과 결합해 웹 페이지를 생성하는 엔진이다. Jinja2 템플릿은 보안적으로도 우수하다. HTML 이스케이프를 자동으로 수행해 XSS 공격에 대해 대처할 수 있다. 👣 문법 1. 변수 삽입 - {{ }} Flask에서 변수를 전달하면 해당 부분에 치환된다. 제 이름은 {{ name }} 입니다. 제 이름은 iksadnorth 입니다. 2. 필터 - | Flask 내에 정의된 예약어들을 이용해서 변수를 가공해서 전달한다. 제 이름은 {{ name | upper }} 입니다. 제 취미는 {{ habit | capitalize }} 입니다. 제 이름은 IKSADNORTH 입니다. 제..

👣 개요 웹 개발의 전체적인 흐름을 파악하기 위한 Flask 지식 공부. 👣 대략적인 프로젝트 구조 📦Root ┣ 📂static ┃ ┃ 📜image.png ┃ ┃ 📜script.js ┃ ┗ 📜style.css ┣ 📂templates ┃ ┗ 📜index.html ┗ 📜app.py static CSS, JS, 이미지 등등의 정적 파일을 보관하는 곳. templates Jinja2 템플릿 파일을 보관하는 곳. app.py Flask 애플리케이션을 정의하고 구성하는 데 사용되는 파일. 👣 라이브러리 구성 pip install flask dnspython 참고로 dnspython은 DNS 프로토콜을 Python에서 다루기 위한 라이브러리. 👣 대략적인 app.py 구성 from flask import Flask,..

👣 개요 MongoDB Atlas는 MongoDB의 관리형 클라우드 데이터베이스 서비스다. MongoDB는 NoSQL 진영의 대표적인 DB로, 대용량의 비정형 데이터를 효율적으로 저장하고 조회하는 데 사용된다. MongoDB Atlas는 사용자가 MongoDB 데이터베이스를 쉽게 프로비저닝, 운영 및 확장할 수 있도록 도와주는 서비스다. 👣 DB 프로비저닝 과정 1. 우선 다음 사이트에서 회원 가입을 한다. Cloud: MongoDB Cloud account.mongodb.com 2. 곧바로 MongoDB를 생성할 수 있는 화면으로 넘어가진다. 다음 화면에서 적절히 설정 후, Create 버튼을 누른다. 3. 보안 설정 화면에서 Username과 Password를 설정한다. 맨 마지막에 IP Addres..

👣 개요 GitHub Pages는 GitHub 리포지토리에 저장된 웹 콘텐츠를 호스팅하여 공개적으로 배포하는 기능을 제공합니다. GitHub를 통해 웹 페이지 또는 정적 파일들을 배포할 수 있습니다. 동적 파일은 배포할 수 없다. 때문에 React, Vue.js의 빌드 결과물은 배포 가능하지만 Jar파일은 배포 불가다. 👣 배포 방법 1. GitHub 리포지토리 만들기 GitHub에 로그인하고 새로운 리포지토리를 생성합니다. 단, 해당 Repo는 Public이여야 무료로 배포 가능하다. 2. 웹 콘텐츠 업로드 생성한 리포지토리로 웹 페이지나 애플리케이션의 소스 코드와 정적 파일들을 업로드합니다. 이때, 웹 페이지의 진입점 (예: index.html) 파일이 적절하게 설정되어야 합니다. 3. GitHub ..

👣 개요 CSS 선택자는 웹 페이지의 HTML 요소들을 선택하여 스타일을 적용하거나 자바스크립트로 조작하는데 사용되는 표기법입니다. CSS 선택자를 사용하면 원하는 요소를 정확하게 선택하여 스타일을 지정하거나 조작할 수 있습니다. 1. 전체 선택자 (*) 모든 요소를 선택합니다. * { /* 스타일 설정 내용 */ } 2. 요소 선택자 특정 HTML 요소를 선택합니다. p { /* 스타일 설정 내용 */ } 3. 클래스 선택자 (.classname) 특정 클래스를 가진 요소를 선택합니다. .class { /* 스타일 설정 내용 */ } 4. ID 선택자 (#idname) 특정 ID를 가진 요소를 선택합니다. #ID { /* 스타일 설정 내용 */ } 5. 자식 선택자 (parent > child) 특정 ..

👣 개요 jQuery는 문서 객체 모델(DOM) 조작, 이벤트 핸들링, 애니메이션 효과, Ajax 기능 등을 포함한 다양한 유틸리티를 제공한다. 이로 인해 웹 개발자들은 복잡한 자바스크립트 코드를 더 간단하고 간결하게 작성할 수 있으며, 크로스 브라우징 이슈를 보다 쉽게 해결할 수 있다. jQuery는 다음과 같은 장점을 가지고 있다. 크로스 브라우징 이슈 해결 jQuery는 크로스 브라우징 이슈를 추상화하여 동일한 코드가 다양한 브라우저에서 작동하도록 보장한다. 쉬운 DOM 조작 jQuery는 간단한 선택자를 이용하여 HTML 문서의 요소들을 쉽게 선택하고 조작할 수 있도록 도와준다. 이벤트 처리의 단순화 jQuery는 이벤트 핸들링을 간소화하여 특정 이벤트에 대한 처리를 쉽게 할 수 있다. 애니메이션..