조각모음 조각모음

코딩을 하다 보면 반복적으로 작성해야 하는 코드들이 있는데 이걸 일일이 작성하고 있으면 상당히 귀찮고 피곤하다.이런 작업을 자동화해주는 방법을 알게되어 공유한다.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 웹 기본 지식 강의를 듣고 내용을 정리한 글입니다. 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 (캐시가 유효한 ..

인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 내용을 정리한 글입니다. 1. HTTP 헤더 개요 HTTP 헤더 header-field는 아래와 같은 형식으로 작성한다. field-name":" OWS field-value OWS field-name 다음 콜른(:)은 반드시 붙여 적는다. OWS는 띄어쓰기 허용이라는 뜻이다. field-name은 대소문자 구분 없다. field-value는 대소문자 구분한다. 용도 HTTP 헤더는 HTTP 전송에 필요한 모든 부가정보를 나타낸다. 예를 들면 메세지 바디의 내용, 바디의 크기, 압축, 인증, 요청 클라이언트 정보, 서버 정보, 캐시 관리 정보 등을 표시한다. 표준 헤더 필드가 엄청 많고, 필요 시 임의의 헤더 필드 추가 가능 분류..

1. HTTP 상태코드 소개 인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 내용을 정리한 글입니다. 상태코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx(informational): 요청이 수신되어 처리중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동 필요 4xx(Client Error): 클라이언트 오류. 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5xx(Server Error): 서버 오류. 서버가 정상 요청을 처리하지 못함 만약 모르는 상태 코드가 나타난다면? 클라이언트가 인식할 수 없는 상태를 서버가 반환하면? 클라이언트는 상위 상태코드로 해석해서 처리한다. 미래에 상태코드가 추..

1. 클라이언트에서 서버로 데이터 전송 인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 내용을 정리한 글입니다. 클라이언트에서 서버로 데이터 전송 HTTP를 이용한 데이터 전달 방식은 크게 2가지이다. 쿼리 파라미터를 통한 데이터 전송 GET 주로 정렬 필터, 검색어 메세지 바디를 통한 데이터 전송 POST, PUT, PATCH 회원가입, 상품 주문, 리소스 등록, 리소스 변경 등 정적 데이터 조회와 동적 데이터 조회 데이터 조회에는 정적 데이터 조회와 동적 데이터 조회, 두 가지 상황이 있다. 1. 정적 데이터 조회 이미지, 정적 텍스트 문서 일반적으로 쿼리 파라미터 없이 리소스 경로만으로 조회 가능 GET 사용 2. 동적 데이터 조회 GET은 쿼리 파라미터를 사용해서 데이터..

1. HTTP API를 만들어보자 인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 내용을 정리한 글입니다. 주로 사용되는 HTTP 메서드는 크게 get, post, put, patch, delete 5가지가 있다. 메서드의 속성 회원정보관리 API를 만들어야 한다면, API URI를 아래와 같이 설계할 수 있다. 회원목록 조회 /read-member-list 회원 조회 /read-member-by-id 회원 등록 /create-member 회원 수정 /update-member 회원 삭제 /delete-member 이렇게 URI를 설계하는 것 그리 좋지 않다. 가장 중요한 것은 리소스 식별인데, 위와 같이 하면 이 식별이 어렵기 때문이다. 그렇다면 리소스는 뭘까? 등록하고, 수정..