소프트웨어-이야기/Web 썸네일형 리스트형 개발자의 눈으로 이모지 바라보기2 프로그램은 이모지를 어떻게 알아볼까?'유니코드'는 전 세계의 모든 문자를 여러 프로그램에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다. '이모지'는 유니코드로 표현한다. '이모지' 유니코드가 텍스트에 포함된 경우, 각 프로그램은 '이모지' 유니코드를 자신들이 사전에 정의한 '이모지 이미지'로 변경한다. OS / 프로그램 별로 이모지 그림체가 다른 이유는 이러한 배경 때문이다. 이모지 유니코드는 유니코드 사이트에서 확인할 수 있다.(모든 이모지 유니코드 확인하기 👉🏻 https://www.unicode.org/Public/emoji/15.0/) 이모지가 점점 다양해지고 있다! 이모지의 종류가 점점 다양해지고 있다. 그리고 다양성을 존중하는 문화가 자리잡으면서, 이모지를 다양한 피부톤과 성.. Zalando 사례를 통해 REST API 가이드 살펴보기 zalando는 패션, 신발, 뷰티 부문을 판매하는 독일의 온라인 커머스 기업이다. zalando에서 작성한 Restful API 가이드의 몇가지 사례를 통해 좋은 API를 설계하는 방법을 정리해보고자 한다. https://opensource.zalando.com/restful-api-guidelines 설계 원칙 API가 첫번째이다. 기능을 구현하기 전에 API를 미리 설계해야한다. 클라이언트와 동료들에게 사전에 API 리뷰를 받아야한다. 추가로 API를 설계할 때 고려해야하는 점은 다음과 같다. 도메인과 기능의 목적을 제대로 이해해야한다. 일반화된 리소스를 제공해야한다. 특수한 사례별로 API를 제공하는 것은 피해야한다. API는 무엇을 제공하는지만 표현해야한다. 어떻게 기능을 제공하는지는 API에 .. HTTPS 통신 순서 1. 브라우저는 호스트 주소를 IP로 변환한다. 로컬에 IP 주소가 있으면, 주소 정보를 재사용한다. 만약 없으면 DNS 서버에 질의한다. 2. 주소가 https 스키마로 시작하는 경우, 클라이언트는 서버의 443 포트로 TCP 커넥션을 연다. SSL 트래픽은 바이너리 프로토콜이기 때문에 HTTP와는 다르다. 그래서 80번 포트가 아니라 443 포트로 통신한다. 3. 클라이언트와 서버가 보안 변수를 주고받는 HandShake 시작한다. 3-a. 클라이언트가 서버에 보안 설정을 위한 요청을 보낸다. 이를 Client Hello라고 부른다. 세션키 생성에 사용할 랜덤 스트링, 사용가능한 암호화 기법 등을 전달한다. 3-b. 서버도 보안 설정에 필요한 응답을 내려준다. 이를 Server Hello라고 부른다... Chrome의 기본 레퍼러 정책 변화 - strict-origin-when-cross-origin (2020.07 / Chrome v.85) 요약 크롬은 85 버전 (2020.07 출시)부터 strict-origin-when-cross-origin 정책의 기본값을 enable으로 설정하기 시작했다. 이 영향으로 referer의 origin이 다른 경우, url path, parameter를 수집할 수 없는 경우가 발생하게 된다. 웹사이트에 referer 정책을 meta 태그로 설정해둔 경우, 이와 같은 문제는 발생하지 않는다. 크롬에서는 웹사이트에 referer 정책이 선언되어있지 않은 경우에만 브라우저의 referer 정책을 따른다. 각 브라우저의 referer 정책 설정은 chrome://flags/#reduced-referrer-granularity 에서 확인할 수 있다. Chrome 85의 Referer 정책 변화 referer hea.. HTTP 리소스 출처 확인하기 - origin, site, Sec-Fetch-Site Header Origin이란?origin은 URL에서 스키마, 호스트, 포트를 합한 것을 말한다. https://www.example.com/foo Url이 있다면, https://www.example.com:443 이 origin이다. same origin 식별 샘플 Sitesite는 TLD(Top-level domains. ex. .com / .kr )과 TLD 이전 도메인의 조합을 말한다.예를 들어, https://www.example.com/foo URL에서 site는 example.com 이다. schemeful same-sitesame-site는 schema를 보지 않는다. 그러나 http가 취약 채널을 통해 사용되는 것을 막아야하는 경우, same-site보다 더 엄격한 기준인 schemeful same.. 내멋대로 React 개념 정리하기 런타임컴퓨터 언어 안에 쓰인 프로그램을 관리하기 위해 특정한 컴파일러나 가상 머신이 사용하는 기본 코드 라이브러리나 프로그램을 말한다. Nodes자바스크립트 엔진인 V8으로 빌드된 자바스크립트 런타임이다. 자바스크립트로 서버 사이드 애플리케이션으로 구현할 수 있게 해준다. npmNode js으로 만들어진 모듈을 관리해주는 툴이다. 파이썬에서는 pip, 루비에서는 gem으로 연상하면 된다. 명령문 npxnpm 5.2+ 버전의 패키지 실행 도구이다. React자바스크립트 라이브러리이다. 컴포넌트라고 불리는 독립적인 코드 조각들을 활용하여, 복잡한 UI를 유연하게 구현할 수 있게 도와주는 역할을 한다. Babel자바스크립트 컴파일러다.Babel의 입력과 출력 모두 자바스크립트이다. 최신 버전의 자바스크립트 문.. (Front) 유용한 웹디자인 오픈소스 사무실 키오스크 앱을 꾸미면서, 웹디자인 오픈소스에 관심이 생겼다. 마음에 드는 오픈소스들을 정리해보고자 한다. 🎨 CSS / JavaScript 오픈소스 1.Strobe Light Effect for Text Glitch effect strobocops ... codepen.io 2. Confetti Falling Background Using Canvas Confetti ... codepen.io 3. Looking Through Water Blur Animation Effect – 5 Styles https://codemyui.com/looking-water-blur-animation-effect-5-styles/ 4. Microsoft Defrag (MSDOS) - Now on your brows.. 카드형 Swipe 라이브러리 리서치 피파 게임 같은 이미지가 웹페이지에서 슥슥 움직이는 그런 라이브러리를 찾고 있다. 1. Swiper 데모 사이트 : http://idangero.us/swiper/demos/#.WKvi-BKLT_Q깃허브 : https://github.com/thebird/Swipe 뭔가.. 삐까뻔쩍해보이지 않는다. 2. Hammer JS 사이트 : http://hammerjs.github.io/ 유용해보이지만, 모바일에 최적화된 인터랙티브 라이브러리여서 PC에서는 부적합하다 3. js-swipe-cards 데모 사이트 : http://apeatling.com/demos/js-swipe-cards/깃허브 : https://github.com/apeatling/javascript-swipe-cards 음.. 역시 모바일에서.. 이전 1 2 다음
