본문 바로가기

전체 글

 (179)
[인프런x코드캠프] 훈훈한 Javascript_13日 이번 시간에는 외부 API를 활용하는 강의를 들었다. 사용자의 위치에 따른 날씨 정보를 가져오려고 한다. 그러기 위해서는 사용자 위치에 먼저 접근해야한다. https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API Geolocation API - Web API | MDN Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 developer.mozilla.org 사용자의 위도, 경도는 위 사이트에서 얻어올 수 있다. 그리고 이 정보를 가지고 아래 사이트에서 제공하는 open API를 통해서 날씨 정보를 ..
[인프런x코드캠프] 훈훈한 Javascript_12日 저번 시간에 이어서 이번 시간에는 객체 형태의 데이터를 로컬스토리지에 저장하는 기능을 구현했다. 그 과정에서 호이스팅에 대한 개념도 익힐 수 있었다. 먼저, localstorage에는 string 형태의 값만 저장할 수 있기 때문에 JSON으로 받아온 객체를 스트링 형태로 줘야 한다. saveItems.length === 0 ? localStorage.removeItem("saved-items") : localStorage.setItem("saved-items", JSON.stringify(saveItems)); saveItems라는 배열이 길이가 0이라면 localStorage에서 "saved-items" 라는 키를 가진 값을 지운다. 0이 아니라면, "saved-items"라는 키로 저장하는데 JSO..
HTTP의 주요 메소드에는 뭐가 있을까요!? HTTP의 주요 메소드에는 5가지 종류가 있다. GET POST PUT PATCH DELETE GET 리소스 조회 서버에 전달하고 싶은 데이터는 query를 통해서 전달 POST 요청 데이터 처리 메세지 바디를 통해 서버로 요청 데이터 전달 서버는 요청 데이터를 처리 주로 신규 리소스 등록, 프로세스 처리에 사용 리소스 URI에 POST요청이 오면 요청 데이터를 어떻게 처리할 지 리소스마다 따로 정해야 함 → 정해진 것이 없음 PUT 리소스를 대체 리소스가 있으면 대체 리소스가 없으면 생성 클라이언트가 리소스를 식별 (아래 예시에서 Collection, Store 내용 참고) 클라이언트가 리소스 위치를 알고 URI 지정 POST와의 차이점 ! PATCH 리소스 부분 변경 DELETE 리소스 제거 HTTP..
[인프런x코드캠프] 훈훈한 Javascript_11日 오늘은 등록한 todoList를 더블클릭 시 취소되는 기능, 전체 삭제 기능을 구현했다. 또, 개발자 도구의 디버거를 통해서 scope의 의미와 실제로 js가 어떤 순서로 실행되는지, for문이 어떻게 돌아가는 지에 대해서 직접 확인해봤다. 1. 더블클릭 시, 태그 삭제 newLi.addEventListner("dblclick", () => { newLi.remove(); } newLi로 지정한 태그를 더블클릭("dblclick") 하면은 remove() 함수가 실행돼서 newLi태그가 삭제된다. 이 기능을 통해서 해당 todo를 더블클릭 시 삭제하는 기능을 구현했다. 2. 전체 삭제 const deleteAll = function() { const liList = document.querySelectA..
HTTP의 특징 : Stateless와 connectionless를 살펴보자 무상태 프로토콜(Stateless) stateful : 서버가 클라이언트의 이전 상태를 보존 (상태 유지) (ex. 다른 점원으로 바뀌면 에러 발생) stateless : 서버가 클라이언트의 이전 상태를 보존하지 않음 (무상태) (ex. 다른 점원으로 바뀌어도 상관 없음 → 클라이언트가 서버에 필요한 데이터를 다 넘겨줌) 갑자기 고객이 증가해도 점원을 대거 투입 가능 → 갑자기 클라이언트 요청이 증가해도 서버를 대거 투입 가능 무상태는 응답 서버를 쉽게 바꿀 수 있음 → 무한한 서버 증설 가능! 한계 로그인 상태를 서버에 유지 상황 → 쿠키, 세션을 사용해서 상태 유지 상태 유지는 최소한만 사용 비 연결성(connectionless) 서버는 연결 유지X, 최소한의 자원 사용 HTTP는 기본이 연결을 유지..
웹 브라우저 요청 흐름을 따라가보자 https://jootang2.tistory.com/135 구글 URL을 해석해보자! (https://www.google.com:443/search?q=hello&hl=ko) 실제 구글 URL을 파헤쳐보면서 주소에 어떤 정보들이 담겨져 있는지 알아보자! 준비물 : https://www.google.com:443/search?q=hello&hl=ko URL의 구조 : scheme://[userinfo@]host[:port][/path][?query][#fragment] 준비물의 구 jootang2.tistory.com 이전 게시글에서 URL의 구조를 통해 의미를 알아봤다. 오늘은 이런 URL이 들어오면 웹 브라우저에서는 어떤 순서대로 처리하는 지에 대해서 알아보자! https://www.google.com..
구글 URL을 해석해보자! (https://www.google.com:443/search?q=hello&hl=ko) 실제 구글 URL을 파헤쳐보면서 주소에 어떤 정보들이 담겨져 있는지 알아보자! 준비물 : https://www.google.com:443/search?q=hello&hl=ko URL의 구조 : scheme://[userinfo@]host[:port][/path][?query][#fragment] 준비물의 구조: https://www.google.com:443/search?q=hello&hl=ko 1. scheme 주로 프로토콜 사용 프로토콜 : 어떤 방식으로 자원에 접근할 것인가 하는 약속 (ex. http, https, ftp...) 2. userinfo URL에 사용자 정보를 포함해서 인증 거의 사용하지 않는다. 3. host a. 포트(port) b. 접속 포트 c. 일반적으로 생략 (http는 8..
[인프런x코드캠프] 훈훈한 Javascript_10日 오늘은 onkeydown함수를 통해 입력할 때마다 어떤 변화가 일어나게 하게 만들었다. keycode를 통해서 Enter를 누를때마다 html ul태그 안에 li태그와 span태그를 추가할 수 있게 했다. window의 event를 통해서 keyCode를 가져올 수 있다. if(window.event.keyCode === 13 ) { createTodo(); } appendChild함수를 통해서 ul 태그 내부에 원하는 태그를 추가했다. 아주 기본적인 todo-list형태를 만들었다! 내일은 버튼을 눌렀을 때 내부 태그들을 삭제하는 기능을 구현해 볼 계획이다. 설날에 아주 푹 쉬고와서 컨디션이 좋다. 새복많~~

티스토리툴바