Look and Find what i've done. 분류 전체보기 TIL Front javascript CS ps special max-age보다 expires가 우선순위가 높다 내가 수정한 부분이 하필 캐싱되는 부분이라 신경써야할 게 이것저것 많당. 게다가 일감 자체도 데이터 정합성에 대한 내용이라... (왜 pc/mo 따로 코드 짜게 되어있는지,,,) 확실하게 1시간 뒤에는 캐싱이 새로 되어야한다는 보장이 있어야해서, 찾아본 내용. The max-age directive takes priority over Expires Expires vs max-age, which one takes priority if both are declared in a HTTP response? If a HTTP response that returns both Expires and max-age indications which one is used? Cache-Control: max-age=3600 .. proxy client ip / thirdparty was 앞에 프록시나 로드밸런서 등을 두면 client ip를 얻기 어려워지는데 이때 쓸 수 있는 http 헤더가 x-forwarded-for! X-Forwarded-For - HTTP | MDN X-Forwarded-For (XFF) 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준 헤더다. 클라이언트와 서버 중간에서 트래픽이 프록시나 로드 developer.mozilla.org 서드파티 쿠키의 종말, 앞으로의 미래는? 지난해, 구글은 자사 웹 브라우저인 크롬의 쿠키 추적을 2023년 말에 차단하겠다고 밝혔습니다. 원래 계획은 올해 1월부터 쿠키를 통한 맞춤 광고를 제한하는 거였으나 광고 생태계 보호를 이유 blog.lgcns.com CDN과 다이나믹 캐시 https://www.cloudflare.com/ko-kr/learning/cdn/caching-static-and-dynamic-content/ 정적 및 동적 콘텐츠 캐싱 | 작동 방식 동적 콘텐츠는 사용자에 따라 달라지기 때문에 캐시에서 여러 사용자에게 제공할 수 없습니다. 정적 및 동적 콘텐츠 모두를 캐싱하는 방법이 어떻게 가능한지 알아봅니다. www.cloudflare.com 동적 컨텐츠를 캐싱하기 위해서는 CDN 캐시에서 스크립트를 실행할 수 있어야한다. 캐시가 단순히 저장소의 역할이 아니라 스크립트를 실행할 수 있는 환경이라는 것이 인상깊음! postMessage 보호되어 있는 글입니다. 가위바위보 게임으로 알아 보는 React 훅 라이프사이클 가위바위보 게임은 비동기를 연습해볼 수 있는 프로그램 중 하나다. 이때 비동기를 리액트의 라이프사이클과 함께 사용하는 방법에 대해 알아보려고 한다. 우선 순수 javascript로만 만들어진 코드는 이러하다 자바스크립트 코드 게임을 시작하자마자 setInterval을 사용해서 묵찌바 모션을 반복해주고, 사용자가 클릭했을 때 멈췄다가 다시 게임을 재개하는 것이 포인트다. let selection = ['scissors', 'rock', 'paper']; let winSelection = { scissors: 'paper', paper: 'rock', rock: 'scissors', }; //computer turn let i = 0; let selected; let computer = setInterval.. Webpack과 Babel 기본 설정(2)- Create-react-app를 사용하지 않는다면! 앞에서 설정한 webpack과 babel 설정 외에도 중요한 것이 남았는데 바로 웹팩 개발 서버이다. 프론트엔드 개발을 할 때 개발 서버가 필요한 이유는 실제 배포 환경과 유사한 환경을 만들어주기 위한 것이 첫번째이고, 두번째는 개발의 편리성 때문이다. 소스파일을 저장할 때마다 변경점을 감지하여 자동으로 리로드해주는 기능을 사용할 수 있고, 변경된 부분만 업데이트해주는 핫리로드 방식 또한 사용할 수 있다. 리로드 기능은 dev-server가 기본적으로 제공해주는 기능이고 핫리로드는 간단한 설정만 해주면 된다. npm install wepback-dev-server -dev --save 로 설치하고 webpack.config.js에 아래와 같이 추가해주면 리로드 기능, 핫모듈 리플레이스먼트 기능을 사용할 .. Webpack과 Babel 기본 설정(1)- Create-react-app를 사용하지 않는다면! 리액트를 접하는 가장 편리한 방식은 Create-React-app을 사용하는 것이다. 그러나 좀 더 복잡한 설정을 해야할 때 cra를 사용하지 않고 직접 webpack, babel의 설정을 변경해줘야할 때가 있기 때문에 create-react-app을 사용하더라도 기본적으로 webpack과 babel을 설정하는 기본적인 방법은 알고 있으면 좋다. cra는 react를 사용하기 위해 필요한 wepback과 babel 설정과 리액트 기본 라이브러리를 합쳐놓은 것이기 때문이다. 그러나 webpack은 한 번에 다 알기 너무 양이 많고 어렵기 때문에 기본적인 webpack 설정만 알아보도록 한다. npm init으로 package.json 파일을 만들어주고 이제 필요한 디펜던씨들을 npm install 모듈이름.. React Framework를 사용하는 이유 결론부터 이야기하자면 웹 프레임워크는 화면 구현과 로직을 연결해주는 코드를 간결하게 하기 위해 생겨났다. 특히 순수 자바스크립트로 코드 내용에 따라 화면을 지속적으로 업데이트해야하는 경우, document에서 특정 부분을 가져와서 새로운 엘리먼트를 넣어주어주거나 화면을 변경하는 코드가 필요하다. 리액트는 모두 지웠다가 다시 생성하는 방식으로 작동하면서 이러한 업데이트에 대한 고민을 없앴다. 따라서 리액트의 Render()은 State가 변할 때마다 자동으로 다시 호출된다. 이러한 방식이 비효율적이라고 생각할 순 있지만 VirtualDom이 기존 화면과 새로 생긴 화면을 비교해서 변화한 부분만 업데이트를 진행할 수 있게 한다..
