Hello World!!

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP 헤더 구조 field-name : field-value – field-name : 대소문자 구분 없음 – field-value : 대소문자 구분 있음 용도 HTTP 전송에 필요한 모든 부가 정보를 포함한다. – 예) body 내용의 타입, 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보 등 – 표준 헤더 : https://en.wikipedia.org/wiki/List_of_HTTP_header_fields 필요 시 임의의 헤더 추가가 가능하다. ... Read More

vite config 설정 vite.config.js 파일 내 base 값을 설정한다. base 값을 추가하고 레포지토리 이름을 적는다. 경로 설정이기 때문에 앞뒤로 / 를 꼭 붙인다. export default defineConfig({ plugins: [react()], base: '/레포지토리이름/' }) deploy.sh 생성 프로젝트 root 폴더에 deploy.sh 파일을 생성해서 아래의 내용으로 저장한다. #!/usr/bin/env sh set -e yarn run build # npm 또는 yarn cd dist echo > .nojekyll git init git... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP 상태코드 클라이언트가 요청을 보내면 보낸 요청의 처리 상태를 서버의 응답 메세지에서 코드형식으로 알려준다. 클라이언트가 인식할 수 없는 상태코드를 반환받는다면 가장 앞자리의 코드로 해석해서 처리한다. 1XX informational 으로 요청이 수신되어 처리중을 의미한다. 거의 사용이 되지 않는다. 2XX successful 으로 요청이 정상으로 처리되었음을 의미한다. 200 OK 정상처리완료 주로 GET 요청이 정상적으로 처리되어 데이터를 응답해줄때 사용한다. 201 Cre... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP 메서드 API 의 URI 를 설계할때는 리소스만 식별하도록 하고 리소스를 대상으로 하는 행위는 메서드로 구분한다. 메서드는 클라이언트가 서버에 요청할때 기대하는 행동을 의미한다. HTTP 메소드 RFC 요청에 Body가 있음 응답에 Body가 있음 안전 멱등(Idempotent) 캐시 가능 GET RFC 7231 아니요 예 예 예 ... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP HTTP 는 HyperText Transfer Protocol 으로 HTML, TEXT 를 전송하기 위해서 만들어졌으나 현재는 이미지, 영상, 음성, JSON 등 거의 모든 형태의 데이터를 HTTP 메세지를 통해 전송한다. HTTP 역사 HTTP/0.9 1991년 GET 메서드만 지원, HTTP 헤더X HTTP/1.0 1996년 메서드, 헤더 추가 HTTP/1.1 1997년 가장 많이 사용 HTTP/2 2015년 성능 개선 HTTP/3 진... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 인터넷 네트워크 컴퓨터가 멀리 떨어져 있는 다른 컴퓨터와 서로 통신하기 위해 컴퓨터 사이를 인터넷 망으로 연결한다. 인터넷 망은 수많은 노드들로 이루어져 있어 보내는 컴퓨터에서 보낸 정보를 받는 컴퓨터로 전달한다. 택배를 보내면 수많은 HUB 를 거쳐 배송지로 배송되는 것과 유사하다. IP(인터넷 프로토콜) 인터넷은 복잡하게 연결되어 있어 인터넷으로 통신을 하기 위해서는 일정한 규칙이 필요하다. 먼저 모두가 아는 주소를 정하고 규격에 맞게 발신지와 수신지를 기입한다. 편지를 부칠 때 편지봉투에 발수신지를 위치에 맞게 쓰는 것... Read More

그냥 만들 것이 아니라 생각을 하고 만들자. 개념 정리 시작! 정적 웹 static web 언제 접속해도 같은 리소스를 출력하는 웹. 서버에서 가공해서 제공하는 것이 아닌, 미리 정해진 html, css, js 이미지 등 파일을 같은 내용을 고정으로 제공한다. 동적 웹 dynamic web 게시판 등 내용이 동적으로 바뀌어 출력되는 웹. DB 와 연결해 서버가 출력할 데이터를 동적으로 가공해서 제공한다. MVC MVC 는 어플리케이션을 세 가지 역할의 컴포넌트로 구분한 개발 방법론이다. Model : DB와 연동해서 데이터 형식지정 및 입출력 작업 담당 Vi... Read More

집중용.. 시간제한이 있어서 얼마나 했는지 시간보기 좋다. 햄버거 만들기 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일... Read More

npm 과 yarn 은 서드파티 모듈의 저장소를 제공해서 시스템에서 의존된 패키지를 설치하고 업데이트 할 수 있도록 돕는 패키지 매니저이다. package.json 파일만 공유하고 실제 모듈이 저장된 node_modules 은 공유하지 않아도되어 데이터 낭비를 줄인다. yarn 은 facebook 에서 개발한 패키지 매니저이며 npm 에 비해 보안과 성능면에서 우수하다. npm 는 각 모듈을 순서대로 설치하지만 yarn 은 병렬로 설치해 설치 속도가 빠르다. yarn 은 설치한 모듈을 user 경로에 캐싱하기 때문에 최초 install 을 한 이후의 install 이 매우 빠르... Read More

React query는 react App 에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 비동기 로직을 지원하는 라이브러리이다. server state 의 메모리를 관리하고 garbage collection 을 지원하고, 동일 데이터를 여러번 요청하면 알아서 한번만 요청한다. 사용법이 react 의 hook 과 비슷하다. pagination 및 lazy loading 에 최적화 되어있고, 인피니트 스크롤을 손쉽게 만들 수 있다. 설치 yarn add @tanstack/react-query QueryClient react query 를 사용하기 위해 클라이언트를 생성... Read More