http는 어떻게 tcp커넥션을 사용하는가?tcp커넥션의 지연, 병목, 막힘병렬 커넥션, keep-alive커넥션, 커넥션 파이프라인을 활용한 http의 최적화지구상의 컴퓨터와 네트워크 장비(인터넷)에서 널리 쓰이고 있는 패킷 교환 프로토콜들의 계층화된 집합.전 세계
server와 clinent로 폴더를 분리했다.server는 localhost:8080포트 사용clinen는 localhost:3000포트 사용express, socket.io 패키지를 설치한 후 app.js파일에 서버를 만들고 socket.io와 연결했다.http모듈
http메세지는 무언가를 담아 보내는 소포와 같다.http메세지는 http애플리케이션 간에 주고받는 데이터의 블록들이다.클라이언트 - 프락시 서버 - 서버 사이를 흐른다.인바운드, 아웃바운드, 업스트립, 다운스트림은 메세지의 방향을 이미하는 용어다.트랜젝션 방향을 표현
페이지별 기능 정리 1. 로그인 페이지 닉네임을 입력하고 프로필 이미지를 선택한다. 시작하기 버튼을 누르면 로그인이 되고 서비스를 사용할 수 있다. 2. 채팅방 목록 페이지 (다수와의 채팅) 채팅은 불특정 다수와 함께 할 수 있다. 사용자가 채팅방을 만들 수 있다.
반환값은 string원시타입을 주로 검사함수처럼 사용할 수도 있다. typeof ('문자열')js에서 타입검사할 때 주의해야하는 이유참조타입은 typeof로 판별해내기 어렵다.null은 object로 나온다 → 오류임object생성자로 만든 값들은 거의 object로
URL은 인터넷의 리소스를 가리키는 표준이름이다. 브라우저가 정보를 찾는데 필요한 리소스의 위치를 가리킨다.좀 더 일반화된 부류인 URI의 부분 집합이다.URI에는 URL과 URN가 속해있다. (주로 URL이 쓰인다.)1\. 스킴(어떻게)클라이언트가 리소스에 어떻게 접
실시간 채팅 기능을 만들기 위해선 webSocket Api를 이용해 통신해야한다.서버와 클라이언트에 각각 Socket통신 설정과 이벤트 등록을 해야한다.express를 사용해 서버를 구축하고 socket.io라이브러리를 사용하기로 결정했다.서버는 클라이언트의 요청을 받
HTTP는 전 세계의 웹 서버로부터 대량의 정보를 빠르고, 간편하고, 정확세게 사람들의 pc에 설치된 웹 브라우저로 옮겨주는 전송 규칙 체계이다.클라이언트는 웹서버에게 Http요청을 보낸다.웹 서버는 데이터(웹 리소스)를 저장하고, 클라이언트가 요청한 데이터를 http
스무스하게 이동하는 이미지 캐러샐 구현하기\~~SLIDE_WIDTH : 슬라이드 엘리먼트 너비SLIDE_MARGIN_RIGTH : 슬라이드 엘리먼트 오른쪽 마진currentSlideIndex : 현재 보여지는 슬라이드의 index를 담는 상태sliderRef : 위치를
스크롤이 페이지 하단에 도달하면 다음 상품을 이어서 보여줍니다.더 이상 가져올 데이터가 없는 경우 요청이 나가지 않아야 합니다.상품 상세 화면으로 이동했다가 다시 이전 페이지(/infinite-scroll)로 돌아오면 기존의 스크롤 위치로 되돌아와야합니다.상품 리스트
한 번에 보이는 페이지의 갯수는 5개 여야합니다.페이지 클릭 시 url path가 변경되어야 합니다.이전 범위 버튼 클릭 시 이전 범위의 마지막 페이지를 보여줘야 합니다.다음 범위 버튼 클릭 시 다음 범위의 첫 번째 페이지를 보여줘야 합니다.한 페이지 당 보여지는 상품
var는 선언, 재할당을 중복으로 할 수 있다.var가 중복 선언이 될 경우 (원래 오류가 나야하지만) 중복 선언이 무시되고 할당으로만 작동한다.let/const는 중복 선언 시 에러가 뜬다. let은 재할당 가능, const는 불가능하다.let은 선언 먼저 한 후 나
특정 코드의 중복만을 얘기하는 좁은 의미가 아니라 (ex. 한 함수 내에서의 코드 중복)로직, 의도, 비즈니스 로직 이 모든 것들이 중복되지 않도록 한다. (ex. 여러 함수 내에서의 특정 로직 중복)반복되는 코드가 있다면 추출해서 관리하자.code - 너무 축약되지
문제인식문제를 해결하는 새로운 기술이 등장하고 이름 명명됨기술의 부흥새로운 한계점 봉착→ 싸이클 반복순차적 프로그래밍과 goto원시타입 데이터와 for, while만으로 순차적으로만 프로그래밍.함수가 없기 때문에 특정 구간을 반복하려면 goto를 이용해 실행 순서 변경
함수형으로 만들고 싶었으나 그 당시 주류였던 객체 지향을 무시할 수 없어최대한 간결한 방법으로 객체지향(상속, 추상화, 다형성)을 할 수 있도록 함.no class언어, 상속이 아닌 공유.객체지향+함수형의 멀티 패러다임.객체지향 언어class를 선언해야만 생성할 수 있
클래스 컴포넌트React.Component에서 공통 메소드들을 상속받아 사용라이프 사이클도 포함각 LifeCycle 메소드에 모든 로직을 집어넣었어야 했음한 메소드 안에 관심사가 다른 로직들이 관리되므로 유지보수가 어렵다.코드를 각 LifeCycle 메소드에 중복으로
모던 프론트엔드 테스트 전략드림 코딩 엘리 - 테스트와 TDD소프트웨어가 원하는 대로 동작하는 지 확인하는 것.확인하는 요소는 함수, 특정 기능, ui, 성능, api스펙 등등이 있다.목적소프트웨어 품질 확인버그 찾기 효과실제 변경 시에 테스트 코드를 이용해 이전 답과
컴포넌트를 구현할 때 생각해봐야 할 점다양한 사례에 적용할 수 있는 재사용 가능한 컴포넌트를 어떻게 개발할까?사용하기 쉽고 심플한 API를 제공하는 컴포넌트는 어떻게 만들까?UI와 기능 모두에서 확장성 가능한 컴포넌트를 개발하려면 무엇이 필요할까?방법단일 책임레이아웃
html파싱이나 렌더링을 막는 리소스js - html파싱 블록 리소스css - 렌더링 블록 리소스css, js둘 다 html파싱을 막는 리소스지만, css는 html을 바꿀 가능성이 없기 때문에렌더링 엔진이 link태그를 만나면 자동으로 preload를 해주어 파싱과
모든 웹 페이지의 속도를 결정 짓는 첫번째 요소는 첫 페이지를 그릴때 필요한 자원의 양이다.필요한 자원이 많으면 많을 수록 네트워크 상에서 다운받는 시간이 오래 걸린다.Webpack 같은 bundler 들은 모든 JS 코드를 하나의 거대한 파일로 만들어 내었고, 이는