Programming
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..
NestJS에 NewRelic 연동하는 법
NestJS에 NewRelic 연동하는 법
2022.07.18NestJS에 NewRelic을 연동하는 법이다. 1. New Relic에 접속한 후 Add data를 누른다. 2. Data sources를 Node.js를 선택한다. TS로 작성된 NestJS도 결국 JS로 컴파일되어서 NodeJS로 실행되기 때문에 Node.js를 선택한다. 3. Begin Installation을 클릭한다. 이때 아래 캡처본에는 안 나왔지만 방화벽 같은 것이 있을 경우 Proxy를 사용하는 법에 대해서 나와있다. 참고하자. 4. 해당하는 NodeJS 배포 환경을 고른다. 나는 EC2 인스턴스에 PM2로 NodeJS 프로세스를 올리며 관리하고 있다. 그래서 On a host (with PM2)를 선택했다. 5. Node.js Agent의 명령어를 서버에 실행한다. 이걸 실행하고 기다..
웹 문서를 만들기 전에 고민해볼 것들
웹 문서를 만들기 전에 고민해볼 것들
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이기 ..
[Compiler] 연산자의 Associativity와 Recursion의 연관성
[Compiler] 연산자의 Associativity와 Recursion의 연관성
2020.05.10연산자의 Associativity와 CFG의 문법(Recursion)의 연관성 정의 연산자의 Associativity란? (괄호가 없을 때) 같은 우선순위의 연산자들 중 무엇을 먼저 결합할지 결정해주는 속성을 말한다. + 연산자가 Left Asscociative하면 1+2+3은 (1+2)+3과 동일한 의미를 가지게 되고 Right Asscociative하면 1+2+3는 1+(2+3)과 동일한 의미를 가지게 된다. Recursion이란? CFG에서 non-terminal이 그 non-terminal을 포함한 sequence를 유도할 수 있으면 Recursive하다(순환한다)고 말한다. 우측에서 순환할 수도 있고 좌측에서 순환할 수도 있고 양쪽에서 순환할 수도 있다. 예시를 보면서 이해를 해보자. Left ..
티스토리 글쓰기에서 완료 버튼 사라졌을 때 해결법
티스토리 글쓰기에서 완료 버튼 사라졌을 때 해결법
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 모듈에 정의되어 있다 링크로 이동할 때 (이질감 없이) 훨씬 자연스럽게..
[Compiler] 1. Lexical Analyzer :: 구현하기
[Compiler] 1. Lexical Analyzer :: 구현하기
2020.04.09* 2020/04/09 - [Programming/Compiler] - [Compiler] 1. Lexical Analyzer :: 동작하는 방식에서 이어지는 내용입니다. Lexical Analyzer를 구현해보자 무엇을 구현해야 할까? Lexical Analyzer는 input을 읽고 토큰으로 분류를 해서 Symbol Table을 만들어야 합니다. Token들의 Pattern 그 Pattern들을 인식하는 코드 Symbol Table 1. Token들의 Pattern은 어떻게 정의할까? 정규식(Regular Expression)을 사용하면 편합니다. 특정 문자열의 패턴을 간결하면서 정확하게 표현을 하게 해주는 좋은 도구입니다. 비교를 해봅시다. 식별자 Token의 Pattern을 글로 표현한 경우 식별..
[Compiler] 1. Lexical Analyzer :: 동작하는 방식
[Compiler] 1. Lexical Analyzer :: 동작하는 방식
2020.04.09* 2019/07/30 - [Programming/Compiler] - [Compiler] 1. Lexical Analyzer :: 소개와 용어 정리에서 이어지는 내용입니다. 지난번 글에서 말했던 개념을 빠르게 복습해봅시다 더보기 Token: (Token Name, 어떤 문자들을 대표하는 Symbol)와 (Token Value, 토큰의 구체적인 속성)의 쌍 (ex) "산술연산자(+, -, *, /, %)", "반복문(for, while)" Lexeme: 토큰들의 구체적인 예 (ex) "+" -> 산술연산자라는 토큰의 구체적인 예 Lexical Analyzer(Scanner)의 동작 방식에 대해 알아보자 Lexical Analyzer는 input으로 준 문자열을 읽어서 각각의 단어들이 무엇을 의미하는 단어..