Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- vuex map
- netlify redirect
- SCSS forward
- Vue
- postcss
- 폼 입력 바인딩
- 리스트 렌더링
- SCSS extend
- flex
- nextjs사용법
- 고양이 사진 검색기
- react next
- intersection opserver
- 프로그래머스 데브코스 프론트엔드
- vue 이벤트 수신
- SCSS import
- Spacer
- git 같은계정 다른 컴퓨터
- 프로그래머스 K_Digital Training
- 쌓임맥락
- 프로그래머스 프론트엔드 데브코스
- 프로그래머스 데브코스
- 다른컴퓨터에서 git사용
- KDT 프로그래머스
- 리액트
- KDT 프로그래머스 데브코스 프론트엔드
- SCSS use
- vue 지역 컴포넌트
- vue mixin
- 이벤트 수식어
Archives
- Today
- Total
혼자 적어보는 노트
[Node.js] export / export default / import 본문
한 파일에 코드가 길어지면 가독성은 물론 코드관리에 어려움이 있다.
필수적으로 파일을 나누어 주어야 하는데,
export와 import를 이용하여 다른 파일에 저장해 둔 변수나 함수나 자료형을 불러올 수 있다.
예를들어 한 개의 파일에 변수가 하나 있다,
한 개의 변수를 다른 곳에서 쓰고 싶다면?
- export default
const foodDate = ["orange", "meal", "jelly"]
export default foodDate;
해당 파일에 변수 선언과 하단에 export default [변수명] 을 해주면
다른 파일에서 import하여 사용할 수 있다.
export default ["orange", "meal", "jelly"]
* 이렇게 변수명 없이 직접 array를 보낼 수도 있다.
- export default -> import
import somthing from "./food" // import 변수명아무거나 from "경로"
해당 변수를 불러와서 사용 할 때는 위와 같이 import를 해주면 되는데
default로는 변수를 하나만 보낼 수 있다.
그리고 하나만 보내기 때문에 변수명을 아무거나 지정해도 된다. (해당 파일엔 export 한 것이 한 개 이기 때문!)
export default는 한 개의 변수만을 export해 줄 수 있는데,
여러개의 변수를 export하고 싶다면?
- export
const name = 'Jay";
const age = 28;
export { name, age }
export const name = "Jay";
export const age = 28;
위와 같이 export { 변수명, 변수명 } 을 사용하여 보내거나
export 변수명을 사용하여 직접적으로 선언해 줄 수도 있다.
- export -> import
import { name, age } from "./food" // import 정해놓은 변수명 from "경로"
default하지 않은 변수명은 import 할 때 지정해놓은 변수명을 사용해야한다.
name, age로 지정해서 export했다면 import를 할 때도 해당 변수명을 불러와야 한다.
'기타' 카테고리의 다른 글
터미널 기본 명령어 - windows / mac OS (0) | 2021.12.19 |
---|---|
git 바로 직전 커밋 삭제 / git reset asks more? (0) | 2021.12.16 |
[VScode] Prettier 적용 방법 / 적용 안될 때 (0) | 2021.11.25 |
정렬 알고리즘 (삽입/선택/버블) / javascript (0) | 2021.11.09 |
Web에서 카카오톡 공유 버튼 구현 (0) | 2021.10.13 |
Comments