자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이다. 쪼개놓으면 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 ..
1. JavaScript 코드는 밑에 짜야한다. 자바스크립트는 html 조작하는 언어라고 했다. 근데 조작할 html이 위쪽에 있어야 조작이 잘 된다. 자바스크립트를 조작할 html 위에 작성하면 안된다. 왜냐하면 컴퓨터가 html 파일을 읽을 때 위에서 부터 한줄씩 차례대로 읽는데 미리 html을 읽어놔야 조작이 가능하기 때문이다. 2. 오타주의 Cannot read properties of null ~~~ 은 style 왼쪽에 작성된게 null이라 읽을 수 없다는 에러이다. ~~~ is not a function 은 함수명이 잘못되었다는 뜻이다. getElementById() 이것도 소괄호 붙는거 보니까 함수인데 여기에 오타났다는 뜻이다. 에러 메시지는 오타났다고 알려주는 고마운 메세지니까 이거 보고..
