목록Frontend practice (62)
초보 개발자의 일기

-API 응용 프로그램 프로그래밍 인터페이스 응용프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스이다 1. 클라이언트가 서버에 데이터 요청(request) 2. 서버가 데이터베이스에서 데이터 검색(query) 3. 데이터베이스에서 찾아서 서버에 가져옴 (query result) 4. 서버가 클라이언트에서 요청 데이터 전달(response) 이 중에서 1번과 4번 과정이 우리가 지금 배울 API 과정이다. 간단 정리! api를 호출한다 ==다른 프로그램한테 데이터를 받기 위해 말을 건다. like 웨이터에게 말을 거는 것과 같다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake R..
-async async를 함수에 붙이면 promise를 리턴하는 비동기 처리 함수가 된다. async를 붙여준 함수의 리턴값은 비동기 작업 객체 프로미스의 resovle의 결괏값이 된다. async function helloAsync() { return "hello"; } helloAsync().then((res) => { console.log(res); }) console.log(helloAsync()); setTimeout()을 이용하여 3초 이후 출력하게 코드를 작성해보면 function delay(ms) { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); }); } async function hellosAsync() ..
-spread const cookie = { base: "cookie", madeIn: "korea", name:"yummy"; }; const chocochipCookie = { ...cookie, toping: "chocochip", } ... cookie를 입력하면 cookie의 모든 변수들이 chocochipCookie에도 입력이 된다. base: "cookie", madeIn: "korea", name:"yummy"; 이 값들이 안으로 들어온다. 배열도 spread 연산자를 사용해 작성할 수 있다. const arr1 = ["a", "b", "c"]; const arr2 = ["d", "e", "f"]; const plus = [...arr1, "중간 삽입 가능", ...arr2]; plus이라..

-단락 회로 평가 피연산자 중에 뒤에 위치한 피연산자를 확인할 필요 없는 것 const getName = (person) => { const name = person && person.name; return name || "객체가 아닙니다."; }; let person = { name: "추성준" }; let name = getName(person); console.log(name); person에 추성준이라는 객체가 저장되었다. 그러므로 return name|| "객체가 아닙니다."; 에서 name이 true이므로 뒤에는 확인을 하지 않고 name을 출력한다. const getName = (person) => { const name = person && person.name; return name ||..
-Truthy 빈 중괄호 숫자 값 문자열 이 true 인식된다. 이렇게 true가 아닌데 true로 인식이 된다. -Falsy undefined null 숫자 0 -1 NaN 빈 문자열 이런것이 Falsy const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.name; }; let person = 0; const name = getName(person); console.log(name); 이렇게 코드를 작성하면 조건문에! person을 작성한 것 만으로 undefined이나 null 값 같은 것을 거를 수 있다.

const arr = [1, 2, 3, 4]; for (let i = 0; i console.log(elm)); == const arr = [1, 2, 3, 4]; arr.forEach(function (elm) { console.log(elm); }); 이것도 마찬가지로 같다 -forEach 배열의 내장 함수는 배열의 모든 것을 하나씩 순회할 수 있게 해 준다. elm에 파라미터로 전달해주면서 한개씩 출력한다. -map 원본배열의 모든 값을 순회해서 return 값을 반환해준다. const arr = [1, 2, 3, 4]; const ..

const personKeys = Object.keys(person); let person = { name: "추성준", age: 24, tall: 177 }; const personKeys = Object.keys(person); for (let i = 0; i < personKeys.length; i++) { const curKey = personKeys[i]; const curValue = person[curKey]; console.log(`${curKey}: ${curValue}`); } Object.key의 의미는 이 객체의 키들을 배열로 반환해서 돌려준다 이렇게 전체 코드를 실행해보면 객체를 배열처럼 순회를 할 수 있다. const personvalues = Object.values(perso..

let person = { key: "value", //프로퍼티 (객체 프로퍼티) key1: "value2", key2: true, key3: undefined }; 객체 리터럴 방식 객체는 비 원시자료형, 여러 가지 자료형을 가질 수 있다. key: "value", 왼쪽에 키, 오른쪽에 벨류로 구성 되면 프로퍼티 (객체 프로퍼티) 벨류에는 어떤 자료형이 와도 상관이 없다. 키는 반드시 문자열로 구성되어야 한다. ""는 사용 x console.log(person.key1); 점표 기법 console.log(person ["key3"]); 괄호 표기법 person.location = "123"; person ["gigi"] = "3333"; 이렇게 값을 객체에 추가도 가능하고 person.key="ghgh..