번데기 개발자의 메모장

Webpack으로 웹 애플리케이션을 빌드한 뒤에 S3로 업로드를 해야 하는 경우가 있습니다. 보통 S3를 통한 정적 웹페이지 배포를 할 때, 또는 특정한 버킷 위에 Webpack으로 bundling 한 js파일을 업로드해야 할 경우가 있을 때 이러한 경우가 발생하게 됩니다. 수동으로 dist폴더 안에 있는 파일들을 drag-end-drop을 통해 S3로 업로드 할 수도 있지만, Webpack 명령어 사용 후에 자동으로 S3 Bucket에 올려주는 플러그인이 있어 한번 소개해드리도록 하겠습니다. webpack-s3-plugin 오늘 설명해드릴 플러그인은 바로 webpack-s3-plugin 인데요, 아래 링크를 누르시면 npm 설명 페이지를 확인하실 수 있습니다. webpack-s3-plugin Uploa..

웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blob이란? blob은 binary large object의 약자입니다. 이름처럼 바이너리 형태로 큰 객체를 저장하며, 이 객체는 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 나타냅니다. blob의 경우 Chrome에서 954MB 정도의 이진 데이터를 저장할 수 있고, 이는 환경에 따라 다릅니다. blob으로 저장할 수 있는 최대 용량을 구하는 방법에 대해 궁금하신 분들은 아래 링크를 참조해주세요. JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수..

웹 개발을 하게 되면 HTTP에 대해 조금 알아두는 것이 좋습니다. 그중에서 Content-Type에 대한 이해가 부족한 것 같아 정리를 해보았습니다. Content-Type Content-Type은 api 연동시에 보내는 자원을 명시하기 위해 보통 사용합니다. Content-Type을 깊게 이해하기 위해서는 HTTP의 request의 구조를 이해하는 것이 좋습니다. HTTP의 Request는 다음과 같이 4개의 파트로 나눌 수 있습니다. 위 그림에서 Message Body에 들어가는 타입을 HTTP Header에 명시해줄 수 있는데 이때 명시해줄 수 있도록 해주는 필드가 바로 Content Type입니다. 예를 들어 api 요청 시 request에 실어 보내는 데이터(body)의 type정보를 표현합니..

캐리지 리턴(CR)과 라인 피드(LF)란? 프로그래밍을 하다보면 \n으로 되어있는 문자를 만나게 됩니다. 보통 줄내림이라는 뜻인데 윈도우에서 이것저것 하다보면 \n이 아닌 \r\n도 만날 때가 있습니다. 각각의 의미를 살펴보겠습니다. \r Carriage Return(CR) 라는 의미를 가지며 일반적으로는 맨앞으로 이동하라는 뜻입니다. \n Line Feed(LF) 라는 의미를 가지며 일반적으로는 New Line, 즉 새로운 라인이라는 뜻입니다. 캐리지 리턴(CR)과 라인 피드(LF)의 어원 살펴보기 캐리지 리턴은 아래와 같은 타자기(typewriter)에서 따온 단어입니다. https://youtu.be/FkUXn5bOwzk 캐리지 리턴의 영문 뜻은 다음과 같습니다. Carrage: 운반, 또는 수송이..

HTTP의 Keep-Alive HTTP 프로토콜의 Keep-Alive는 Http의 Header의 일종입니다.. 이는 HTTP/1.0에서 지원하지 않던 지속 커넥션을 가능하게 하기 위해서 쓰였습니다. 그렇다면 지속 커넥션이 뭔지부터 알아보겠습니다.. 지속 커넥션을 보기 전에 HTTP 커넥션에 대해 알아보도록 하겠습니다.. HTTP/1.1 이전에는 클라이언트와 서버 사이에 트랜잭션 한번이 일어나면 HTTP Connection 이 끊어졌었습니다. 이렇게 되면, TCP 커넥션을 맺는데 발생하는 지연과 느린 시작 지연이 트랜잭션마다 발생하기 때문에, 한 웹페이지에서 여러 이미지와 HTML을 요청해야 하는 경우 성능이 매우 안좋아지게 됩니다. 그래서 이런 커넥션을 맺고 끝는데서 발생하는 지연을 없애기 위해서 한번 ..

