Today Hailie Learned

🤓배움 요약하기 PORT란? 같은 IP 내에서 프로세스를 구분하는 것을 말합니다. 하나의 피씨에서 여러 서버와 통신을 가능하게 해주는 역할을 합니다. TCP/IP 패킷에는 어떤 정보가 들어 있나요? 출발지 IP, 출발지 PORT, 도착지 IP, 도착지 PORT, 전송 데이터 등이 들어있습니다. ✔️ TCP/IP 패킷의 PORT란? 어느 유저가 게임도 하고 있고, 화상통화도 하고 있고, 웹 브라우저 요청도 하고 있다면, 클라이언트 피씨가 여러개의 서버와 통신하고 있는 상황이다. 이 클라이언트 피씨로 패킷들이 들어올텐데 게임에서 필요한 패킷인지 화상통화에서 필요한 패킷인지, 웹 브라우저의 응답 결과로 오는 패킷인지 알 수가 없다. 이 구분을 어떻게 할 것인지에 대한 해결책이 바로 TCP/IP 패킷의 PORT..

🤓배움 요약하기 인터넷 프로토콜 스택의 4계층이란? 애플리케이션 계층(HTTP, FTP), 전송 계층 (TCP, UDP), 인터넷 계층 (IP), 네트워크 인터페이스 계층 (LAN 등등)으로 구성되어 있는 것을 말합니다. TCP란? TCP는 IP 프로토콜의 한계를 보안해주는 역할을 하는데 TCP 3 way handshake로 대상이 서비스 가능 상태일 때만 패킷을 전송하고, 데이터 전달을 보증해주고, 데이터 전송 순서도 보증해주는 신뢰할 할 수 있는 프로토콜이고, 현재는 대부분의 애플리케이션에서 TCP 사용합니다. UDP란? IP에서 PORT와 체크섬이 추가되어 있는 프로토콜을 말합니다. 최근에는 웹브라우저에서 HTTP 통신할 때 HTTP 3 way handshake에서 UDP를 사용하면서 사용성이 더욱..

모든 것이 HTTP 기반 위에서 동작한다. (웹 - 서버 통신, 서버 - 서버 통신 등 HTTP 프로토콜 위에서 데이터를 주고 받는다. ) HTTP의 전체 흐름을 이해하자!! 인터넷 네트워크 - HTTP도 결국에는 TCP/IP나 UTP 기반 위에서 동작하기 때문에 인터넷 네트워크를 알아야한다. - IP (인터넷 프로토콜) - TCP, UDP - PORT - DNS IP (인터넷 프로토콜)이란? : 인터넷 망을 통해서 목적지까지 메세지를 전달해야하는데 이때 사용하는 것이 IP이다. 복잡한 IP망에서 'hello world'라는 메세지를 미국에 있는 친구에게 보내야한다면? 최소한의 규칙인 IP를 통해서 가능하다! IP(인터넷 프로토콜)의 역할 1. 지정한 IP 주소(IP Address)에 데이터를 전달한다...

두 개의 스택으로 큐 구현하기 스택은 나중에 들어간 데이터가 먼저 나오는 자료구조이고, 큐는 먼저 들어간 데이터가 먼저 나오는 자료구조이다. 그렇다면 스택으로 큐를 어떻게 구현할까?? 처음에 이 문제를 보고 이게 과연 가능할까? 싶었는데 생각해보면 간단하다. 왜냐? 스택이 두 개인걸 활용하면 되니까!! 스택1은 데이터를 입력받는 용으로만 사용한다. 스택2는 데이터를 빼는 용도로만 사용한다. (pop) 스택1에 데이터가 있고 스택2가 비어있다면 스택1의 데이터를 스택2로 옮기고 이걸 다시 Pop 하면 된다.

방법1 const solution = (arr) => { let newArr = [] for(let x of arr){ let newarr = x.toString().split('').reverse().reduce((a,b) => a+b,0) newArr.push(Number(newarr)) } console.log(newArr); } solution([32, 55, 62, 20, 250, 370, 200, 30, 100]) // 결과 [ 23, 55, 26, 2, 52, 73, 2, 3, 1 ] 방법2 const solution = (arr) => { let newArr = [] for(let x of arr){ let result = 0; while(x){ let t = x % 10; result =..

pre-project를 하면서 서버에서 데이터를 받아올 때마다 axios로 받아왔다. 이번 main-project를 시작하면서 멘토님을 새로 만났는데 axios를 instance로 쓰는 방법을 공부해보라고 숙제를 내주셨다. axios를 instance로 쓰면 좋은 점이 구성 기본값 설정을 쉽게 해준다는 장점이 있다. 그리고 instance가 interceptor 처리를 하도록 설정할 수 있다는 장점이 있다. 우선 여기서는 구성 기본값 설정을 쉽게 해주는 코드를 살펴보자! 1. axios를 instance로 안쓰는 방법 import {useEffect, useState} from 'react'; import axios from "axios"; export default function App() => { ..

1. Array.from으로 만들기 const newArr = Array.from({length:5}, ()=>0); console.log(newArr); 출력값 [ 0, 0, 0, 0, 0 ] 2. map으로 만들기 const newArr = [...Array(5)].map(x=>0); console.log(newArr); 출력값 [ 0, 0, 0, 0, 0 ] 3. fill로 만들기 const newArr = Array(5).fill(0); console.log(newArr); 출력값 [ 0, 0, 0, 0, 0 ] 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

✔️EC2 기본 세팅 1. 우선 EC2 인스턴스를 생성한다. 연결 누르기 $ bash $ cd ~ 2. 인스턴스에 개발 환경 구축하기 $ sudo apt update 패키지 매니저가 관리하는 패키지의 정보를 최신 상태로 업데이트하기 위한 명령어 3. nvm, npm을 설치하여 개발 환경을 구축하기 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash touch ~/.zshrc export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh..

GraphQL 구조 서버에서 데이터를 조회하는 경우, REST API의 경우 GET 요청을 했다면, GraphQL에서는 query를 이용해서 원하는 데이터를 요청한다. 데이터를 Create, Update, Delete 와 같이 수정한다면, GraphQL에서는 mutation를 이용한다. 더 나아가 GraphQL에서는 subscription이라는 개념으로 실시간 업데이트를 구현할 수 있다. ✔️ 쿼리 (query) = 데이터 조회하기 ✻ 필드 예시1) 👇요청👇 { pizza { name } } 👇응답👇 { "data" : { "pizza":{ "name" : "bulgogi pizza" } } } GraphQL은 서버에 요청할 때 예상했던 대로 응답받는다. (왜냐면 서버는 GraphQL을 통해 클라이언트가..

✔️ GraphQL이란? Graph + Query Language의 줄임말이다. (API를 위한 쿼리 언어) GraphQL은 Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어이다. 트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어이다. ✔️ GraphQL의 특징 - HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다. - 응답을 받을 때 데이터 결과를 JSON 형식으로 받는다. - GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다. - GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다. ✔️ 그래프에서 트리 추출하는 방법 query { 책(ISBN이 "9780674430006")..