코드는 나만의 비밀 다이어리가 아니야

랜딩페이지를 직접 개발하려고 깃허브를 뒤졌다. 

지난 2개월동안

- 와디즈 프로젝트 제출 완료했고

- 공동창업자가 모교가서 프로젝트 4개 따왔고

- 다음주에 행사가서 부스열거고

- 프로토타입 3개 제작했다

그래서 이제 진짜 고객한테 다이렉트로 닿아야 하는 이유가 생겨서 랜딩페이지를 (이제서야...) 만드려고 한다. 

랜딩페이지를 만들면 그때부터 난 본격적으로 SNS 마케팅을 시작할거고 사업자등록도 하고 정부지원금도 타러 다닐거다. 

그래서 오늘 안에 랜딩페이지를 만드려고 하는데 직접 깃허브 뒤져서 만들까 노코드 쓸까 고민중이다. 

근데 막상 깃허브 들어가니까 프레임워크 쓴건 뭔가 건들기가 무서운것이다... 오늘 안에 끝내기엔 무리라고 생각해서 그냥 일단은 노코드로 진행하고

나중에 인스타 브랜딩 (개인계정) 할때 코딩 1도몰라도 노코드로 랜페개발!?? 노코드로 웹사이트!!???? 로 후킹해서 콘텐츠나 만들고 본격적으로 사업자등록 시작하면 시간 좀 오래잡고 (적어도 하루는 아니게...) 개발하려고 한다. 

사실 개발 개못해서 좀 쫄리지만 일단 하면 되겠지

https://blog.nocodecamp.kr/nocode-for-landing-page/

이 글을 참고해서 노코드 툴을 정했다. 

웹플로우라는 앱은 처음 들어봤는데 (왜지..?) 제일 좋아보임 뭔가 피그마 느낌도 나서 익숙하고

그래서 고민없이 웹플로우로 할예정

과거 천공카드에 구멍을 뚫어서 프로그래밍하던 메인프레임 시절, 프로그래밍은 할 줄 모르지만 프로그래머가 써온 프로그램을 카드에 구멍을 뚫어서 컴퓨터에 입력해주는 사무원을 코더(Coder)라고 불렀다.

진정한 '코더' 가 뭔지 보여준다 아 ㅋㅋㅋㅋㅋㅋㅋㅋ

우리의 프로그래머는 GPT고 나는 일개 코더다. 

그야말로 '복붙 개발' ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이거 은근 재밌음. 

프로그래밍이 주 목적이 아니라 무언가를 만들어내는게 목적이라면 더더욱. 

나는 내 모든 창업아이템의 MVP를 이런식으로 만들었다. 

무엇을 만들어내는가?

최근 OGQ가 깐깐해지면서 하얀색 테두리를 추가하란다. 

그래서 자동으로 테두리를 추가해주는 앱을 만드려고 한다. 

그런데 이게 무슨 프로그램이지?

뭔가 만들고싶은건 알겠는데 이걸 어떻게 gpt한테 설명해야할지 몰랐던 나는 구글링을 했다. 

여기서 구글링 꿀팁!

바로 저 첫번째 문서를 들어가지 않고 이미지를 클릭한다. 

왜냐하면 내가 지금 찾고있는건 이미지를 봐야 정확한지 안정확한지 확인이 가능하기 때문이다. 

흐흐 마침 두번째, 세번째 사진이 내가 딱 원하던 그런 기능이잖아?

클릭해준다. 

https://xn--stackoverflow-v055c.com/questions/24039599/how-to-add-stroke-outline-to-transparent-png-image-in-javascript-canvas

최고다 스텍오버플로우. 

역시 세상의 모든 지식이 들어있어

내가 원하는 기능은 'sticker effect' 라고 한다.

공식적인 단어인지는 모르겠지만 저 단어라면 우리 gpt 도 알아들을거야!

GPT에게 물어보기

그래서 다음과 같은 질문을 gpt에게 했다. 

Q. can i create sticker effect on my transparent png file (putting a stroked white outline around each non-transparent element in my png) by javascript?

심지어 프로그래밍 해달라고도 안했는데 알아서 해주는 센스. 

