Front-end 코드 잘 짜는 tip!

한 페이지에 h1 태그는 하나만

태그≠디자인
디자인 시안을 보면 한 페이지에 같은 크기의 타이틀이 들어갈 때가 있다. 이럴 때 h1 태그는 한 페이지에 하나만 들어가고, 나머지 타이틀은 h2, h3…으로 하고, 스타일을 적용한다.

section, container등과 같은 요소에 아이디나 클래스를 붙이자

section, container등과 같이 구조를 잡는 요소에 아이디나 클래스를 붙이고, 그 안에 포함되는 요소는 > 등과 같은 selector를 이용하는 것이다. 나중에 코드를 수정하면서 내용에 맞지 않는 아이디나 클래스를 변경할 일이 생기면 스타일 요소까지 건드려야 하니 최대한 아이디나 클래스는 사용하지 않는 것이 좋다. (stylus에서 사용해본 결과, 클래스를 사용하는 것보다 훨씬 눈에 보기 좋았다.)

DataLayer를 사용하자

DataLayer란 store나 data를 실제로 가져오거나 rest-api를 호출하는 등의 실제 Action이 일어나는 부분을 모아놓은 것을 말한다. 쉽게 말해 mvc 패턴이라고 할까? 데이터를 가져오는 파일 따고, 뷰에서 보여주는 파일 따고, 실제 store를 사용하는 부분 따로 분리하여 해당 파일에서만 보여주어야할 내용만 간략하게 보여주는 것이다. (이름은 용도에 맞게 사용하면 된다. 나는 firebase에서 데이터를 가져오는 코드를 넣었기 때문에 repository 폴더에 contents파일을 생성했다. 일반적으로는 repository가 datalayer가 포함된다.)

<script lang="ts">
import  ContentRepository  from  '~/repository/contents'

...
mounted() {
  this.reviews = await  ContentRepository.fetchReviews()
}
</script>