패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_HTML/CSS과제 후기

김삿갓의싱잉랩·2023년 8월 7일

일주일간 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 HTML/CSS 과제를 진행했었다.

😒 정말 더러웠던 처음 코드...

이게 코드라고...??

.mySwiper5 .inner--infos .live-day {
    margin-bottom: 0.4rem;
    font-size: 2.8rem;
    line-height: 3.35rem;
}

.mySwiper5 .inner--infos .live-time {
    font-size: 5rem;
    line-height: 6rem;
    font-weight: 700;
    opacity: 1;
}

.mySwiper5 .upper--info .button__broadcast {
    display: block;
    height: 3.2rem;
    padding: 0 1.2rem;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    line-height: 3.2rem;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 1.6rem;
    font-weight: 700;
}

보기와 같이 처음 클론코딩을 해보면서 구조를 짜고 디자인을 하는 방법에 대해 많이 배우긴 했지만 코드가 정말 더러웠다...

이런 더러운 코드를 개선하기 위한 멘토님의 피드백이 이루어졌다.

내가 배울 수 있었던 점은 상당히 많았다...

✅ 클론 코딩을 할 때는 직접 다 해보기 (최대한 참고하지 않기)
✅ CSS 기능을 잘 알고 쓰기
✅ 본문에 너비를 줄 때는 큰 부모 요소에서 전달해 주기
✅ CSS의 중복되는 기능 합치기
✅ 태그선택자 사용하지 않기
✅ z-index 남발하지 않기

다음과 같은 피드백을 받고

나의 Dirty한 코드를 조금 더 개선해보기로 했다.

😲 과제 후 피드백 진행

그래도 볼 수 는 있게 됐네요...

.live__banner--inner-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    z-index: 2;

    color: #fff;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.5);

    font-size: 1.5rem;
}

.live__banner--inner-time {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 4rem;
}

피드백 요소를 반영해서

CSS 기능별로 구분하여 가독성을 높이고

CSS 중복되는 기능들을 합치고

태그 선택자를 사용하지 않는 등 피드백을 반영하였다.

내가 보기에도 코드가 무슨 말을 하는 지 알 수 있을 정도가 됐다...😲

😊 과제 후 개선점 찾아보기

협업의 꽃 Prettier

✅ prettier Extension 설치하기

: 당연히 Prettier를 설치해야 한다. 따라서 VScode Extension에서 Prettier을 검색해서 설치한다.

VS코드에서 다운을 받았다면 Prettier을 운용할 파일을 만들어줘야 한다.

폴더의 최상단에 .prettierrc 파일을 만들어준다.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
}

가장 기본적인 세팅입니다.

https://prettier.io/docs/en/options.html
( 여기서 원하는 세팅들을 직접 추가해줄 수 있습니다. )

✅ Prettier 설정하기

1. 가장 먼저 설정창에 들어가야 한다.

설정창에 들어가려면 윈도우 기준 ctrl + , 입력하면 들어갈 수 있다.

상단 검색창에 format을 검색하시면 아래 Format On Save 항목을 볼 수 있다.

파일을 저장을 하게 된다면 Prettier의 포멧이 적용되는 것을 볼 수 있다.

2. VScode Setting.json에서 적용된 것을 확인하기

제가 겪었던 문제였는데요, Format on Save가 되어 있어도 HTML, CSS, JS에 VS코드 기본 스타일이 설정 되어있을 수 가 있다.

그것을 확인하기 위해서 해당 창에 우측 해당 버튼을 눌러야한다!

들어가면 다음과 같은 JSON파일 형식의 코드들이 작성되어 있다.

여기서 우리가 중요하게 볼 것은 "[html]"에 적용되는 editor.defualtFormatter이 존재하고 이 값에 esbenp.prettier-vscode 가 적용되어 있는 지 확인해야 한다.

	"[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
	...
	"editor.defaultFormatter":  "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true

또한 파일 내에 editor.defaultFormatter 값에 esbenp.prettier-vscode가 배정되어 있는 지 확인한다.

전에 설정했던 editor.formatOnSave 값이 true로 되어있는 것도 확인해 볼 수 있다.