자바스크립트보다 파이썬이 더 테스트하기 쉬울거같아서 파이썬으로 다시 짜달라고 했다. 

오 쉣.......

이게 아니잖아 프로그래머야

그래서 코더인 나는 지피티에게 한번 더 명령했다. 

이번엔 파이썬으로 짜달라고. 

갑자기 코드가 개짧아졌다. 

갓 Pillow. 진짜 갓 pillow. 

이모티콘 자동화 프로그램 파이썬 버전도 pillow 로 했지. 

어쩐지 짧아졌다 했더니 이 미친놈 진짜 테두리를 추가한거였다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

메모리를 낭비하고 싶지 않다면 코드를 잘 읽고 복붙하도록 하자

근데 이러려고 우리 제피러스 G14 쟝 산거잖아

낭비해도 돼 나는

말을 못알아듣는거 같길래 프롬프트를 좀 수정해준다. 

create sticker effect on my transparent png file (putting a stroked white outline around (each non-transparent element) in my png) with python. leave the original non-transparent part, just add white border around non-transparent element.

음 이새;끼 끝까지 못알아듣는다. 

이럴땐 직접 코드를 보고 고치는 방법밖에 없다. (프롬프트를 더 수정하던가)

지금 보니까 # Add a white border around the pixel part again. 부분에서 계속 잘못된다. 

그리고 내가 내일 결론:

이새1끼는 border 라는 말을 못알아듣는다. 

그렇다면?

create ((sticker effect)) on my transparent png file

1. check for the transparent pixels. 

2. if transparent pixels has non-transparent pixels within 5px range, change the transparent pixels into white pixel.

 file name is IMG_5339.png

write python code. 

아예 border라는 단어를 없애고 수학적으로 적으면 되지 않는가. 

반경 5px이내에 불투명한 픽셀이 있다면 투명한 부분을 하얀색으로 바꿔달란 뜻. 

결국엔 5px짜리 하얀 테두리가 만들어지는거다. 

그렇다. 계속 지피티가 한 단어를 못알아들어서 실수를 한다면 그 단어를 없애면 되는거다. 

from PIL import Image

# Open the input image and convert it to RGBA format
input_image = Image.open("IMG_5339.png").convert("RGBA")

# Get the dimensions of the input image
width, height = input_image.size

# Create a new output image with the same dimensions
output_image = Image.new("RGBA", (width, height), (255, 255, 255, 0))

# Loop over each pixel in the input image
for x in range(width):
    for y in range(height):
        # Get the RGBA values for this pixel
        r, g, b, a = input_image.getpixel((x, y))

        # If the pixel is transparent and there is a non-transparent pixel within 5 pixels,
        # change the pixel to white
        if a == 0:
            for dx in range(-5, 6):
                for dy in range(-5, 6):
                    if dx == 0 and dy == 0:
                        continue
                    nx = x + dx
                    ny = y + dy
                    if 0 <= nx < width and 0 <= ny < height and input_image.getpixel((nx, ny))[3] > 0:
                        r, g, b, a = 255, 255, 255, 255
                        break

        # Set the pixel in the output image
        output_image.putpixel((x, y), (r, g, b, a))

# Save the output image
output_image.save("IMG_5339_sticker.png")

지피티가 준 코드...

과연 결과는?

연산이 졸라 많아져서 컴파일러가 괴로워하고있다 엌ㅋㅋㅋㅋㅋ

진짜 느리다. 

진짜... 느리다...? 이렇게 느려도 되는걸까

그래서 끝까지 코드는 돌아가지 않았고...

코드가 돌아가는 사이에 공짜 프로그램을 찾았다.

https://borderize.com/

프로그램은 사서 쓰세요 제발 (근데 공짜임)

뭔가 gpt로 만들고싶은거 만드는거 보여주고싶었는데 실패로 끝나버린 오늘의 코드

다른것들은 잘 만들어질때도 있음

(사실 이거도 시간 조금만 더 있으면 가능할듯...

근데 이거같은경우엔 직접 코드 짜는게 훨씬 빠를거같음)

여튼 지피티로 '코더' 짓 하기 재밌습니다.

