Coding Story

Blob이란? Blob은 일련의 데이터를 처리하거나 간접 참조하는 객체다. Blob이란 이름은 SQL 데이터베이스에서 유래하였으며 '대형 이진 객체(Binary Large Object)를 의미한다. Blob은 대개 바이트의 크기를 알아내거나 해당 MIME 타입이 무엇인지 요청하며, 데이터를 작은 Blob으로 잘게 나누는 등의 작업에 사용된다. 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체인 것이다. JS에서 Blob(Binary Large OBject)은 주로 이미지, 오디오, 영상 등의 데이터를 다룰 때 사용한다. (꼭 미디어 관련해서만 사용하는 것이 아니라 html, plain text 등 바이너리로 표현 가능한 많은 데이터에서 쓸 수 있다.) Blob 생성 const newBlob =..

https://zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%8A%A4%ED%81%AC%EB%A1%A4_%EB%A7%A8_%EC%95%84%EB%9E%98%EB%A1%9C_%EB%82%B4%EB%A6%AC%EA%B8%B0 자바스크립트 스크롤 맨 아래로 내리기 - 제타위키 다음 문자열 포함... zetawiki.com document.body.scrollTop = document.body.scrollHeight; // 아래로 window.scrollTo(0,0); // 위로 document.body.scrollTop = 0; // 위로

프로미스란? 비동기처리를 위한 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 프로미스란 ES6에서 도입한 비동기 처리를 위한 패턴이다. 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. // Promise 객체의 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행한다. if (/* 비동기 작업 수행 성공 */) { resolve('result'); } else { /* 비동기 작업 수행 실패 */ reject('failure reason'); } }); 프로미스는 Pro..

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 동시에 2개 이상의 함수를 실행 할 수 없다는 것을 의미한다. 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 동기 처리 현재 실행 중인 테스크가 종료될 때까지 다음에 실행될 테스크가 대기하는 방식을 동기(synchronous)처리라고 한다. 장점: 실행 순서가 보장..

REST API란? API(애플리케이션 프로그래밍 인터페이스)는 애플리케이션이나 디바이스가 서로 간에 연결하여 통신할 수 있는 방법을 정의하는 규칙 세트이다. REST (Representational State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. RESTful API라고도 한다. REST API의 작동 방식 HTTP 요청 메서드 종류 목적 페이로드 GET index/retrieve 모든/특정 리소스를 조회 x POST create 리소스를 생성 ○ PUT replace 리소스의 전체를 교체 ○ PATCH modify 리소스의 일부를 수정 ○ DELETE del..

import styles from "./App.module.css"; import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [money, setMoney] = useState([]); const onChange = (event) => setMoney(event.target.value); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((jso..

노마드코더 ReactJS로 영화 웹 서비스 만들기 #7 To Do List import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); }; console..

Fetching Movies from API Axios 일반적으로 자바스크립트에서 data를 fetch하는 방식은 fetch()를 사용하는 것이지만 여기선 Axios를 사용한다. npm install axios Axios를 설치한다. API 가져오기 https://yts-proxy.now.sh/list_movies.json API를 가져올 YTS라는 사이트는 불법 토렌트 사이트라 도메인을 수시로 바꾸기 때문에 API URL 이 계속 변경된다. 그래서 니콜라스가 깃허브에 올린 YTS 사이트를 추적하는 주소를 사용한다. JSONView 라는 크롬 확장프로그램을 설치해서 보면 보기 좋게 바꿔준다. import React from "react"; import axios from "axios"; class App..

사전 준비 import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { const { isLoading } = this.state; return {isLoading ? "Loading..." : "Ready"} } } export default App; mount(생겨나는 것) 되자마자 isLoading은 기본적으로 true 값을 갖는다. 삼항연산자를 사용해 isLoading이라면 "Loading" 텍스트를, 그렇지 않을 경우에는 "Ready"를 보여준다. 여기서 처음에 render()를 할 때 호출되는 life cycle 메서드는 componentDidMount()이다. impor..

실행 화면 기능 캔버스로 공, 패들, 벽돌 생성하기 키보드 이벤트 핸들러로 패들 이동시키기 공 이동 애니메이션 구현 벽돌과 공이 부딪혔을 때 벽돌 보이지 않게 하고 score 올리기 공이 바닥과 닿았을 때 live 하나씩 줄기 live가 다 줄었을 때 게임 오버, 게임 다시 시작 코드 const rulesBtn = document.getElementById("rules-btn"); const closeBtn = document.getElementById("close-btn"); const rules = document.getElementById("rules"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext(..