@keyframes 와 애니메이션 CSS 애니메이션의 중요한 요소는 @keyframes입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어 지는 부분입니다. @keyframes를 타임라인 안의 하나의 스태이지(구간)들 이라고 생각하시면 편합니다. 다음으로 CSS 애니메이션이 작동하도록 @keyframes를 선택자로 묶어주시면 됩니다. 이것은 마지막에 keyframes 선언 안의 모든 코드를 분석하고 각 스테이지에 따라 새로운 스타일로 변형시키게 됩니다. 참조) 0% 시작 => 100% 끝 from to 로도 사용가능 to로만 쓸수도 있음 Animation 속성 animation 속성은 예전에 @keyframes라고 불리며 CSS 선택자 안에서 존재했었습니다. animation은 여러개..

기존에 알고 있던 SVG에 대한 상식 백터기반이기 때문에 사이즈가 변경되어도 안 깨지고 XHTML 문법으로 이루어져서 CSS 및 Event Handle이 가능하다. 정확한 개념 정리 SVG의 약자는 Scalable Vector Graphic 의 약자입니다. 2차원의 백터 그래픽을 표현하기 위해서 탄생하였고 XML 기반의 표현입니다. 1998년 W3C에서 개발을 하였고 그전에는 Microsoft의 "VML"와 Apple의 "PGML" 이라는 2차원의 백터 그래픽을 XML로 표현하는 언어가 있었습니다. 하지만 두개다 W3C에서 채택하지 않았고 W3C는 SVG를 개발하여서 표준으로 채택하였습니다. SVG의 장단점 장점으로는 백터기반이기 때문에 기존의 비트맵 기반의 포멧과 달리 사이즈가 늘어나도 사진이 깨지지 ..

쿠키란? 브라우저의 저장소 역활을 하기 위해 사용합니다. 쿠키는 만료 기간이 있는 키 - 값 저장소입니다. document.cookie를 통해 현재 쿠키의 정보를 알아낼 수 있습니다. 쿠키의 특징 4KB의 용량 제한이 있습니다. (1KB는 1024 바이트 => 한글자당 보통 2Byte니까 512글자정도 쓸수 있는 용량) 계산해보면 2000자 남짓의 텍스트를 저장할 수 있다고 가정하겠습니다. 매 서버 요청시마다 서버로 쿠키가 전송되는데요, 왜 쿠키가 전송될까요? 그것을 알기위해서는 HTTP요청에 대해서 간단히 알아야합니다. HTTP 요청은 상태를 가지고 있지 않습니다. (Stateless) 무슨 말인지 예를 들면 브라우저에서 서버로 나에 대한 정보를 가져오라는 Get /Me라는 요청을 보낼 때, 서버는 요..

모바일 친화적이란? 사이트가 모파일 친화적이라는 것은 간단하게 사용자가 모바일로 웹 페이지를 이동할 때 편하게 이용할수 있음을 뜻합니다. 사이트의 데스크톱 버전을 휴대기기에서 보거나 사용한다면 콘텐츠를 읽기위해 두 손가락으로 화면을 모으거나 확대할 수 있고 이는 사용환경을 번거롭게 느끼게 하므로 사용자가 사이트를 떠날 확률이 높기 때문에 모바일 친화적으로 만드는 것이 중요합니다. ViewPort?? 정의 모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 합니다. 즉 화면 Display상의 표시 영역을 뜻합니다. 모바일 Safari는 viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대..

페이지 전환 방식 웹에서는 페이지 전환 방식이 2가지가 있습니다. forward 방식과 redirect 방식이 있습니다. forward 방식 Web Container 차원에서의 페이지 이동만 있습니다. 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없습니다. 그렇기 때문에 웹 브라우저에는 최초에 호출한 URL이 표시되고 이동한 페이지의 URL 정보는 볼 수 없습니다. 동일한 web container 차원에서의 페이지 이동만 가능합니다. 현재 실행중인 페이지와 forward에 의해 호출될 페이지는 request, response 객체를 공유합니다. Redirect 방식 web container 는 redirect 명령이 들어오면 웹 브라우저에게 다른 페이지로 이동하라는 명령을 내립니다. 웹 브라우저..