[소소한 공지] 구어체에서 격식체로 바꾸고자 합니다.

안녕하세요 프론트엔드 직군으로 업무에 뛰어든지 2주정도 된 병아리 개발자 알고루트입니다 :) 앞으로 글을 쓸 때 구어체에서 격식체로 바꾸고자 합니다. 그럼 이만..
회고 2022. 7. 29. 00:04
[React-Query] 서버에서 받은 파일 데이터 다운로드 기능 구현하기

프로젝트에서 구현해야 하는 기능 중 유저들의 목록을 Excel 파일로 다운로드하게 하는 기능이 있었다. 과정은 아래와 같았다. 1. Button '등록자 목록 다운로드' 생성 2. Confirm Modal 생성 3. '확인' 클릭시 등록자 목록 파일 자동 다운로드 (API 요청 후 file data 받기) 3-1. API 요청 후 response로 file data 받기 3-2. DOM Element a tag 생성 후 href에 가공된 URL 넣어서 link()시키기 4. 성공시 모달 창 닫기 2. Confirm modal에서 '확인' 클릭시 React-Query의 mutate 함수를 실행시켜 POST 요청을 하면 response data로 파일 값이 들어온다. HTTP 요청 메서드가 POST인 이유는..
Frontend/React 2022. 7. 27. 01:35
[네트워크] HTTP 비연결성

HTTP 비연결성 연결을 유지하지 않는 모델은 서버와 클라이언트간 연결하고 요청과 응답이 오면 연결을 바로 끊음으로서 최소한의 자원이 유지된다. HTTP는 기본이 연결을 유지하지 않는 모델이다. 일반적으로 초 단위의 이하의 빠른 속도로 응답한다. 1시간 동안 수천명이 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수십개 이하로 매우 작음 예) 웹 브라우저에서 계속 연속해서 검색 버튼을 누르지는 않는다. 비연결성은 서버 자원을 매우 효율적으로 사용할 수 있다. 비연결성 단점 TCP/IP 연결을 새로 맺어야 하게 되어 3 way handshake 시간이 추가된다. 웹 브라우저로 사이트를 요청하면 HTML 뿐만 아니라 자바스크립트, css, 추가 이미지 등 등 수 많은 자원이 함께 다운로드되는데 자원..
Network 2022. 7. 7. 21:03
[네트워크] 모든 것은 HTTP기반으로 이루어져 있다. (HTTP 정의, 역사, 프로토콜 버전)

HTTP HyperText Transfer Protocol 인터넷에서 데이터를 주고받을 수 있는 프로토콜으로 지금은 모든형태의 데이터를 다 전송할 수 있으며 서버간의 데이터를 주고 받을 때도 HTTP를 이용한다. 이렇듯 지금은 HTTP 시대라고 보아도 무방하다. HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML (API) 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 지금은 HTTP 시대! HTTP 역사 가장 많이 사용하는 것은 HTTP/1.1 버전이다. 대부분의 기능이 다 들어있으며 HTTP/2, HTTP/3 은 성능개선에 초점에 맞춰져 있다. HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X HTTP/1.0 1996년:..
Network 2022. 7. 5. 18:31
[네트워크] 웹 브라우저 요청 흐름

아래의 URL을 통해 어떻게 웹 브라우저가 요청해서 진행되는지 알아보자. 1. google.com에 해당하는 DNS 서버를 조회한다. IP 200.200.200.2 2. port번호를 찾아낸다. port는 https로 생략된 443번 port이다. 3. HTTP 요청 메시지 생성 : 쿼리 정보, HTTP 버전 정보, Host정보가 들어간다. HTTP 메시지 전송 1. 웹 브라우저가 HTTP 메시지를 생성한다. 2. SOCKET 라이브러리를 통해 TCP/IP 계층에 전달한다 이전 단계에서 찾은 IP, PORT 정보로 3 way handshake 방식을 통해 서버와 연결한다. 연결이 성공되면 TCP/IP 계층으로 데이터를 전달한다. 3. HTTP 메세지가 포함된 TCP/IP 패킷을 생성한다. 4. 서버는 패..
Network 2022. 7. 4. 13:39
[네트워크] URI, URL, URN 개념 및 URL 분석하기

URI(Uniform Resource Identifier) 리소스를 식별하는 통합된 방법 Uniform: 리소스 식별하는 통일된 방식 Resource: 자원, URI로 식별할 수 있는 모든 것(제한 없음) Identifier: 다른 항목과 구분하는데 필요한 정보 URI ? URL? URN. ? "URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다" URI는 URL과 URL을 포함하는 상위개념이다. URL(Uniform Resource Locator) 현재 웹브라우저에서 사용하고 있다. 식별자를 경로형태로 쓰고 있다. URN (Uniform Resource Name) 이름으로 리소스를 특정한다. 식별자를 이름형태로 쓴다. URN방식은 실제로 거의 사용되어질 일이 없다. ..
Network 2022. 6. 30. 17:32
[인터넷 네트워크] PORT, DNS

한 번에 둘 이상 연결해야 하면? 친구와 게임도 하면서 화상통화도 하면서 웹 브라우저를 요청하는 경우를 생각해보자. 클라이언트와 서버간 주고받는 패킷들이 어디서 오는 패킷인지 알 수 없다. 지난 포스팅에서 다룬 TCP/IP 패킷 정보에는 출발지 IP, 목적지 IP 뿐만 아니라 출발지, 목적지 PORT가 있다. IP는 출발지와 목적지의 서버를 찾는 역할이고, PORT는 서버 안에서 돌아가는 애플리케이션을 구분할 수 있게 해 준다. IP는 아파트, PORT는 동호수인 것 같은 역할이다. PORT 같은 IP내에서 프로세스를 구분하는 역할로, 서로간 요청 시 IP주소와 Port번호를 함께 보내 어떤 프로세스인지 전달해준다. 0 ~ 65535 할당 가능 0 ~ 1023 잘 알려진 포트, 사용하지 않는 것이 좋음..
Network 2022. 6. 27. 23:49
[인터넷 네트워크] 인터넷통신, IP, TCP, UDP

1. IP(인터넷 프로토콜) IP 인터넷 프로토콜 역할 • 지정한 IP 주소(IP Address)에 데이터 전달 • 패킷(Packet)이라는 통신 단위로 데이터 전달 IP 패킷 정보 - 출발지 IP - 목적지 IP - Message 클라이언트 패킷 전달 출발지 IP 주소에서 패킷이 던져진다. 이 패킷은 노드끼리 전달되면서 목적지 IP를 찾는다. 서버 패킷전달 목적지 IP 주소에서 메세지(ok) 이 적힌 패킷을 던진다. 노드끼리 목적지 IP를 찾아가며 전달된다. 이 때 인터넷망이 복잡하기 때문에 서로 다른 곳으로 패킷이 전달 될 수 있다. 그래서 이는 한계가 있다. IP 프로토콜의 한계 비연결성 PC 가 꺼진 상태에서도 전송된다. 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 비신뢰성 중간에 ..
Network 2022. 6. 20. 23:57
1 2 3 4 5 6 7 8 ··· 15