전체 글
[TIL] 22.12.23 HTTP 헤더 - 캐시와 조건부 요청(2)
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 헤더 - 캐시와 조건부 요청 프록시 캐시 클라이언트가 아주 멀리 있는 서버에 접근한다면 시간이 오래 걸리게 된다. 대략 500ms가 걸린다고 한다면 모든 사람들이 다 500ms씩 기다려야 한다. 그래서 중간에 프록시 캐시 서버를 둔다. 이를 CDN 서비스..
[TIL] 22.12.21 HTTP 헤더 - 캐시와 조건부 요청(1)
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 헤더 - 캐시와 조건부 요청 캐시 기본 동작 캐시가 없을 때 클라이언트에서 star.jpg를 요청하면 서버에서는 응답을 내려준다. HTTP 헤더와 관련된 용량이 0.1메가, HTTP 바디와 관련된 용량이 1.0메가라고 했을 때, 1.1메가의 네트워크를 차..
[React] 재귀 컴포넌트로 트리 메뉴 만들기(1)
재귀 컴포넌트 트리형 메뉴를 만들어야 하는 과제가 있었다. depth가 깊지 않다면 모든 요소들을 map으로 돌면서 렌더링해주면 되지만 자식 요소들이 많아질 경우 어떻게 구현할 지 고민이 많았다. 이 때 재귀 컴포넌트를 사용하면 된다는 것을 알았다. 재귀 컴포넌트란 말그대로 컴포넌트를 재귀적으로 만드는 것이다. 자세한 내용은 아래에서 직접 구현하면서 알아보자. 데이터 구조 [ { id: 1, name: 'Root', type: 'folder', children: [ { id: 2, name: 'Child 1', type: 'folder', children: [ { id: 3, name: 'Grand Child', type: 'file', }, ], }, { id: 4, name: 'Child 2', ty..
[TIL] 22.12.18 HTTP 헤더 - 일반 헤더(2)
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 헤더1 - 일반 헤더 일반 정보 일반적인 정보를 담는 http 헤더들에 대해 알아보자. From 유저 에이전트의 이메일 정보를 담는다. 일반적으로 많이 사용되지는 않으며, 검색 엔진 같은 곳에서 주로 사용한다. 요청에서만 사용한다. Referer 현재 요..
[React] 여러 개 요소 return할 때 key값 지정하기
Problem? react 컴포넌트를 만들다가 map 안에서 여러 개의 요소를 리턴할 때 key값을 설정해주는 부분에서 헷갈리는 부분이 있었다. const Child = ({ data }: Props) => { return ( {data?.map((child) => { return ( {child.name} {child.type === 'folder' && } ) })} ) } 여러 요소를 리턴할 때 div로 요소들을 감싸고 key값을 지정해줘도 되지만, 아래와 같은 마크업 구조를 만들고자 했기 때문에 따로 div로 감싸고 싶지 않았다. Child1 Grand Child 1 Grand Child 2 그래서 빈 태그 로 감싸주고 나머지 요소들에 key값을 따로 지정해주면 될 것이라고 생각했는데 key값이 ..
[TIL] 22.12.17 HTTP 헤더 - 일반 헤더(1)
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 헤더1 - 일반 헤더 HTTP 헤더 개요 용도 HTTP의 헤더에 HTTP 전송에 필요한 모든 부가정보를 담는다. (eg. 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보 등) 정말 많은 표준 헤더가 ..
[TIL] 22.12.15 HTTP 메서드 활용, 상태코드
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 메서드 활용 HTTP API 설계 예시 컬렉션 - POST 기반 등록 스토어 - PUT 기반 등록 HTML FORM 사용 API 설계 - POST 기반 등록 회원 관리 시스템 예시 회원 목록 /members -> GET 회원 등록 /members -> P..
[TIL] 22.12.12 HTTP 메서드
김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 메서드 HTTP API를 만들어보자 예시: 회원 정보 관리 API 회원 목록 조회 회원 조회 회원 등록 회원 수정 회원 삭제 API URI 고민 URI를 설계할 때 가장 중요한 것은 리소스 식별이다. 리소스란? 회원을 등록, 수정, 조회하는 행위가 아니라..