와 아니 미친 님들!!!!!!!!!!!!!!!!!!!!!!!!!!!

지피티가 해냈어요!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

리눅스에서 C를 사용한 간단한 게임을 만들고 있는데요, 카드덱을 섞을 일이 있어서 섞는 알고리즘을 지피티쟝이 알려줌

근데 Fisher-Yates algorithm이랑 Knuth Shuffle algorithm 이렇게 두가지가 있더라고요? 

제가 썼던건 knuth shuffle인데 지피티한테 효율적으로 바꿔달라 하니까 fisher yates로 바꾸길래 어떤 차이가 있나 싶어서 알아봤습니다.

Fisher-Yates Algorithm 의 역사

Fisher-Yates 알고리즘은 1938년 Ronald A. Fisher와 Frank Yates가 고안한 알고리즘입니다.

이 알고리즘은 원래 통계학에서 무작위로 섞은 샘플을 만들기 위해 개발되었는데, 나중에 컴퓨터 분야에서 배열을 무작위로 섞는데 사용되었다고 한다.

처음 컴퓨터 분야에서 사용되기 시작한건 1964년이다. 초기 버전에는 배열의 각 요소를 무작위로 선택할때 주사위를 이용했지만, 나중엔 난수 생성기를 사용해서 구현되었다고 한다. 지금은 아주 빠르고 효율적으로 구현할수 있다. 

사실 이건 굳이 알 필요는 없는데... 제가 궁금함

이름이 너무 귀엽고 찰져서 왜 fisher 지? 사람 이름이 fisher인가? 싶어서 알아봤어요

근데 진짜 사람 이름이었음... 죄송

Fisher-Yates Algorithm 이란?

이 알고리즘은

1. 섞을 배열의 마지막 요소부터 시작하여, 배열의 첫 요소까지 반복합니다.
2. 현재 위치에서 이전 위치까지의 범위에서 무작위로 하나의 요소를 선택합니다.
3. 현재 위치와 선택된 위치의 요소를 교환합니다.
4. 이전 위치로 이동하여 반복을 계속합니다.
   
   

이런식으로 작동된다.

모든 요소가 균등하게 무작위로 선택되기 때문에, 섞는 효과가 높다. 

시간 복잡도는 O(n)이다.

Fisher-Yates Algorithm 과 Knuth Shuffle Algorithm의 차이

Fisher-Yates:

import random

def fisher_yates_shuffle(arr):
    n = len(arr)
    for i in range(n-1, 0, -1):
        j = random.randint(0, i)
        arr[i], arr[j] = arr[j], arr[i]
    return arr

# 예시
arr = [1, 2, 3, 4, 5]
print(fisher_yates_shuffle(arr))

Knuth Shuffle:

import random

def knuth_shuffle(arr):
    n = len(arr)
    for i in range(n-1):
        j = random.randint(i, n-1)
        arr[i], arr[j] = arr[j], arr[i]
    return arr

# 예시
arr = [1, 2, 3, 4, 5]
print(knuth_shuffle(arr))

무슨 차이가 있냐면 

이런 차이가 있다. 

Fisher yates는 배열의 뒤에서부터 앞으로 이동하고 knuth shuffle은 앞에서부터 뒤로 이동한다. 

그래서 그냥 차이는 앞에서부터 하냐 뒤에서부터 하냐의 차인데 지피티는 계속 내 knuth shuffle 알고리즘을 fisher yates 로 바꾼다. 왜그러는지 모르겠다;;

정말 인스타툰 시작 안했으면 이런 프로젝트를 했을까 싶다. 

정작 순수 코딩 시간은 얼마 되지 않지만 그래도 몇달간 걸쳐서... 다른것도 하면서 삽질한 결과물이다. 

어쩌다보니 웹개발 삽질을 하고 있는데 진로에 대한 생각을 다시 한번 해봐야 할거 같다...

방학땐 웹 말고 다른쪽도 공부해서 관련 대회같은거 나가볼 생각이다. 

뭐든지 창업 아이템 만들고 싶은거 있으면 자체개발 가능할때까지 웹개발 삽질하다가 취업은 AI쪽으로 하는게 목표다. 

