JavaScript 63

[Javascript] 프로미스(Promise), fetch, axios

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

FRONT/JAVASCRIPT 2022.02.08

[Javascript] 동기 처리 / 비동기 처리

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

FRONT/JAVASCRIPT 2022.02.08

[Javascript] Rest API란?

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..

FRONT/JAVASCRIPT 2022.02.08

[JS] 바닐라 자바스크립트 벽돌깨기 게임

실행 화면 기능 캔버스로 공, 패들, 벽돌 생성하기 키보드 이벤트 핸들러로 패들 이동시키기 공 이동 애니메이션 구현 벽돌과 공이 부딪혔을 때 벽돌 보이지 않게 하고 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(..

FRONT/JAVASCRIPT 2021.08.25

[Javascript] 애니메이션 구현 - requestAnimationFrame

requestAnimationFrame() 자바스크립트로 애니메이션을 구현할 때는 1초에 60프레임을 찍어내면 된다. 사람은 1초에 60개의 프레임을 볼 수 있기 때문이다. 16.6ms(1000ms/60frame)마다 프레임을 찍어내면 된다. setInterval로도 이를 구현할 수 있지만, setInterval이나 setTimeout은 프레임을 신경쓰지 않고 동작하기 때문에 애니메이션 코드를 실행하는데 16.6ms가 넘게 걸린다면 16.6ms동안 프레임을 찍어내지 못했기 때문에 화면이 끊기는 듯한 현상이 발생할 수 있다. 프레임 시작시간에 맞춰 함수가 시작되는 것이 아니라 중간쯤부터 시작해 프레임 시간을 초과해버린다. requestAnimationFrame을 사용하면 프레임 생성 시작시간에 맞춰 애니메..

FRONT/JAVASCRIPT 2021.08.15

[JS] 바닐라 자바스크립트 Meal finder (API 사용하기)

참고 - https://github.com/bradtraversy/vanillawebprojects 사용한 API 사이트 https://www.themealdb.com/ TheMealDB.com www.themealdb.com API 호출 개념 참고 https://www.daleseo.com/js-window-fetch/ [자바스크립트] fetch() 함수로 API 호출하기 Engineering Blog by Dale Seo www.daleseo.com 결과 화면 코드 API 사이트에서 Lookup full meal details by id www.themealdb.com/api/json/v1/1/lookup.php?i=52772 Lookup a single random meal www.themealdb..

FRONT/JAVASCRIPT 2021.07.25

[JS] 클릭하면 특정 위치로 화면 스크롤 하기: scrollIntoView

element.scrollIntoView(); element가 있는 위치로 스크롤 된다. element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); behavior: 기본 값은 auto. smooth하면 부드럽게 스크롤링 됨 block: 수직으로 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 start inline: 수평에서 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 nearest 예제

FRONT/JAVASCRIPT 2021.07.24

[JS] MouseEvent.clientX, MouseEvent.clientY 로 좌표 실습하기

const vertical = document.querySelector(".vertical"); const horizontal = document.querySelector(".horizontal"); const target = document.querySelector(".target"); const tag = document.querySelector(".tag"); document.addEventListener("mousemove", (event) => { const x = event.clientX; const y = event.clientY; console.log(`${x} ${y}`); // client => window 위에서 움직이는 좌표를 받음 vertical.style.left = `${x}p..

FRONT/JAVASCRIPT 2021.07.24

[JS] 바닐라 자바스크립트로 미니 가계부앱 만들기

미니 가계부앱 with vanilla javascript 바닐라 자바스크립트로 첫번째로 선택한 프로젝트는 가계부앱! 노마드코더 투두리스트 강의때 배웠던 내용들을 응용하였고 나머지는 구글링 해가며 코딩하였다. 실행 화면 (흔한 대학생의 가계부..) 기능 수입/지출, 종류, 금액, 내용 입력하면 전체 내역란에 리스트가 등록 => classList를 사용해 +버튼을 누르면 입력창이 나타남. 밑에서 위로 올라오는 css 애니메이션 사용 => 수입/지출은 라디오 버튼, 종류는 select 태그, 금액과 내용은 input태그로 각각 type은 number, text로 지정 => 지출 체크 시 금액은 입력 값이 양수든 음수든 모두 음수로 받음 => 가격이 양수인지 음수인지에 따라 빨간색, 초록색으로 색상 다르게 출력..

FRONT/JAVASCRIPT 2021.07.13