학습 키워드

• FSD
  • https://seo-tory.tistory.com/91
• SCSS
  • https://seokzin.tistory.com/entry/SCSS-SCSS-문법-정리
• bem 방법론
  • https://nykim.work/15
• Web Component
  • https://developer.mozilla.org/ko/docs/Web/API/Web_components
  • https://handhand.tistory.com/328
• 논블로킹/블로킹과 동기/비동기
  • https://inpa.tistory.com/entry/👩‍💻-동기비동기-블로킹논블로킹-개념-정리
  • https://nodejs.org/en/learn/asynchronous-work/overview-of-blocking-vs-non-blocking
• nodejs 디버깅
• express
• JIT 컴파일러
• express html 모듈
• 이벤트 위임
  • https://ingg.dev/event-delegation/
• DOM API
  • https://seokzin.tistory.com/entry/JavaScript-자주-사용하는-DOM-API-정리
  • https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
  • https://eyabc.github.io/Doc/dev/core-javascript/Browser_DOM_API.html#dom-interface
• 드래그앤드롭
  • https://inpa.tistory.com/entry/드래그-앤-드롭-Drag-Drop-기능

SCSS

scss는 브라우저가 읽을 수 없으므로, css로 컴파일한 다음에 css파일을 붙여야지 원할하게 작동할 수 있다.

컴파일의 경우 vscode의 live sass Compiler를 쓰면 된다.

vscode의 setting.json 설정

  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/"
    }
  ]

sass Compile 옵션 추가하려면 vscode의 setting.json에서 수정