기업협업 2주차
1. 1주차 작업 내용
- 1주차에 기획을 완료하고 UI 적으로 통일감과 미적인 효과를 주기위해 vuetify라는 라이브러리를 사용하였다.
- 또한 4개의 컴퍼넌트를 만들어서 진행 하려고 했다.
2. 1주차 작업 피드백 및 방향성
- css 는 pure css 로 작업. 이유는 ui 라이브러리를 사용하면 커스터마이징이 어려워지고, 패키징할때 문제가 생길 수 있음.
- 사진이 돋보이게 할 수 있도록 흑백으로 하기로 하였음.
- naming은 케밥케이스 (kebab-case) ⇒ 뷰에서 아마 권장됨.
- ui 컴포넌트 구조
1) v-mode
- editor-canvas의 v-model로 corejs의 인스턴스를 갖도록 하고 그 v-model을 나머지 데이터, 디테일 에디터, 컨트롤러가 조작할 수 있도록 하게 되면this.photoEditor로 접근 가능해진다
2) slot
-<template v-slot ...으로 사용하는 slot 방식이 있고 팀장님은 이 방식이 좀 더 자연스럽다고 하심. 그 이유는 controller , editor (추후에 name은 바뀔 예정)이 같은 core js 를 바라보고 있음을 알 수 있기 때문이라고 하셨다. 이는 결국 라이브러리르의 확장성과 자율성이 커지는 것을 의미한다. 하지만 이는 코드가 길고 복잡해 질 수 있으므로 관리가 필요하다.
아래와 같이 코드를 수정할 예정이다.
<p-editor>
p-editor에 core js가 들어있는 거니까
이것을 각각의 template에 props로 넘겨줄 수 있다.
<컴포넌트 a v-slot:controller></template>
=> <slot core-js></slot>
<template v-slot:detail-editor></template>
<template v-slot:editor></template>
</p-editor>3. 1주차 작업 피드백 후 작업내용
- 팀장님의 말씀대로 app.vue에 각 컴퍼넌트의 내용들을 적으면서 각각의 컴퍼넌트에서 slot을 만들었다. (결국 app.vue 가 아니라 가칭 photo-editor였고 app.vue에서는 photo-editor만 받아오는 것이었다.ㅠㅠ)
- 팀장님께서 확장성을 고려한다는 말은 각각의 코드의 양이 많을 경우 구조 파악에도 어렵고 추가하기도 까다로우니까 슬롯으로 관리를 하려고 했던 것인데 지금 보면 코드의 양이 많은 것 같지 않아서 하나의 파일로 관리해도 무방할듯. 하지만 나중에 계속 기능이 늘어나면 이 slot 구조가 의미가 있을 수도 있을 수도 있다고 하셨다.
아래와 같이 만들기로 협의 하였다.
photo-editor가 초기화되면 // 라이브러리 호출 - app vue <photo-editor option은 넣는걸 나중에 생각></photo-editor> //photo-editor. ui와 관련된 부분만 분리. <template> <photo-editor> <template v-slot:imagecontroller="(photoeditor}">{{photoeditor.data}}</template> <template v-slot:imageEditor="(photoeditor}"> <btn @click="photoEditor.methods.rotate"></btn> </template> <template v-slot:imageSticker="(photoeditor}">{{photoeditor}}</template> </photo-editor> </template> // 이름이 약간 헷갈리는거 같음 컴포넌트 이름들 //photo editor canvas => 여기서 모듈을 총 관리. 모듈을 위한 공간으로만. <template> <slot :photoEditor="photoEditor"></slot> <canvas></canvas> <slot :photoEditor="photoEditor"></slot> </tempate> <script> import * from 'editor.js' 여기서 모듈을 호출해서 필요한거 다 만들고 부르고 세팅 </script>
4. 2주차 느낀점
- 기존에 프로젝트 할때는 무조건 간결하고 for/map을 사용하여 반복되는 작업을 최대한 줄이려고 하였다. 하지만 내용이 크게 변하지 않을거 같은 버튼들은 직관적으로 금방금방 알 수 있게 반복문을쓰지 않고 인라인으로 적었다.
다만, 몇 개의 스티커가 얼마가 들어갈지 모르다보니까. 스티커 데이터의 경우에는 constant data를 만들어서import (js 파일로) 해서 사용하면 될듯.
즉, 모든 상황에 반복문을 쓰지 않아도 되며 코드 또한 사람이 보는것이기때문에 가독성을 생각하여 짜야 한다고 다시 한번 느끼게 되었다. - vuetify 라이브러리 등을 사용 하기 전에 팀장님이나 사수분께 한번도 조언을 구하고 진행 했으면 어땠을까 하는 아쉬움이 있었다. 좀 더 커뮤니케이션을 잘 했으면 두 번 일 하는 일을 없었을텐데..이번 일을 교훈 삼아서 좀 더 커뮤니케이션하고 질문하는 개발자가 되어야 겠다.
5. 기타 회사생활 중 느낀점
- 금요일 저녁 townhall미팅에 참석하였다. 그날은 사수분의 인턴 생활 중 진행 하였던 업무에대해 전 직원분들께 소개하는 자리였다. 3개월 동안 정말 많은 업무를 진행 하셨다. 남과 비교를 하지 않으려고 매일 같이 다짐하나 사수분의 성과는 또 한번 나를 자극하였다. 부족한 것은 아직도 많고 배우고 익혀할 기술들도 너무 많다. 포기하지 말고 존버하면 언젠가 사수분같이 될 거라는 희망고문을 하며^^
- 아 그리고 타운홀 미팅을 하는 것은 신선했다. 내가 생각한 스타트업의 모습이 아니었고, 다들 열정적으로 일을 하는 모습이 신선했다. 회사의 시스템을 만드려고 노력하는 대표님의 모습도 마찬가지로 인상 깊었다.
