바닐라 JS로 만들기

배민 개발자 김정환 강사님 블로그

TIL - 1

1. export로 함수와 변수를 파일 밖으로 내보낼 수 있다.
   => import로 받아온다.
   물론, 이것을 사용하기 위해서는 <script>에 type="module"을 넣어줘야 한다.
   export와 default export는 같은 모듈에서 사용해도 에러는 발생하지 않는다. 그러나, 실무에서는 사용하지 않는다.

2. 강사님은 DOM API를 전부 Wrapping하셨다.

   • 외부 라이브러리를 wrapping 해야 하는 이유
     => 외부 라이브러리가 변경 되더라도, 내부 코드에는 영향을 주지 않기 위해 wrapping을 한다.

3. DomcontentLoaded vs load 이벤트
   => DomcontentLoaded는 로딩 성능 향상에 유리하다. 그러나, load는 이미지 파일 같은 외부 자원들에 대한 정보가 필요할 때, 적절한 이벤트!!

4. npx lite-server --baseDir 1-vanilla/
   => lite-server 라는 모듈을 실행시켜라. 1-vanilla 폴더를 기준으로!! 만약, 해당 옵션이 없으면, 현재 폴더를 기준으로 lite-server가 돌아간다.

5. throw
   => 에러 처리 or 예외 처리시 사용함.
   => throw는 콘솔 로그와 다르게, 이후의 코드는 실행되지 않는다. 즉, 현재 함수는 실행이 중지된다.

6. React같은 프레임워크가 없으면, 바닐라JS로 모든 Views를 구현해야 한다.

• 어려웠던 점과 느낀점
  • DOM API를 wrapping 해놔서, 코드를 이해하는데 애먹었다. 강사님은 랩핑하는게 더 편리하다고 하는데, 나는 그 점은 잘 와닿지 않는다.
  • export와 import를 사용해서, 코드의 재사용성을 극대화시킬 수 있다는 것을 배웠다.
  • 철저하게 MVC 패턴으로 나눠서 진행하시는데, 처음에는 상당히 귀찮았지만, 이러한 패턴 없이 코드가 뭉터기와 섞어있다면... 끔찍할 것같다.
  • To Do List를 wrapping되지 않은 DOM API로 먼저 작성해보고, 그 다음에 wrapping 되있는 방식으로 리펙토링했다.

TIL - 2

• form 태그 찾는 법
  document.forms; 로 form 태그들을 조회할 수 있다.
  ex)
  document.forms[1];
document.forms['add-item'];
  => add-item은 ID 이다
  
  
  • form 태그는 2가지 일을 발생 시킨다.
    1. submit 이벤트를 발사한다.
       => 그래서 form 태그 안의 버튼은 'click'이 아니라, 'submit'으로 잡아야 한다.
    2. 모든 페이지가 새로고침이 일어난다.
       => 브라우저에는 form태그의 submit 이벤트를 처리할 때,
       기본 동작이 서버로 페이지 요청을 다시하는 거다.
       그래서, 다시 응답된 페이지를 브라우져가 다시 렌더링하고 있어서
       화면이 리프레시 되는 것이다.

TIL - 3

1. MVC 패턴 중 View를 담당하는 기능들을 app.js라는 하나의 파일에 모든 코드를 넣어놓는 것보다, Views라는 폴더 안에 기능 별로 js파일을 넣어놓은 게 훨씬 가독성 면에서 좋다. => 나중에 다른 개발자가 나의 코드를 보더라도, 파일 이름만 봐도 이 파일이 무슨 기능을 담당하는지 알 수 있기 때문이다. => 즉, 유지보수 측면에서도 좋다.

2. 검색 결과를 찾는 코드가 필자가 구현한 코드보다 더 좋은 것같아서 첨부한다.

// storage 객체 안의 productData 배열의 filter()로 해서 찾는다. 
// 그리고 includes()를 사용해서, 해당 결과가 있는지 없는지 T/F로 return 해준다.

    search(keyword) {
      this.searchKeyword = keyword;
      this.searchResult = this.storage.productData.filter((product)
    => product.name.includes(keyword)
      )
    } 

3. MVC 패턴에서 Views라는 폴더에서 기능별로 js파일들을 나눠놨다.
   이 점은 나도 앞으로 적용해야겠다. 기능별로 파일을 나눴을 때, 가장 좋은 점은 가독성인 것같다. 다른 개발자가 나의 코드를 봐도 각 파일들마다 역할이 뚜렷하다면, 더 쉽게 이해할 수 있을 것이다. 그것은 더 효율적인 유지보수로 이어질 것이다.

해당 github 링크