WEB🔨/자바스크립트 8

[JavaScript] 비동기 처리

비동기 처리의 이해 자바스크립트는 동기적(Synchronous)으로 동작하는 언어이다. 따라서 순차적으로 코드가 실행된다. 동기라는 단어는 동일한 기차길이라고 생각하면 이해하기 쉽다. (from 얄팍한 코딩사전) 우리가 집안일을 할 때, 세탁기를 돌려 놓고 다른 집안일을 하는 것(비동기)이 더 빠르게 일을 처리할 수 있는 것처럼 프로그램이 실행될 때도 비동기(Asynchronous) 처리를 해야 하는 상황이 존재할 수 있다. 예를 들어, 다음과 같은 코드는 work()함수가 종료되고 나서야 console.log('다음 작업')이 실행된다. 따라서, 만약 work() 함수가 굉장히 오래걸리는 함수라면 그동안 다른 코드들이 실행되지 못하므로 사용자가 불편을 느끼는 상황이 발생할 수 있다. 이런 경우에 wor..

[JavaScript] JS Flow - 함수 선언문과 함수 표현식

Javascript 핵심 개념 알아보기 - JS Flow - 인프런 ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다. 초급 웹 개발 프로그래밍 언어 Javascript 알고리즘 온라인 강의 핵심개념을 알아보는 www.inflearn.com 함수 선언문과 함수 표현식의 차이점 함수 선언문과 함수 표현식의 차이점은 할당을 하느냐 하지 않느냐 이다. //함수선언문 function a() { return 'a'; } //기명 함수표현식 var b = function bb() { return 'bb'; } //익명 함수표현식 //변수 c선언 //익명함수 선언 //변수 c에 익명함수를 할당 var c = function() { return 'c'; } 함수 ..

[JavaScript] JS Flow - 호이스팅(hoisting)

Javascript 핵심 개념 알아보기 - JS Flow - 인프런 ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다. 초급 웹 개발 프로그래밍 언어 Javascript 알고리즘 온라인 강의 핵심개념을 알아보는 www.inflearn.com 정의 변수 '선언'와 함수 '선언'을 끌어 올리는 것을 hoisting이라고 한다. 자바스크립트 엔진은 코드를 실행하기 전에 변수 선언과 함수 선언을 위로 끌어올린다. 그래서 아래와 같이 코드를 작성해도 오류가 발생하지 않는다. console.log(a()); console.log(b()); console.log(c()); function a() { return 'a'; } var b = function bb()..

[JavaScript] 부드럽게 올라가는 Top버튼 만드는 방법

Document dinomoon.github.io 위의 링크는 제가 예시로 만든 Top 버튼입니다. 어려워 보이시나요? 사실 아주 아주 쉽습니다. 왜냐하면 원하는 위치로 스크롤을 해주는 scrollTo라는 함수가 존재하기 때문입니다! MDN에서 한 번 보시면 금방 이해되실 거예요✅ Window.scrollTo() Window.scrollTo() scrolls to a particular set of coordinates in the document. developer.mozilla.org 그리고 Top버튼의 위치는 고정되어야 하니까 position: fixed를 사용해야합니다! 아래는 제가 직접 짠 자바스크립트 코드입니다~ 처음에는 Top버튼이 안 보이다가 스크롤을 조금 아래로 내렸을 때 Top버튼이 보..

[JavaScript] What is localStorage?

https://www.youtube.com/watch?v=JaMCxVWtW58&t=2683s 이 영상을 보고 localStorage를 처음 알게 되었다. 새로고침을 해도 내가 저장한 책의 정보가 사라지지 않는 데, localStorage에 저장되어있기 때문이다. 처음 봤을 때, 정말 신기했다.. 참고 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage 읽기 전용 localStorage속성은 사용자 로컬의 Storage객체에 접근하게 해줍니다. localStorage는 sessionStorage와 비슷합니다. 유일한 차이점은 localStorage에 저장된 데이터는 만료 기간이 없지만, sessionSto..

[JavaScript] What is JSON?

참고 JSON이란 무엇인가? JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 X... velog.io JSON: JavaScript Object Notation => 자바스크립트 객체 표기법 JSON의 특징 1. JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다. 2. 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다. JSON 문법 { "employees": [ { "na..

[JavaScript] MyBookList App with Vanila JavaScript

https://www.youtube.com/watch?v=JaMCxVWtW58&t=100s 위의 영상을 보고 정리한 내용입니다. 마크업 css는 bootstrap과 fontawesome을 사용해줍니다. MyBookList Title Author ISBN# Title Author ISBN# JavaScript 위의 영상에서는 객체 지향으로 자바스크립트 코드를 짰다. 먼저, 여러 개의 Book을 만들 수 있도록 Book class를 만든다. // Book Class: Represents a Book class Book { constructor(title, author, isbn) { this.title = title; this.author = author; this.isbn = isbn; } } 그리고 UI..

[JavaScript] 자바스크립트 기초 문법

자바스크립트란 무엇인가? 1. 자바스크립트는 C, C++과 반대로 High level의 언어이고, 컴파일언어가 아닌 인터프리터 언어이다. * High level의 언어: 기계와 멀다. (느리다.) * 인터프리터 언어: 프로그램이 실행되는 순간 한 줄씩 해석하며 실행한다. 2. JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다. * ECMAScript: javascript를 표준화하기 위해 만들어짐. * JavaScript와 ECMAScript의 차이 https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html JavaScript와 ECMAScript는 무슨 ..