package.json 에서 보면서 기억할만한 것들
storybook, lint-staged, nodemonConfig, husky
처음보는 패키지
classnames, cookie, copy-to-clipboard, dayjs, emoji-mart, history, html-react-parser, jsdom, lodash, moment, nanoid, node-fetch, prop-types, qs, query-string, chart.js(reactcharjs), react-countup, reactdatetime, reactslick, react use gesture, slick carousel
dev dependency
dotenv-webpack, eslint, eslint-config-airbnb, eslint-config-next, eslint-config-prettier, eslint plugin import, eslint plugin jsx a11y, eslint plugin prettiereslint plugin react eslintplugin rea t hooks, lint-staged, next images, postcss, sass-loader
prettier.js
module.exports = {
printWidth: 180,
singleQuote: true,
// 문자열은 따옴표로 formatting
semi: true,
//코드 마지막에 세미콜른이 있게 formatting
useTabs: false,
//탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
tabWidth: 2,
// 들여쓰기 너비는 2칸
trailingComma: 'all',
// 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 //formatting
printWidth: 80,
// 코드 한줄이 maximum 80칸
arrowParens: 'avoid',
// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
};같은 부분들은 조금은 알아야 할 필요가 느껴지지만 사실 별 필요 없을 것 같긴 하다. 세팅된 레퍼런스 정도만 솔직히 있으면 큰 문제가 없지 않을까?
이미지 처리 관련된 주의사항
이미지 자체가 좌우 정렬이 안 되어있을 수 있음. 예를 들면 이미지 오른쪽 아이콘이 붙는다든가 하는 이슈를 해결하기 위해 이미지 position relative 로 다 정렬 해둬야 됨
다양한 이미지 캐싱 현상을 해결해야 함
jsconfig.json 같은 경우는 tsconfig.json에다가 allowJS : true 가 붙은 것 뿐이지 사실 전혀 다르지 않음
jsconfig 가 없다면 a.js와 b.ts 가 있을 경우 명시적 import 가 없는 경우 그냥 두 개의 파일일 뿐. 서로 다른 방식으로 참조도 충분히 가능함
jsconfig.json가 있다면 루트 디렉토리 세팅 역할을 해주기에, 명시적 import 가 없어도 무난하게 서로 import 가 가능하다는 점이 있었음
intellisence 같은 것으로 자동완성을 시켜줄 때, 모든 기준은 jsconfig.json이 된다는 점
exclude 로 파일을 제외함으로서 속도 향상 같은 부분도 할 수 있음
include 가 있으면, 그 부분만 딱 처리를 할 수 있음. default *
compiler options 부분
nolib : lib.d.ts 같은 default library file 추가 안함
target : lib.d.ts 같은 부분 es3, es5, es2020.. esnext 같은 버전 설정
module amd, commonJS, es2015, esnext...같은 모듈 시스템 처리
moduleResolution : node나 classic 이라는 value 값 처리
checkJs : type checking on JS files
experimentalDecorators : 데코레이터 문법 지원
allowSyntheticDefaultImports : 타입 체킹 하는 부분
