내가 읽기 좋아하는 기술 블로그 중 하나인 이동욱 개발자님의 "기억보단 기록을" 블로그이다. 백엔드 개발자가 되기 위해 도전한지 어연 4개월째, 지금 느끼는 것은 역시 기억하는 것보단 기록으로 남기는 것이 머리에 더 남겠다 라는 생각뿐

Fast API

#

이번 주부터 공부하기 시작한 Python 의 웹 프레임워크, Fast API

Fast API 를 사용하면 RESTful API 를 아주 간편하게 만들 수 있을거라고 들었기 때문에 (인터넷과 주변인들에게서...) 나에게 도움이 되지 않을까 하는 마음에 공부를 시작했다.

유투브에서 4시간짜리 강의를 보면서 따라하고 있는데 일단 시작부터 매우 신기한 것들 투성이

분명 파이썬과 장고를 처음 배울때에는 프로젝트도 생성하고, 그 안에 앱도 생성하고 난 후에야

./manage.py runserver 

이 코드로 서버를 실행 시킬 수 있었다. (물론 내가 모르는 더 간단한 방법이 있을지도 모르지만 일단 내 머릿속에는 없으니.. 패쓰ㅎ)
#

하지만 Fast API 는 단순히 randomName.py 파일을 하나 만들어준 후 그 안에 fastapi 를 불러오고, path parameter 를 지정해준 뒤, 그 parameter 안에 보여질 내용만 작성하면 파일 하나로도 uvicorn 이나 gunicorn 을 사용해 서버를 실행시킬 수가 있다.

from fastapi import FastAPI

app = FastAPI()

@app.get('/')
def index():
    return {'data': {'name'}}

@app.get('/about')
def about():
    return ['data', ['about page']]

@app.get('/blog/unpublished')
def unpublished():
    return {'data': 'all unpublished blogs'}

@app.get('/blog/{id}')
def show(id:int):
    return {'data': id}

@app.get('/blog/{id}/comments')
def comments(id):
    return {'data': {'1','2'}}

출처: https://www.youtube.com/watch?v=7t2alSnE2-I

이것 저것 찾아보고 있는 도중 GraphQL의 장점 중 하나가 REST API에서 발생하는 Data over-fetching과 under-fetching 문제를 방지할 수 있다는 것을 알게되었고 추후에도 기억하기 위해 이 글을 작성한다.

그렇다면 Data over-fetching과 under-fetching이란 무엇일까?

over-fetching은 불필요한 데이터까지 가져온다라는 뜻이고... under-fetching은 한 번의 통신으로 필요한 양의 데이터를 가져오지 못한다라는 뜻이다.

↑ REST API vs GraphQL ↓

출처: www.howtographql.com

over-fetching과 under-fetching 두 문제 다 공통적으로 필요 이상의 데이터를 전송하기 때문에 네트워크 낭비를 할 수 있다. over-fetching은 필요하지 않은 데이터까지 불러오고, under-fetching은 하나의 endpoint로 필요한 양의 데이터를 불러오지 못 하기 때문에 여러번의 요청을 해야하는 문제가 발생한다.

보통 어떠한 언어를 시작할 때, 결과 값을 표출할 수 있는 문법을 항상 먼저 배운다. 파이썬에서는 print가 그 문법이다. print는 원하는 값을 화면에 출력할 때 사용하는 문법이며 두개의 따옴표 사이의 string 값을 표출한다. String에는 단어, integer (정수), floating (부동 음수)

print("입력할 내용")

Boolean

True, False 참과 거짓을 나타낼 때 사용되며, 조건문에서 많이 사용된다.

ex) 1 == 1 (True) 1 == 3 (False)

Variables (변수)

어떠한 특정 값을 저장하고 있는 '명사'의 개념이다.

name = 민수 age = 27

이 두가지 예를 보면 왼쪽에 위치하고 있는 name과 age가 변수이며 오른쪽에 있는 민수와 27이 그 특정 변수에 주어진 실제 값, 그리고 = 은 "assignment" 즉 값 지정을 뜻한다.

Assignment Operators (할당연산자)

출처: https://wikidocs.net/1160

Concatenation