아직 시작도 안했지만 저거도 웹개발마냥 삽질하고 학교에서 수업 들으면 뭐라도 되겠지. 

PYQT5

Python으로 작성한 코드를 Pyqt5 GUI로 구현하여 exe 파일로 배포하려고 했다.

그러나 이 프로그램은 많은 사람들에게 배포해야 하는 특성상, 유지보수의 어려움과 OS 차이로 인한 배포의 어려움이 있었다. 그래서 나는 Flask 프레임워크를 사용하여 웹 앱으로 배포하기로 결정했다.

앞으로 이어질 개 미친 삽질을 상상도 하지 못한 채...

Flask 

Flask 에는 문제가 있었다. 

1. 일정 기간이 지나면 돈을 내고 deploy를 해야한다.
2. Flask app을 deploy 할 수 있는 곳이 많이 없다.
3. 로컬 repository에 쉽게 접근할 수 없다는 문제가 있었다.

4. 서버 측에서 파일을 저장해야 한다. 

사실 클라이언트 측에서 파일을 저장할 방법도 있을 거라는걸 안다. 

하지만 나는 진행하고 있는 수많은 다른 프로젝트들 (클래스 101, GPT api, 수많은 창업경진대회, 인턴 지원, 학교 숙제...)로 인해 너무 지쳐있어서 그렇게 복잡한 코드도 아닌데... 그냥 지금까지 했던거 다 버리고 Javascript로 다시 만들자고 결심했다.

최종적으로 Flask로 개발한 웹 앱을 JavaScript로 다시 개발하기로 결정했다.

Flask 앱에서 JavaScript로

나는 Flask 앱을 JavaScript로 전환하기 위해 JSZip 라이브러리, saveAs 함수 및 Canvas API를 사용하여 Python에서 사용했던 PIL 및 request 모듈 등을 대체했다. Flask와 달리 파일을 디렉토리에 저장하지 않았고 대신 브라우저에서 임시 파일로 처리했다.

Python 코드에서 파일을 저장하는 방식은 서버 측에서 이루어지며, 일반적으로 파일 시스템(file system)을 사용하여 서버 측에 파일을 저장한다. 그러나 JavaScript 코드에서 파일을 저장하는 방식은 클라이언트 측에서 이루어지며, 일반적으로 브라우저의 로컬 스토리지(local storage)나 쿠키(cookie)를 사용하여 클라이언트 측에 파일을 저장한다.

JavaScript로 개발한 웹 앱의 장점

JavaScript로 개발한 웹 앱은 Flask로 개발한 앱보다 몇 가지 장점이 있다.

1. 클라이언트 측에서 파일을 저장하기 때문에 서버 측에서 파일을 저장하는 것보다 더 안전하다.
2. 클라이언트 측에서 파일을 처리하기 때문에 서버 측에서 파일 처리를 하지 않아도 된다. 이것은 서버 리소스를 절약할 수 있는 장점이 있다.
3. JavaScript는 브라우저에서 실행되기 때문에 Flask와 같은 백엔드 프레임워크보다 더 많은 환경에서 실행할 수 있다.

그래서 내 이모티콘 자동 편집기는 어디에 있는데요 

시험기간이라서 아직 CSS 만질것도 있고 해서 아직 웹상에 배포는 안했다. 

5월 12일이 종강이다. 

종강하면 이모티콘 만드는 강의랑 이모티콘 자동화 툴과 함께 돌아오겠다. 

그리고 인턴 최종합격이 하나하나씩 되고있다. 

방학때는 인턴일기를 그릴 예정이다. 

한국 인턴보다 월급은 적지만 월급 외로 벌고 있는것들도 많고 최대한 일 많이 시키고 많이 배울수 있는곳에 가는게 목표이기 때문에 월급을 어찌되든 상관 없다. (사실 월급 외로 버는것들이 월급보다 몇배로 많아질 예정이다...)

아직 정제되지 않은 자동화 툴 사용설명서

https://darkened-hour-eee.notion.site/e9223ceafc4f40bb8b92fd6700718d09

사용 설명은 안적음 근데 대충 작동한다는걸 볼수있음

근황 + 주저리주저리...

