VELOG package.json review

dependencies

1. autoprefixer

   CSS계의 바벨 PostCSS 플러그인. CanIUse를 기준으로 vendor prefix를 자동으로 붙혀주고 모던 CSS를 변환하기도 한다. webpack 설정을 통해 사용.

2. axios

   Promise based HTTP client for the browser and node.js 라는 문구로 정리가 되는 node진영의 http모듈의 대표

3. babel-core

   바벨의 자바스크립트 트렌스파일링 로직 페키지

4. babel-eslint

   babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint

5. babel-jest

   jest에서 babel을 사용하기 위한 모듈. babel.config.js 파일 설정 후 사용.

6. babel-loader

   webpack에서 babel을 사용하기 위한 모듈. webpack 설정을 통해 사용.

7. babel-preset-react-app

   create-react-app에서 사용하는 babel preset 모듈.

8. babel-runtime

   class를 생성 후 바벨링을 하게되면 _classCallCheck 이라는 function이 반복적으로 생성되는데 이를 재사용 할 수 있도록 도와주는 모듈 인 것 같다. 위 class 사례 말고도 다른 사례가 있는듯?? polyfill 하다가 생기는 문제있는 것 같은데 core-js와 regenerator에서 생길 수 있는 반복코드 문제를 해결해 주는 모듈로 보인다. 정확히 아시는 분은 댓글 부탁드려요!

9. case-sensitive-paths-webpack-plugin

   이 웹팩 플러그인은 대소문자 구분을 하지 않는 OSX의 특성 때문에 import 구문에서 path를 쓸 때의 충돌을 막기 위한 모듈로 보인다. 정확히 아시는 분은 댓글 부탁드려요!

10. chalk

    터미널 로그에 색깔을 입힐 수 있는 모듈. build, start 스크립트의 가독성을 높이기 위해 쓰고 계신듯 하다.

11. classnames

    조건부 classname 조합을 위한 모듈.

12. codemirror, code-mirror-themes

    텍스트 에디터 codemirror와 에디터 theme 모듈. code mirror는 마크다운 에디터로 사용하신 듯 하다.

13. date-fns

    date 핸들링 모듈

14. dotenv

    .env 파일 로드를 위한 모듈

15. eslint

    Find and fix problems in your JavaScript code.

16. eslint-config-react-app

    create-react-app에서 사용하는 eslint config 모듈. .eslintrc.json에서 설정해서 사용!

17. eslint-loader

    웹팩에 eslint 적용을 위한 로더 모듈! babel-loader와 함께 사용할 경우 순서를 조심해야 한다고 한다. 잘못하면 바벨링 후 린팅 될 수도..

18. eslint-plugin-flowtype

    eslint에 flow 적용을 위한 모듈. eslint parser는 type annotations 지원 안하기 때문에 babel-eslint가 parser로써 필요하다. .eslintrc.json 설정해서 사용!

19. extract-text-webpack-plugin

    deprecated되고 mini-css-extract-plugin으로 바뀜. chunk마다 따로 css파일을 생성해주는 웹팩모듈.

20. file-loader

    웹팩 이미지 파일 로더

21. node-fs-extra

    노드의 fs 모듈을 편리하게 쓸 수 있도록 만든 모듈.

22. html-webpack-plugin

    웹팩 html 자동 생성 플러그인 모듈.

23. immer

    경량 immutable 모듈.

24. immutable

    immutable 모듈. 이거 안쓰고 immer 쓰시는 듯.

25. include-media

    sass에서 미디어 쿼리를 편리하게 쓸 수 있게 해주는 모듈.

26. invariant

    에러 핸들링 관련 모듈. 정확히 아시는 분은 댓글 부탁드려요!

27. jest

    Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

28. lodash

29. markdown-toc

    마크다운 테이블 핸들링 모듈.

30. marked

    A markdown parser and compiler. Built for speed.

31. moment

32. nanobar

    Very lightweight progress bars. No jQuery

33. node-sass

    Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

    It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

34. object-assign

    Object.assign() ponyfill 모듈이라고 하는데, ponyfill은 polyfill 처럼 올드 브라우저들을 지원하기 위한 것인데 설명을 보니 polyfill의 global pollution 이슈를 해결한 업그레이드 버전이라고 설명하고 있다. 정확히 아시는 분은 댓글 부탁드려요!

35. open-color

    Color scheme for UI design. 갓로퍼트님이 좋아하시는 컬러 팔레트

36. perfect-scrollbar

    스크롤바 플러그인인데 스타가 7.9k 라니.. 뭔가 내장 스크롤바에 문제가 있으니 쓰는 모듈인 것 같은데 자세한건 코드를 분석하면서 찾아봐야겠다.

37. postcss-flexbugs-fixes

    PostCSS plugin that tries to fix all of flexbug's issues

38. postcss-loader, style-loader, css-loader

    postcss 웹팩 모듈. css-loader, style-loader, postcss-loader 햇갈릴 수 있으니 create-react-app 코멘트를 조금 정리하자면 각자의 역할은 이렇다.

    postcss-loader: CSS에 autofixer 역할을 한다.

    css-loader: CSS의 path와 해당 CSS 파일의 dependencies, 즉 이미지나 import된 모든 asset을 resolve한다.

    style-loader: development환경에서는 단순히 CSS 파일을 JS 모듈에 inject하지만 이 외 환경에서는 postcss를 먼저 적용하고 위의 css-loader를 거쳐서 각자의 chunk에 따라 따로 파일로 분리한다.

    위 설명은 create-react-app에서 설정한 config에 대한 설명이다. 결국 개발 환경에서는 그냥 모든 CSS를 통째로 JS를 통해

