자바스크립트는 기본적으로 동기식 처리 (Synchronous) 동기식 처리란 한번에 코드 한 줄씩 차례대로 처리한다는 뜻이다. 자바스크립트를 실행하는 웹 브라우저(런타임)는 stack이라는 코드 실행 공간이 있다. 거기서 코드를 한줄한줄 차례로 실행한다. 위 코드는 1,2,3이 한줄씩 차례대로 실행된다. 왜냐하면 자바스크립트는 synchorous 하기 때문이다. 거의 대부분의 프로그래밍 언어들은 이런 특징을 가지고 있다. 자바스크립트는 비동기처리 (asynchoronous)라는 것도 가능하다 일단 자바스크립트에서 비동기처리란? ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다. 특정 코드를 1초 후에 실행하고 싶으면 어떻게 할까? 파이썬에서 위 ..
일단 웹 브라우저 동작원리를 왜 알아야 할까? - 자바스크립트를 웹 브라우저가 실행하기 때문이다. 웹 브라우저의 동작원리를 알면 자바스크립트가 동작하는 흐름에 대해 더 잘 알게 될 것이다. 웹 브라우저란? - 서버에서 받아온 HTML CSS JS 를 실행시켜주는 프로그램이다. 브라우저가 자바스크립트를 실행하는데 일련의 과정이 있다. 브라우저는 C++ 이라는 언어로 코드가 짜여져있다. 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어 준다. console.log(1); setTimeout(() => { console.log(2)}, 1000); console.log(3); // 1 // 3 // 2 stack이란? 스택(stack)은 자료 구조 중 하나로, 데이터를..
자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이다. 쪼개놓으면 js 파일에는 js 코드만, html 파일에는 html 코드만 있어서 유지보수하기도 좋을것이다. 일단 파일을 두개 만든다. import.html, export.js 파일 두개를 만든다. (export.js) let a = 10; let b = 20; let c = 30; (import.html) 그렇다면 import.html 파일 JS 파일에서는 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면 export default 변수명 이라고 하면 된다. 그리고 그 변수를 가져다쓰고 싶다면 다른 파일에서 import 자유롭게작명 from '경로' 하면 된다. 여기서 자유롭게작명이 가능한 이유는 default라는 키워드 때문이다..
2023.03.27 - [Front end/JavaScript] - 자바스크립트 var, let, const 차이점 (1) 자바스크립트 var, let, const 차이점 (1) 변수 문법을 왜 쓰는가? - 변수는 내가 다시 사용할 데이터를 컴퓨터에게 잠시 기억시키기 위해 쓰는 문법이다. 자바스크립트 변수 쓰는 방법 var name = '강동욱'; 변수는 자료를 임시로 저장하는 dongwookit.tistory.com 위 포스팅에서 이어서 작성합니다. 자바스크립트 변수, 함수의 Hoisting 현상 자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상이 일어난다. 자바스크립트는 변수나 함수의 선언부분을 최상단으로 끌고가서 가장 먼저 해석한다. 그게 Hoisting이다. 변수 Hoisting 예..
변수 문법을 왜 쓰는가? - 변수는 내가 다시 사용할 데이터를 컴퓨터에게 잠시 기억시키기 위해 쓰는 문법이다. 자바스크립트 변수 쓰는 방법 var name = '강동욱'; 변수는 자료를 임시로 저장하는 공간이다. 1. var 키워드 오른쪽에 자유롭게 작명을하고, 변수에 저장할 자료를 등호로 넣어주면 된다. 2. 객체, 배열, 함수 등 모든 자료들을 담을 수 있다. 3. 그리고 var name 이라는 부분은 선언, name = '강동욱' 이라는 부분은 값 할당이라고 표현한다. 보통 변수를 만들 땐 두개를 동시에 사용한다. 동시에 사용하는것을 초기화라고도 한다. 4. 그리고 변수를 만들 땐 var, let, const라는 3개 키워드를 이용 가능하다. 각 키워드마다 특징이 있다. 변수의 선언, 할당, 범위에..
ES6 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했다. arrow function이라는 문법인데 이걸 사용하면 함수를 만들 수 있다. 기존 자바스크립트에서 함수를 만드는 방법 // 1. 함수 선언문 function 함수1() { // 코드~ } // 2. 함수 표현식 let 함수2 = function () { // 코드~ }; Arrow function 문법으로 함수를 만드는 방법 let 함수3 = () => { // 코드~ }; function이라는 긴 키워드 대신에 => 이런 화살표를 사용해서 함수를 만들어내는 문법이다. 기존에 함수를 만드는 방법이 있는데 왜 Arrow function이라는 문법을 쓰는걸까? Arrow function 을 쓰는 이유 1. 함수 본연의 입..
2023.03.27 - [Front end/JavaScript] - 자바스크립트 this (1) 자바스크립트 this (1) 자바스크립트의 this의 뜻은 매우 다양하다. 사용하는 환경에 따라서 4개 이상의 각각 다른뜻을 가지고 있다. 1-1. 그냥 쓰거나 일반 함수 안에서 쓰면 this는 window html 파일 아무거나 만들고 중간에 dongwookit.tistory.com 위 포스팅을 먼저 읽고 오면 좋을거 같아요! this의 3번째 뜻. constructor 안에서 쓰면 constructor로 새로 생성되는 객체를 뜻한다. 자바스크립트에서 객체를 비슷한걸 여러개 만들고 싶을 경우 객체를 복사하는게 아니라 constructor라는걸 만들어서 사용한다. 쉽게 말하자면 constructor는 객체를 ..
자바스크립트의 this의 뜻은 매우 다양하다. 사용하는 환경에 따라서 4개 이상의 각각 다른뜻을 가지고 있다. this의 1번째 뜻 1-1. 그냥 쓰거나 일반 함수 안에서 쓰면 this는 window html 파일 아무거나 만들고 중간에 이렇게 변수를 큰 공간에 만들면 x라는 변수는 window라는 큰 객체안에 자동적으로 생성된다. 함수도 마찬가지이다. 전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수이다. 1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined 'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성가능하다. strict mode에서는 var 키워드 없이 변수를 선언하거나, 변수를..
2023.03.26 - [Front end/JavaScript] - 자바스크립트 function의 파라미터 문법 왜 쓰는가? 자바스크립트 function의 파라미터 문법 왜 쓰는가? 2023.03.26 - [Front end/JavaScript] - 자바스크립트 function 문법 왜 쓰는가? 자바스크립트 function 문법 왜 쓰는가? 자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 dongwookit.tistory.com 위 포스팅에서 사용한 예제를 이어서 사용하기 때문에 위 포스팅을 보시면 이해가 더 빠를수도?! 지금까진 버튼의 onclick=" " 안에 자바스크립트 코드를 길게 짰는데 이것 도 좀 별로 같다. 자바스크립트 코드는 따로 자바스크립트..
2023.03.26 - [Front end/JavaScript] - 자바스크립트 function 문법 왜 쓰는가? 자바스크립트 function 문법 왜 쓰는가? 자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 응용도 잘하고 혼자서 코드를 잘 작성 할 수 있다. 함수는 길고 복잡한 코드를 한 단어로 축약하고 싶을 dongwookit.tistory.com 위 포스팅에서 사용한 예제를 사용하므로 참고하시면 더욱 빠른 이해가 될 것입니다! function에 사용가능한 파라미터(매개변수) 문법 함수내에 파라미터를 넣어줄 수 있다. function alert(자유롭게작명) { document.querySelector('.alert-box').style.display ..