진짜 팀 모아서 프로젝트 해보니까 팀 프로젝트 진행속도랑 개인 프로젝트 진행속도랑 차이가 너무 심하게 나는게 실감났다. 팀 프로젝트는 사람이 많고 개발할 사람이 많아서 빠른걸수도 있는데 그거랑 별개로 팀이라 무조건 미루면 안된다는 압박감이 날 개발하게 만들었다... 사업계획서도 마찬가지고...

방학때 주말마다 새로운 앱 하나씩 출시하고 빠르게 시장 확인하는게 목표다. 

뭐 보고 생각났냐면 liner CEO EO 인터뷰 보고 ㄹㅇ 1주일당 앱 하나씩 개발했다길래 

어? 이거 우리 팀도 가능한데? 싶어서 아예 개발만 intense 하게 하는 팀 모아서 같이 개발하고 시장테스트 할 예정이다. 

개발 할때마다 사업계획서를 적을 예정이라 사업계획서만 따로 적어줄 사람이 있으면 좋은데... 이건 모르겠다.

없으면 내가 적지 뭐 새로 가르치는것도 귀찮고

홍콩으로 인턴 하러 돌아가기 전에는 한국에서 창업 멘토링을 받으러 다닌다. 

지원사업에 합격했다. 

그리고 이건 나중에 인스타에 공지할건데 27일 28일 인사동 쌈지길에서 인스타툰 부스를 연다. 

그리고 6월에는 클래스 101 강의가 런칭된다. 

며칠전엔 남자친구랑 100일이었다. 

절대적 시간과 상대적 시간에 대한 토론... 사실 토론이라고 하기엔 내가 헷갈렸던건데 여튼 시간에 대한 이야기를 했다. 

(내가 반박하려고 하다가 내가 틀렸다는걸 깨달아버림)  

조만간 만화로 그릴지도

18일날 한국에 잠깐 간다. 

행정업무랑, 창업, 인스타툰 관련 일 하러 가는건데 일만하다 올거같다

좋아하는 일로 놀면서 돈버는거 진짜 최고...

사실 지금은 시험기간이고, 난 전공 시험이 5개다. 

3년졸업 특례생에게 교양은 사치다.

차피 1학년때 실수로 교양들어서 3년졸업 못하긴 하지만

2주일간 시험 5개가 몰려있다. 

도키도키

Simple Linear Regression (단순회귀분석 이란?)

Simple Linear Regression은 공학과 과학 분야에서 변수들 간의 관계를 찾는 방법 중 하나입니다. 이 방법은 input variable(독립 변수)과 response variable(종속 변수) 사이의 선형적인 관계를 찾아내는 것을 목표로 합니다.

여기서 'response variable'은 우리가 알고 싶은 변수이고, 'input variable'은 그것에 영향을 미치는 변수입니다.

Simple Linear Regression에서는 input variable이 하나인 경우를 다루며, response variable은 input variable에 따라 선형적으로 변화한다고 가정합니다.

이 식에서 input variable 은 x, response variable 은 y 라고 할 수 있겠죠.

하지만 자연에서는 오차가 생길수 있으니 Simple Linear Regression 모델에서는 이 차이를 'random error'로 가정하고 계산합니다.

단순회귀분석을 사용하는 과학분야 예시

과학 분야에서 Simple Linear Regression은 매우 다양한 분야에서 사용됩니다. 

화학: 반응 시간과 반응물 농도 사이의 관계

물리학: 물체의 질량과 가속도 사이의 관계

생물학: 동물의 몸무게와 특정 기능(예: 심장 용량) 사이의 관계, DNA 서열과 특정 형질(예: 키) 사이의 관계

Scatter Plots와 Correlation

Scatter Plots는 두 변수 간의 관계를 시각적으로 보여주는 그래프입니다. 

예를 들면 이런 데이터가 있다면 이 데이터를

이런식으로 나타낼 수 있습니다.

이렇게 그려진 Scatter Plot은 두 변수 간의 관계를 쉽게 파악할 수 있도록 도와줍니다. 

Correlation은 두 변수 간의 상관 관계를 나타내는 지표입니다. 

