VScode에 코드 스니펫 저장하기
코딩을 하다 보면 반복적으로 작성해야 하는 코드들이 있는데 이걸 일일이 작성하고 있으면 상당히 귀찮고 피곤하다.이런 작업을 자동화해주는 방법을 알게되어 공유한다.React로 코딩을 하다 보면 아래와 같이 파일명으로 함수형 컴포넌트를 만들 일이 많아진다.export default function FileName() { return ;}이 작업이 너무 귀찮아서 코드 스니펫으로 넣어봤다.순서VScode에서 맥북 기준 Comman+P(윈도우는 Control+P)를 누르고 >을 누르면위와 같은 화면이 나오는데 Snippets: Configure Snippets을 클릭해준다.그 후 New Global Snippets Files... 을 클릭하고 원하는 파일 이름이 입력 후 엔터를 누르면위와 같은 JSON 형식..
카카오, 페이스북, 트위터 오픈그래프 및 메타 정보 캐시 삭제 오픈 그래프 이미지를 변경해야 하는 업무가 많았는데 이미지를 잘 변경해도 실제로 적용되지 않는 경우가 있다. 그럴 땐 아래 페이지에 가서 직접 지워주면 된다. 카카오 https://developers.kakao.com/tool/debugger/sharing/ 캐시를 삭제할 URL 집어넣고 디버그 및 캐시 초기화 페이스북 https://developers.facebook.com/tools/debug/ 캐시를 삭제할 URL 집어넣고 디버그 버튼 클릭 후 다시 스크랩 버튼 클릭 트위터 https://cards-dev.twitter.com/validator 캐시를 삭제할 URL 집어넣고 Preview card 버튼 클릭. 카드 이미지 미리보기가 안 ..
HTML input type number 우측 화살표 제거하기 input tag 를 type number를 사용했을 때 해당 태그에 포커스를 주면 우측에 숫자를 +1, -1 할 수 있는 화살표가 생성된다. 제거하고 싶다면 아래 코드를 작성하면 된다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type='number'] { -moz-appearance: textfield; }
[HTTP] HTTP 캐시와 조건부 요청, 검증 헤더, 프록시 캐시, 캐시 무효화
인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 내용을 정리한 글입니다. 1. 캐시 기본 동작 캐시가 없을 때 첫 번째 요청 GET /star.jpg -> HTTP/1.1 200 OK이때 응답이 1.1mb라고 해보자. 두 번째 요청 GET /star.jpg -> HTTP/1.1 200 OK똑같이 응답이 1.1mb 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다. 인터넷 네트워크는 PC 메모리나 하드디스크에 비해 매우 느리고 비싸다. 브라우저 로딩속도가 느리다 -> 느린 사용자 경험 캐시 적용 첫 번째 요청 GET /star.jpg -> HTTP/1.1 200 OK이때 응답 헤더 필드에 cache-control: max-age=60 (캐시가 유효한 ..