본문 바로가기
  • 살짝 구운 김 유나

분류 전체보기146

[Network] HTTP 버전 별 차이점 (0.9 / 1.0 / 1.1 / 2.0) HTTP? WWW 상에서 정보를 주고 받을 수 있는 프로토콜이다. 클라이언트가 HTTP를 통해 서버로 정보를 요청한다. 서버는 요청에 필요한 정보를 클라이언트에 전달한다. HTTP 1.1이 모든것의 기반이 된다. HTTP 0.9 원라인 프로토콜이다. 요청 메서드가 GET만 존재하기 때문이다. HTML 파일 유형만 전송할 수 있다. /* 요청 */ GET /page.html /* 응답 */ A very simple HTML page HTTP 1.0 확장성 있게 진화되었다. 헤더 개념이 도입되어 메타 데이터를 주고 받을 수 있게 되었다. 버전 정보와 요청 메서드가 함께 전송된다. 상태코드가 응답의 시작에 붙어 전송된다. HTML 이외에 Content-Type의 데이터를 전송할 수 있다. /* 요청 */ GE.. 2023. 6. 23.
[Lv.2] 메뉴 리뉴얼 - JavaScript (feat. combination) 문제 https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 순열 공부하면서 조합은 공부 안했던 사람,,, JS로 조합! 공부해자,, 주어진 코스별 가능한 조합을 찾는다. 그 중에서 2번 이상 주문된 조합을 찾는다. 또 그중에서 가장 많이 주문된 경우를 찾는다.. 그냥 문제에서 하라는대로 한다... 조합 구하기! // 조합을 구하는 함수 const combination = (arr, n) => { // 배열의 길이가 1일 때는 자기 자신을 담은 .. 2023. 6. 11.
[Network] TCP와 UDP의 차이점 전송 계층은 송신자와 수신자 사이의 데이터 전달을 담당하는 계층이다. 그리고 그 데이터를 보내기 위해 사용하는 프로토콜에는 TCP와 UDP가 있다. 프로토콜이란? 더보기 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계를 말한다. ** 즉, 통신 규약 및 약속!! 기본요소) 1. 구문 : 전송하고자 하는 데이터의 혁식, 부호화, 신호 레벨 등을 규정 2. 의미 : 두 기기간의 효율적이고 정확한 정보 전송을 위한 사항과 오류 관리를 위한 제어 정보 규정 3. 시간 : 두 기기 간의 통신 속도, 메시시 순서 제어 등을 규정 TCP (Transmission Control Protocol) : 신뢰성 있는 데이터 통신을 가능하게 해주는 프로토콜 특징 설명 연결형 서비스 클라이언트가 연결.. 2023. 6. 6.
[Network] OSI 7 Layer OSI 7 계층 데이터를 주고 받는 과정에는 많은 단계가 있고, 이를 역할에 따라 7개의 계층으로 나눈 것. 분리된 각 계층은 독립적인 역할을 할 수 있다. 문제가 발생했을 때에도 어떤 계층에 문제가 생겼는지도 파악이 가능하다. === 유지보수성과 용이성 up! 간단히 요약하자면 아래와 같다. 1. 물리계층 (Physical Layer) : 데이터를 전기적인 신호로 변환해서 주고 받는 기능을 담당한다. - 전송하려는 데이터가 무엇인지, 어떤 에러가 있는지는 신경쓰지 X 2. 데이터 링크 계층 (Data Link Layer) : 물리계층을 통해 송수신되는 정보의 오류와 흐름을 관리하여 안전한 정보의 전달을 수행할 수 있도록 한다. - MAC 주소로 통신함 - 종단 간 신뢰성 있는 전송을 보장 (흐름 제어 .. 2023. 6. 5.
[Lv.3] 택배 마스터 광우 - JavaScript (근데 이제 Permutation을 곁들인..) 외... JS로 소프티어 푸는 사람 없는건대,,, 구글에 검색해도 잘 안나와서 넘 외롭다,,, 순열! 구하기! const permutation = (arr, num) => { // 길이가 1일때는 자기 자신이 담긴 리스트 반환 if(arr.length === 1) return [arr] const res = [] arr.forEach((v, idx, arr) => { // 현재 인덱스에 해당하는 원소를 제외, 나머지 원소로 이루어진 rest 배열 생성 const rest = [...arr.slice(0, idx), ...arr.slice(idx+1)] // rest 배열의 조합 구하기 const permutations = permutation(rest , num-1) // 현재 인덱스를 배열의 가장 앞쪽.. 2023. 6. 2.
페이지를 떠날 때 안정적으로 요청 보내기 - sendBeacon 웹소켓을 활용한 실시간 게임을 제작했다. 사용자가 페이지를 새로고침 하거나 브라우저를 닫았을 때, 서버 단에 사용자가 퇴장한다고 알리는 요청을 보내야 했다. 요청을 안정적으로 전송하기 위해서 Navigator에서 제공하는 sendBeacon을 사용하기로 했다. 일반적인 API 요청은 사용자가 브라우저를 닫을 때 요청이 전송되는 것을 보장하지 않는다. sendBeacon으로 전송된 요청은 실제 에이전트에 의해 대기열에 존재하기 때문에 네트워크에 연결이 되어있기만 하면 데이터가 전송된다. [참고 문서] Navigator: sendBeacon() method - Web APIs | MDN The navigator.sendBeacon() method asynchronously sends an HTTP POST .. 2023. 5. 21.
[Next.js] layout에서 dynamic 사용하기 (13 버전) 현재 웹소켓을 활용한 실시간 게임 웹 서비스를 만들고 있다. 사용자가 웹소켓에 연결한 이후에 새로고침을 하거나 페이지를 떠날 때, 서버 측에 이 사용자의 토큰을 보내 퇴장을 알려야 한다. 서버에 보내 주어야 하는 내용은 다음과 같다. 여기서 저 roomId는 redux의 guestSlice에서 관리되고 있다! (useSelector를 사용해야함) 사용자가 어느 페이지에 있든 상관없이 적용되어야 하므로 layout.tsx에 작성했다. import './globals.css'; import { Inter } from 'next/font/google'; import { Providers } from '@/store/provider'; import { SocketProvider } from '../context.. 2023. 5. 12.
[Lv.2] 주차 요금 계산 - JavaScript 문제 https://school.programmers.co.kr/learn/courses/30/lessons/92341 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 한 차량이 주차장을 여러번 방문했을 경우도 생각해야 한다. 한 번 이용했을 때의 시간들을 계산해서 리스트의 형태로 관리해야 하는 문제! 그 외에는 하라는 대로 하면 되는 문제이다. 자세한 설명은 주석 참고~̆̈ 코드 function solution(fees, records) { var answer = []; let bill = {}; records.forEach((record) => {.. 2023. 5. 9.
[Lv.2] 이모티콘 할인행사 - JavaScript 문제 https://school.programmers.co.kr/learn/courses/30/lessons/150368 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 1. 모든 경우의 할인율 조합을 구한다. 2. 할인율 조합, users, emoticons 세가지로 3중 for문을 돌면서 각 경우에 대한 [가입자수, 판매액] 값을 구한다. 2. 가입자수가 많은, 판매액이 높은 순으로 다중 조건 정렬을 수행한다. 코드 function solution(users, emoticons) { const len = emoticons.length; // 모든 .. 2023. 5. 8.
[Next.js] Server Component & Client Component [공식문서] Rendering: Fundamentals | Next.js Learn the fundamentals of rendering in React and Next.js. beta.nextjs.org 13 버전부터는 컴포넌트 단위(server/client)로 렌더링 방식을 규정한다 Server Component : 서버에서 빌드가 될 때 실행이 되는 컴포넌트 app 폴더에 있는 모든 컴포넌트는 기본적으로 server 컴포넌트이다 서버 상에서는 '안녕'이라는 로그가 보이지만, 브라우저의 콘솔에는 아무것도 찍히지 않는 것을 볼 수 있다. 외글얼까?.. 1. 서버 컴포넌트는 서버에서 실행이 된다. 2. 코드는 서버에서 실행이되어서 pre-rendering 된 HTML 형태로 브라우저에게 전달된다. => .. 2023. 4. 26.