오늘도 디벅잉 오늘도 디벅잉

🐣 { HTTP } PRG 패턴 (POST / REDIRECT / GET) POST로 새로고침하면 중복 처리가 될 수 있기 때문에 사용합니다. POST로 요청하였다면 GET으로 결과화면을 Redirect 하는 패턴을 말합니다. 헤더 HTTP 메시지에는 헤더가 포함되어 있습니다. 헤더에는 전송에 필요한 모든 부가정보가 담겨 있습니다. 메시지 본문을 통해서는 표현 데이터를 전달합니다. 인증이나 쿠키 등의 정보도 포함됩니다. 쿠키 서버에서 클라이언트에 쿠키를 set 합니다. 클라이언트에서 서버에 요청을 할 때 쿠키를 같이 건냅니다. 캐시 검증 헤더(서버의 응답)와 조건부 요청 헤더(클라이언트의 요청)를 통해 캐시를 처리합니다. 수정된 시간 또는 ETag를 활용하여 캐시를 효율적으로 관리합니다. 클라이언트와 서..

🏅 - 강의명: 모든 개발자를 위한 HTTP 웹 기본 지식 - 강사: 김영한 님 - 사이트: 인프런 (https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard) - 강의료: 33,000원 - 목차: 인터넷 네트워크, URI, HTTP 메서드, 상태코드, 헤더 등 - 난이도: ★★☆☆☆ - 추천대상: 웹 관련 개발자 (=모든 개발자) - 수강평 노드를 학습하며 HTTP 통신에 대한 갈증이 있어 수강하였습니다. 인터넷, 네트워크 관련 기본 용어들의 개념을 풀어서 설명해주십니다. HTTP 헤더와 캐시에 대한 이해도를 높일 수 있었습니다. 아직 100% 숙지하였다고 자신할 수는 없지만 앞으로 HTTP ..

🐣 { HTTP } HTTP의 비연결성 HTTP는 연결을 유지하지 않습니다. 연결을 유지하고 있으면 계속 응답을 대기해야 하므로 불필요한 자원이 소모됩니다. 비연결적인 특성을 가지면 요청이 있을시에만 최소한의 자원을 소모합니다. cf) 쿠키-세션 인증은 HTTP의 특성에 반하는 측면이 있고, JWT(JSON Web Token)를 활용하면 비연결성이라는 특징을 유지 할 수 있습니다. HTTP 메서드 - GET: 리소스 조회 - POST: 서버에서 요청 데이터 처리, 서버에서 리소스 URL 생성 - PUT: 리소스 대체, 없으면 생성, 클라이언트에서 리소스 URL 지정 - PATCH: 리소스 부분 변경 가능 클라이언트에서 서버로 데이터 전송 1. 쿼리 파라미터를 통해서 전송: GET 2. 메시지 바디를 통해..

🏅 - 강의명: 프론트엔드 필수 브라우저 101 - 사이트: https://academy.dream-coding.com/courses/browser101 - 강의료: 100달러 - 목차: Web APIs, DOM, Events, Event Loop, Refactoring 등 - 난이도: ★★☆☆☆ - 추천대상: HTML, CSS, JavaScript 써본 사람 - 수강평 HTML, CSS, JavsScript를 복습한다는 생각으로 수강하였다. 스크롤 처리 등의 유용한 Web API를 접할 수 있었다. 이벤트 타켓을 다루는 법을 자세히 설명해준다. 자바스크립트의 핵심 개념을 짚고 간다. 기본적인 개념은 드림코딩 유튜브에 올라와 있다. 리팩터링을 다루고 있어서 코드 품질을 높이는 방법을 고민하게 된다. 바닐..

🐣 IP 클라이언트와 서버는 인터넷을 통해 데이터를 주고 받는다 클라이언트와 서버는 각각 IP 주소를 가지고 있으며, "패킷"이라는 통신 단위를 사용한다. * IP = Internet Protocol IP 패킷에는 클라이언트와 서버의 IP 주소가 포함되어 있다. IP의 한계: 비연결성, 비신뢰성(자료의 소실, 순서 섞임), 프로그램 구분 못함 TCP Transmission Control Protocol TCP는 출발지 PORT, 목적지 PORT 정보를 담고 있다. TCP 특징: 연결지향(3 way handshake), 데이터 전달 보증, 순서 보장 TCP/IP 패킷 PORT 같은 IP 내에서 프로세스를 구분하기 위해서 사용한다. DNS Domain Name System IP가 변하더라도 DNS를 통해 변..

🐣 변수와 객체 변수는 변수를 담고 있지만, 객체는 객체의 주소를 담고 있다. a 변수를 b 변수에 대입하면 값이 복사가 되고, c 객체를 d 객체에 대입하면 주소값이 복사가 된다. (함수도 객체와 마찬가지로 주소값을 할당) Boolean 값 0, "", null, undefined, NaN은 false이다. false 같은 값이라고 하여 falsy 라고 한다. 논리연산자: 피연산자 타입에 제한없음 && => 첫번째 falsy를 반환 (하나라도 false 이면 false이기 때문에 false가 나오면 끝임, 모두 true이면 마지막 값 반환) || => 첫번째 truthy를 반환 (하나라도 true 이면 true이기 때문에 true가 나오면 끝임, 모두 false이면 마지막 값 반환) ?? (null 병..

🏅 - 강의명: 모두를 위한 컴퓨터 과학 (CS50 2019) - 사이트: https://www.boostcourse.org/cs112/ - 강의료: 무료 - 목차: 컴퓨팅 사고, C언어, 배열, 알고리즘, 메모리, 자료구조 - 난이도: ★☆☆☆☆ - 추천대상: 프로그래밍 입문자 (1~2개월차) - 수강평 컴퓨터 구조와 프로그래밍이라는 책으로 CS에 입문하고자 하였다. 책으로 공부하자니 눈에 잘 안들어와서 CS의 전체적인 내용을 쉽게 훑어보고 싶다는 욕심이 생겼다. 부스트코스에 있는 모두를 위한 컴퓨터 과학 이라는 수업을 들으면 CS에 대한 자신감을 가질 수 있을 것으로 판단하였다. 해당 수업에서는 컴퓨터가 어떻게 돌아가는지 메모리는 무엇인지 등등의 기본적인 개념들을 아주 쉽게 설명해준다. 대신 깊이 있..

🐣 - 60FPS를 달성하기 위해서는 한 프레임이 16.7ms 안에 끝나야 한다. - innerHTML은 내부 텍스트 뿐만 아니라 HTML 구조를 짜기 위해 사용한다. - 스크립트를 HTML과 별도의 파일로 작성하면 브라우저가 스크립트를 다운받아서 캐시에 저장한다. 따라서 페이지가 바뀌더라도 스크립트를 새로 다운받지 않고 캐시로부터 가져온다. - 한줄 주석: // (Ctrl + /) - 여러줄 주석: /* */ (Ctrl + Shift + /) - 엄격모드("use strict"): 코드를 클래스와 모듈을 사용해 구성한다면 불필요하다. - 자바스크립트는 동적 타입 언어이다. 📌 참고사이트: https://academy.dream-coding.com/ 📌 참고자료: https://ko.javascript...