imgur이 뭔데? 보통 meme이나 웃긴 이미지 공유하는 커뮤니티 사이튼데, 무료에다 이미지 불러오는 속도도 빨라서 이미지 스토리지로도 많이 사용한다. 제대로 스토리지를 쓰고 싶은 사람은 S3를 쓰겠지만,,, 가볍게 테스트 용으로 쓰고 싶을 때는 또 이만한 사이트가 없다. 403 에러 뜨는 이유? 1. CORS 설정 확인 프로젝트 자체에서 크로스 도메인 리퀘스트를 차단하면 imgur 뿐만 아니라 대부분의 외부 요청이 차단되기 때문에, 다른 걸 확인하기 전에 먼저 이것부터 확인해야 한다. 관리자 도구로 내부에 아래와 같은 태그가 있는지 확인해 보자. 태그를 발견했다면, 아래처럼 수정해 주거나 태그 자체를 없애주면 된다. 2. 127.0.0.1을 localhost로 변경 만약에 위에 방식이 안되면, 테스트..
블로그 HTML 소스를 보던 중 태그에 rel="noopener"라는 속성값이 넣어져 있는 걸 발견. 처음 보는 속성값이었지만 티스토리 같은 큰 사이트에서 쓰는 건 그럴만한 이유가 있을 거야!라는 생각에 알아본 noopener, 찾다 보니 같이 알게 된 noreferrer 속성값에 대해 정리한 글. 내용 태그에 noopener, noreferrer 속성값을 사용하는 이유 알아보기 target 속성 정리 rel에 대해 알아보기 전에 먼저 target 속성에 대해 정리해야 한다. target 속성은 태그를 클릭했을 때 문서가 열릴 위치를 지정하는 속성값이다. target 속성은 총 5개가 있는데, 일반적으로 쓰는 건 현재 탭에서 문서가 열리는 _self와 새 탭에서 문서가 열리는 _blank 속성이다. 5개..
웹 폰트(Web Font)란? 웹 폰트는 방문자의 로컬 컴퓨터에 폰트가 설치되어 있는지 여부와 상관없이, 사이트에서 미리 지정한 경로에 있는 폰트 파일을 브라우저가 자동으로 다운 받아 화면에 보여주는 기술입니다. 웹 폰트는 별도의 설치 과정 없이 다양한 폰트체를 사용할 수 있다는 장점이 있지만, 웹 기준으로 봤을 때 상대적으로 무거운 용량의 파일(무거운 폰트는 10MB를 넘기도 한다)을 다운받아야 하기 때문에, 최적화를 하지 않을 경우 웹 성능 저하의 원인이 되기도 합니다. 웹 폰트의 종류 TTF (TrueType Font) TTF는 1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 공동 개발한 폰트 타입입니다. OTF가 개발된 이후 서서히 OTF로 교체되어 현재는 레거시 기술 취급을 받고 있지..
리액트를 시작하는 방법은 두 가지가 있습니다. create-react-app을 사용해 새 프로젝트를 만들거나, 기존 프로젝트에 리액트를 추가하는 것입니다. 하지만 리액트를 설치하기 전에, 먼저 Node.js라는 프로그램을 설치해야 합니다. 노드는 Chrome V8 JavaScript 엔진으로 빌드된 자바스크립트 런타임입니다. 쉽게 말하면 노드는 자바스크립트를 브라우저 없이 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기입니다. 노드의 대표적인 특징 자바스크립트 런타임 (JavaScript Runtime) 이벤트 기반 프로그래밍 (Event-Driven Programming) 논블로킹 (Non-Blocking) 싱글 스레드 (Single Thread) 자바스크립트 런타임 런타임은 특정 언어를 실행할 수..
SSR Server Side Rendering의 약자로 서버에서 렌더링 준비를 마친 상태로 클라이언트에 전달하는 방식입니다. SSR의 로딩 순서 유저가 서버에 요청을 보낸다. 서버는 즉시 렌더링 가능한 HTML 파일을 만든다. 클라이언트에 전달되면 즉시 렌더링 된다. 클라이언트가 자바스크립트를 다운로드한다. (이 때 콘텐츠를 볼 수는 있지만, 조작할 수는 없다.) 다운로드가 완료되면 자바스크립트 프레임워크를 실행한다. 자바스크립트 프레임워크가 실행되면 웹사이트는 조작 가능한 상태가 된다. CSR Client Side Rendering의 약자로 SSR과 달리 클라이언트에서 렌더링하는 방식입니다. CSR의 로딩 순서 유저가 서버에 요청을 보낸다. CDN이 HTML과 JS 파일에 접근할 수 있는 링크를 클라이..
