📚금일 학습 내용
내가 3일간 한 내용을 3시간컷 해버리신 강사님의 VUE 노션 클로닝..
🏫데브코스
📌Vue Day8
강사님도 물론 많이 준비하셨겠지만 힘의 차이를 크게 느낀 하루였다. 왜 경력직 개발자들이 대단하고 그렇게 꾸준히 노력하는 개발자들이 멋있으면서도 그만큼 대우를 받는지 알 것 같았다. 모든 코드가 이유 있게 동작했다. 특히 큰 로직과 CSS, 거기에 확장성까지... 여담은 여기까지 하고 오늘 학습하면서 배운 내용을 정리해보고자 한다.
오늘은 모든 학습과정에서 경험했던 중요한 부분 혹은 오류 해결 목록을 기술해보고자 한다.
❗올바르지 않은 옵션 문제
시작부터 나를 당황하게 했던 문제였다. 검색해도 마음에 드는 답변이 나오지 않았는데 결국에는 에러 메세지에 정답이 있었다. 웹팩 옵션에서 아래 부분이 문제였다. 위 에러 문구를 보면 historyFallback가 아닌 historyApiFallback임을 찾을 수 있고 바꿔주니 정상적으로 해결되었다.
// 기존 코드
devServer: {
historyFallback: true,
},
// 수정 코드
devServer: {
historyApiFallback: true,
},💡SCSS 한번에 적용해두고 사용하기
webpack.config.js에서 modules/rules에 아래와 같은 형태로 scss에 대한 내용을 미리 명시해두고 사용할 수 있다.
{
test: /\.s?css$/, //css를 찾고
use: [
"vue-style-loader",
"css-loader",
"postcss-loader",
{
loader: "sass-loader",
options: {
additionalData: `
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:selector";
@use "sass:string";
@import "~/scss/_variables";
`,
},
},
], // 순서가 중요하다. 역순으로 해석되기 때문이다.
},💡Vue의 재귀호출
노션에서 사이드 바를 구현할 때 자식 문서들을 재귀적으로 불러와야할 경우가 많이 생긴다. VUE에서는 컴포넌트 자체를 재귀로 호출시켜 해결했다.
만약 자식이 있을 경우(hasChildren)와 자식을 보여주는 옵션(showChildren) 이 참인 경우 바로 나의 컴포넌트에 해당 데이터를 입력하고 참조할 수 있다.
// WorkspaceItem 컴포넌트
...중략
<ul v-if="hasChildren && showChildren">
<WorkspaceItem v-for="ws in workspace.documents" :key="ws.id" :workspace="ws" :depth="depth + 1" />
</ul>결과물은 아래와 같다.
💡interactjs
드래그 앤 드롭, 리사이즈, 회전, 터치 제스처 등 다양한 상호작용 기능을 구현할 수 있도록 도와주는 라이브러리이다. 매우 유용한 것 같은데 사용법이 굉장히 신기했다. 아래 코드주석에 내용 흐름을 작성해보면 다음과 같다.
//일단 vue에서 사용될 navWidth데이터를 선언해주고 기본값을 지정해준다.
data() {
return {
navWidth: 240,
};
},
// nav태그에서는 navWidth에 맞추어 width가 변하도록 style을 데이터 바인딩 형식으로 지정해준다.
<nav ref="nav" :style="{ width: `${navWidth}px` }">
// HTML태그 맨 아래에다 실제로 핸들이 동작할 div태그를 하나 생성해준다.
<div ref="resizeHandle" class="resize-handle" @dblclick="navWidth = 240"></div>
// 이후 vue 메서드에서 함수를 만들어준다. 그리고 interact안에다가 옵션의 타겟과(여기서는 refs로 한번에 지정해줬다) 동작을 지정해준다.
navInit() {
interact(this.$refs.nav)
.resizable({
edges: {
right: this.$refs.resizeHandle,
},
})
.on("resizemove", (event) => {
this.navWidth = event.rect.width;
});
},❗라이프사이클에서 async await금지
일반적으로 VUE 라이프사이클 내부에서 async await은 실행이 보장되지 않을 확률이 매우 높다. 그러므로 이러한 경우에 async await을 사용해야하면 아래와 같이 따로 함수로 빼서 선언 후 사용하도록 하자.
created() {
this.workspacesInit();
},
methods: {
async workspacesInit() {
await this.$store.dispatch("workspace/readWorkspaces");
},⏰꽤 쓸만한 시간 관리법..?
밤12시 땡치고 강의를 몇개 끝내두고 아침에 조금 일찍 일어나서 오전에 강의 몇개를 들으니 오후가 널널 그 자체였다. 앞으로도 이런식으로 미리미리 강의를 빠르게 끝내고 정리하고 남은 기간에는 여러 할 일들을 하면 좋을 것 같다.
📖소회
오늘 익님의 초대로 지호님, 희라님, 호민님과 모각코를 했다! 여러 이야기들을 나눌 수 있어서 재미있었고 코어타임때는 많은 이야기는 나누지 못해서 이후 일정도 함께하고 싶었는데 아쉽게도 선약이 있어서 자리를 떠났다.😥
나보다 먼저 취업한 동생의 월급으로 밥을 얻어먹은 날! 싱숭생숭하지만 각자 나름의 길이 있는 것이겠거니.. 하는 생각이 있다. 그리고 당장 눈 앞에 있는 강의, 과제, 발표를 신경쓰는게 더 바쁘다. 아마 내일부터는 TIL도 잘 작성하기 힘들 것 같은데 한번 지켜봐야겠다.
내일부터는 슬슬 PPT를 완성시켜야겠다. 지금은 스크립트 + 추상적인 미사어구 들을 대충 그려놨는데 막상 자료들을 넣다보면 시간이 오래걸린다. 내일도 화이팅~🔥
TIL 작성 소요시간 약 31분
