스타일코드 컨벤션

스타일 코드에서 컨벤션이 존재한다는 사실

일반 CSS나 SCSS를 작성 할 때에는 CSS Sort 익스텐션을 사용해서 쉽게 정렬했지만 지금 이 프로젝트는 emotion을 사용해 css-in-js형식으로 작성하고있다.

그래서 기본적인 스타일코드의 문법이 이런식이다.

export const Loading = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  height: 30vh;
`;

막상 스타일링하고 작성할 때에는 머리에 생각나는대로 편한대로 작성하곤 한다. 하지만 이 프로젝트도 당연히 컨벤션을 적용해야지.

스타일 컨벤션 리스트는 아래 블로그를 참고해서 익스텐션으로 설정해놓고 사용한다.

CSS 속성 순서

"postcssSorting.config": {
  "properties-order": [
    // pseudo
    ...
    // layout
    ...
    // box-model
    ...
    // background
    ...
    // font
    ...
    // ETC
    ...
    // movement
    ...
  ]
    },

스타일 코드 하나 씩 scss파일로 옮겨서 매크로처럼 전체정렬을 한 뒤로 다시 가져왔다. 그럼 아래와 같이 정렬된 모습이다.

export const DateHeader = styled.div`
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  background-color: var(--secondary2);
  button {
    position: relative;
    z-index: 2;
    height: 2rem;
    padding: 0 1rem;
    outline: none;
    border-radius: 3rem;
    background: var(--primary1);
    color: var(--secondary1);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.8rem;
  }
`;

---

주석 추가

모든 기능을 하는 함수와 hook 함수 등 주석을 추가해 구조와 역할을 알기 쉽게 했다.

---

PWA 삭제

PWA를 최종적으로 사용은 할 것이다. 하지만 최신 버전으로 릴리즈 될 경우 푸시 알림을 하는법을 공부해야해서 잠시 해제한다.

프론트 코드나 기능을 새로 수정해서 배포하는 경우 인터넷으로 접속하는 사이트의 경우 새로고침하거나 재접속하면 최신 버전이 적용이 된다.

하지만 PWA를 사용해서 홈스크린, 앱 런처에 추가한 경우 캐시되어있는 파일들이 업데이트 되지 않아 다시 추가해야하는 번거로움이 있다.

수정한 배포파일이 릴리즈 됐을 경우에 유저에게 푸시알림으로 알려주고 업데이트해서 새로 캐싱하는 법을 적용하고 싶었는데 쉽지 않다.

프로젝트의 모든 기능을 적용 한 후에 마지막으로 적용하려한다.

---

REST API 정리

면접 때 RestfulAPI를 작성한 경험이 있냐고 물었을 때 호기롭게 YES!라고 대답했다.

하지만 내 서버의 API를 다시 보면 너무 뒤죽박죽이고 성공/에러의 핸들링 조차 통일되지 않았다.

그래서 Express 공식 사이트에서 제안하는 async/await 방법으로 핸들링을 적용했다.

Error Handling

// async/await version
app.get('/', async function (req, res, next) {
  try {
    throw new Error('BROKEN');
  } catch (err) {
    next(err);
  }
});

유저/포스트/크롤링 구간별로, 또 api기능별로 주석을 추가하여 파악하기 쉽게 해놨다.

/*===================================================
                        유저
===================================================*/
/**
 * @path {POST} /api/users
 * @description 회원가입
 */
router.post('/users', async (req, res, next) => {
  try {
    // 유저명 중복 확인
    const exUserName = await User.findOne({
      userName: req.body.userName,
    });
    if (exUserName) return res.status(404).send('이미 있는 유저명입니다.');

    // 유저 생성
    await User.create({
      userAvatar: 'https://www.sentenceu.co.kr/src/assets/images/default.png',
      userTitle: '한 줄 소개가 없습니다.',
      userName: req.body.userName,
      password: req.body.password,
    }).then(() => {
      return res.status(200).send('Register Succeeded');
    });
  } catch (error) {
    next(error);
  }
});