티스토리

매일 한줄 코딩

검색하기

블로그 홈

매일 한줄 코딩

ship-jh.tistory.com/m

ShipJH 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

15. javascript fetch 를 활용해 api 호출해보기 6. API & fetch open API를 활용한다. ( jsonplaceholder ) api 호출. let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) => console.log(res) ); // Promise 리턴이기 때문에, 비동기처리 가능 / then 사용 가능. // fetch는 API의 내용 전체를 리턴함. /* Response {type: "cors", url: "https://jsonplaceholder.typicode.com/posts", redirected: false, status: 200, ok: true…} type: "cors" url: "https://jsonplaceholder.typ.. 공감수 0 댓글수 0 2022. 9. 11.
14. javascript async & await ( 직관적인 비 동기 처리 ) 1. async function hello() { return "shipjh Hi~"; } **async** function helloAsync() { return "Hi async"; } console.log(hello()); //shipjh Hi~ console.log(helloAsync()); // Promise {} 반환 async 를 붙인 함수는 Promise를 반환했다. 그렇다면.. then 을 쓸수있다. async function helloAsync() { return "Hi async"; // resolve의 효과 } helloAsync().then((res) => { console.log(res); // Hi async }); 💡async 를 사용한 함수는 Promise 를 반환한다.! .. 공감수 0 댓글수 0 2022. 9. 11.
13. javascript Promise 4. Promise 1. 콜백지옥2. 비동기 작업이 가지는 상태 3가지3. Promise 사용4. 기존 코드 콜백지옥에서 Promise 이용하여 벗어나기 1. 콜백지옥비동기방식의 콜백이 깊어지는 것 ⇒ 콜백지옥자바스크립트의 비동기를 돕는것 ⇒ Promise 아래처럼 콜백 지옥에 빠질 수 있다.//콜백에 콜백에 콜백... taskA(4, 5, (a_res) => { console.log("A result ", a_res); taskB(a_res, (b_res) => { console.log("B result ", b_res); taskC(b_res, (c_res) => { console.log("C result ", c_res); }); }); }); //... 2. 비동기 작업이 가지는 상태 3가지Pen.. 공감수 0 댓글수 0 2022. 9. 11.
12. javascript 동기 / 비동기 3. 동기 / 비동기 동기와 비동기 코드1. 동기2. 비동기2-1. 비동기 콜백지정JS Engine1. 동기방식에서 Call Stack2. 비동기 방식에서 Call Stack 동기와 비동기 코드자바스크립크는 싱글스레드로 동작한다. (동기 혹은 블로킹방식)동기적 작업을 극복하기위해 비동기(논블로킹방식)방식을 사용한다. 1. 동기function taskA() { console.log("A 작업 끝"); } taskA(); console.log("끝"); //taskA() 가 끝나야 실행. /* A 작업 끝 끝 */ 2. 비동기function taskA() { setTimeout(() => { console.log("A 작업 끝"); }, 2000); // 콜백함수를 이용하여 2초뒤 } taskA(); con.. 공감수 0 댓글수 0 2022. 9. 11.
11. javascript spread 연산자 ( … ) 객체나 배열에 있는 값을 펼쳐준다. const sedanCar = { type: "sedan" }; const bmw = { type: "sedan", madeIn: "germany", name: "bmw 320d" }; const honda = { type: "sedan", madeIn: "japan", name: "CR-V" }; // type이 모두 sedan. 중복된코드... console.log(bmw); // {type: "sedan", madeIn: "germany", name: "bmw 320d"} console.log(honda); // {type: "sedan", madeIn: "japan", name: "CR-V"} spread 를 이용한다면? 객체를 펼쳐주므로 …sedanCar 를 .. 공감수 0 댓글수 0 2022. 9. 11.
10. javascript 비 구조화 할당 1. 비 구조화 할당 1. 배열의 비 구조화 할당1-1. 스왑2. 객체의 비 구조화 할당 1. 배열의 비 구조화 할당코드로 설명한다.let arr = [1, 2, 3]; let [one, two, three] = arr; console.log(one); //1 console.log(two); //2 console.log(three); //3더 간단히let [one, two, three] = [1, 2, 3]; console.log(one); //1 console.log(two); //2 console.log(three); //3 배열의 선언하면서 default 값으로 세팅도 가능하다.let [one, two, three, four] = [1, 2, 3]; console.log(one); //1 conso.. 공감수 0 댓글수 0 2022. 9. 11.
9. javascript 배열 내장 함수 9. 배열 내장 함수 1. forEach (순회)2. map (값 새롭게 처리)3. includes (배열에 포함된지 확인)4. indexOf (배열에 포함되었다면 index 리턴)5. findIndex (조건에 해당하는 객체내 값의 index를 리턴)6. find ( 조건에 일치하는 element 통으로 가져오기 )7. filter (필터링 해서 가져오기)8. slice (배열 자르기)9. concat (배열 붙이기)10. sort (배열 정렬하기)11. join(문자열 합치기) 1. forEach (순회)let arr = [1, 2, 3, 4, 5]; // 기존 방식. for (let i = 0; i console.log(l)); 2. map (값 새롭게 처리)let arr = [1, 2, 3, 4,.. 공감수 0 댓글수 0 2022. 9. 11.
8. javascript 반복문 1. 객체을 뽑아서 반복문 돌리기. 1-1. Object.keys(Object) 를 이용한다. ( 객체의 키를 뽑는다. ) let member = { name: "배재현", age: 32, gender: "MAN" }; const memberKeys = Object.keys(member); // 키를 배열 형태로 반환해서 돌려준다. console.log(memberKeys); // ["name", "age", "gender"] for (let i = 0; i < memberKeys.length; i++) { const value = member[memberKeys[i]]; // 값을 뽑아 낼 수 있다. console.log(value); // 배재현, 32, MAN } 1-2. Object.values(.. 공감수 0 댓글수 0 2022. 9. 11.
7. javascript 배열 7. 배열 1. 선언(생성) 방식 2. 접근 방식 3. 배열 추가 4. 배열 길이 1. 선언(생성) 방식 let arr = new Array(); let arr = []; // 배열 리터럴 let arr1 = [1,2,3,4]; let arr2 = [1,"2",true,null,undefined,{},[], function(){}] // 별에 별 타입 다 들어감. 2. 접근 방식 let arr = [1,2,3,4,5]; arr[0] arr[1] arr[2] 3. 배열 추가 push 사용. 가장 마지막에 추가가 된다. let arr = [1,2,3,4,5]; arr.push(6); arr.push({name: "shipjh"}); // Object 추가. 4. 배열 길이 배열.length 를 사용한다. ❗.. 공감수 0 댓글수 0 2022. 9. 11.
6. javascript 객체 6. 객체 1. 객체 선언1-1. 선언 방식1-2. 객체 프로퍼티 접근1-3. 객체내부 프로퍼티 새로운 값 생성, 수정, 삭제1-4. 객체 내부의 함수 사용1-5. 객체 내부의 프로퍼티 확인 in1. 객체 선언1-1. 선언 방식// 객체 생성자 방식 let member = new Object(); // 객체 리터럴 방식 let member2 = {}; // key:value 의 형태 let member3 3 { key1 : "value1", key2 : "value2" //... } // 별에별 타입이 다 들어감. let member4 = { name: "배재현", age: 23, live: true, child: undefined, car: ["benz", "bmw"], getName: function.. 공감수 0 댓글수 0 2022. 9. 11.
5. javascript 콜백 함수 // 메서드 파라미터로 함수화 한다. 이 파라미터는 구현부 내부에는 함수처럼 사용이 가능하다. function checkNumber(num, **oneNumber, twoNumber, emptyNumber**) { if (num === 1) { **oneNumber**(); } else if (num === 2) { **twoNumber**(); } else { **emptyNumber**(); } } function **one**() { console.log("one!"); } function **two**() { console.log("two~"); } function **nothing**() { console.log("nothing@@@"); } //미리 만들어둔 함수 자체를 메서드 파라미터로 전달.. 공감수 0 댓글수 0 2022. 9. 11.
4. javascript 함수표현식 / 화살표 함수 4. 함수표현식 / 화살표 함수 1. 함수표현식 2. 화살표 함수 1. 함수표현식 let a = function () { return "배재현"; }; // 함수 표현식 function b() { return "shipjh"; } // 함수 선언식 함수 표현식과 선언식의 차이점. 선언식은 코드 위치에 상관없이 호출이 가능한 반면, 표현식은 표현식 작성 이전에 사용할 수 없다. console.log(b()); // shipjh 출력 // console.log(a()); // error. let a = function () { return "배재현"; }; console.log(a()); // 배재현 출력 function b() { return "shipjh"; } // 함수 선언식 2. 화살표 함수 // .. 공감수 0 댓글수 0 2022. 9. 11.
3. javascript 연산자 3. 연산자 기본적인 사칙연산을 제외하고 자바스크립트의 특징만 기술하고자 한다. 비교 연산자 ( == , === )두 값을 비교하는 연산자.let a = 1; let b = "1"; console.log( a == b ) // true (값만 비교.) console.log( a === b ) // false (값과 타입만 비교.) typeof 연산자타입이 뭔지 확인하는 연산자.let a = 1; a = "1"; // 동적타입 언어는 유연하지만, 에러를 발생하는 원인이 되기도 한다. console.log(typeof a); // string null 병합 연산자 (??)?? 를 기준으로 앞뒤 값중 하나가 undifind 거나 null일 경우 값을 대체해준다.let a; a = a ?? 10; console.. 공감수 0 댓글수 0 2022. 9. 9.
2. 자료형 ( Primitive Type, Non-Primitive Type) 2. 자료형 ( Primitive Type, Non-Primitive Type) 1. Primitive Data Type (원시 타입)2. Non-Primitive Data Type (비 원시 타입) 1. Primitive Data Type (원시 타입)하나의 고정된 저장 공간을 이용.한번에 하나의 값 만 가질 수 있음let age = 1; Number : 숫자형 타입 ( ex: 1 )그 외에도, Infinity (무한대), -Infinity (음의 무한대), NaN (수학적 연산실패) String : 문자형 타입 ( ex: “hello” )따옴표(”), 홑따움표(’), 백틱(`) 으로 표현한다.let name = "배재현"; let infomation = `저의 이름은 ${name} 입니다.` // =.. 공감수 0 댓글수 0 2022. 9. 9.
1. 변수와 상수 ( var, let, const ) 1. 변수와 상수 ( var, let, const ) 1. var 2. let 3. const 1. var 같은 변수명의 중복사용이 가능하다. ❗주의 : var a 란 값이 다른 곳에서 쓰일 수 있다. 그럼 덮어쓰기가 되는격. var a = 1; // ... 1000줄의 코드 var a = "aaa"; // 위처럼 사용이 가능하니, 사이에 가령 1000줄의 코드가 있을경우 a란 값이 이상하게 변경 될 수 있음. 2. let 같은 변수명의 중복사용이 불가하다. let a = 1; let a = "aaa"; // error. 3. const 상수이다. (변하지 않는 값) const a = 1; a = 1; // error. (read-only) const b; // error. (선언과 동시에 특정 값으로 .. 공감수 0 댓글수 0 2022. 9. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.