https://velog.io/@mageboy 로 이사합니다!

Network 탭의 장점 NetWork 탭을 통해 HTTP 통신 과정을 들여다 볼 수 있음 브라우저와 서버 간의 통신과정에서 어떤 문제가 있는지 알 수 있음 클라이언트 성능 개선 지점을 분석하고 찾기 위해 다양하게 활용할 수 있음 기본 네트워크 탭에 진입하면 다음과 같은 그림이 나옴 - 이름 - 상태(200이면 정상) - type: js, font, css 종류 등 - size: 불러온 파일의 사이즈 - time: 해당 파일이 로드되는 시간 - DOMContentLoaded: DOM Tree 구조를 그리는데 걸리는 시간 (밑에 505kb 리소스 옆에 나중에 뜰거임) - Load : DOM Tree 구조를 포함, 이미지까지 화면에 로드되는 시간(밑에 505kb 리소스 옆에 나중에 뜰거임) Filter 활용..

URL(Uniform Resource Locator)과 URI(Uniform Resource Identifier) 브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타냄 예를들어 https://codestates.com:443/ 에 접속하면 코드스테이츠 주소가 가리키는 서버의 기본 폴더를 뜻함. CLI에서 cd를 쓰듯이 /를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있음 file://127.0.0.1/home/jeong/ 을 크롬에 입력해보셈! URL은 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냄! URL은 scheme, hosts, url-path로 구분할 수 있음 scheme: 통신 방식(프로토콜)을 결정 일반적인 웹 브라우..

intro 클라이언트 서버가 어떤 식으로 통신하는지, 그리고 이때 등장하는 API라는 것은 무엇을 의미하는지 알아보자 클라이언트와 서버의 통신 예를들어 카페 사장이 서버이고 손님이 클라이언트라 하자. (보통은) 클라이언트가 커피를 주문해야 서버가 리소스를 전달한다. Q. 간혹 서버에서 일방적으로 클라이언트에 정보를 전달하는 적이 있는데 어떤 경우인가? 음.. 아마 공지사항 같은것? 프로토콜 프로토콜은 통신 규약, 즉 약속임. 손님이 주문할때는 지멋대로 주문할 수 없듯 주문을 하기 위해서는 꼭 지켜야 하는 약속이 있음 웹 애플리케이션 프로토콜:HTTP 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해 대화를 나눔 이때 나누는 메세지를 HTTP 메시지라고 부름. 프로토콜의..

Achievement Goals 클라이언트-서버 콘셉트를 이해할 수 있다. 클라이언트-서버 아키텍처를 이해할 수 있다. HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다. API의 개념을 이해할 수 있다. 브라우저의 작동 원리를 이해할 수 있다. 보이지 않는 곳의 통신을 이해할 수 있다. URL과 URI의 차이를 이해할 수 있다. IP 주소와 PORT에 대해 이해할 수 있다. DNS와 IP 주소의 관계를 설명할 수 있다. 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다. 보이는 곳의 통신을 이해할 수 있다. AJAX의 개념을 이해할 수 있다. SSR과 CSR의 차이를 이해할 수 있다. CORS의 개념을 이해할 수 있다. HTTP messages의 구조를 설명할 수 있다. HTTP의 동작..

✍ 오늘 공부에 대해 비동기 마지막 시간... then 어렵다 프로미스 어렵다... 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 페어활동 좋았음! 💦 부족했던 것(Lacked) : 복습안하냐! 🕯 바라는 것(Longed for) : 없음! 📄오늘의 띵언 게으름뱅이는 시간을 낭비하는 것이 아니라, 자기 자신을 낭비하는 것이다.

fecth API에 대해 네이버 사이트를 생각해보자. 예를들어 검색 창과 메일 카페등의 메뉴 부분은 고정적인 정보지만 밑의 뉴스 기사들이나 날씨등의 정보는 계속 변해야 함! 그래서 많은 웹사이트들은 해당 정보만 업데이트하기 위해 요청 API를 이용 지금은 대표적인 fetch API를 이요해 해당 정보를 원격 URL로 부터 불러오는 경우를 연습하자! fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할을 함! 이때 blocking이 발생하면 안되니까, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우자! fetch API 사용법! 다음은 원격으로 요청하고, 데이터를 받아올 수 있는 URL이 있음 최신 뉴스: https://v1.nocodeapi.com/codestates/googl..

✍ 오늘 공부에 대해 비동기 이틀 째 프로미스 콜백 async 셋 다 참 좋은 친구다 나를 공부할수 있게 만들어 주는 친구 난 참 행복하다 참~~~~참ㅁ~~ 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 문제를 어제 잘 해결하려고 한 시간 이상 고민함 💦 부족했던 것(Lacked) : 조금 더 페어와의 소통? 🕯 바라는 것(Longed for) : 내일까지 비동기 화이팅! 📄오늘의 띵언 하다보면, 하게된다

Node.js의 뜻 - 비동기 이벤트 기반 자바스크립트 런타임, 로컬 환경에서 자바스크립트를 실행할 수 있는 자바스크립트 런타임. 또한 Node.js는 브라우저에서 불가능한 몇 가지 일이 가능한데... 그 중 하나가 Node.js 모듈 사용임 Nods.js 내장 모듈을 사용하는 방법 개발자는 자신이 이해하는 범위만큼 모듈 사용가능. 예컨대, DNS에 대한 지시을 알고 있다면 DNS 모듈 사용법 문서에서 관련 메서드를 사용할 수 있음. 등등... HTML에서 에서 모듈을 사용하기 위해 불러오려면 근데 Nods.js에서 불러오려면 const fs = require('fs'); // 파일 시스템 모듈을 불러옵니다 const dns = require('dns'); // DNS 모듈을 불러옵니다 // 이제 fs...

타이머 관련 API setTimeout(callback, millisecond 천분의 일초) 일정 시간 후에 함수를 실행함. return value : 임의의 타이머 ID setTimeout(function () { console.log('1초 후 실행'); }, 1000); // 123 setInterval(callback, millisecond) 일정 시간의 간격을 가지고 함수를 반복적으로 실행 return value:임의의 타이머 ID setInterval(function () { console.log('1초마다 실행'); }, 1000); // 345 clearInterval(timerId) 반복 실행 중인 타이머를 종료 return value: 없음 const timer = setInterval..

콜백리뷰 콜백함수란 ? 다른 함수의 전달인자로 넘겨주는 함수 ! 상황에 따른 콜백 callback in action: 반복 실행하는 함수 (iterator) Ex1) 예제 [1, 2, 3].map(function(element, index) { return element * element; }); callback in action: 이벤트에 따른 함수 (이벤트 핸들러) Ex2) 예제 document.querySelector('#btn').addEventListener('click', (e) => { console.log('button clicked'); }); 콜백을 실행할때는 함수 실행을 연결하는 것이 아닌 함수 자체를 연결해야함!! Ex3) 이렇게 콜백쓰면 뚝배기 깨진다 function handleC..