39. prismjs

    velog의 마크다운 에디터에 syntax highlight를 위한 모듈.

40. query-string

    queryString을 편하게 사용 할 수 있게 도와주는 모듈.

41. raf

    자바스크립트 window.requestAnimationFrame polyfill 모듈!

42. react

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

43. react-autosize-textarea

    A textarea perfectly compatible with ReactJS default one which auto resizes its height based on user input.

44. react-dev-utils

    react에 도움이 되는 웹팩 플러그인들을 모아 놓은 모듈.

45. react-dom

    This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.`

46. react-helmet

    ssr과 head 테크 관리를 편하게 도와주는 모듈.

47. react-icon-base

    react-icons 모듈의 base 컴포넌트 모듈. svg코드로 직접 react-icons 형태의 컴포넌트로 만들 때 사용 되는 듯 하다.

48. react-icons

    여러가지 아이콘을 컴포넌트를 제공하는 모듈.

49. react-onclickoutside

    메뉴가 열렸을 때 메뉴 이외의 지역을 클릭 했을 때 메뉴를 닫아야 하는 경우가 일반적이다. 이 모듈은 그 기능을 HOC로 제공한다.

50. react-redux

    Official React bindings for Redux

51. react-router, react-router-dom

    리액트에서 라우팅을 가능하게 만들어 주는 모듈.

52. react-tooltip

    스타 1.9k react 툴팁 컴포넌트 모듈.

53. react-truncate

    보통 post 같은 곳에 제한된 공간에 title 이나 desc가 너무 길면 그것을 자르고 ... 더 보기 이런식으로 처리하는걸 도와주는 react component.

54. recompose

    hook가 나오기 전 대표 HOC 헬퍼 모듈이었던 recompose. 깃헙 리드미를 보니 제작자가 3년 전 ㅁrecompose를 만들고 1년 후 리액트 팀에 함류해서 2018년 말에 hooks proposal 이후 더이상 새로운 기능을 개발하지 않겠다고 나와있다. 내 예상이지만 이 개발자가 hooks에 많은 기여를 하지 않았을까 싶다. velog에서는 shouldUpdate와 onlyUpdateForKeys을 사용하고 있는데, 어떤 기능인지 코드 분석 때 한번 봐야겠다.

55. redux

    Predictable state container for JavaScript apps

56. redux-actions

    Flux Standard Action utilities for Redux.

57. redux-pender

    veloper님이 만드신 비동기 액션 핸들링을 위한 리덕스 미들웨어. 이제 리덕스 미들웨어까지… 당신은 대체..

58. remarkable

    markdown parser

59. remove-markdown

    마크다운에 쓰이는 특수문자를 모두 제거하고 텍스트만 뽑아주는 모듈!

60. sass-loader

    sass 웹팩 로더!

61. sortablejs

    Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. 터치, 스와이핑 지원 그레그 엔 드랍 모듈!

62. sw-precache-webpack-plugin

    서비스 워커 웹팩 플러그인. create-react-app의 디폴트 세팅인 것 같다. 나중에 서비스 워커를 다룰 일이 있으면 공부해 봐야겠다.

63. url-loader

    파일로더와 유사한 모듈인데 해당 이미지 파일의 크기가 바이트 리밋보다 작으면 DataURL을 리턴하는 기능이 있다.

64. webpack

    웹팩 스터디 링크

65. webpack-dev-server

    웹팩 개발환경 조성을 커스터마이징 할 수 있도록 도와주는 모듈.

66. webpack-manifest-plugin

    manifest.json output으로 함께 생성해주는 웹팩 모듈.

67. whatwg-fetch

    A window.fetch JavaScript polyfill.

scripts

1. finalize: yarn build && yarn build:server && yarn deploy && yarn invalidate

2. start: node scripts/start.js

3. build: node scripts/build.js

4. build:server: node scripts/build.server.js && cp ../velog-ssr/src/ssr/render.js ../velog-ssr/dist/ssr/render.js && cp ./build/asset-manifest.json ../velog-ssr/

5. test: node scripts/test.js --env=jsdom

6. deploy: aws s3 sync ./build s3://cdn.velog.io/

   s3에 배포해주는 스크립트

7. invalidate: aws cloudfront create-invalidation --distribution-id E1M9D68QZ0CD1F --paths / /index.html /error.html /service-worker.js /manifest.json /favicon.ico

   aws cloudfront의 해당 경로의 캐시를 지워주는 스크립트

코드 분석 때 start, build 스크립트를 분석해 보도록 하자.

jest

jest.config.js의 대안으로 package.json에 config 작성

babel

jset와 마찬가지로 babel.config.json 파일을의 대안으로 package.json에 config 작성

proxy

프록시 서버 설정

느낀점

create-react-app의 보일러 플레이팅도 자연스럽게 파악되고 코드 분석에 앞서 전체적인 그림을 보는데에 큰 도움이 되었다.