JavaScript: JS 데이터 실습 Ep.1 (가져오기, 내보내기, Lodash, JSON)

가져오기, 내보내기

가져오기

import 키워드를 통해서 파일을 가져올 수 있다.

// main.js 

import _ from 'lodash' // From `node_modules`
import getType from './getType' // getType.js
import getRandom from './getRandom' // getRandom.js

console.log(_.camelCase('the hello world')) //theHelloWorld
console.log(getType([1, 2, 3])) // Array
console.log(getRandom(), getRandom())) // 5, 9

• from 뒤에 별도의 경로 없이 설치한 패키지의 이름만 명시하면 node_modules 폴더에서 찾아서 가져오는 것이다.

• 상대경로를 통해서 외부에서 특정한 자바스크립트 파일들을 불러와서 사용할 수 있다.

내보내기

export 키워드를 통해서 파일을 내보낼 수 있다.

// getType.js

export default function getType(data) {
	return Object.prototype.toString.call(data).slice(8, 16)
}

• Default export
  이름을 따로 지정하지 않아도 되는 기본 통로이다.
  export 키워드와 함께 default 키워드를 사용한다.

  • getType이라는 함수의 이름을 지워도 정상적으로 출력된다.

    // getType.js
          
    export default function (data) {
      return Object.prototype.toString.call(data).slice(8, 16)
    }
    

  • 불러올때 또한, 원하는 이름으로 불러와도 된다. 경로만 잘 입력하면 이름은 무엇을 하던 사용이 가능하다.

    // main.js
          
    import checkType from './getType' // getType.js
    

  • 기본 통로는 하나의 파일에서 하나의 데이터만 내보낼 수 있다.
    2개 이상의 데이터를 입력해서 사용했을 시에는 error가 발생한다.

    // getType.js
          
    export default function (data) {
      return Object.prototype.toString.call(data).slice(8, 16)
    }
    export default 123
    

    // main.js
          
    import checkType from './getType' // getType.js
          
    // Error!! 
    // Only one default export allowed per module
    

• Named export
  이름을 꼭! 지정해줘야 하는 통로이다.

  • 이름을 반드시 지정해줘야 하기 때문에 함수에 이름이 필요하다.

    // getRandom.js
          
    export function random() {
      return Math.floor(Math.random() * 10)
    }
    

  • 이름을 지정해줘야 하는 통로(named export)는 이름을 중괄호로 묶어서 불러와야 한다.

    // main.js
          
    import { random } from './getRandom' // getRandom.js
    

  • 이름 지정 통로는 이름만 지정되어 있으면 몇개든지 내보낼 수 있다.
    각 데이터에 이름이 지정되어져 있기 때문에 하나의 파일에서 여러 데이터를 보낼 수 있다.

    // getRandom.js
          
    export function random() {
      return Math.floor(Math.random() * 10)
    }
    export const user = {
      name: 'Soha',
      age: 45
    }
    

    // main.js
          
    import { random, user } from './getRandom' // getRandom.js
          
    console.log(random(), random()) // 4, 8
    console.log(user)
    // {name: 'Soha', age: 45}
    

  • 원하는 이름으로 바꿔서 사용하기
    as 키워드를 통해 원하는 이름으로 바꿔서 사용할 수 있다.
    꺼내올때는 user 이름으로 꺼내오지만 사용할 때는 soha로 사용한다.

    // main.js
          
    import { random, user as soha } from './getRandom' // getRandom.js
          
    console.log(random(), random()) // 4, 8
    console.log(soha)
    // {name: 'Soha', age: 45}
    

  • random과 user 함수(데이터)를 한번에 불러오기
    와일드카드 (Wildcard Character, *)는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킨다.

    // main.js
          
    // import { random, user as soha } from './getRandom' // getRandom.js
    import * as R './getRandom'
          
    console.log(R)
    // random: f random()
    // user: {name: 'Soha', age: 45} ... 
    

• default export와 named export 둘다 사용
  하나의 자바스크립트 파일에서 default export와 named export 둘 다 사용이 가능하다.
  와일드카드를 사용하여 모든 데이터들을 내보내는 방식을 통해서 두 통로가 한 파일에서 존재하여 사용할 수 있다.

   // getRandom.js
      
   export function random() {
     return Math.floor(Math.random() * 10)
   }
   export const user = {
     name: 'Soha',
     age: 45
   }
   export default 123
  

   // main.js
      
   // import { random, user as soha } from './getRandom' // getRandom.js
   import * as R './getRandom'
      
   console.log(R)
   // default: 123
   // random: f random()
   // user: {name: 'Soha', age: 45} ... 
  

• 모듈 (module)
  가져오는 통로(import)가 따로 없이 export만 있는 파일을 모듈이라고 부른다.
  단, 내보내는 통로가 없이 모두 막혀있어도 모듈이라고 부를 수 있다.

Lodash 사용법

메소드