Correlation Coefficient라는 개념을 사용하여 상관 관계의 정도를 수치화할 수 있습니다. 

Correlation Coefficient는 -1에서 1 사이의 값을 가지며, 1에 가까울수록 양의 상관 관계가 강하다는 것을 의미하고, -1에 가까울수록 음의 상관 관계가 강하다는 것을 의미합니다.

저 그래프에서의 correlation은 1이겠네요.

주어진 데이터에 가장 적합한 모델 찾는법

최소제곱법(Least Squares Method)은 주어진 데이터에 가장 적합한 모델을 찾기 위해 사용되는 방법 중 하나입니다. 

최소제곱법은 선형 회귀 분석에서 사용되며, 데이터 포인트들이 직선 형태로 분포되어 있을 때 사용됩니다. 

이 방법은 데이터 포인트들 사이의 거리(오차)를 최소화하여 최적의 직선을 찾습니다.

1. X와 Y 간의 상관 관계를 나타내는 직선을 그린다

2. 모든 데이터 포인트들과 직선 사이의 거리(오차)를 계산한다

3. 거리(오차)를 최소화하는 직선을 찾는다

4. 오차의 제곱값을 모두 더한 값이 최소가 되도록 하는 수를 찾는다

이 방법을 식으로 나타내면 이런 식이 나옵니다. 

최소제곱 추정량 (Least-squares estimators)

Least-squares estimators(최소제곱 추정량)은 통계학에서 회귀분석 모델을 만들 때 사용되는 추정량입니다. 

최소제곱법은 오차의 제곱합을 최소화하는 직선을 찾는 방법으로, 최소제곱 추정량은 이 방법을 사용하여 회귀분석 모델의 계수(coefficients)를 추정하는 것을 의미합니다. 

이 추정량은 이렇게 구해집니다:

1. 회귀분석 모델의 예측값과 실제값의 차이(오차)를 계산한다

2. 오차의 제곱합을 최소화하는 회귀계수를 찾는다

결국 오차의 제곱합을 최소화한다면, 제곱합을 미분해 0이 되는 지점을 찾으면 됩니다.

그래서 다음과 같은 식이 만들어집니다:

이 식을 계산했을 때 추정량의 값은 다음과 같아집니다:

개요

• ChatGPT API를 사용해서 택스트 입력받아 LaTeX로 변환하는 기능 완성
• 구글 익스텐션 UI 구현
• 구글 익스텐션을 시도했지만 Axios 를 불러오지 못해서 실패함

상세내용

• ChatGPT API와 Axios를 사용해서 텍스트를 입력받아 전달하여 ChatGPT의 출력값을 받아오는데 성공함.
• 추가로 입력으로 받는 질문의 내용을 가공하여, LaTeX만 반환할수 있도록 구현함.

문제점 및 해결

