본문 바로가기

전체 글

 (124)
CSS 레이아웃 (Float, Position, Display, Box Model) Float float를 가지면 붕 뜨기때문에 다른 요소가 float을 가진 div를 무시함. float를 가진 div끼리는 겹치지 않음. but absolute와 다른점 : top, left가 아닌 margin으로 위치를 잡아줘야함 .first{ float : left; } .second{ float:right; or left; } issue float를 가진 div(first)의 부모(container)는 붕 뜬 float(first)를 자식이라고 생각하지 않음. ⇒ 부모에 overflow : auto; or hidden; float와 같은 위치에 있고 float가 없는 div는 float를 가진 div를 무시함. float가 있는 요소와 float가 없는 요소가 겹치지 않게 하려면? ⇒ float속성..
Prettier & ESLint Prettier Code Formatter이다. 개발자들에게 일관적인 코딩 스타일을 유지할 수 있게 도와주는 툴이다. ⇒ 코드 스타일을 교정 ESLint javascript는 프로그램을 직접 실행하여 코드를 분석하는 동적분석(프로그램을 실행하지 않고 분석하는 정적분석) 방식을 사용한다. 에러를 찾기 위해서는 코드를 실행시켰어야하기 때문에 Linter가 정적분석을 도와 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드를 자동으로 검출해준다. 추가로 간단한 코드 포맷팅(코드 표준 적용) 기능이 있다. ⇒ 문법에러 잡아주거나 더 좋은 문법을 사용하게 에러표기를 강제해줌. Prettier는 코드가 예쁘게 보이도록 하는것에 중점. 코드 에러를 잡아내진 못함 ⇒ 포맷팅 ESLint 코드 포맷터 + 주로 코드 ..
쿠키와 세션 쿠키 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일. 인증이 유효한 시간을 명시할 수 있다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장해두고 참조한다. 예) "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니 순서 1. 클라이언트가 페이지를 요청서버에서 쿠키를 생성 2. HTTP 헤더에 쿠키를 포함 시켜 응답 3. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음 4. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄 5. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답 쿠키를 쓰는 이유 세션은 서버의 자원을 사용하기때문에 무분별하게 만들다보면 서버의 메모리가 감..
[HTTP] HTTP vs TCP vs IP HTTP OSI 7계층에서 7계층(Application 계층 = 네트워크를 사용하는 응용프로그램으로 이루어지며 HTTP 메시지를 작성한다.) 메시지를 컨트롤한다 TCP OSI 7계층에서 4계층 한번 접속하면 끊으라는 명령 전까지는 계속 연결 데이터의 전달을 관리하는 규칙 종단간 통신을 다루는 최하위계층으로 종단간 신뢰성있고 효율적인 데이터를 전송하며, 기능은 오류검출 및 복구와 흐름 제어, 중복 검사등을 수행. 흐름 제어 : 수신측과 송신 측의 데이터 처리 속도 차이를 해결하기 위한 기법 페이로드(5계층 데이터)를 쪼개고 헤더 정보를 붙여 세그먼트(4계층 데이터)로 만듦. 3 way handshaking과 4 way handshaking 작업으로 인한 신뢰성 보장 tcp 통신을 할 때 서버가 통신할 준비..
[HTTP] HTTP vs HTTPS HTTP 서버는 요청에 응답하면서 자료(텍스트)를 주고받는다 단순텍스트를 주고받기 때문에 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있다. HTTPS HTTPS는 HTTP의 보안 취약점을 해결하기 위한 프로토콜이다 HTTPS는 기존 HTTP 레이어에서 SSL(TLS) 프로토콜을 얹어 평문 데이터를 암호화하는 프로토콜이다 공개키 방식 공개키와 비밀키가 있고 이 각각은 암호문을 만들때 쓰이고 복호화할 때 쓰인다. 그 반대도 마찬가지. 타인은 공개키를 이용하여 데이터를 암호화 해서 소유자에게 전달하면, 소유자는 비밀키로 복호화 하여 그 데이터를 얻을수있음 인증, 전자 상거래에서 많이 쓰임. 사용 이유 기밀성 (데이터가 원하는 사람만 볼 수 있도록 비밀로 유지됨.) 무결성 ..
[HTTP] 상태코드와 요청메서드 상태코드 와탭에서 제공하는 URL Monitoring은 웹서비스의 장애를 알려주는 서비스 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. 예) 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청하여 이해할 수 없음 401 Unauthorized 비록 HTTP 표준에서는 '미승인(unauthorized)'를 명확히 하고 있지만, 의미상 이 응답은 '비인증(unauthen..
[HTTP] HTTP 1.1 / 2.0 HTTP 1.1 클라이언트의 리퀘스트의 순서와 서버의 응답순서는 동기화해야 되야함. 아래는 이것으로 발생하는 문제점이다. 하나의 응답이 올 때까지 같은 큐(같은 Output)에 들어간 나머지 패킷들은 무한대기. 단순히 연결을 여러개 두면 될 것 같지만, 브라우저는 동시에 6개정도 접속을 유지할 수 있기 때문에 리소스가 6개 이상인 경우 HOL(Head of Line)Blocking이 발생. HOL(Head of Line) 일반적으로 패킷은 입력포트에서 스위치패브릭을 거쳐 출력 포트로 전송됨. 입력포트에서 패킷이 출력포트로 전달되지 못하고 스위치 패브릭에서 대기하고 있는 현상.HOL 증가 RTT(Round Trip TIme)증가 RTT 패킷이 목적지에 도달하고 나서 해당 패킷에 대한 응답이 출발지로 다시 ..
Node.js의 framework 1. Express.js 신속한 서버 측 프로그래밍 패키지⇒ 웹 어플리케이션 서버를 빠르게 구현하기에 최적화 많은 node.js 기능이 포함되어 있어서 몇줄의 코드로 속도를 높인다. 고성능 비동기 프로그래밍으로 여러 작업을 독립적으로 실행 많은 HTTP도우미 프로그램을 더 이해하기 쉽고 재사용 가능하게 만듦 더 나은 콘텐츠 협상 URL에 HTTP헤더를 제공해 서버와 클라이언트간 더 나은 소통을 도움. MVC 아키텍쳐 패턴 ( Model-View-Controller ) 구조에 대한 자유도 높음 사용해야 하는 이유 API생성을 위한 기반을 쉽게 사용할 수 있어 빠른 개발이 가능 강력한 라우팅, 템플릿, 보안 기능, 및 오류 처리 조항 2. Koa 스택같은 방법으로 HTTP 미들웨어를 효율적으로 처리할 수 있..

티스토리툴바