import _ from 'lodash'
// default 키워드로 내보내진 것으로 이름을 _ 으로 지정해줬음

const usersA = [
	{ userId: '1', name: 'Soha' },
	{ UserId: '2', name: 'Neo' }
]
const usersB = [
	{ userId: '1', name: 'Soha' },
	{ UserId: '3', name: 'Amy' }
]

• concat (lodash 아님)
  concat 앞의 usersA와 뒤의 usersB를 합쳐서 새로운 배열 데이터(usersC)를 만들어 낸다.
  usersId는 고유값인데 해당 값이 중복되어서 합쳐지게 된다.

  const usersC = usersA.concat(usersB)
  console.log('concat', usersC)
  // concat
  // 0: { userId: '1', name: 'Soha' }
  // 1: { UserId: '2', name: 'Neo' }
  // 2: { userId: '1', name: 'Soha' }
  // 3: { UserId: '3', name: 'Amy' }
  

• uniqBy
  하나의 배열데이터에서 특정한 속성의 이름으로 고유화를 시켜주는 메소드이다. 따라서 사용하는 인수는 배열 데이터 하나.
  중복된 해당 배열 데이터를 첫번째 인수로 넣는다.
  두번째 인수로는 중복을 구분할 속성의 이름(userId)을 넣어준다.

  console.log('uniqBy', _.uniqBy(usersC, 'userId'))
  // uniqBy
  // 0: { userId: '1', name: 'Soha' }
  // 1: { UserId: '2', name: 'Neo' }
  // 2: { UserId: '3', name: 'Amy' }
    
  const usersD = _.unionBy(usersA, usersB, 'userId')
  console.log('unionBy', usersD)
  

• unionBy
  합치기 전에, 여러개의 배열 데이터를 적어주고 마지막에 해당 배열 데이터를 합칠 때 고유화 작업을 시킬 속성의 이름을 명시한다. 그러면 고유화가 된 새로운 배열데이터를 반환한다.

  중복이 발생할 수 있는 배열 데이터가 두가지가 있고 해당 데이터를 아직 합치기 전일때, unionBy를 통해 중복없이 두 데이터를 합쳐준다.

  첫번째 인수, 합쳤을 때 중복이 발생할 수 있는 데이터 1 (usersA)
  두번째 인수, 합쳤을 때 중복이 발생할 수 있는 데이터 2 (usersB)
  세번째 인수, 중복을 구분할 속성의 이름 (userId)

  const usersD = _.unionBy(usersA, usersB, 'userId')
  console.log('unionBy', usersD)
  // unionBy
  // 0: { userId: '1', name: 'Soha' }
  // 1: { UserId: '2', name: 'Neo' }
  // 2: { UserId: '3', name: 'Amy' }
  

import _ from 'lodash'
// default 키워드로 내보내진 것으로 이름을 _ 으로 지정해줬음

const users = [
	{ userId: '1', name: 'Soha' },
	{ UserId: '2', name: 'Neo' },
	{ userId: '3', name: 'Amy' },
	{ UserId: '4', name: 'Evan' },
	{ UserId: '5', name: 'Lewis' }
]

const foundUser = _.find(users, { name: 'Amy' })
const foundUserIndex = _.findIndex(users, { name: 'Amy' })
console.log(foundUser)
console.log(foundUserIndex)

_.remove(users, { name: 'Soha' })
console.log(users)

• find
  첫번째 인수, 찾고자 하는 배열 데이터
  두번째 인수, 찾고자 하는 조건

  해당 내용(두번째 인수)이 포함되어져 있는 특정 객체를 해당 배열(첫번째 인수)에서 find 메소드를 통해 찾아서 해당 결과를 foundUser라는 변수에 할당한다.

  const foundUser = _.find(users, { name: 'Amy' })
  console.log(foundUser)
  // { userId: '3', name: 'Amy' }
  

• findIndex
  첫번째 인수, 찾고자 하는 배열 데이터
  두번째 인수, 찾고자 하는 조건

  찾고자 하는 객체의 인덱스 번호를 반환한다.

  const foundUserIndex = _.findIndex(users, { name: 'Amy' })
  console.log(foundUserIndex) // 2
  

• remove
  첫번째 인수, 찾고자 하는 배열 데이터
  두번째 인수, 찾고자 하는 조건

  원하는 객체를 찾아 삭제한다.

  _.remove(users, { name: 'Soha' })
  console.log(users) 
    
  // 0:	{ UserId: '2', name: 'Neo' }
  // 1:	{ userId: '3', name: 'Amy' }
  // 2:	{ UserId: '4', name: 'Evan' }
  // 3:	{ UserId: '5', name: 'Lewis' }
  

JSON

JSON (JavaScript Object Notation)은 자바스크립트의 데이터를 표현하는 하나의 포맷이다. 속성과 값의 한 쌍으로 이루어져 있다. (키-값 쌍의 형태와 유사)
인간이 읽을 수 있는 개방향 표준 포맷으로 비동기 브라우저/서버 간의 통신에서 사용된다.
특히, 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.

