제가 활동하고 있는 문예 단체에서 문예지를 구독하는 독자들이 작품을 이메일에서 받은 즉시 볼 수 있도록 이메일 HTML 템플릿을 만들어 달라는 부탁을 받았습니다. 처음엔 단순한 퍼블리싱 작업인 줄 알았지만 생각 이상으로 장애가 많아서 혹시 저처럼 퍼블리싱을 통해 이메일 템플릿을 제작하고 싶은 개발자, 디자이너가 있다면 참고하실 수 있도록 글을 작성해보기로 했습니다. 염두에 두어야 하는 제한사항들 사실 조심성이 많은 사람이라면 이메일로 어느 정도의 컨텐츠를 보낼 수 있는지 궁금해하고 인터넷을 뒤져볼 것입니다. 그러나 정보들이 산발적으로 흩어져 있어서 이곳에서 어떤 것을 이메일 컨텍스트 내에서 구현할 수 없는지, 어떤 제한 사항이 있는지를 정리해보겠습니다. 자바스크립트 탑재 불가 일반적인 html 에는 태그..

이 글은 아래 글과 영상을 바탕으로 작성되었습니다. 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로를 최적화하는 것은 현재 사용자 작업과 관련된 콘텐츠 표시의 우선순위를 지정하는 것을 말합니다. developers.google.com 성능 최적화 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui.toast.com https://www.youtube.com/watch?v=G1IWq2blu8c [2018] 프런트엔드 성능 최적화 [2018] 프런트엔..

www.youtube.com/watch?v=fczpUczepS4&list=PLuHgQVnccGMAM6VAWEKtaUnvzePCxnUVo 이 글은 위의 영상을 바탕으로 작성되었습니다 HTTP 에서의 캐시 제어는 주로 http 메세지 헤더의 Cache-Control 속성을 통해서 이루어집니다. 이 속성값을 "no-store" 로 해주면 브라우저는 이를 읽고 해당 데이터(파일)을 절대 캐시하지 않습니다. maxAge 를 통해 캐시 허용 캐시를 무한정 허용하면 웹 서버 내에 그 파일 내용의 업데이트가 이루어졌다고 하더라도 웹 브라우저는 그 컨텐츠를 다시 받지를 않을 것이기 때문에 절대 좋다고만 볼 수 없습니다. 따라서 캐시가 '언제까지 허용될지를 결정하기 위해' Cache-Contol 속성에 maxAge 값을 ..

www.youtube.com/watch?v=0cfUVrQW_yg&list=PLCZ-8rvakaqbplQZAoUku8uuxUgbLQm-1 이 글은 위의 영상을 바탕으로 작성되었습니다. HTTPS 에서 'S' 는 Over Secure Socket Layer 의 약자입니다. 보통의 HTTP 프로토콜은 암호화를 전혀 하지 않은 상태에서 통신을 수행합니다. 따라서 중간에 해커가 통신을 가로채면, 내용을 그대로 볼 수 있게 됩니다. 이를 통해 해커가 이를 조작해서 서버나 사용자를 속일 수 있습니다. HTTPS 를 사용하면 전송하는 데이터를 중간에 가로채더라도 암호화 되어 있기 때문에 해커가 보지 못하게 할 수 있습니다. 따라서 HTTP 가 아닌 사이트에서 로그인을 요구한다면 절대 그 서비스를 이용해서는 안됩니다. ..

www.youtube.com/watch?v=t7ASgtJoVz4&list=PLuHgQVnccGMBd-v_DjNm61EBaDpYZSV1Z 이 글은 위의 영상을 기반으로 작성되었습니다. HTTP 는 간단히 말해, 웹 브라우저와 웹 서버가 통신할 때 사용하는 규약입니다. 과거에는 html을 전송하기 위한 단순한 규약에 불과했지만, 점점 웹에서 요구되는 것들이 많아지면서 이미지, 비디오 등의 다양한 멀티미디어 파일을 전송하는데 사용되고 있습니다. 웹 서버와 웹 클라이언트가 서로 통신하기 위해서는 서로 알고 있는 형식이 똑같은 '메세지'가 필요합니다. 이 HTTP 메세지의 형식을 규정하는 것이 HTTP 입니다. 크롬 개발자 도구의 네트워크 탭에서 HTTP 통신을 통해 받아온 파일들을 볼 수 있습니다. 파일이 로드..

[ Node.js ] Node.js 에서 쓰는 모듈화는 Common.js의 것이다. require('경로 or 패키지 이름') 로 불러오고 이를 변수나 상수로 담는다. 가져와야 할 파일 안에서는 module.exports = (somthing) 으로 require 를 실행했을 때 리턴되는 값이나 함수를 넣는다. [ ES6 ] 하지만 ES6 가 공개된 이후에는 모듈화를 자바스크립트에서 공식으로 지원한다. import 담을 변수 from '경로 or 패키지 이름' 으로 불러오고 export default (somthing) 으로 불러왔을 때 담길 리턴값을 설정할 수 있다. 다만 default 를 없애고 그냥 export를 쓰는 방법이 있다. 이 export는 여러번 지정할 수 있다. export (somet..