홍장군의 기록

0. 오늘의 배울 것. promise 객체가 비동기 실행을 하게 해주는 객체임을 배웠다. 오늘은 좀 더 심화 내용을 배워보자. 왜 promise 객체가 필요한지, promise 객체를 직접 만들어볼 수는 없는지 등!! 1. promise 객체는 왜 있는 걸까? fetch 함수에 그냥 바로 콜백 함수를 인자로 주면 안되는 걸까? 함수에 콜백을 직접 넣는 방식은 콜백 헬 callback hell이라는 문제를 일으킬 수 있다. 지옥의 피라미드라고도 불리는 콜백 헬은 코드 가독성이 겁나 떨어지는 현상을 말한다. promise 객체를 활용하면 가독성이 좋아지고 여러 비동기 작업을 순차적으로 처리하면서 callback hell 문제를 해결할 수 있다 뿐만 아니라 promise 객체에는 비동기 작업에 관한 세밀한 개..

0. 오늘의 배울 것. 코드가 실행되는 방식에는 비동기 실행과 동기 실행으로 나뉜다. 일반적으론 동기 실행이지만, fetch 함수 같은 건 비동기적으로 실행된다. 이번 시간에는 비동기 실행이 무엇인지 알아보고!! 그다음 fetch 함수가 리턴하는 promise 객체가 무엇인지, fetch함수의 원리는 무엇인지 더 자세히 알아볼 예정이다. 1. 비동기 실행이 무엇인가? 웹 통신은 비동기적으로 실행된다. 즉, 순차적으로 실행되는 게 아니라 console에서 작동하는 와중에 request와 response가 와리가리 병렬적으로 지들끼리 통신하는 것이다. // 1번 실행 console.log("start"); // 리스폰스 받아야 실행되므로 기다림... 그 와중에 밑에 console end가 먼저 실행되고, 그..