기본 자료형

undefined를 제외하고 모두 사용이 가능하다.
단! 문자열에서 큰 따옴표만 사용이 가능하다. (작은 따옴표는 사용이 불가능)

+추가 알게 된점
json 파일에는 주석을 사용하지 않는 것이 바르다고 규정하고 있다.

// myData.json

{
  "string": "soha",
  "number": 123,
  "boolean": true,
  "null": null,
  "object": {},
  "array": []
}

// main.js 

import myData from './myData.json'

console.log(myData)
//	string: "soha",
//	number: 123,
//	boolean: true,
//	null: null,
//	object: {},
//	array: []

• 이름 부분에 특수기호를 사용해야 할 때
  따옴표를 사용하면 특수기호를 사용할 수 있다.
  자바스크립트 문법에서 이름에 따옴표를 붙혀서 사용할 수 있으나, 매번 붙히기에 번거로우니 때고 사용하는 것이다.
  그러나, 특수기호가 들어간 이름의 경우 그냥 사용이 불가능하기에 따옴표를 붙혀서 사용한다.

  추가로, 이름을 company-name보다는 카멜케이스 companyName을 사용하는 것이 바람직하다.

  const user = {
    name: 'Soha',
    age: 45,
    emails: [
      'soha@gmail.com',
      'neo@naver.com'
    ],
    'company-name': 'happy Comany',
    'companyEmail': 'happy@gmail.com'
  }
  

• package.json 파일 보기
  node js 환경에 npm은, 패키지 환경에 json 파일로 해당 환경에 구성옵션을 만들어서 관리하는 것이다.
  json이라는 것은 하나의 데이터 취급을 받을 수 있기 때문에 구성옵션을 관리하기가 좋은 json 포맷으로, 패키지를 데이터처럼 관리한다.

  {
    "name": "src",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./bin/www"
    },
    "dependencies": {
      "body-parser": "^1.20.0",
      "convert-excel-to-json": "^1.7.0",
      "cookie-parser": "~1.4.4",
      "crypto": "^1.0.1",
      "debug": "~2.6.9",
      "dotenv": "^16.0.1",
      "ejs": "~2.6.1",
      "express": "~4.16.1",
      "express-session": "^1.17.3",
      "http-errors": "~1.6.3",
      "morgan": "~1.9.1",
      "mysql2": "^2.3.3",
      "node-fetch": "^2.6.7",
      "nodemailer": "^6.7.8",
      "qs": "^6.11.0",
      "xlsx": "^0.18.5"
    }
  }
  

• undefined는 사용 불가
  "undefined": undefined 입력시 error표시가 뜬다.

• 가져올때, 확장자 생략 불가능
  import파일을 통해 불러올때 확장자를 생략할 수 있었는데, 생략은 js파일만 가능한 것이다. 다른 확장자들은 꼭 해당 확장자를 입력해야 한다.

• json 파일은 문자 데이터
  json파일은 하나의 문자데이터이다.
  import로 가져와지면 마치 객체 데이터처럼 사용되는 것으로 볼 수 있다.
  json파일은 최대한 경량화를 해야하기 때문에 하나의 메모리만 참조하면 되는 큰 덩어리의 문자데이터로 관리가 된다.

  // main.js 
    
  const user = {
    name: 'Soha',
    age: 45,
    emails: [
      'soha@gmail.com',
      'neo@naver.com'
    ]
  }
  

  • 대문자로 적힌 JSON
    자바스크립트 전체 영역에서 사용할 수 있는 전역객체이다.

  • stringify 메소드
    파일을 json화 시키기 위해서 JSON.stringify를 사용하여 문자 데이터화시킨다.
    자바스크립트 파일 내부에서 어떤 특정한 데이터를 json의 포맷(형태)으로 문자 데이터화 시켜주는 메소드이다.
    stringify인수로 객체 데이터가 아니더라도 자바스크립트에서 사용할 수 있는 모든 데이터를 인수로 사용하여 json 포맷(문자 데이터)으로 만들어서 활용할 수 있다.

    const str = JSON.stringify(user)
    console.log('str', str)
    // str
    // { "name": 'Soha', "age": 45, "emails": ['soha@gmail.com',
    // 'neo@naver.com']}
    console.log(typeof str) // string
    

  • parse 메소드
    실제 자바스크립트 파일처럼 사용하기 위해서 JSON.parse를 사용한다.
    stringify에서 만들어진 문자 데이터를 parse 메소드의 인수로 넣게 되면 분석하여 자바스크립트에서 활용할 수 있는 하나의 데이터로 재조립할 수 있다.

    const obj = JSON.parse(str)
    console.log('obj', obj)
    // obj
    //	name: 'Soha',
    //	age: 45,
    //	emails: ['soha@gmail.com','neo@naver.com']