컨텐트 수정 페이지 데이터 asyncData로 받아서 자식 에디터 컴포넌트에게 넘겨주기

asyncData를 사용하는 이유

미리 에디터에서 수정할 데이터를 받아 페이지에 뿌려놓은 다음, 이를 바로 사용자에게 보여주게 하고 싶기 때문이다. 즉, 수정 페이지의 TTV를 좀 더 높이기 위해서.

데이터는 다음을 사용한다(이미지 서버 완료되면 이미지도 추가 예정)

<p>안녕하세요, 반갑습니다.</p><p><strong>맛있는 점심 어떠세요</strong></p><p><i><strong>치킨</strong></i></p><p><a href="<https://www.naver.com>"><https://www.naver.com></a></p><p>에서 먹을 수 있어요.</p><h2>혹은 피자도 괜찮고</h2><h3>족발도 나쁘지 않아요</h3><blockquote><p>이런 거도 괜찮네</p></blockquote>

글로벌 SCSS 만들기

글로벌하게 사용되는 색을 변수로 지정해 전역적으로 사용해보자.

@/assets/scss에 color.scss 파일을 만든다. 그 안에 각각의 색들을 변수로 지정해둔다.

// @/assets/scss/color.scss

$normal-blue: #0064E5;
$light-blue: #358bfa;
$deep-blue: #0e4287;

$normal-gray: #f9f9f9;
$light-gray: #ececec;
$deep-gray: #bcbcbc;
$black: #333333;
$normal-red: #fa3535;
$normal-yellow: #facf35;

그리고 nuxt.config.js에서 해당 파일을 전역적인 스타일 리소스 파일로 등록해준다.

// nuxt.config.js

export default {
...
	styleResources: {
	    scss: ['@/assets/scss/colors.scss'],
	  },
...
}

만약 이렇게 전역적인 스타일 변수가 아닌 전역적으로 적용되는 CSS 스타일을 관리하고 싶다면 css 속성에 입력해준다.

// nuxt.config.js

export default {
...
	**css: ['@/assets/css/reset.css', '@/assets/css/font.css'],**

	styleResources: {
	    scss: ['@/assets/scss/colors.scss'],
	  },
...
}

글로벌 SCSS에서 미디어 쿼리로 반응형 만들기: mixin을 사용

mixin이란 함수와 비슷한 동작을 하는 문법이라 보면 된다. 따라서 믹스인을 통해 재사용할 CSS 스타일을 만들어줄 수 있다.

//@mixin - 스타일 정의
@mixin 믹스인 이름 {
	//CSS 스타일 내용
}

//@include - 믹스인 호출
@include 믹스인 이름

@/assets/scss에 screen.scss 파일을 만든다. 글로벌한 미디어 쿼리를 적용하기 위해 사용하도록 한다.