0. 오늘의 배울 것. 서버에게 리퀘스트를 보낼 때, '데이터를 보고 싶어요' 라든가, '이 데이터를 저장해주세요', '이 데이터를 수정해주세요' 등의 요청을 할 수 있다. 즉, 서버에게 request를 보낼 때 내가 원하는 동작을 하도록 method를 지정해서 같이 보내면 되는데, 어떻게 하는지 알아보자. 참고로 fetch 함수를 쓰면 json데이터를 js 객체로 변환하는 과정이 따로 필요하지만, axios 객체를 쓰면 그런 과정이 필요하지 않다. 실무에선 보통 axios를 많이 쓴다고는 하지만, 간단한 웹 통신에서는 fetch도 쓰이긴 하니 fetch 기준으로 알아보자. 1. JSON 데이터를 객체로 변환하기. (axios 에서는 JSON 데이터를 따로 변환..

0. 오늘의 배울 것 RESTful API, REST API는 REST를 기반으로 만들어진 API이다!! API란 application programming interface의 줄임말로, 프로그램들 간의 상호 소통을 돕는 인터페이스, 매개체이다. 쉽게 말하자면 한 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 의사소통 방법이다. (여기서 프로그램이란 운영체제, 데이터베이스, 응용 프로그램 등등을 일컫는다.) 비유를 하자면, 손님이 음식을 주문하는데 종업원이 주문을 받아 요리사에게 요청을 전달하는 과정이 있다고 하자. 그리고 요리사가 만든 음식을, 종업원이 손님에게 전달하는 과정도 있다. 손님: 프로그램 A 손님이 음식을 주문: 손님(프로그램 A)가 원하는 데이터를 request 함. 종업원: A..

0. 오늘의 배울 것. 우리가 서버에게 보내는 요청을 request, 서버가 우리에게 보내는 응답을 response라고 한다. 웹에서 로그인도 하고, 지금처럼 블로그 글을 포스팅하기도 하고, 서로 댓글 달면서 다른 유저들과 대화도 해보는 이 모든 것들은 서버와의 통신이 가능하니까 이루어지는 것이다. 즉, 웹 개발에 있어서 웹을 아는 건 당연히, 너무나도 필수!! 이번에는 간단하게 웹과 api 기초 상식을 알아보자. 1. 웹이란? www 웹이란 world wide web 의 줄임말로, 전세계 연결망을 뜻한다. 이 웹페이지 않에 적혀있는 텍스트를 하이퍼 텍스트라 한다. 하이퍼 텍스트: 다른 텍스트에 대한 참조를 가지고 있는 텍스트. html은 이 하이퍼텍스트를 마크업하는 언어이다! 2. url 이란? url..

for in 문을 배열에서 쓰면 안되는 이유. 필자는 보통 배열의 인덱스를 가지고 활용할 때 for in문을 쓰지만, for in 은 정확히 말하자면 해당 객체의 '프로퍼티 속성' 을 가져온다. js에서는 배열의 인덱스를 자동으로 프로퍼티 네임이라 인식하기 때문에 for in을 배열에 활용하면 인덱스가 나오는 것이다. 근데 사실 for in을 배열에 활용하면 여러 문제가 생길 수 있다. 아래 코드를 보자. // 어떻게 출력될까? const arr = ["a","b","c","d"]; for (let i in arr){ console.log(i); } 배열의 인덱스 값을 출력하니 0 1 2 3 4가 출력될거라 예상하겠지만, 사실 이렇게 출력된다. (띠용...) 왜냐하면, for in문은 대상..

0. 오늘의 배울 것 js의 짜투리 문법들을 알아볼 것이다. 간단하게 구조분해와 try catch 문을 살펴보자. 1. 문장과 표현식 js 코드는 문장과 표현식으로 구성되어있다!! 어떤 게 문장이고 뭐가 표현식인지 이해하면, 나중에 문법을 확장해서 배울 떄 도움이 되니 알아두자. 문장: statements. 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리. let x; // 문장 1 x = 3; // 문장 2 표현식: expression. 1줄이든 여러 줄이든 결과적으로 하나의 값이 되는 모든 코드. const title = "JavaScript"; // 표현식 1 const codeit = { name: "Codeit", }; // 표현식 2. 문장은 표현식인 문장과 표현식이 아닌 문장으로 나뉘는데..

0. 오늘의 배울 것. 자바스크립트에서 함수를 정의내리고 사용하는 방법은 어마무시하게 다양하다!! js 자체에서 함수를 활용하는 방법도 다양하지만, 모던 자바스크립트로 새로운 함수 정의법이 추가되면서 정말 다양해졌다. 이를 잘 알고 적재적소에 사용하는 것이 중요하다!! 가끔 알고리즘 문제를 풀면서 다른 사람들의 풀이를 볼 때, 거기서 함수 정의한 방식 자체가 생소해서 코드를 이해 못했던 적이 있다. 이번 기회에 함수 정의법을 잘 공부해두고, 남의 코드를 해석하는 능력도 길러보자. 1. 함수 정의하는 방법. (1) 함수 선언식: function 키워드를 통해 일반 함수 정의하기. 가장 기본적으로 함수를 만드는 방식은, 함수 선언식을 활용하는 것이다. 아래 코드처럼 function 키워드 다음 함수 코드를 ..

0. 오늘의 배울 것. 모던 자바스크립트? ECMAScript란 js 프로그래밍 언어의 표준이다. js가 프로그래밍 언어로 정착하면서 ECMA international 이라는 국제 기구에서 js를 쓸 때의 규칙을 standard ECMA-262 라는 이름의 문서를 만들었는데, 이 문서의 내용이 ECMA script 이다. 그리고 모던 자바스크립트란 현 시점에서 여러 브라우저 내에서 사용할 수 있는 범위 내에서 최신 버전 표준을 준수하는 js를 말한다. 워낙 js가 많이 변화해온 언어다보니 ... ㅡㅡ;; 1. 새로 추가된 데이터 타입 JS의 데이터 타입 기본형: Number, String, Boolean,, Null, Undefined 와 더불어 새로 2020년에 추가된 Symbol, BigInt 타입...

0. 오늘의 배울 것 js의 꽃은 이벤트 다루기가 아닐까?! 웹 동작을 담당하는 js이니 이벤트 다루는 게 js의 꽃이지 않을까?! 하는 게 필자의 생각이다... 다양한 이벤트를 어떻게 받아 핸들링할지 알아보자. 1. 이벤트 핸들러 등록하기 이벤트를 받아 동작하는 함수를 이벤트 핸들러라고 했다. 이걸 어떻게 요소에 등록하는 걸까? DOM 태그에 접근해서 onclick 프로퍼티 활용하기. html 태그에 onclick 속성 활용하기. 근데 이렇게 태그에 직접 접근하는 건 잘 사용 안함. 아예 함수 덮어쓰기 때문에 함수 여러 개 등록하기 힘들다. 3. addEventListner 메소드 사용하기 > 제일 많이 쓰인다!! element.addEventListener(이벤트종류, 이벤트핸들러); btn.addE..