Front-Vue-SCSS) RegisterView

목표

UI 구성 및 배치 (기능x)

미리보기

전체 코드

<script setup lang="ts"></script>

<template>
  <div class="main-container">
    <div class="title">Register</div>
    <div class="input-box">
      <input type="text" required />
      <label>Nickname</label>
      <span />
    </div>
    <div class="input-box">
      <input type="text" required />
      <label>Email</label>
      <span />
    </div>
    <div class="input-box">
      <input type="password" required />
      <label>Password</label>
      <span />
    </div>
    <div class="input-box">
      <input type="password" required />
      <label>Password Check</label>
      <span />
    </div>

    <div class="submit clickEventGrey">
      <svg
        width="17"
        height="32"
        viewBox="0 0 17 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 1L16 16L1 31"
          stroke="#777777"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/View/LoginView.scss';
</style>

컴포넌트 구조가 LoginView랑 다른 부분이 거의 없다고 생각하여 코드를 일부만 수정하여 그대로 사용하였다. 또한 지금까지 올린 포스트와는 다르게 CSS 부분이 분리된 것을 확인할 수 있는데, 그것에는 아래와 같은 이유가 있었다.

1. 코드가 너무 길어짐 -> 가독성 저하
   : 블로그에 올릴 때도 CSS 코드 때문에 쓸데없이 길었고, 개인적으로 코드를 다시 훑어볼 때도 보기 불편했다. 원래 하던대로 외부 스타일 시트로 분리하였다.
2. 재사용성 저하
   : 지금 위 코드를 보면 RegisterView 임에도 LoginView.scss가 적용된 것을 볼 수 있는데, RegisterView는 LoginView의 구조를 가져와서 사용하기 때문에 CSS를 작성할 때 거의 동일한 코드로 나왔다. 중복된 코드를 여러번 작성하는 것보다 하나의 코드에 여러번 접근하는게 성능적으로 효율이 어떨지 모르겠지만, 개발 편의성에 이점이 있기에 분리하였다.

깃 허브 링크

Github