• ChatGPT API의 입출력을 받는 문제. ⇒ Axios를 활용한 아래 링크 코드로 해결함 (https://techbukket.com/blog/chatgpt-api-javascript)
• 다음과 같은 에러로 Axios 라이브러리를 불러오지 못함.

다음 단계 계획

• Math API를 사용해서 만들어진 LaTeX 를 png 파일로 전환
• 파이썬에 쓸수있는 library나 API가 있지 않을까?
• 여차하면 그냥 flask 로 개발하면 되지 않을까?

참고

LaTeX to equation API: https://meta.stackexchange.com/questions/53436/implement-an-api-call-to-display-latex-as-inline-image

LaTeX to PNG: https://github.com/joeraut/latex2image-web < 대체 얘는 어떻게 한거지? API가 어딨지?

오늘 새로 학습한 것들:

1. HTTP

https://diatomicarbon.shop/96

2. CDN

https://diatomicarbon.shop/95

HTTP가 뭐야?

HTTP는 HyperText Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받을 때 사용되는 프로토콜입니다.

HTTP는 웹 브라우저와 웹 서버 간에 메시지를 교환하여 웹 페이지를 요청하고 전송하는 데 사용됩니다.

HTTP는 클라이언트-서버 모델을 따르며, 클라이언트가 요청(Request)을 보내면, 서버는 이 요청에 대한 응답(Response)을 반환합니다. 요청과 응답은 HTTP 메시지 형식으로 구성되며, 이 메시지는 텍스트 형식으로 작성됩니다.

HTTP는 웹 페이지를 전송하는 데 사용되며, 웹 페이지의 HTML, CSS, JavaScript 및 이미지 등의 리소스를 요청하고 전송합니다.

또한, HTTP는 웹 서버와 데이터베이스 서버, 웹 애플리케이션 서버 등의 서버 간 통신에도 사용됩니다.

HTTP는 기본적으로 TCP/IP 프로토콜 위에서 동작하며, 보안을 강화하기 위해 HTTPS(SSL/TLS 기반)로 대체되는 추세입니다.

HTTP는 웹의 발전과 함께 계속해서 발전하고 있으며, 현재는 HTTP/2, HTTP/3 등의 새로운 버전이 나와 사용되고 있습니다.

Axios 가 뭐야?

axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, Node.js나 브라우저에서 사용할 수 있습니다. axios는 서버와의 HTTP 요청과 응답을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다.

axios는 다음과 같은 기능을 제공합니다.

• HTTP 요청과 응답을 Promise 기반으로 처리할 수 있습니다.
• 브라우저와 Node.js 모두에서 사용할 수 있습니다.
• JSON 데이터를 자동으로 직렬화하고, 응답 데이터도 자동으로 역직렬화합니다.
• 요청과 응답에 대한 인터셉터 기능을 제공하여 요청과 응답을 수정할 수 있습니다.
• HTTP 요청에 대한 취소 기능을 제공합니다.
• HTTP 요청을 취소할 수 있는 CancelToken 기능을 제공합니다.

axios는 간단한 API를 제공하므로, HTTP 요청을 보내는 코드를 빠르게 작성할 수 있습니다. 또한 브라우저와 Node.js에서 모두 사용할 수 있으므로, 클라이언트와 서버 간의 HTTP 통신을 일관성 있게 처리할 수 있습니다.

Bearer 는 뭐야?

"Bearer"는 HTTP 인증 프로토콜에서 사용되는 토큰 기반 인증 방식 중 하나입니다.

헤더에 "Authorization" 필드를 포함하여 인증 정보를 전송할 때, "Bearer"는 토큰 기반 인증 방식을 사용한다는 것을 나타내며, 그 뒤에는 인증 토큰이 포함됩니다.

fetch('https://api.openai.com/v1/engines/davinci/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer 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
},
body: JSON.stringify({
prompt: 'Write a sad poem about my border collie, Pepper',
max_tokens: 100
})
})
.then(response => response.json())
.then(data => {
console.log(data);
});

해당 코드에서 "Bearer" 다음에 오는 인증 토큰은 OpenAI API에 접근하기 위한 인증 토큰입니다. 이 토큰을 API에 제공하여 사용자 인증을 수행합니다. 이러한 방식으로 API를 보호하여 인증되지 않은 사용자가 API를 사용하는 것을 방지합니다.

CDN 이란 무엇일까

CDN(Content Delivery Network)은 인터넷 사용자가 웹 사이트를 방문할 때, 컨텐츠(이미지, 동영상, 문서 등)를 더 빠르게 전달하기 위해 사용되는 기술입니다. CDN은 전 세계에 분산된 서버 네트워크를 활용하여, 사용자와 가까운 위치에 있는 서버에서 컨텐츠를 제공함으로써 지연 시간을 최소화하고 대역폭을 줄이는 효과를 가집니다.

CDN은 일반적으로 다음과 같은 구성 요소로 구성됩니다.

1. Origin Server: 웹 사이트의 원본 컨텐츠를 저장하는 서버입니다.
2. Edge Server: 전 세계에 분산된 서버 네트워크 중, 사용자와 가까운 위치에 있는 서버입니다. Edge Server는 사용자 요청에 대한 응답을 빠르게 처리하기 위해 캐싱 등의 기술을 사용합니다.
3. DNS Server: CDN 서비스를 사용하는 경우, DNS(Domain Name System) 서버는 사용자 요청을 Edge Server로 라우팅합니다.

CDN 의 장점

