Programming/Web
HTTP 1.1 - 같은 서버(도메인)에 관한 동시 연결 제한
HTTP 1.1 - 같은 서버(도메인)에 관한 동시 연결 제한
2024.09.12HTTP 1.1의 동시성예전에 HTTP 1.1은 같은 도메인에 관해서는 만들 수 있는 연결의 제한이 있어서 Domain Sharding을 해야 한다고 들은적이 있다.연결 제한으로 인해 느려질 수 있는 경우쉽게 이해하기 위해 다음과 같은 상황을 생각해보자. 내가 웹 페이지에 접속하며 매우 큰 리소스인 이미지 파일 A, B, C를 example.com 서버로부터 불러와야 한다고 해보자. 이미지는 다음과 같은 경로에 호스팅되어 있다.A.png: example.com/img/A.pngB.png: example.com/img/B.pngC.png: example.com/img/C.png이렇게 생긴 웹사이트일 것이다. Coding Groot의 Head-of-Line Blocking 실험! example.com으로부터..
CertBot 인증서가 만료가 되었다
CertBot 인증서가 만료가 되었다
2024.01.21문제의 상황 모도코라는 사이트의 API Server를 운영하고 있고 CertBot으로 무료 인증서를 Let's Encrypt로부터 받아와서 사용하고 있다. 무료 인증서는 갱신 기간이 90일밖에 되지 않기 때문에 CertBot으로 자동으로 renew되도록 cronjob을 등록해놓았다. 실제로 거의 1년 동안 신경 안 쓰고 잘 사용해왔다. 그런데 인증서가 만료되면서 사이트 로그인이 되지 않는다고 갑자기 문의가 들어왔다. 일단 API 서버가 사용중인 인증서를 보니 이전에 만료된 Let's Encrypt 인증서를 사용하고 있었다. 운영 환경 API Server를 관리하기 위해 PM2라는 Process Manager를 사용하고 있다. GitHub에 Code를 업데이트하면 GitHub Action으로 자동으로 AW..
CloudFront에 올린 Font(woff, woff2)가 CORS 때문에 차단되는 경우
CloudFront에 올린 Font(woff, woff2)가 CORS 때문에 차단되는 경우
2022.08.21폰트가 계속 차단이 되는 경우 확인해 볼 것 CORS 에러가 발생한 상황 프로젝트를 하다가 유독 Web Font(woff, woff2)만 CORS에 의해 막히는 이상한 현상이 발생했습니다. 아래와 같이 CSS에서 우리가 CDN에 올려준 Font를 불러오도록 했습니다. Access-Control-Allow-Origin 응답 Header에 이 Font를 요청하는 사이트 주소도 잘 추가되어 있었습니다. 일단 저는 S3에 폰트를 업로드하고 CDN이랑 연동을 했습니다. 그리고 CDN에서는 S3 bucket의 CORS 정책을 쓰도록 했습니다. CloudFront와 CORS 정책은 아무 문제가 없어 보였습니다. 그런데 계속 Access-Control-Allow-Origin에 의해 CORS 의해 막혔습니다. Conso..
웹 문서를 만들기 전에 고민해볼 것들
웹 문서를 만들기 전에 고민해볼 것들
2022.04.17이 글은 HTML에 대해 다시 공부하며 적고 싶은 걸 적는 두서 없는 글입니다. 어떤 사이트가 좋은 웹일까요? 신경 쓸 것들 1. 웹 표준(참고한 사이트) 우리는 웹 표준을 준수하는 웹 페이지를 만들어야 합니다. 그래야 검색엔진에 유의미한 정보들이 수집도 잘되고(SEO 최적화!!) 다른 개발자 또는 기기들이 해석하기 좋습니다. div 태그로만 되어있는데 class명도 자기 마음대로 짠 웹을 고치게 된다고 생각해보십쇼... (사실 처음에 제가 그렇게 많이 했어서 잘압니다. 다신 건드리기 싫습니다.) HTML의 요소들 요소는 로 다른 텍스트와 구별합니다. 요소는 대소문자 구분이 없습니다. 태그를 문서의 루트로 둡니다. 문서의 첫 부분에는 항상 과 같이 이 문서가 몇 버전의 HTML을 사용하는지 알려주는 DT..
Flask를 CLI에서 실행해야 하는 이유와 환경 세팅하기
Flask를 CLI에서 실행해야 하는 이유와 환경 세팅하기
2021.06.08Flask를 CLI에서 실행해야 하는 이유 공부할 시간도 부족한데 매번 구글링해서 환경 설정을 하기 귀찮아서 Flask에 관해서 정리할 겸 작성하는 글입니다. Flask를 왜 CLI에서 실행해야 할까? 더보기 나는 주로 웹 브라우저로 웹 IDE(Codespace 또는 Replit)에 접속해서 작업한다. 위 웹 IDE 인스턴스에서는 Ubuntu 18에서 코드를 실행해준다. 고로 이 글은 리눅스 기준임을 참고하자. 두 가지의 실행 방법 CLI에서 flask run VS 스크립트에서 app.run() - 개인적으로 느꼈던 의문 - Python 코드 외부인 CLI에서 Flask를 실행하지 말고 그냥 run() 메서드 써서 Flask 인스턴스를 실행하면 안 되는건강? 나는 Flask를 CLI(명령어 환경)에서 F..
Deno를 사용해보자!
Deno를 사용해보자!
2021.06.02Deno 사용해보기 최근에 JS와 Node.js 공부를 하면서 점점 감당이 안 될 정도로 늘어나는 node_modules이 불편했었다. 내가 공부하는 환경의 특성상 어떤 바이너리나 자료들을 설치하거나 PC에 직접 다운로드하지 못한다. 그래서 주로 replit 같은 곳에서 하는데 인스턴스가 매번 초기화되기도 하고 매번 모듈들을 다운로드하는 것도 오래 걸렸다. 그렇다고 프로젝트 통째로 다 Push 하기도 곤란했다. 그래서 해결책을 찾는 와중 Deno라는 친구를 찾았다. 사용법도 Node.js와 비슷하다고 해서 바로 써봤는데 추가된 것이 몇 개 있긴 하지만 그렇다 하더라도 기본적인 사용법은 금방 익힐 수 있다. 더 찾아보니 장점도 뚜렷하고 마음에 든다. 아직은 알아가는 중이지만 공부하는데 많은 도움이 될 것 ..
티스토리 사이드바에 GitHub Contribution Graph 넣는 방법
티스토리 사이드바에 GitHub Contribution Graph 넣는 방법
2020.06.06GitHub Contribution 그래프를 아래와 같이 임베딩하는 방법 1. 사이드바에 HTML을 넣을 수 있도록 해주는 배너 출력 플러그인을 적용한다 "블로그 관리 페이지 > 플러그인"에서 적용할 수 있다. 2. 사이드바에 모듈이 추가됐는지 확인한다 사이드바 페이지의 기본 모듈 카테고리에 [플러그인] HTML 배너출력이 있어야 한다. 3. HTML 배너출력 모듈을 우측 사이드바에 배치한다 노출되길 원하는 위치에 HTML 배너출력 모듈을 배치해주자. 4. GitHub Contribution 그래프를 가져오는 HTML 코드를 나에게 맞게 수정한다. 아래 코드의 22번째 줄 있는 "사용자명"을 자신의 GitHub 사용자명으로 바꾸고 전체를 복사한다. 나는 GitHub 사용자명이 IamGroooooot이기 ..
티스토리 글쓰기에서 완료 버튼 사라졌을 때 해결법
티스토리 글쓰기에서 완료 버튼 사라졌을 때 해결법
2020.05.04티스토리 편집창에서 하단의 완료 버튼이 사라질 때의 해결법! 티스토리 글을 쓰다가 맞춤법 검사를 하다 보면 가끔 하단의 바가 사라질 때가 있다. 그러면 맞춤법 검사를 완료하고 내 글을 올리고 싶은데 완료할 수가 없다...ㅠㅠ 어제 이 현상 때문에 글을 백업하다가 실수로 4시간 동안 쓴 글을 날렸는데 하... ㅋㅋㅋㅋ 화나서 찾은 해결법을 공유해보고자 합니다. 해결법 맞춤법 검사 때문에 사라진 버튼은 우리 눈에서만 잠시 사라진 거지 실제로 삭제된 것이 아니다. 그렇기 때문에 클릭했을 때의 기능 자체는 사라지지 않았다! 기능을 직접 호출하면 된다. 프로그래밍을 몰라도 전혀 상관이 없고 그냥 따라 하면 별로 어렵지 않다! 1. 키보드의 F12키를 눌러서 개발자 도구를 연다 이렇게 생긴 창이 뜰 것이다. 2. ..
내가 찾은 CORS Error의 올바른 해결법
내가 찾은 CORS Error의 올바른 해결법
2020.05.03CORS Error에 대해서 알아보자! * 예시를 위해 Flask를 사용했지만 Flask를 모르셔도 괜찮습니다. 다른 프레임워크에서도 지원하는 기본적인 기능만을 사용했습니다. 원인 Same Origin Policy와 Cross Origin Policy를 모른다면 실수하기 쉽다. 이 정책을 모른채로 코딩하다가는 난 잘 코딩했는데 아래와 같은 Error가 뜨면서 json 데이터 같은 외부 자원들을 읽어오지 못하는 경험을 할 수도 있다. Access to XMLHttpRequest at '주소A' from origin '주소B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested r..
[Gatsby] Anchor Tag 대신 Link Component
[Gatsby] Anchor Tag 대신 Link Component
2020.04.11Gatsby에서 내부 페이지로 이동할 때 Link Component를 써야 하는 이유 Anchor Tag(텍스트) 이동하는 페이지를 전부 로딩한다 그렇기 때문에 이동하면서 번쩍거린다 부자연스러워 보인다 Link Component Gatsby’s component enables linking to internal pages as well as a powerful performance feature called preloading. 출처: https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-gatsby-link 내부 페이지 안에서 이동할 때 미리 로딩을 해서 자연스럽게 보이게 한다 gatsby 모듈에 정의되어 있다 링크로 이동할 때 (이질감 없이) 훨씬 자연스럽게..
[리액트] 리액트 노트
[리액트] 리액트 노트
2020.02.25이 글은 리액트 튜토리얼 영상을 공부하면서 남기는 노트입니다. 영상에 있는 내용과 제가 아는 내용을 알아보고 정리하며 글을 쓰고 있습니다. 모든 출처는 아래에 있습니다. 리액트란? Open Source JavaScript Library (Framework가 아니라 Library이다!!) 장점 오직 UI를 만드는 용도이다보니 가볍다 페이스북이 유지 보수를 해준다 사용하는 사람도 많다보니 오류나 도움이 필요할 때 구글링하면 바로 나온다 인기가 많다 구체적인 장점을 더 알아보자. Component를 조합하는 방식 리액트는 전체 UI를 컴포넌트들을 조립하는 방식으로 구성한다. 그래서 다른 프로젝트의 컴포넌트를 가져와서 사용하기도 쉽고 재사용하기도 쉽다. (ex) Footer 컴포넌트만 다른 Footer 컴포넌트..
티스토리 Table Of Content(TOC) 추가하기 :: HTML로 Page Jump하기
티스토리 Table Of Content(TOC) 추가하기 :: HTML로 Page Jump하기
2020.02.21티스토리도 아래와 같이 목차를 누르면 그 부분으로 이동하게 글을 쓸 수 있다. 별도의 플러그인도 필요 없다. 먼저 내가 만든 아래의 예시를 구경해보자. Table Of Content Goto 위 Goto 중간 Goto 아래 위 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 중간 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 아래 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 내용 ... 문단 내용 애용 ..