오늘도 삽질중

브라우저의 작동 원리를 이해할 수 있다. 1. 보이지 않는 곳의 통신을 이해할 수 있다. 1-1 URL과 URI의 차이를 이해할 수 있다. 1-2 IP 주소와 PORT에 대해 이해할 수 있다. 1-3 DNS와 IP 주소의 관계를 설명할 수 있다. 1-4 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다. 2. 보이는 곳의 통신을 이해할 수 있다. 2-1 AJAX의 개념을 이해할 수 있다. 2-2 SSR과 CSR의 차이를 이해할 수 있다. 2-3 CORS의 개념을 이해할 수 있다. 👊 1-1 URL과 URI 브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다. 위의 URL을 크롬 브라우저에 입력하면, 브라우저로 내 PC의 폴더와 파일을 탐색할 수 있다고 한다..

2021.10.18.월요일 - 오늘은 HTTP, URL, URI, AJAX, SSR, CSR, HTTP messages, API 등 HTTP/네트워크 기초에 대한것들을 배웠다. 대략적으로 브라우저의 작동원리에 대해 보이는곳과 보이지 않은곳을 나눠 배웠는데.. 머리가 또 지끈해진다. 오늘 배운것들은 개념위주인데 뭔가 마음에 확 와닿지가 않고 읽어도 읽어도 추상적인 느낌이다. 2021.10.19.화요일 - 오늘 배운건 REST API, HTTP API 테스트 도구Postman, 그리고 어제 배웠던 개념을 바탕으로 Postman에서 서버에 GET, POST, DELETE등의 요청을 보냈고 응답을 받는 연습을 했다. 나는 내 이름으로 된 자료를 JSON형식을 통해 POST 요청을 보냈고 조회(GET)를 해보니 ..

브라우저의 작동 원리를 이해할 수 있다 1. 보이지 않는 곳의 통신을 이해할 수 있다. 1-1 URL과 URI의 차이를 이해할 수 있다. 1-2 IP 주소와 PORT에 대해 이해할 수 있다. 1-3 DNS와 IP 주소의 관계를 설명할 수 있다. 1-4 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다. 2. 보이는 곳의 통신을 이해할 수 있다. 2-1 AJAX의 개념을 이해할 수 있다. 2-2 SSR과 CSR의 차이를 이해할 수 있다. 2-3 CORS의 개념을 이해할 수 있다. 👊 SPA를 만드는 기술 : AJAX (Asynchronous JavaScript and XML) 정의 : 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을한다. HTML, CSS , JavaScript, DOM,..

HTTP messages의 구조를 설명할 수 있다. HTTP의 동작 방식을 이해할 수 있다. HTTP requests와 responses를 구분할 수 있다. HTTP의 응답 메시지를 찾아볼 수 있다. MDN: HTTP 요청 메서드 MDN: HTTP 메시지 HTTP의 무상태성(stateless) 에 대하여: HTTP는 특정 상태를 담고 있지 않으며, 이전 요청이나 다음 요청을 기억하지 않음 MDN: HTTP 상태 코드 👊 HTTP (HyperText Transfer Protocol) HTML과 같은 문서를 전송하기 위한 Application Layer 프로토콜이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP messages 양식에 ..

클라이언트 - 서버 콘셉트를 이해할 수 있다. 클라이언트-서버 아키텍처를 이해할 수 있다. HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다. API의 개념을 이해할 수 있다. 👊 클라이언트 -서버 아키텍쳐 (Client Server Architecture) (2 Tier Architecture) 정의 : 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨것을 2-Tier 아키텍처, 다른말로는 클라이언트 - 서버 아키텍쳐 라고 부른다. 위의 그림을 잘 보면 상품 정보는 서버에서 다루고 있다. 클라이언트는 단지 상품 정보를 조회할 뿐이다. 클라이언트와 서버는 요청과 응답을 주고 받는 관계이다. 요청을 해야 응답이 오고 요청없이 응답이 오는 경우는 없다. (3 Tier Architecture) 보..

클로저함수 정의 특징 클로저가 갖는 스코프의 범위 클로저 -클로저는 함수와 함수가 선언된 환경의 조합이다. 클로저 함수 특징 1. 함수를 리턴하는 함수 // const didi = x => y => x + // 위의 코드와 동일하게 작동하는 코드이다. // 함수를 리턴하는 함수가 클로저의 형태를 만든다. const didi = function (x) { return function(y) { return x + y } } 함수를 리턴하는 함수가 클로저의 형태를 만든다. 2. 클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분됨. 클로저의 핵심은 스코프를 이용해서 변수의 접근 범위를 닫는(closure; 폐쇄)데에 있다. 따라서 함수를 리턴하는 것만큼이나 변수가 선언된 곳이 중요하다.

21.10.11 월요일 - 아..뭐한거지..?싶다. 최근에 배운 클래스, 객체지향, 자료구조.. 어려웠다. 그런데도 건방지게 복습도 안하다니. 뭔가 섹션 2 첫 단추부터 망했다는 느낌과 함께 조급함이 밀려온다ㅜ... 뭐 어쩔 수 있나.. 그냥 이거 쓰고 나서 자료 구조라도 좀 보고 자야겠다.

SPA(Single-Page Application) 개념 SPA의 장, 단점 SPA 서버로부터 완전한 새로운 페이지를 불러오는 것이 아닌, 화면 이동 시에 필요한 데이터를 html으로 전달받지 않고 (서버 사이드 렌더링x) 페이지 갱신에 필요한 데이터만 받아(필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.) 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트 SPA방식으로 만들어진 대표 서비스 장점 - 전체 페이지가 아닌 필요한 부분의 데이터만 받아서 화면을 업데이트 하면되기 때문에 사용자와 상호작용에 빠르게 반응한다. - 서버에서는 요청받은 데이터에만 넘겨주기 때문에 서버 과부하 문제가 줄어든다. - 전체 페이지를 렌더링 할 필요가 ..