배경 게임 이벤트 페이지 제작에 국문, 영문 다국어 처리를 해야 했다. 나는 단일페이지 개발이라 HTML + CSS + VanillaJS + Webpack 환경을 구성하고 페이지를 개발했다. 다국어 처리 프로세스 페이지 최초 접속 시 URL 뒤 쿼리스트링을 붙여 리다이렉트 이후 기본 URL로 접속 시 로컬 스토리지에 저장된 언어코드에 따...
복잡한 인터렉션 적용하기 (requestAnimationFrame)
나에게 시련이… 입사하고 나서 얼마 지나지 않아 MapleStory Worlds의 크리에이터 모집 페이지 제작 업무를 받았다. 디자인 시안에서 기획서 검토할 때 없었던 인터랙션들이 많아 당황했다. 전 직장에서 CSS의 기본적인 것만 활용할 줄 알았던 나에게 여러 가지 인터랙션이 존재하는 웹페이지 제작은 커다란 두려움으로 다가왔다. 이미 크리에이...
HTTPS
HTTP? 웹 브라우저와 웹 서버가 통신할 때 규칙이 필요한데 이러한 규칙을 HTTP(Hyper-Text Transfer Protocol)라고 한다. HTTP는 클라이언트 - 서버 구조를 따르고 있다. 이는 클라이언트(= 웹 브라우저)에서 서버로 요청하고 서버에서 클라이언트에게 응답하는 형태이다. 서비스를 요청하고 제공하는 쪽이 명확하기 때문에 단방...
웹 캐시 서버
캐시 자주 쓰이는 데이터들을 별도 공간에 복사하고 제공하는 기술이다. 캐시의 데이터는 일반적으로 RAM과 같이 빠르게 액세스할 수 있는 하드웨어에 저장된다. 캐시의 주요 목적은 상대적으로 더 느린 공간에 액세스해야 하는 필요성을 줄여 응답속도를 높이기 위함이다. 웹 캐시 서버 웹 서버의 정적 자원(html, javascript,...
Mock API와 MSW(Mock Service Worker)
Mock API? Mock의 사전적인 의미를 알아보자. mock : 거짓된, 가짜의, 모의의 사전적인 의미로 유추해본다면 Mock API란 실제 API가 아닌 가짜, 모의의 API이다. Mock API는 말 그대로 진짜인 API를 흉내 내 사전에 정의된 데이터를 단순하게 돌려주는 형태의 API이다. 그렇다면 왜 실제 API가 아닌 가짜 A...