concatenation은 단어 뜻 그대로 연결시킨다는 뜻이다. 두 개의 숫자를 더할 때 +를 쓰듯이 string을 연결할때도 +를 사용할 수 있다.

print("Hello, World") print("Hello, " + "World")

만약 input 값이 주어진 경우에 위보다 좀 더 효율적으로 string을 연결할 수 있는 방법이 있다.

예를 들어 name이라는 input 값이 주어진 경우 print("Hello, " + name) 대신 print(f"Hello, {name}") 을 사용할 수 있다.

긴 문장을 작성해야하거나 input 값을 여러번 대입해야하는 경우가 생기면 두번째 방법이 훨씬 더 간결해보이므로 자주 사용하는 연습을 해야할 듯 싶다.

Relative

단어 뜻 그대로, 시작 위치를 기준으로 상대적으로 원하는 위치로 이동시켜주는 속성이다. 특정 요소의 위치를 이동시키기 위하여 반드시 필요한 속성이다. 시작 위치를 기준으로 top, right, bottom, left를 이용하여 위치를 이동 시키고 싶을 경우, position:relative를 사용하여 위치를 이동시킬 수 있다.

Absolute

Absolute의 사전적 의미는 "절대적인"이다. 사전적 의미 그대로, absolute는 position이 선언된 가까운 상위 요소의 위치를 기준으로 잡고 위치를 이동시켜주는 속성이다.

Fixed

단어 뜻 그대로 "고정" 되어 있는 요소이다. Absolute와 달리, position이 선언된 상위 요소를 필요로하지 않으며, 그저 위치만 고정해주면 항상 지정된 화면 위 위치에 요소가 고정이 되어있다.

Inline

display:inline으로 설정시 다른 요소들과 일자로 정렬하며 가로와 세로의 크기를 따로 지정할 수 없다.

ex) <span>

Block

display:block으로 설정시 다른 요소들과 일자로 정렬하지 않으며 새로운 줄로 이동하게 된다. Inline과 다르게 가로와 세로의 크기를 따로 지정할 수 있다.

ex) <div>, <p>

Inline-block

이름 그대로 inline과 block을 합쳐 놓은 듯한 속성을 가지고 있다. display:inline-block으로 설정 시, inline처럼 다른 요서들과 일자로 정렬하지 않으며 새로운 줄로 이동하게 되는 속성을 가지고 있으며, block처럼 가로와 세로의 크기를 따로 지정할 수 있다.

Semantic Web의 사전적 의미는 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 웹 문서, 각종 화일, 서비스와 같은 리소스에 대한 정보와 자원 사이의 관계-의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계가 처리하도록 하는 프레임워크이자 기술이다. 출처: https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1%EC%9B%B9

위키피디아에 적혀 있는 사전적 의미를 읽어보았지만 도저히 이해가 가지않아 좀 더 검색을 해본 결과, Semantic Web에선 인터넷에 있는 모든 정보들을 사람뿐만 아니라 컴퓨터 또한 이해할 수 있어서 검색으로 나오는 한 페이지에 있는 정보가 다른 정보와 연결되는 웹이다.

Semantic Tag

Semantic Tag란 그 이름 자체만으로도 사용 목적이나 의미를 명확하게 알 수 있는 태그이다. div 나 span 같은 non-semantic tag들은 태그들 자체만을 봐서는 어떤 용도로 쓰이는지 알 수가 없지만 table이나 article 같은 semantic tag들은 이름만 보아도 태그들의 목적을 쉽게 파악할 수 있다.

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

Semantic web의 효율성은 사이트에 이미지를 추가하는 방법에서도 알 수 있다. 사이트에 이미지를 넣을 수 있는 방법은 두 가지로, img 태그를 사용해서 넣는 것과 태그에 background-image 속성을 추가하는 것이다. Img 태그를 사용하여 이미지를 넣을 경우, 검색엔진에서 이미지를 찾는 것이 가능하지만 background-image 속성을 추가하여 이미지를 넣을 경우, 그 이미지는 검색이 되지 않는다. 뭐가 좋다 뭐가 나쁘다라기 보다는 자신의 필요와 목적에 의해 적절한 코드를 사용하는 것이 중요하다.