[JS] 여러 파일 관리하기

여러 파일 관리

웹개발을 할 때에 사실 html 파일 하나에 모든 코드를 입력하여도 코드 동작에는 지장이 없다.
하지만, 보통 html파일, css파일, js파일로 구분하여 작업을 진행하는 것이 일반적이다.
스타일과 관련된 항목을 수정할 때에는 바로 CSS 파일로 가고, 기능구현과 관련된 것을 추가/수정 할 때에는
바로 js 파일로 가서 작업을 진행하면 되는 큰 이점이 있기 때문이다.

js파일 여러개 관리하기

보통 js 파일이 코드의 양이 매우 많다.
그리고 수많은 함수들로 이루어져 있어서, 수백줄 혹은 수천줄이 되는 코드들을 일일이 스크롤하며 파악하는 것은 비효율적이고 정신건강에 매우 해롭다.
따라서 영혼의 평안을 추구하는 이들은 js파일명을 기능 구현 단위로 쪼개어 코드를 작성하고, 각 파일들을 하나의 html 파일에 합쳐주며
.js 파일간의 오가야 할 내용들은 특정 기능을 사용하여 상호작용하도록 만들어준다.

HTML 파일과 연결

• HTML 파일 - CSS 파일 연결

• HTML 파일 - JS 파일 연결

• HTML간 연결

  JS 파일간 상호작용

  • HTML 파일에 여러 JS 파일들을 script tag로 연결함.
    이 때 type을 module로 설정하면 서로 다른 Js 파일에서 같은 변수명을 쓰더라도, 중복되는 error를 피할 수 있다.
  • export/import

  math.js 파일에서 만든 여러 함수 기능을 main.js 파일에서 사용하고 싶다면,

  math.js 파일에서 다른 곳으로 보내고 싶은 기능들 앞에 export를 붙여주고,
  사용하려는 파일 main.js 파일에 import를 적어준다.

  math.js 파일의 add 함수

  export const add = (a,b) => a + b;
  export const sub = (a,b) => a - b;

  main.js 파일에 사용

  import { add, sub } from './math.js'
  로 import 한 후에 자유롭게 사용

깔끔하게 정리하는 J형 개발자가 되자

'나는 P라서...... 정리를 못해....'
정리를 잘 하지 못하는건 이해하더라도 그걸 방패삼아 빌미삼아 정리를 안하는 거는 용납할 수 없다.
여러 사람이 읽고 수정하는 코딩인만큼 조금이라도 더 가독성이 좋고 접근성을 높이기 위한 노력은 필수이다.

export, import 기능을 활용하여 기능별로 js파일들을 나누어 뻔쩍삐까샤랄라한 코딩을 작성하자