치춘짱베리굿나이스

stylelint CSS, SCSS와 같은 스타일시트 코드 작성 시 정렬 및 오류를 찾아주는 분석 도구 eslint와 같이 코드 실행 없이도 코드 내에서 잘못된 점을 바로 찾아준다 스타일시트 특성상 작성한 코드 양이 많아질 수록 개발자도 헷갈려서 중복된 스타일을 적용할 가능성이 높아지는데, stylelint를 통해 일관된 코드와 순서를 지키면 중복 코드 작성 여지가 확 줄어든다 설치하기 $> npm install -D stylelint stylelint-config-standard stylelint-config-styled-components stylelint-processor-styled-components stylelint-config-standard-scss stylelint-config-reces..

작업 시작 공식적인 내생각 아침에 일어나는 게 살짝 힘들긴 한데 아침 회의도 나름 할만하다 다만 중간에 집중력이 흐트러져서 시간을 알차게 사용하지 못한 것 같다 오늘 작업하고자 했던 작업량은 끝냈지만 뭔가 더 만들고 싶어서 근질근질하기도 했다 내 작업 내용 원본과 비슷하게 프로필 사진 주변에 원형 Progressbar을 띄워주고, 화면에 이쁘게 배치되도록 스타일 작업을 수행하였다 CSS Module 열심히 사용하기 {name} 자식 태그의 클래스에 스타일을 적용하려면 className=’imageDiv’ 방식이 아닌 className={styles.imageDiv} 방식으로 작업해야 했다 살짝 익숙하지 않아서 당황했는데 이렇게 보니 통일감 있고 괜찮아보인다 아직 시맨틱 태그에 익숙하지 않아 div 범벅인..

코드 작성 VSCode 확장 확장 - Auto Import 컴포넌트 자동 import 확장 - Auto Rename Tag 여는 태그 이름을 바꿔주면 닫는 태그 이름도 같이 바뀐다 확장 - Beautify JSON 파일 이쁘게 보는 용도 확장 - ESLint (필수) 린터 확장 확장 - Prettier (필수) Prettier 확장 (코드 포매터) 확장 - Stylelint (필수) CSS 린터 확장 확장 - Todo Highlight //TODO: [할 일] TODO 주석을 하이라이트해준다 확장 - Timestamp Converter epoch time (보통 ms 단위로, 1900년 1월 1일부터 지금까지 흐른 ms) 을 연월일시간 형식으로 보기 좋게 바꿔준다 확장 - SVG SVG 태그 내용물의 실..

classnames 설치 $> npm install classnames npm 링크 classnames classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. Start using classnames in your project by running `npm i classnames`. There are 34036 other projects in the npm registry using classnames. www.npmjs.com 용례 클래스를 여러 개 추가하고자 할 때나 특정 조건에 따라 클래스를 다르게 적용하고 싶을 때 사용하면 간단하..