Web/기타

[Netlify] 티스토리 RSS 호출 Function만들기

취미로 수정하고 있는 개인 CV 페이지가 있는데 여기에 최신 티스토리 블로그 작성글을 추가하고 싶어졌다. 티스토리에서 제공하는 RSS 를 활용하여 기능을 추가 하기로 했다. 기존의 사이트는 React로 만들어서 Netlify에 배포하고 있는데, 프론트 페이지만 있는 사이트다 보니 티스토리 RSS API호출시 CORS에러가 발생한다. 이 간단한 호출 기능 때문에 별도의 Server를 만들기는 애매해서 알아보던중 Netlify Function이라는 것을 알게 되었다. Netlify Functions은 서버리스 함수를 통해 동적인 백엔드 기능을 손쉽게 추가할 수 있는 기능이다. 이 함수들은 AWS Lambda를 기반으로 하며, Netlify는 이를 쉽게 배포하고 관리할 수 있는 인터페이스를 제공한다. Netl..

Netlify로 배포한 사이트에 개인 domain 연결하기 (구글 도메인)

Netlify로 배포를 하고 나면 .netlify.app 으로 끝나는 도메인을 제공해주긴 하지만 좀 더 개인적인 도메인을 사용하고싶어서 도메인을 연결하고자 한다. Netlify로 프로젝트 배포는 완료한 이후에 진행한다. 배포한 프로젝트의 대시보드에서 Domain Settings로 들어간다. Netlify의 배포 설정 페이지에서 Domain Managment를 클릭하고 Add custom domain 을 클릭한다. 본인이 구매한 도메인을 입력하고 Verify 클릭 도메인을 입력하고 나면 DNS 설정을 체크하라는 메세지가 뜬다. 해당 링크들을 각각 클릭해서 알려주는대로 설정한다. 링크를 눌러보면 다음과 같이 안내 창이 뜬다. 도메인의 dns 설정에서 해당 레코드를 추가하라는 내용이다. 나는 구글 도메인을 통..

HTML 이미지 태그로부터 외부링크(참조값) 보내는것 막기

html로 이미지를 첨부할 때, 브라우저는 서버로부터 이미지를 요청한다. 리퀘스트를 할 때 브라우저는 http 헤더에 url을 담는 Reffer 이라는 속성을 붙여서 보낸다. 그러나 어쩔때는 (외부 링크 첨부 금지와 같은 상황일 때 ) 이러한 행동을 막고싶을 때가 있다. 이 행동을 막기 위한 방법중의 하나로 img 태그의 reffer 속성을 조절할 수 있다. html의 img 태그에 referrpolicy 속성을 통해서 설정한다. referrpolicy 는 이미지를 페치할 때 사용하는 특정 속성이다. Value Description no-referrer 헤더에 어떠한 정보도 보내지지 않는다. no-referrer-when-downgrade 디폴트 값. HTTPS가 아니라면 헤더에 정보를 보내지 않는다 o..

웹팩, webpack

웹팩 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 모듈 번들러 : 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS, Images 등)을 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구 웹팩에서의 모듈 웹 애플리케이션을 구성하는 모든 자원을 의미 (HTML, CSS, JS등 ) 모듈 번들링 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작 빌드, 번들링, 변환은 모두 같은 의미. 웹팩이 필요한 이유 파일 단위의 js 모듈 관리의 필요성 웹 개발 작업 자동화 도구 웹 서버 배포시 HTML,CSS,JS 압축, 이미지 압축, CSS 전처리기 변환과 같은 작업을 해야하는데 이런 일을 자동화 해 주는 도구 등장 웹 애플리케이션의 ..

[axios] axios 인터셉터 추가하기

access token이 필요한 요청일 때 마다 해당 요청 메소드에 앞서 계속해서 header에 토큰을 추가 해 주었다. 이런 방식이 두가지 이유로 맘에 들지 않았는데 1. 중복된 코드 반복해서 작성 2. 토큰이 필요한 요청인지 아닌지 판단하는 과정 반복 axios 인터셉터를 통해 이를 해결하는 방법을 찾았다. request 요청이 이루어지기 전에, response가 이루어진 직후 미리 설정, 결과 값을 가공하는 인터셉터를 통해 한번에 관리가 가능하다. 기존 코드 //api/index.js function Instance() { const instance = axios.create({ baseURL: "url", headers: { "Content-type": "application/json", }, }..

CSR 과 SSR

CSR vs SSR 대표적인 SPA 프레임워크인 Vue와 React는 Client Side Rendering(CSR 방식으로 View 생성. PHP는 Multi page application(MPA)로 Server Side Rendering (SSR)방식으로 View를 생성. CSR vs SSR CSR 브라우저(client) 에서 js에 의해 view(HTML)을 동적으로 생성. 장점 Page 전환이 SSR보다 상대적으로 빠르다. 페이지가 로딩 되는 순간 필요한 js들이 모두 있기 때문에 사용자는 바로 상호작용 가능하다. 단점 최초 접속시 모든 js 와 static( html,image)를 가져와야 하기 때문에 최초 접속시 로딩 속도는 SSR비해 느리다. 낮은 SEO 성능을 보인다 (Search Engi..