Portfolio

1. Vue 노션 클론 다시듣기

1.1 레이아웃 + <LNB>

레이아웃 잡아주기

app__inner > app__nav, app__page > page__header, page__container
flex-direction: column과 flex-grow :1 , overflow-y: auto 을 통해 [수직 스크롤이 되는 구조] 만들기
reset.css CDN으로 불러와서 적용하기
font 적용하기

link태그 붙히고, css font-family 적용
line-height 같이 지정해주어 여백공간 지정해주기

LeftNavBar (LNB) 컴포넌트

레이아웃

header, ul, actions
css 적용하고, app의 app__nav 자리에 LNB 컴포넌트로 대체하기

div와 background-image, background-size: cover 를 통해 icon 적용하기 + 수평출력
scss로 색상 변수 지정

scss darken 함수로 hover시의 진해지는 정도 정해주기
scss @import 규칙이 아니라 전역에서 사용하도록 수정

webpack옵션 중에서, ‘sass-loader’에서 추가 옵션 지정 (sass-loader-github)

options.additionalData : ‘@import “~/scss/_variables’

sass의 color 모듈을 통해, 색상 강도 변경하기

주의 @use는 가장 윗부분에 작성되어야하는데, additionalData는 가장 상위에 적용되므로 에러가 발생함. 따라서 @use 옵션을 같이 사용할 때에는 webpack의 loader option에 같이 지정해주어야함

백틱 템플릿을 통해 한 번에 지정 (코드예시)


// webpack.config.js
use : ['css-loader', 
	... ,
	{
		loader: 'sass-loader',
		options : {
			additionalData : `
				@use "sass:color";
				@use "sass:list";
				@use "sass:map";
				...
				@import "~/scss/_variables"
			`
		}
	}
	]

1.2. <LNB> store로 API 연동, 재귀호출 구조, toggle 및 css 적용

스토어 (workspace.js)

state

workspaces: []

actions

비동기 작업을 처리하는 옵션
총 5개의 CRUD 액션정의

createWorkspace, readWorkspaces, readWorkspace, updateWorkspace, delelteWorkspace

mutations

상태를 변경하는 작업을 처리하는 옵션
assignState()

범용화된 함수로, 변경된 state를 할당하고자 할 때 사용

<LNB /> 에서 dispatch를 통해 action 불러 사용하기

data정의

computed 속성으로 reactive하게 사용

computed : { workspaces(){ return this.$store.state.workspace.workspaces}}

template

computed data를 <li v-for> 디렉티브로 반복하여 출력

creatd() 라이프사이클

컴포넌트 생성 시 $store.dispatch(’worksapce/readWorkspaces’) 로 workspaces를 불러오기

컴포넌트의 재귀호출 <WorkspaceItem>

props로 worksapce 데이터를 받아서, workspace.title을 출력한다
하위요소 출력해야 하므로, 하위요소에 다시 <WorkspaceItem> 을 다시 넣어 재귀호출

재귀호출 종료조건 등록

computed를 통해, 마지막 자손 여부인지를 체크
v-if를 통해 출력 여부 결정

들여쓰기 작성

WorkspaceItem의 props로 depth 속성을 넘겨주어서, depth에 따라 style의 padding 값을 조절하여 들여쓰기 처리

WorkspaceItem CSS 적용

추가,토글 삭제 Icon 추가

구글fonts의 에서 기본으로 제공하는 filled 섹션에서 Icon 검색하여 사용

CDN으로 meterial-icon 등록해야함

MouseHover

$color-background—hover1 로 지정한 배경 적용
color: rgba($color-font, .7) 기존 색상 활용하여 조금 더 연하게 처리

텍스트 넘침 처리

text-overflow, overflow, white-space

토글 처리

showChildren 이라는 data 속성을 지정하여 사용
토글 버튼 클릭 시, showChildren의 값을 전환
showChildren 과 hasChildren 속성으로 하위페이지가 없습니다 처리

1.3.

add 및 delete 기능 구현

store의 각 생성,삭제 액션을 dispatch로 불러옴

인자로 추가시 parentId, 삭제시 id 를 넘겨줌
methods.createWorkspace()

생성 이후, showChildren = true 로 바꿔주어, 생성된 document를 navBar에서 바로 확인할 수 있도록 한다.

methods.deleteWorkspace()

store.actions의 생성, 추가 함수

첫번째 인자는 context, 두번째 인자는 dispatch로 받은 인자(payload)

store.actions.createWorkspace()

parentId값이 있는 경우와 없는 경우로 구분할 수 있다.
default 값 지정 parent={}
생성 이후에, context.dispatch를 통해 목록을 다시 가져오도록 한다.

actions.readWorkspace() 를 실행하여, store의 workspaces 업데이트

store.actions.deleteWorkspace()

새페이지 추가 탭을 통해 rootDocument 추가하기

css 지정

코드

LNB 스타일 수정

가운데 workspace 영역에 flex-grow 및 overflow-y 적용

interact js를 통해 LNB Resizing 하기

npm i interactjs
class=”resize-handle”

position: absoulte, top:0; right:0; 부모요소 position:relative
cursor: col-resize;

methods.navInit()

interact 요소지정은 element 입력도 가능하고, selector를 통한 지정도 가능하다

50일차 배운 것 정리

목차

1. Vue 노션 클론 다시듣기

1.1 레이아웃 + <LNB>

1.2. <LNB> store로 API 연동, 재귀호출 구조, toggle 및 css 적용

1.3.

2.

1.

1-1.

2.

2-1.