[프리온보딩] 220503 강의 메모 03 (VSCode, 레포 세팅)

코드 작성

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 태그 내용물의 실제 보여지는 모습 미리보기를 해주고, SVG 관련 스타일링을 도와준다

Zsh 확장

oh-my-zsh

쉘 테마 설정 및 명령어 단축어 앨리어싱 등을 설정할 수 있어 편리하다

어느정도 사전 단축어가 지정되어 있으므로 alias 명령어를 이용하여 구경해보자

깃을 편하게 사용할 수 있는 명령어가 많다

린터

eslint

코드 린터

코드를 작성함에 있어서 형식에 어긋났거나 문법적으로 틀린 코드를 경고로 알려주므로, 필수 라이브러리가 아닐 수 없다

airbnb, prettier 등 사전 정의 플러그인을 통해 다양한 방법으로 코드 포매팅을 할 수 있다

사전 설정은 eslintrc.* 에 저장되어 있다

prettier

코드 포매터

코드를 더 이쁘게 (세미콜론, 탭 길이, 가로 길이, 쌍따옴표 / 홑따옴표 등...) 포맷해준다

팀마다 비슷한 포맷의 코드를 공유할 수 있기 때문에 보기에 한결 편하다

사전 설정은 prettierrc.*에 저장되어 있다

jsxSingleQuote: true
semi: false
printWidth: 120
proseWrap: never
singleQuote: true
htmlWhitespaceSensitivity: "css"
endOfLine: "lf"

jsxSingleQuote = jsx 파일에서 홑따옴표 통일 여부 (문자열 등)

semi = 세미콜론 사용 여부

printWidth = 가로 폭

proseWrap = Markdown 텍스트에서의 줄바꿈 형식

singleQuote = 일반 파일에서 홑따옴표 통일 여부

endOfLine = 파일의 맨 마지막에 개행 추가 여부 (Github 등에서 권장함)

htmlWhitespaceSensitivity = html 공백 감도

stylelint

eslint와 비슷하게 코드의 형식을 맞춰주는 플러그인이되, CSS / SCSS 등 스타일시트 유형에 적용된다

CSS 속성 순서를 확실하게 바로잡아주고, 내부 값 등도 형식에 맞게 경고를 띄워주므로 스타일 중복 작성을 방지하고 스타일을 깔끔하게 작성할 수 있다

레포지토리 사전설정

사전 설정 애니메이션

cubicBezier: 토글 등에 적용했을 때 깔끔한 움직임을 보이게 해주는 Mixin 애니메이션 (슉 탁)

rotation: 빙빙도는 효과 애니메이션

사전 설정 Mixin

flexbox: flex display + justify-center, align-items를 동시에 적용하는 Mixin 모음

position: position 스타일 (absolute, fixed, relative 등...) 과 상하좌우 스타일을 동시에 적용할 수 있는 꿀 Mixin 모음

responsive: 반응형 웹을 디자인할 때, 사이즈 기준에 따라 서로 다른 스타일을 적용하기 위해 사용하는 Mixin 모음

그외 팁

CSS Module

CSS Module

클래스명을 중복되지 않도록 설정해 주는 웹팩 자체기능

CSS in JS의 단점

CSS in JS란? Tailwind, Styled 등 자바스크립트 내에서 스타일 작성을 가능케 하는 라이브러리

이것을 많이 쓰게 되면 실상 html 태그를 너무 추상화해버리기 때문에 어떤 태그를 사용하는지 알기 힘들고, 이는 곧 html을 Semantic하게 작성하지 않고 div로 도배하게 될 가능성이 높아지며 파일 안에 로직과 스타일이 섞여버린다

로직과 스타일은 가급적 다른 파일로 분리하고, div로 도배하지 말고 시-맨틱하게적절한 html 태그를 사용하자

sass 내의 변수

비슷한 유형의 변수 (color, z-index, mobile size 등) 는 한 파일에 몰아놓고 변수로 사용하면 편하다

특히 z-index는 어디에 어떤 높이를 설정했는지 헷갈려서 꼬이다 보면 컴포넌트 배치 순서가 이상해질 수 있으므로 변수화하는 것을 추천한다

반응형 만들 때 팁

작은 사이즈 화면 스타일 먼저 작업하고, 큰 화면 스타일은 @media 미디어쿼리를 이용하여 따로 적용하는 것이 좋다

PC는 대부분의 경우 와이파이나 유선 인터넷을 사용하기 때문에 인터넷에 부담이 없지만, 모바일은 데이터를 사용하는 경우도 많기 때문에 미디어 쿼리 스타일을 불러오는 것이 낭비가 될 수 있다

line-height

글자가 한 줄에서 차지하는 높이

이 높이 안에서 폰트 크기와 나머지 위아래 공간이 정해진다

따라서 line-height를 늘려주면 텍스트는 가운데에 위치하고, 텍스트 위아래 공간만 늘어나게 되므로 이 원리를 이용하여 글자 세로정렬을 할 수 있다