본문 바로가기
[네트워크]HTTP 1.0, HTTP 2.0, QUIC HTTP 1.0 TCP 기반 연결 한 번에 요청 1, 응답 1 처리 ->서버 부하, 성능 저하 요청 헤더에 Connection: keep alive를 포함해 연결된 TCP 커넥션을 활용하려는 시도를 함(응답 헤더에 Connection: keep alive을 통해 유지) 하지만 Connection: keep alive는 dumb proxy 등의 문제가 있었음 HTTP 1.1 TCP 기반 peristent connection : 지정한 timeout 동안 connection을 닫지 않음(지속 커넥션이 기본 옵션, Connection: close를 보내야 종료) pipelining : 하나의 커넥션에서 순차적으로 여러 요청을 보내고 그 순서에 맞춰 한 번에 응답을 받는 것(지연 시간을 줄임) head of l..
[JS]웹팩(webpack)이란? 프로젝트를 진행하다보니 웹팩에 대한 내용이 나와 간단히 정리해본다. Next.js에 기본 내장되어 있다고 하는데 정확한 사용법까지는 몰라도 왜 쓰는지와 기능 정도는 알아두려한다. 간략하게 요약하면 여러개 나뉘어 있는 파일을 하나로 모아주고 압축해주는데 이 과정에서 에러처리, 압축처리 등 기존에 번거로운 작업을 자동화 시켜주는 도구로 보인다. 웹팩(webpack) 오픈소스 자바스크립트 모듈 번들러 모듈 번들러 : html, css, 자바스크립트 등의 파일을 하나의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구(빌드, 번들링, 변환 비슷한 뜻) 모듈 : 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 필요이유 파일 단위 자바스크립트 모듈 관리: 변수 유효 범위 등으로 큰 단위 작업시 오류 발생..
가비지 컬렉션(garbage collection, gc) GC 힙 영역(동적 메모리 할당)에서 사용하지 않는 객체를 삭제하는 프로세스 garbage collection(가비지 컬렉션)과 reference counting(레퍼런스 카운팅)을 통해 할당 된 메모리를 관리 레퍼런스 카운팅 모든 객체는 참조당할 때 레퍼런스 카운터를 증가시키고 참조가 없어질 때 카운터를 감소시킴 즉 해당 객체에 접근할 수 있는 방법의 수 이 카운터가 0 이 되면 객체가 메모리에서 해제(참조되지 않는 객체들 - unreachable) 순환참조 문제가 발생함 Mark and Sweep 자바와 자바스크립트, 순환참조 문제 해결 레퍼런스 카운트가 0이되면 제거하는 방식과 달리 의도적으로 gc를 실행해주어야 함, 어플리케이션과 gc실행이 병행됨 루트부터 그래프 순환을 통해 연결된 객체를 찾아내..
[JS] Hoisting과 변수 선언 3가지 방법(var, const, let) 자바스크립트 변수 선언 3가지 방법 요약 var은 함수 스코프, let, const는 블록스코프(c와 비슷) var은 재선언 가능, let, const는 불가능 let은 재할당 가능, const는 불가능(const는 선언과 동시에 초기화) var (function scope) 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값 var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주 Hoisting: 자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작 변수 선언만 이루어지며 undefined로 할당됨 let (block scope) let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언 ho..
[네트워크] 실시간 웹(real-time web)과 웹소켓(web socket) Real-time Web 이란? 인터넷에서 창작자가 정보를 만들어내는 즉시 수신할 수 있도록 하는 기술 Server Push: 서버가 클라이언트(브라우저)로 능동적으로 데이터를 전송해 주는 통신 방식 웹소켓이란? 두 프로그램간 메시지를 교환하기 위한 통신 방법 중 하나 과정 handshaking(https, http) → 프로토콜이 ws로 변경(데이터 전송) 별도의 포트는 없으며 기존 포트(80, 443) 사용 frame으로 구성된 메시지라는 논리적 단위로 통신, 메시지는 텍스트와 바이너리만 가능 특징 양방향 통신 :데이터 송수신을 동시에 처리, 클라이언트와 서버가 원할 때 데이터를 주고받을 수 있음(http는 단방향) 실시간 네크워킹, 연속된 데이터를 빠르게 노출(채팅, 주식, 비디오 등) 문자열을 주..
[CS]함수 호출 방식의 구분(call-by-reference) 함수 호출 방식의 구분 call-by-value 와 call-by-reference 공통점 함수가 호출될 때, 메모리 공간 안에서는 함수를 위한 별도의 임시 공간이 생성된 후 함수 종료시 해당 공간은 사라진다. (스택 프레임(Stack Frame) : 함수 호출시 할당되는 메모리 블록) 차이점 call-by-value 함수 호출시 전달되는 변수의 값을 복사하여 함수의 인자로 전달한다. 복사된 인자는 함수 안에서 지역적으로 사용되는 local value의 특성을 가진다. 따라서 함수 안에서 인자의 값이 변경되어도, 외부의 변수의 값은 변경되지 않는다. ex) void fuc(int a, int b) 로 함수 내에서 지역변수처럼 사용하는 경우 call-by-reference 함수 호출시 인자로 전달되는 변수..
[HTML]HTML란? 기본 내용 정리 HTML(Hypertext Markup Language)이란? 웹페이지를 만드는데 사용하는 Hypertext(링크)를 중요 특징으로 하는 마크업 형식을 가지는 프로그래밍 언어 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지 태그와 속성 (도널드 커누스) (도널드 커누스) a 태그 : 링크가 있음을 알려줌 href = "주소" 속성 이름 값으로 url을 주면 링크가 걸림 target = "_blank" 속성, 새로운 창으로 열림 속성의 순서는 상관 없음 a 태그는 자동으로 underline 이 생김 리스트 태그를 통한 목록화 태그, list : 각각의 항목이 구분되어 리스트화됨 태그, unordered list: li 태그 들을 성격에 따라 그룹핑할 때 사용하는 태그 태..
[JS] 프로젝트 시작 프로젝트 시작 배경 C언어로 프로그래밍을 시작하고... 퉤퉤 소리 나올만큼 지쳐갈때 쯤 코테준비를 한다는 핑계로 파이썬으로 도망쳐 나오고 알고리즘 문제를 풀며 나름 재미를 붙였다. 파이썬 하는 김에 주식 관련 간단한 프로그램도 만들며(=복붙 후 일부 수정 ㅎ) 재미를 느끼고 Django 프레임워크를 사용해보기도 했다. 그러다 백엔드인지, 프런트엔드인지 뭐가 더 맞는지 결정해야겠다는 생각을 하고 풀스택 프로젝트를 경험해보기로 결정한다. 결정 백엔드는 Django로 하고 프런트를 JS로 하려고 할까 하다가 JS 풀스택으로 변경한다. 이유는 Javascript로 풀스택 프로젝트가 가능하기도 하고 한 언어가 각기 다른 환경에서 어떻게 작용하는지 궁금하기도 했다. 물론 자바스크립트 풀스택이라 해도 바닐라 자바스크..

티스토리툴바