Today Hailie Learned

🤓배움 요약하기 인터넷 프로토콜 스택의 4계층이란? 애플리케이션 계층(HTTP, FTP), 전송 계층 (TCP, UDP), 인터넷 계층 (IP), 네트워크 인터페이스 계층 (LAN 등등)으로 구성되어 있는 것을 말합니다. TCP란? TCP는 IP 프로토콜의 한계를 보안해주는 역할을 하는데 TCP 3 way handshake로 대상이 서비스 가능 상태일 때만 패킷을 전송하고, 데이터 전달을 보증해주고, 데이터 전송 순서도 보증해주는 신뢰할 할 수 있는 프로토콜이고, 현재는 대부분의 애플리케이션에서 TCP 사용합니다. UDP란? IP에서 PORT와 체크섬이 추가되어 있는 프로토콜을 말합니다. 최근에는 웹브라우저에서 HTTP 통신할 때 HTTP 3 way handshake에서 UDP를 사용하면서 사용성이 더욱..

모든 것이 HTTP 기반 위에서 동작한다. (웹 - 서버 통신, 서버 - 서버 통신 등 HTTP 프로토콜 위에서 데이터를 주고 받는다. ) HTTP의 전체 흐름을 이해하자!! 인터넷 네트워크 - HTTP도 결국에는 TCP/IP나 UTP 기반 위에서 동작하기 때문에 인터넷 네트워크를 알아야한다. - IP (인터넷 프로토콜) - TCP, UDP - PORT - DNS IP (인터넷 프로토콜)이란? : 인터넷 망을 통해서 목적지까지 메세지를 전달해야하는데 이때 사용하는 것이 IP이다. 복잡한 IP망에서 'hello world'라는 메세지를 미국에 있는 친구에게 보내야한다면? 최소한의 규칙인 IP를 통해서 가능하다! IP(인터넷 프로토콜)의 역할 1. 지정한 IP 주소(IP Address)에 데이터를 전달한다...

✔️ 에러 코드 Uncaught TypeError: Cannot read properties of undefined (reading 'img') ✔️ 에러가 나온 이유 await 키워드를 사용하는 것을 깜빡했더니 위와 같은 에러가 나왔습니다. WHY?? 👉 HTTP 요청은 비동기 처리 방식으로 동작하니까! (참고) 2022.12.19 - [JavaScript] - [Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유 get 함수는 서버의 응답 결과를 반환하는 비동기 함수입니다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료됩니다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됩니다. 이때 aw..

✔️ 에러 코드 Uncaught TypeError: Cannot read properties of undefined (reading 'map') ✔️ 에러가 나온 이유 객체를 가리키기를 기대하는 변수의 값이 (여기서는 product.color) null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러(TypeError)가 발생한다고 합니다. console.log(product.color)가 undefined로 나온걸 확인했습니다... 👇에러코드 👇 {product.color.map((c) => ( ))} 👇에러 해결 코드 👇 객체가 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조하자! 방법 1. 논리 연산자 &&를 사용 (옵셔널 체이닝이 생..

✔️ 이번 정독을 통해 알게 된 것 화살표 함수 REST 파라미터 매개변수 기본값 ✔️ 화살표 함수 함수 표현식으로 정의해야 합니다. 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있습니다. // concise body const power = x => x ** 2; // 위 표현은 다음과 동일하다. // block body const power = x => { return x ** 2; }; power(2); // -> 4 단, 함수 몸체가 하나의 몸으로 구성된다 해도 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다. const arrow = () => const x = 1; // SyntaxError: Unexpected token 'const' ..

결론 : 타입스크립트를 사용하는 개발자들이 늘어나고 있다! 타입스크립트가 자바스크립트를 제치고 프론트엔드의 새로운 표준일 될수도 있다! 👉 타입스크립트 시작해보자!!

✔️ 이번 정독을 통해 알게 된 것 Ajax란 무엇인가요? 🤔 Ajax란 무엇인가요? 🤓 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. ✔️ Ajax 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. (자바스크립트를 사용해서 HTTP 요청을 전송하려면 XMLHttpRequest 객체를..

✔️ 이번 정독을 통해 알게 된 것 동기와 비동기에 대해서 설명해주세요. 테스크 큐가 무엇인가요? 이벤트 루프가 무엇인가요? 🤔 동기와 비동기에 대해서 설명해주세요. 🤓 동기 = 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 테스크가 종료할 때까지 이후 테스크들이 블로킹되는 단점이 있습니다. 비동기 = 현재 실행 중인 테스크가 종료되지 않은 상태라 해도 다음 테스크를 곧바로 실행하는 방식이라 블로킹이 발생하지 않습니다. 하지만 테스크의 실행 순서가 보장되지 않는다는 단점이 있습니다. 🤔 테스크 큐가 무엇인가요? 🤓 setTimeout, setInterval와 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역입니다. 🤔 이벤트 루프가 무엇인가요?..

✔️ 이번 정독을 통해 알게 된 것 REST API가 무엇인가요? 🤔 REST API가 무엇인가요? 🤓 REST를 기반으로 서비스 API를 구현한 것을 의미하는데, 여기서 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐를 의미합니다. ✔️ REST의 의미 (REpresentational State Transfer) REST = HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이다. RESTfull = REST의 기본 원칙을 성실히 지킨 서비스 디자인을 'RESTfull'이라고 표현한다. REST API = REST를 기반으로 서비스 API를 구현한 것을 의미한다. ✔️ REST API의 구성 자원 resource, 행위 verb, ..