본문 바로가기

분류 전체보기

 (122)
JavaScript - 비동기 실행과 promise객체 비동기 함수의 실행 순서 console.log('Strart'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => {console.log(result);}); console.log('End'); 위 코드의 실행 결과는 아래와 같다. Start End result객체 fetch가 비동기동작을 하기 때문. fetch('https://jsonplaceholder.typicode.com/users') 1. request를 보내면 어떤 객체(Promise 객체)를 리턴한다. .then((response) => response.text()) 2. 그 객체의 then메서드를 ..
JavaScript - API(response data, REST API, contnet-type 등) json json이란 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); 위 코드로 request를 보내면, html이 아닌 다른 종류의 데이터가 출력된다. 이 것이 json포맷이다. 어떤 정보를 나타낼 때에 보통 json포맷을 선택한다. JavaScript Object Notation 의 줄임말로 정보를 교환할 때 사용하기 위해서 만들어졌다. 자바스크립트 문법을 빌려서 만들어진 데이터 포맷이다. 자바스크립트로부터 비롯되었지만, 탄생목적은 언어나 환경에 종속되지 않고, 언제 어디서는 사용할 수 있는 데이터 포맷이 되는 ..
JavaScript - 웹과 통신 fetch fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); 위의 명령어를 입력했을 때 나온 결과를 브라우저가 해석해서 우리에게 예쁜 화면을 보여준다. 명령어를 입력한 것 : request = 요청 결과를 받은 것 : response = 응답 fetch메서드는 서버에 request를 보내고, response를 받는 함수이다. 서버에 request를 보내고 response를 받는 방법을 여러가지가 있지만 보편적으로 fetch를 많이 사용한다. fetch는 '보내다' 라는 의미를 가진다. 위코드를 한줄씩 해석하면 아래와 같다. fetch('https://w..
JavaScript - 모듈화 소스코드가 길어질 경우, 하나의 파일로 관리하는 것이 아니라 여러개의 파일로 분리해서 관리하는 것이 좋다. 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정을 '모듈화'라고 하고, 각각의 파일을 '모듈'이라고 한다. 모듈화를 하면 코드를 효율적으로 관리할 수 있고, 다른 프로그램에서 재사용할 수 있다는 장점이 있다. ES5이전까진 모듈화를 할 수 있는 기능이 없었다. 모듈파일의 조건 모듈파일이 가지는 독립적인 스코프 = 모듈스코프. 모듈에서 사용하는 변수나 함수는 해당 모듈에서만 사용할 수 있어야한다는 것이다. 무슨 뜻이냐면, 한 html파일에서 2개의 자바스크립트 파일을 가져오고있다고 하자. index.html에서 print.js와 draw.js 둘을 불러오고 있다. 그럼 print.js..
JavaScript - 배열 함수 및 유용한 내부 기능 foreach const animals = [‘dog’, ‘cat’, ‘rabbit’, ‘duck’]; animals.forEach((animal, i, arr) => { console.log(`${i}번에 ${animal}이 있다.`); console.log(arr); // [‘dog’, ‘cat’, ‘rabbit’, ‘duck’] }); 첫 번째 파라미터는 배열의 요소. 두번째 파라미터는 요소의 인덱스. 세번째 파라미터는 반복중인 배열 자체가 전달된다. map const animalsLevel = animals.map((animal, i) => `레벨${i}-${animal}`); foreach와 map의 차이점 foreach는리턴값이 없기때문에 변수에 담으면 항상 undefined이다. 단순한 반복..
JavaScript - 에러와 에러객체 자바스크립트는 프로그램 실행중 에러가 발생하면 프로그램을 중단하고, 에러객체를 콘솔에 찍어준다. 에러객체는 name, message 프로퍼티가 있다. 아래는 가장 흔하게 볼 수 있는 에러이다. referenceError typeError syntaxError 이 중 syntaxError는 아예 프로그램을 시작하기 전부터 에러라고 알려준다. 의도적으로 에러객체 만들어서 에러내기 1. 에러 객체 생성 const error = new TypeError(‘타입에러가 발생했다.’); console.log(error.name); console.log(error.message); 2. 에러 발생 throw error; 에러핸들링 try catch문 try{ // 코드 } catch(error){ // 에러가 발생했을..
JavaScript - 구조분해 배열을 활용한 구조분해 const rank = [‘dog’, ‘cat’, ‘bird’, ‘mouse’]; // 배열의 값을 변수에 담기 const beef = rank[0]; const salmon = rank[1]; const corn = rank[2]; const salad = rank[3]; // 구조분해 문법으로 담기 const [beef, salmon, corn, salad] = rank; console.log(beef); // dog console.log(salmon); // cat rank를 분해해서 왼쪽 배열의 값으로 집어넣은 것이다. 구조분해시, 우측값이 없거나 우측값이 배열이 아니면 에러가 발생한다. 배열의 길이가 긴 경우 const rank = [‘dog’, ‘cat’, ‘bird’,..
JavaScript - 객체의 프로퍼티 객체의 프로퍼티 모던하게 작성하기 const name = ‘콩이’; const birth = 2015; const type = ‘cat’; const kong = { name, birth, type, } 위와같이, 변수명과 프로퍼티네임이 같으면 하나만 작성해도 된다. 변수 뿐아니라, 함수도 아래와같이 한 줄만 써도 된다. function sleepOnDesk() { return `${name}(가) 책상에서 자고있다.`; } const kong = { name, birth, type, sleepOnDesk, } 위의 sleepOnDesk함수를 객체 내부에서 직접 작성할때에는 아래과 같이 작성할 수 있다. const kong = { name, birth, type, sleepOnDesk() { return..

티스토리툴바