공부 정리 공부 정리

JavaScript/JavaScript

• 비동기 - API 비동기 처리 연습

  JavaScript/JavaScript 2021. 8. 5. 22:50

  비동기 - API 비동기 처리 연습 function fetchMovies(title) { // 대기(pending): 이행하거나 거부되지 않은 초기 상태. const OMDB_API_KEY = 'abcdefg123' return new Promise(async (resolve, reject) => { try { const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEY}&s=${title}`) // 이행(fulfilled): 연산이 성공적으로 완료됨. resolve(res) } catch (error) { console.log(error.message) // 거부(rejected): 연산이 실패함. reject('ITBlue?!') } ..

  Read More
• 비동기 - 예외 처리

  JavaScript/JavaScript 2021. 8. 3. 14:49

  비동기 - 예외처리 (then, catch, finally) then - 작업이 성공적으로 완료되면 Promise.resolve() 메소드를 통해 결과 값으로 이행하는 Promise 객체를 반환 - 실행 순서를 보장 - 콜백 지옥과 패턴이 동일해서 권장하지 않음 - async & await 패턴을 사용하기 어려운 환경일때 대체해서 사용 - 비동기 패턴을 대신해서 사용 function a() { return new Promise((resolve) => { setTimeout(() => { console.log('A') resolve() }, 1000) }) } function test() { a().then(() => { console.log('B') }) } test() /* 실행순서 */ A B cat..

  Read More
• 비동기 - 콜백과 프로미스 객체의 이해

  JavaScript/JavaScript 2021. 8. 3. 11:06

  동기 동기 방식 (Synchronous) - 코드를 작성한 순서대로 동작하는 것 function a() { console.log('A') } function b() { console.log('B') } a() b() /* 실행 결과 */ A B 비동기 방식 (Asynchronous) - 특정 코드의 연산이 끝날 때까지 기다리지 않고, 그동안 다른 코드를 실행 - 실행 순서가 보장되지 않는다 - 비동기 처리의 방식은 setTimeOut, callback, promise 등이 있다 비동기 - 콜백과 프로미스 객체의 이해 콜백 함수 (callback) - 특정 함수에 매개변수로 전달되는 함수 (데이터처럼 사용되는 함수) - 실행 순서를 보장 - 콜백이 많아지면 관리하기가 불편해진다 (콜백 지옥) functio..

  Read More
• JS 자세히 알아보기 (영화 포스터 출력하기)

  JavaScript/JavaScript 2021. 6. 9. 02:46

  Query String 주소?속성=값&속성=값 Axios 브라우저 및 node.js 용 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 영화 포스터 출력하기 Hello World! import axios from 'axios' // omdbapi 활용 function fetchMovies() { axios .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen') .then(res => { console.log(res) const h1El = document.querySelector('h1') const imgEl = document.querySelector('img') h1El.textContent = res.data.Search[0].Tit..

  Read More
• JS 자세히 알아보기 (Storage)

  JavaScript/JavaScript 2021. 6. 9. 00:15

  Storage localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage 의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.) 출저 - MDN https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage const user = { name: 'Yoo', age..

  Read More
• JS 자세히 알아보기 (JSON)

  JavaScript/JavaScript 2021. 6. 8. 23:54

  JSON JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다. 출저 - 위키백과 https://ko.wikipedia.org..

  Read More
• JS 자세히 알아보기 (lodash)

  JavaScript/JavaScript 2021. 6. 7. 00:41

  lodash import _ from 'lodash' // From `node_modules`! const usersA = [ { userId: '1', name: 'Yoo' }, { userId: '2', name: 'Lee' } ] const usersB = [ { userId: '1', name: 'Yoo' }, { userId: '3', name: 'Kim' } ] // 배열을 병합 const usersC = usersA.concat(usersB) // 0: {userId: "1", name: "Yoo"} // 1: {userId: "2", name: "Lee"} // 2: {userId: "1", name: "Yoo"} // 3: {userId: "3", name: "Kim"} console.l..

  Read More
• JS 자세히 알아보기 (가져오기, 내보내기)

  JavaScript/JavaScript 2021. 6. 7. 00:20

  가져오기, 내보내기 // getType.js // 기본 통로로 빠져나가기 때문에 함수명이 없어도 된다 // 한개의 데이터만 내보낼 수 있다 export default function (data) { return Object.prototype.toString.call(data).slice(8, -1) } // getRandom.js // 이름이 필요한 통로를 지정 // 이름만 지정되어 있으면 몇개를 내보내도 상관이 없다 export function random () { return Math.floor(Math.random() * 10) } export const user = { name: 'Yoo', age: 35 } // main.js import _ from 'lodash' // From `node_m..

  Read More