241111 TIL - package.json, package-lock.json, export, import, prettier, 더하기단항연산자

package.json

내 프로젝트의 현재 환경을 알려주는 파일. 이름과 버전은 뭐고, 라이센스나 타입은 뭐고, 현재 활용 중인 모듈들엔 뭐뭐가 있는지 등등

• "dependecies"는 배포 시에도 적용되는 모듈들
• "devDependencies"는 개발 환경에서만 적용되는 모듈 (대표적으로 prettier)

 

package-lock.json

프로젝트에서 활용하는 패키지(모듈들)에 대한 상세한 정보를 알려주는 파일! 버전 통일 및 공유 절차 간소화 목적

이 프로젝트에서 활용한 모듈들의 버전 정보 등이 담겨있어서 협업자들끼리 일관된 모듈을 이용할 수 있게 해줌

또한 이 파일이 있기에 프로젝트를 공유받은 다른 사람이 node_modules를 불러올 수 있게됨! 

 

 

export

선언부 앞에 export 지시자를 붙임으로써 원하는 코드를 내보낼 수 있음

/* 변수 내보내기 */
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

/* 상수 내보내기 */
export const MODULES_BECAME_STANDARD_YEAR = 2015;

/* 클래스 내보내기 */
export class User {
  constructor(name) {
    this.name = name;
  }
}

/* 함수 내보내기 */
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

 

또는 선언부 이후의 코드에서 따로 내보내는 방법도 있음

/* 따로 내보내기 */
export {months, User, sayHi};

 

 

import

named import만 다루도록 하겠음!!

/* 기본구조 */
import {가져올 것들} from "상대경로";

/* 예시 */
import {User, sayHi} from "./main.js";

 

 

가져올 코드가 많은 경우 내보내진 코드를 한꺼번에 가져올 수 있음. 이때 "as 객체명"을 꼭 붙여서 가져온 모듈들을 객체 형태로 받아줘야함. 그렇게 가져온 코드는 "객체명.코드명"의 형태로 활용하게 됨

/* 다 가져오는 예시 */
import * as say from './say.js';
// say란 이름의 객체에 담았기 때문에, 객체의 value 가져오는 방식과 동일
say.sayHi('John');
say.sayBye('John');

 

 

Prettier 활용

내가 사용하는 VScode 자체에 적용하고 싶으면 설정에서 조정하고, 프로젝트 별로 적용하고 싶다면 

npm i --save-dev prettier

 

 

node에 위 명령어를 실행해 설치하고, 폴더 최상단에 ".prettierrc" 파일을 생성한 후 그 파일에서 입맛대로 조정

VScode 자체 설정보다 ".prettierrc" 파일의 적용 우선순위가 높음!

 

 

더하기 단항 연산자 활용

자바스크립트에선 숫자형이 아닌 피연산자에 단항연산자+를 붙이면 숫자형으로 자동 형변환. Number()와 같은 기능

/* +로 숫자형 변환 */
console.log(+true); // 출력 : 1
console.log(+""); // 출력 : 0