▼ mjs 파일더보기//calculator.mjsexport const PI = 3.14;export function add(a, b) { return a + b;}// main.mjsimport { PI, add } from './calculator.mjs';console.log(PI);console.log(add(1, 2));default export는 생각보다 간단한데그냥 단순히 export 옆에 default라고 추가만 해주면 된다. default exportdefault는 기본, 기본값을 의미하며자바스크립트에서의 default export는 조금 더 편리하게 import 할 수 있게 도와준다. calculator와 main 파일을 다음과 같이 수정해보자.//calculator.mjsexport..

모듈의 핵심 기능은 코드를 파일 단위로 나눠놓고필요할 때마다 불러와서 사용하는 것이라고 했을 때,직접 불러오기를 해보기위해 calculator.mjs 파일에 있는 것들을main.mjs 파일에서 가져와서 사용해보자.여기서 자주 사용했던 js 확장자가 아닌 mjs 확장자를 사용했는데그 이유는 모듈 문법을 사용하기 위해서는 mjs 확장자를 사용해야 하기 때문이다.하지만 모듈 문법을 사용할 수 있다는 것 외에는 전혀 차이가 없으므로일반 자바스크립트라고 봐도 된다.import , export다음과 같이 calculator 파일에 작성한 코드를 main파일로 export(내보내다) 하고자 할 때,// calculator.mjsconst PI = 3.14;function add(a, b) { return a + b..

프로젝트를 할 때 회원가입, 로그인, 결제, 글쓰기 등 이것저것 다양한 기능을 추가하다보면어느 순간 한 파일에 작성된 코드가 100줄, 많으면 1000줄이 넘어가는 경우가 생긴다. ▼ 하나의 파일에 많은 코드를 작성하게 될 경우각 코드들의 의미를 빠르게 파악하기 어려움기능 수정이 필요한 부분을 찾기 어려움그래서 많은 코드가 필요한 프로그램은 하나의 파일로 관리하는 것이 아니라다음과 같이 각 기능별로 여러개의 파일로 분리해서 관리하는 것이 좋다.이렇게 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정을모듈화(Modularization)이라고 부르며 이때 파일 하나하나를 모듈(Module) 이라고 부른다. 이처럼 하나의 프로그램을 여러 개의 파일로 모듈화 하는 방식은 다음과 같은 장점이 있다...

보호되어 있는 글입니다.

다음과 같은 객체가 있을 때 객체의 값만 콘솔에 전부 출력하기 위해서는각 객체의 프로퍼티 이름을 가지고 출력할 수 있을 것이다.const data = { name: "섭이", email: "SeopE@naver.com", address:"서울시 강서구"}console.log(data['name']);console.log(data['email']);console.log(data['address']);또한 객체에 프로퍼티가 더 늘어날 수 있기 때문에위 코드를 forEach() 메소드를 활용해서 더욱 간략하게 작성할 수 있다.const data = { name: "섭이", email: "SeopE@naver.com", address:"서울시 강서구"}const keys = ['name', 'emai..

MapMap은 이름이 있는 데이터를 저장하며 이것은 객체와 비슷하다.즉 객체 처럼 property name을 통해 이름이 있는 여러 값들을 묶을 때 활용한다는 것인데하지만 할당연산자를 통해 값을 추가하고 점 표기법이나 대괄호 표기법으로 접근하는일반 객체와 다르게 Map은 메소드를 통해서 값을 추가하거나 접근할 수 있다. new 키워드를 통해서 Map을 만들 수 있고 다음과 같은 메소드를 통해Map 안의 여러 값들을 다룰 수 있다.map.set(key, value): key를 이용해 value를 추가하는 메소드map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환..

sort 메소드sort 메소드는 배열 내에서 오름차순, 내림차순으로 요소를 정렬할 수 있으며메소드에 아무런 아규먼트도 전달하지 않을 때에는기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다. sort 메소드의 동작원리는 다음과 같다.const letters = ['D', 'C', 'E', 'B', 'A'];const numbers = [1, 10, 4, 21, 36000];letters.sort();numbers.sort();console.log(letters); // (5) ["A", "B", "C", "D", "E"]console.log(numbers); // (5) [1, 10, 21, 36000, 4]sort 메소드를 사용했지만 아규먼트를 작성하지 않아 유니코드에 정의된 문자열 순서에 따라 ..

reduce 메소드reduce 메소드의 콜백 함수는 기본적으로 다음과 같다.// reduceconst numbers = [1,2,3,4]numbers.reduce((acc, el, i, arr)=> { return nextAccvalue}, initialAccValue)첫 번째를 제외한 세 파라미터는 이 전에 배운 메소드들의 콜백 함수와 역할이 똑같다.두 번째 파라미터는 배열의 요소 전달,세 번째 파라미터는 요소의 인덱스 전달,네 번째 파라미터는 메소드를 호출한 배열을 전달 한다. reduce 메소드에서의 첫 번쨰 파라미터는 Accumulator / 누산기라고 표현하며줄여서 acc라고 작성한다.reduce의 첫 번째 파라미터는 매번 콜백 함수가 반복해서 동작할 때직전에 동작한 콜백 함수가 리턴한 값을 ..

some, every 메소드 some 메소드 - 어떠한 배열에서 조건을 만족하는 요소가 한 개 이상 있는지 확인하는 메소드every 메소드 - 모든 요소가 조건을 만족하는지를 확인하는 메소드 코드를 보면 다음과 같이 두 메소드에 똑같은 콜백 함수를 아규먼트로 사용하고 있다.// some, everyconst numbers = [1,3,5,7,9];const someReturn = numbers.some((el) => el > 5);const everyReturn = numbers.every((el) => el > 5);console.log('some:', someReturn);console.log('every:', everyReturn); 콜백 함수가 조건식을 리턴하는 부분은 filter나 find 메소..

filter와 find 메소드는 forEach와 map 메소드 처럼 배열에 요소들을 하나씩 살펴보면서 반복적인 동작을 하는 메소드이다.아래 코드는 간단하게 게임 캐릭터 정보를 담고 있는 객체들을 배열로 묶어서"BossGroup"변수를 생성하였다.const BossGroup = [ { name: "행섭", job: "비숍", type: "마법사" }, { name: "양천", job: "캐논마스터", type: "해적" }, { name: "스기따라", job: "배틀메이지", type: "마법사" }, { name: "힝카인", job: "카인", type: "궁수" }, { name: "귀여운적혈구", job: "", type: "전사" }, { name: "저섭", job: "바이퍼", t..