-
모든 개발자를 위한 HTTP 웹 기본 지식 2. HTTP 기본
인프런 강의 모든 개발자를 위한 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 웹 기본 지식 1. 네트워크, URI
인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 인터넷 네트워크 컴퓨터가 멀리 떨어져 있는 다른 컴퓨터와 서로 통신하기 위해 컴퓨터 사이를 인터넷 망으로 연결한다. 인터넷 망은 수많은 노드들로 이루어져 있어 보내는 컴퓨터에서 보낸 정보를 받는 컴퓨터로 전달한다. 택배를 보내면 수많은 HUB 를 거쳐 배송지로 배송되는 것과 유사하다. IP(인터넷 프로토콜) 인터넷은 복잡하게 연결되어 있어 인터넷으로 통신을 하기 위해서는 일정한 규칙이 필요하다. 먼저 모두가 아는 주소를 정하고 규격에 맞게 발신지와 수신지를 기입한다. 편지를 부칠 때 편지봉투에 발수신지를 위치에 맞게 쓰는 것... Read More
-
정적 웹, 동적 웹, MVC, Flux
그냥 만들 것이 아니라 생각을 하고 만들자. 개념 정리 시작! 정적 웹 static web 언제 접속해도 같은 리소스를 출력하는 웹. 서버에서 가공해서 제공하는 것이 아닌, 미리 정해진 html, css, js 이미지 등 파일을 같은 내용을 고정으로 제공한다. 동적 웹 dynamic web 게시판 등 내용이 동적으로 바뀌어 출력되는 웹. DB 와 연결해 서버가 출력할 데이터를 동적으로 가공해서 제공한다. MVC MVC 는 어플리케이션을 세 가지 역할의 컴포넌트로 구분한 개발 방법론이다. Model : DB와 연동해서 데이터 형식지정 및 입출력 작업 담당 Vi... Read More
-
스킬 체크 테스트 Level.1, 2
집중용.. 시간제한이 있어서 얼마나 했는지 시간보기 좋다. 햄버거 만들기 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일... Read More
-
npm 대신 yarn 사용하기
npm 과 yarn 은 서드파티 모듈의 저장소를 제공해서 시스템에서 의존된 패키지를 설치하고 업데이트 할 수 있도록 돕는 패키지 매니저이다. package.json 파일만 공유하고 실제 모듈이 저장된 node_modules 은 공유하지 않아도되어 데이터 낭비를 줄인다. yarn 은 facebook 에서 개발한 패키지 매니저이며 npm 에 비해 보안과 성능면에서 우수하다. npm 는 각 모듈을 순서대로 설치하지만 yarn 은 병렬로 설치해 설치 속도가 빠르다. yarn 은 설치한 모듈을 user 경로에 캐싱하기 때문에 최초 install 을 한 이후의 install 이 매우 빠르... Read More
-
react-query 설치, 사용
React query는 react App 에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 비동기 로직을 지원하는 라이브러리이다. server state 의 메모리를 관리하고 garbage collection 을 지원하고, 동일 데이터를 여러번 요청하면 알아서 한번만 요청한다. 사용법이 react 의 hook 과 비슷하다. pagination 및 lazy loading 에 최적화 되어있고, 인피니트 스크롤을 손쉽게 만들 수 있다. 설치 yarn add @tanstack/react-query QueryClient react query 를 사용하기 위해 클라이언트를 생성... Read More
-
vite 로 react 프로젝트 생성하기
javascript 는 처음에 간단한 동작만을 구현하는 것이 목적이었기 때문에 크기가 작아 모듈 관련된 표준 문법이 없었다. 하지만 프로젝트가 커지고 코드가 복잡해지면서 모듈 단위로 개발할 필요가 있었고 이 모듈을 관리해 주는 것이 번들러이다. 번들러는 의존성이 있는 모듈 코드를 하나이상의 파일로 만들어 주는 도구로, 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할을 한다. 대표적으로 webpack 이 있으며 Create React App 으로 리액트 프로젝트를 생성하면 webpack 을 이용하여 파일 로더, 빌드 툴, ES6, Eslint 등으로 개발을 할 수 있도록 한다. vite 는 go언... Read More
-
next.js 환경에서 recoil 로 상태관리
recoil 은 상태관리 라이브러리이다. react-redux 에 비해 코드가 간결해서 사용하기 쉽다. 설치 npm i recoil atoms.js atom 이라는 전역 객체를 만들어서 데이터를 관리한다. import { atom } from 'recoil'; export const 데이터Atom = atom({ key: 'key 지정', default: undefined, // 기본값 지정 }) _app.js _app.js 에서 컴포넌트를 RecoilRoot 로 감싸 recoil 데이터를 전역으로 전달한다. import { RecoilRoot } from 'recoil'; ... Read More
-
next.js 기초 Head, fetch, rewrites, 환경변수 생성
next.js 사용법 정리 청약닷컴 에서 기존에 router 로 작업하던 것을 next.js 로 수정했다. Head next.js 는 Head 태그로 페이지의 head 를 설정할 수 있다. HeadInfo 컴포넌트를 별도로 생성해 title 등의 정보를 props 로 전달받아 사용하면 편리하다. import Head from 'next/head'; export default function HeadInfo({title}){ return ( <Head> <title>{title}</title> </Head> ); } 각 페이... Read More
-
유튜브 영상별 썸네일 주소
청닷에서 유튜브 썸네일 사용하면서 정리 스크린샷 `http://i.ytimg.com/vi/${youtubeId}/0.jpg` `https://img.youtube.com/vi/${youtubeId}/0.jpg` 처음, 중간, 끝 사이즈 : 120x90 `http://i.ytimg.com/vi/${youtubeId}/1.jpg` `http://i.ytimg.com/vi/${youtubeId}/2.jpg` `http://i.ytimg.com/vi/${youtubeId}/3.jpg` `https://img.youtube.com/vi/${youtubeId}/1.jpg` `https://img.youtube.... Read More