As I've always been

웹 서비스를 개발하다보면 상태 관리를 위해 세션이나 쿠키를 많이 사용하게 된다. 그렇게 서비스가 커지다보면 서브도메인이 많이 생기게 되는데, 모든 서브도메인에서 공통으로 가지는 상태가 생기게 될 것이고, 이를 처리하기 위해 쿠키를 서브도메인들 전체에 대해 공유하도록 만들어야 하는 상황이 발생하게 된다. 각 서브도메인 서비스마다 cookie getter와 setter API를 일일히 만드는 방법도 있겠지만, 서비스의 수가 많아지다보면 일일히 관리하기 어려워지게 되고, 시나리오가 더 복잡해지게 될 것이다. 그렇다면 도메인과 서브도메인 전부에 쿠키를 공유시키는 가장 간단한 방법은 무엇이 있을까? 답은 HTTP 쿠키에 대한 RFC 문서에 있다: https://datatracker.ietf.org/doc/html..

웹 어플리케이션을 개발하다보면 JS, CSS, HTML 등과 같은 정적 파일들이 변경되게 되는데, 웹브라우저 등에 의해 캐싱이 되는 등의 이유로 인해 변경사항이 바로 적용이 안되는 등의 애환이 있다. 물론, "ctrl + shift + r"을 통해 매번 브라우저 캐시를 무시하는 완전 refresh를 시키는 방법도 있지만, 개발을 하면서 매번 이러한 작업을 하는 것 자체가 매우 번거로운 일이다. 이러한 제약사항을 극복할 수 있는 방법을 찾던 중, 캐시 만료 설정인 "expires"에 -1을 넣으면 브라우저 캐싱을 막을 수 있다는 사실을 알게 되었다. upstream api_server { server 127.0.0.1:8080; keepalive 100; } server { listen 80; listen..

각각 다 지정해주는 방법 margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 5px; 아니면 margin: 10px 20px 15px 5px; 순서는 상우하좌 (top right bottom left) 입니다. 위에서부터 시계방향으로 돌아갑니다. 상하의 margin 이 같고, 좌우의 margin 이 같을 때 margin: 10px 5px; 좌우는 같은데, 상하가 다를 때 margin: 10px 5px 25px; 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고 운데, 5px 가 좌우 margin 이다. 결론 정리하자면, margin/padding은 아래와 같은 순서로 사용할 수 있..

알다시피, CORS는 보안을 위해서 도입된 개념이다. 하지만 역설적으로, 이 CORS 때문에 개발자들은 개발에 있어 많은 제약을 받기도 한다. 글쓴이 역시 사이드 프로젝트 개발 도중 CORS에 의해 코드가 블락당하는 경우가 많이 있었고, 그걸 해결하고자 크롬 브라우저에서 CORS를 끄는 방법을 알아보았고, 조사한 내용을 여기에 정리하고자 한다. 각 운영체제마다 다른 방법을 사용하니 참고하길 바란다. 1. OSX 터미널을 열고 다음 커멘드를 실행시킨다. open -a Google\ Chrome --args --disable-web-security --user-data-dir --user-data-dir 옵션을 붙이지 않으면 제대로 실행되지 않는다고 한다. 아래는 참고 자료의 링크이다. https://sta..

media쿼리를 이용하면 반응형 페이지를 만들수 있다. 반응형 페이지란 페이지 하나로 화면사이즈에 따라 다르게 보여주는 표현해주는 기술입니다. 사용자가 보기 편리하게 만드는 페이지입니다. 반응형 사이즈들 디바이스별 사이즈 해상도 320px 이상 또는 768px 미만 -> 스마트폰 해상도 768px 이상 또는 1024px 미만 -> 태블릿 해상도 1024px 초과 -> PC 사용법 HTML head 부분에 아래의 코드를 넣어줍니다. 아래의 코드는 meta태그로 뷰포트를 사용함으로 장치의 크기에 따라서 크기를 바꿔주겠다는 명령어입니다. meta태그가 선언되어야지 반응형으로 만들수 있습니다. 방법 1. 모바일에서 PC로 커진다. /* 모바일 -> PC / 점점 커진다.. */ @media screen and ..

:hover란 :hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소이다. javascript 혹은 jquery의 조건으로도 사용가능한 요소이다. 마우스로 반응 하기에 모바일이나 테블릿에서는 효과를 적용하기가 쉽지 않다. :hover 적용 방법 css파일에서 이벤트를 적용하고 싶은 위치에 :hover를 선언해주고 나머지 코드를 작성하면 된다. 코드 [css] /*초기화*/ *{margin: 0 auto; padding: 0;} /*기본셋팅*/ h1, p, button, div{ border : 1px solid black; width : 300px; height : 70px; text-align : center; line-height : 70px; font-size : 15px; ..

CORS 란? CORS는 Cross-Origin Resource Sharing의 약자이다. 브라우저에서 다른 출처의 리소스를 공유하는 방법이다. 아래의 CORS policy 오류 메시지는 CORS 정책을 위반할 때 발생한다. URL 구조 출처를 알기 위해선 URL 구조를 알아야한다. 프로토콜의 HTTP는 80번, HTTPS는 443번 포트를 사용하는데, 80번과 443번 포트는 생략이 가능하다. 출처(Origin) 란? 출처(Origin)란 URL 구조에서 살펴본 Protocol, Host, Port를 합친 것을 말한다. 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수 있다. 같은 출처 VS 다른 출처 같은 출처인지 다른 출처인지 확인하기 위해선 Protocol..

웹 어셈블리(Web Assembly)는 C와 C++ 같은 프로그래밍 언어를 컴파일해 어느 브라우저에서나 빠르게 실행되는 바이너리 형식(low-level language)으로 바꾸는 기술이다. 별도의 플러그인을 사용하지 않고 브라우저에서 네이티브 언어 수준의 성능을 보여 줄 수 있는 기술이 WebAssembly의 목표이다. 웹 어셈블리는 저수준 언어를 이용하기 때문에 3D 게임이나 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야에서 개발자들이 경험하였던 JavaScript의 한계를 극복할 수 있게 해 줄것으로 보인다. 2019년 8월 현재, 많은 개발자들이 웹 어셈블리의 성능이 결국 asm.js의 한계 성능을 뛰어 넘을 것으로 예측하고 있다. 그럼에도 웹 어셈블..