24일째. 자바 스크립트 모듈, 패키지, 배열, npm
클래스 가져오기 내보내기, 패키지 사용 등.
과연 알기 쉬웠습니다!
그런데 완성된 자바스크립트를 실행하려고 하면...
클래스의 import/export가 에러가 되어 버렸습니다.
어떻게 하면 좋을까, 빨리는 몰랐기 때문에, 오늘은 이 근처에서. . .
그 중 알게 될 것입니다. 오, 좋다!
24일째
htp ///아 p다 ys. 어리석은 p. 이 m/다 y24/
모듈
파일 분할
JS 파일을 분할합니다.
수업 export,import
클래스의 정의 후에 「export default 클래스명」으로서, 다른 파일에 건네줄 수 있도록(듯이) 한다.
사용하는 파일의 선두로 「import 클래스명 from "./파일명"」이라고 써, 다른 파일의 클래스를 읽어들인다.
확장자 js는 생략하고 파일명은 ""로 옵니다.
값 export,import
문자열이나 숫자, 함수 등 어떤 값으로도 내보낼 수 있습니다.
export default 상수 이름
"import 상수 이름 from "./파일 이름""
데이터 정의 분할
이해하기 쉽다.
기본 내보내기
export default는 자동으로 "export default 값"값을 가져옵니다.
따라서 내보낼 때 값의 이름과 가져올 때 값의 이름은 달라도 괜찮습니다.
기본 내보내기는 1파일 1개의 값만 사용할 수 있다.
여러 값을 내보내는 경우 "명명된 내보내기"
명명된 내보내기
default를 작성하지 않고 이름을 {}로 묶어 내보내는 방법입니다.
가져올 값은 "import { 값 이름} from "./파일 이름""
export { 이름 1, 이름 2 } 하나의 파일에서 여러 개의 내보내기가 가능합니다.
상대 경로
사용할 수 있다.
패키지
패키지도 사용할 수 있다.import 定数名 from パッケージ名;
완성!
빨리 진행했습니다!
이것을 html에 읽어 실행해 보면 「SyntaxError: Unexpected token」이 되었습니다.
네, script.js만 읽었습니다.
index.html에 추가하세요.
<html>
<head>
<meta charset="utf-8">
<title>Javascriptの練習</title>
<script type="text/javascript" src="animal.js"></script>
<script type="text/javascript" src="dog.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="./data/dogData.js"></script>
</head>
<body>
<h1>このページは</h1>
console.log(xxxx); を使って開発ツールのコンソールに実行結果を出力しています。
</body>
</html>
정말 이것으로 좋을까. 더 스마트한 방법이 있을 것 같은데...
실행
수업 import 못해!
저것 이것 해 보았습니다만, 움직이지 않고.
일단 깁업합니다. 어떻게 하면 좋을까.
(소요시간 1시간)
배열을 조작하는 메소드
푸시
배열의 끝에 새로운 요소를 추가하는 메소드
forEach
배열내의 요소를 하나씩 꺼내, 모든 요소에 반복해 같은 처리를 실시하는 메소드characters.forEach((character)=>{ console.log(character)});
오, 깨끗이!
find
배열 중에서 조건에 맞는 처음 하나를 반환합니다.
배열의 요소가 객체이고 속성을 조건으로 설정하면 find는 객체별로 반환합니다.
const evenNumbers = numbers.find((number)=>{
return number % 2 === 0;
});
filter
배열에서 조건에 맞는 모든 요소를 반환합니다.
const evenNumbers = numbers.filter((number)=>{
return number % 2 === 0;
});
맵
배열내의 모든 요소에 처리를 실시해, 그 반환값으로부터 새로운 배열을 작성한다.
const doubledNumbers = numbers.map((number)=>{
return number*2;
});
완성!
(소요시간 30분)
npm 패키지를 개발 환경에서 사용할 수 있도록
설치
$ npm install
> [email protected] install /Users/robamimim/Documents/JavaScript/npm_sample/node_modules/fsevents
> node install
node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/robamimim/Documents/JavaScript/npm_sample/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
added 329 packages from 155 contributors and audited 3493 packages in 14.638s
found 0 vulnerabilities
사용해 본다.
$ npm run start
> [email protected] start /Users/robamimim/Documents/JavaScript/npm_sample
> babel src --out-dir dist && node dist/index.js
Successfully compiled 1 file with Babel.
これはテストメッセージです
t$ npm install --save readline-sync
+ [email protected]
added 1 package from 1 contributor and audited 3501 packages in 4.304s
found 0 vulnerabilities
할 수 있었다!
노 트러블로 깔끔하게 할 수 있었습니다!
(소요시간 30분)
Reference
이 문제에 관하여(24일째. 자바 스크립트 모듈, 패키지, 배열, npm), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/robamimim/items/318746497cac6709a6d4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<meta charset="utf-8">
<title>Javascriptの練習</title>
<script type="text/javascript" src="animal.js"></script>
<script type="text/javascript" src="dog.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="./data/dogData.js"></script>
</head>
<body>
<h1>このページは</h1>
console.log(xxxx); を使って開発ツールのコンソールに実行結果を出力しています。
</body>
</html>
const evenNumbers = numbers.find((number)=>{
return number % 2 === 0;
});
const evenNumbers = numbers.filter((number)=>{
return number % 2 === 0;
});
const doubledNumbers = numbers.map((number)=>{
return number*2;
});
설치
$ npm install
> [email protected] install /Users/robamimim/Documents/JavaScript/npm_sample/node_modules/fsevents
> node install
node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/robamimim/Documents/JavaScript/npm_sample/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
added 329 packages from 155 contributors and audited 3493 packages in 14.638s
found 0 vulnerabilities
사용해 본다.
$ npm run start
> [email protected] start /Users/robamimim/Documents/JavaScript/npm_sample
> babel src --out-dir dist && node dist/index.js
Successfully compiled 1 file with Babel.
これはテストメッセージです
t$ npm install --save readline-sync
+ [email protected]
added 1 package from 1 contributor and audited 3501 packages in 4.304s
found 0 vulnerabilities
할 수 있었다!
노 트러블로 깔끔하게 할 수 있었습니다!
(소요시간 30분)
Reference
이 문제에 관하여(24일째. 자바 스크립트 모듈, 패키지, 배열, npm), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/robamimim/items/318746497cac6709a6d4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