1. 빠른 전송 속도: CDN은 전 세계에 분산된 서버 네트워크를 활용하여, 사용자가 컨텐츠를 빠르게 다운로드할 수 있도록 합니다.
2. 대역폭 감소: CDN은 Edge Server에서 컨텐츠를 캐싱하므로, 원본 서버로의 요청을 줄이고 대역폭을 절약할 수 있습니다.
3. 서버 부하 감소: CDN은 Edge Server에서 컨텐츠를 캐싱하므로, 원본 서버의 부하를 줄일 수 있습니다.
4. 보안 강화: CDN은 DDoS 공격 등의 보안 위협으로부터 원본 서버를 보호할 수 있습니다.
5. 지리적 제한 해결: CDN은 전 세계에 분산된 서버 네트워크를 활용하여, 지리적 제한을 해결할 수 있습니다.

CDN을 사용하는 사이트 예시

1. Netflix: Netflix는 전 세계에서 콘텐츠를 제공하는 대규모 비디오 스트리밍 서비스입니다. Netflix는 CDN을 사용하여 전 세계적인 사용자들에게 빠르고 안정적인 비디오 스트리밍 경험을 제공하고 있습니다.
2. Amazon: Amazon은 전 세계적인 온라인 쇼핑 몰로서, 많은 양의 콘텐츠(제품 이미지, 동영상 등)을 제공하고 있습니다. Amazon은 CDN을 사용하여 사용자의 지리적 위치에 따라 가장 가까운 서버에서 콘텐츠를 제공함으로써, 사용자의 페이지 로드 속도를 향상시키고 대역폭을 절약하고 있습니다.
3. Google: Google은 전 세계적으로 매우 인기 있는 검색 엔진입니다. Google은 CDN을 사용하여 매우 빠른 검색 결과 및 이미지, 동영상 등의 콘텐츠를 제공하고 있습니다.
4. Facebook: Facebook은 전 세계적으로 매우 인기 있는 소셜 네트워크입니다. Facebook은 CDN을 사용하여 전 세계적인 사용자들에게 빠르고 안정적인 페이지 로드 속도를 제공하고 있습니다.
5. YouTube: YouTube는 전 세계적으로 매우 인기 있는 동영상 공유 서비스입니다. YouTube는 CDN을 사용하여 전 세계적인 사용자들에게 빠르고 안정적인 동영상 스트리밍 경험을 제공하고 있습니다.

이러한 대형 웹 사이트들은 매우 방대한 양의 콘텐츠를 제공하고 있으며, 전 세계적으로 수많은 사용자들이 접근하고 있기 때문에, CDN을 사용하여 콘텐츠를 더욱 빠르고 안정적으로 제공하는 것이 매우 중요합니다.

CDN을 사용하지 않으면 생기는 문제들

1. 지연 시간: CDN을 사용하지 않으면, 전 세계적으로 분산되어 있는 사용자들이 웹 사이트에 접근할 때, 원본 서버에서 모든 컨텐츠를 다운로드해야 합니다. 이는 사용자 경험을 떨어뜨릴 뿐만 아니라, 웹 사이트의 성능과 로드 시간을 늦추는 원인이 됩니다.
2. 대역폭 문제: 웹 사이트의 인기가 많아지면, 대량의 트래픽이 발생하게 됩니다. 이는 대역폭을 초과하여 원본 서버에 부하를 줄 수 있습니다. 이로 인해 웹 사이트가 다운되거나 느려지는 문제가 발생할 수 있습니다.
3. 성능 문제: 사용자가 웹 사이트에 접근할 때, 원본 서버에서 모든 컨텐츠를 다운로드해야 하기 때문에, 웹 사이트의 성능이 떨어질 수 있습니다. 이는 사용자 경험을 저하시키고, 웹 사이트의 검색 엔진 최적화(SEO)에도 영향을 미칩니다.
4. 보안 문제: CDN을 사용하지 않으면, 원본 서버에 대한 공격이 쉽게 이루어질 수 있습니다. 또한, 원본 서버에서 컨텐츠를 다운로드하는 과정에서, 중간자 공격(MITM) 등의 보안 문제가 발생할 수 있습니다.