320x100 front-end/JavaScript10 [API]open API 사이트모음 1. GIPHY Devlopers -gif를 이용해 재미있는 어플리케이션을 만들어보고 싶다면. https://developers.giphy.com/ GIPHY Developers The GIPHY Developer Portal is how you integrate the world's best GIF API into your business, app or project. developers.giphy.com 2. 요리관련 https://www.edamam.com/ Edamam – Food Database API, Nutrition API and Recipe API www.edamam.com 3. 밈 제너레이터 http://apimeme.com/?ref=apilist.fun APIMeme - Meme Ge.. 2022. 4. 7. [JS]08-async 동기와 비동기 (callback, promise, async, await) JavaScript is synchronous. 자바스크립튼 동기적이다. -호이스팅이 된 이후부터 코드가 위에서부터 하나하나씩 동기적으로 실행된다 (호이스팅: var, 함수선언들이 제일 위로 올라가는것) console.log('1'); console.log('2'); console.log('3'); // 1-2-3 차례로 실행 console.log('1'); setTimeout(() => console.log('2');, 1000);//1초뒤에 실행하라는 명령을 내림 console.log('3' ); // 1-3-2 순서로 나옴 callback synchronous callback (동기 콜백) function printImmediately(print){ print(); } printImmediately.. 2022. 3. 8. [JS]07-JSON(stringify, parse) JSON - JavaScrips Object Notation 자바스크립트 객체표기법 (단순 데이터 표기방법이다.) 1. Object to JSON (오브젝트를 제이슨으로 변환하는 방법) JSON.stringify(obj) const rabbit = { name: 'tori', color: 'white', size: null, birthDate: new Date(), //아래와 같은 심볼이나 함수등 자바스크립트에만 있는 데이터들은 포함되지 않는다. symbol: Symbol('id'), jump:() => { console.log(`${name} can jump!`); }, }; json = JSON.stringify(rabbit); console.log(json); //원하는 목록 생성가능 json = .. 2022. 3. 2. [JS]06-Array 배열 1. 선언하는 방법 const arr1 = new Array(); const arr2 = [1, 2]; // 좀더 흔하게 쓰이는 방법 2. Index positon const fruits = ['apple','banana']; console.log (fruits); console.log (fruits.length); //2 console.log (fruits['0']); //apple이 출력됨 console.log (fruits[fruits.length -1]); //마지막 데이터 접근 3. Looping over an array //for for(let i = 0 ; i console.log(fruit)); 4. Addition, deletion, copy push / pop //push: 배열끝에 아.. 2022. 2. 26. [JS]05-object(for..in, for..of 등) Object - object = {key : value}; 1. Literals and properties -Object literal: {}를 이용해서 만드는 방법 const obj1 = {}; -object constructor: class를 이용하여 new라는 키워드를 이용한 방법 const obj2 =new Object(); function print(person){ console.log(person.name); console.log(person.age); } const tom = { name: 'Tom' , age: 20}; print(tom); //dynamically typed language라 properties를 나중에 추가 가능함 tom.hasJob = true; //추가 console.. 2022. 2. 25. [JS]04-Class(클래스 만들기, 게터와 세터, static 등) class -template -declare once -no data in 연관있는 데이터들을 한데 묶어놓은 컨테이너같은 역활 붕어빵틀같음 청사진이라고 불리고 템플릿이라고도 불림 class Person{ //속성 fields name; age; //행동 method speak(); } Object -instance of a class -created many times -data in 붕어빵같음 1. Class declarations 첫번째: 클래스를 만들어준다.(템플릿 같은 역할. 데이터x) class Person{ //constructor:생성자를 이용해서 나중에 오브젝트를 만들때 필요한 데이터를 전달함 constructor(name, age){ //fields: 전달된 데이터를 바로 할당해줌 thi.. 2022. 2. 25. [JS]03-function(함수, parameters (변수), 콜백 함수, 화살표함수/first class fn 등) Function -기본적인 빌딩블럭. (fundamental building block in the program) -subprogram 이라고도 불리며 여러번 재사용이 가능함 - 한가지의 task 나 값을 계산하기위해 쓰여짐 1. Function 선언하기 function name(param1, param2){ body... return; } -하나의 함수는 한가지 일만 하도록 만들어야함 -함수의 이름을 작성할땐 동사형태로 지정하기. e.g. createCardAndPoint -> createCard, creatPoint 처럼 세분화 하는게 함수를 깨끗하게 만들 수 있다. -js에서 function은 object 이다. 그렇기 때문에 함수를 변수에다 할당할 수 있고 파라미터로 전달이 되고 함수를 리턴할 .. 2022. 2. 24. [JS] 02-operator (연산, 반복문, for, while, swich 등) 1. String concatenation (문자 연결) 문자열 + 문자열 console.log('my'+'cat'); -> my cat 문자열 + 숫자형 console.log('1'+2) -> 12 백틱을 이용한 스트링형 `${값}` console.log(`string literals : 1+2 = ${1+2}`); -> string literals : 1+2 =3 2. Numeric operators (숫자 연산자) console.log(1 + 1); console.log(1 - 1); console.log(1 / 1); console.log(1 * 1); console.log(1 % 1); -> 나누고 나머지값 console.log(2 ** 3); -> 2의 3승 3. Increment and de.. 2022. 2. 23. [JS ]01-variable (var와 let차이, const, primitive 타입 등) 1. Use strict 'use strict'; js 최상단에 적기. 타입스크립트를 사용한땐 안써도 되지만 바닐라 자바스크립트를 사용할땐 적는것이 좋다. js의 flexible한 요소들을 막아준다.(선언되지 않은 함수의 값을 할당한다던지 기존의 존재하던 프로트타입을 변경한다던지 이런 비상식적인 것들을 막아주기 위함.) 2. variable(읽고 쓰기 가능) -var 와 let var는 절대 쓰지 말것! 이유1: 호이스팅문제 때문. (호이스팅: 선언을 최상단으로 끌어올리는것) 이유2: has no block scope. 블럭스코프 밖에서도 호출이되는 문제가 있음 그래서 나온게 let let은 Mutable 타입 (변화가능) * block scope란?: {}로 감싸는것. {}안에 코드작성시 안에서만 유.. 2022. 2. 23. [JS] html에서 script를 읽는 다양한 방식 (async와 defer) 1. 아무것도 안한 상태의 script 읽는 방식 js가 실행되는 과정 (1) parsing html (한줄한줄 읽다가) (2) [blocked] -script부분을 만나면 parsing html을 잠시멈추고, -fetching js (서버에서 다운받는일)를 한뒤 -executing js (실행)한다. (3) 다시 parsing html 문제점 : js파일이 크거나 인터넷이 느리면 사용자가 웹사이트를 보는데까지 많은시간이 걸림 2. body안 끝단에 script를 추가하는 방식 js가 실행되는 과정 (1) parsing html (2) fetching js (3) exeuting js 문제점: html을 끝까지 읽은 뒤 js 다운 및 실행되기 때문에 사용자가 html의 컨텐츠를 빨리 보는 장점은 있지만 .. 2022. 2. 23. 이전 1 다음 320x100
