🙋♂️ 프로젝트 소개
찌읏은 장소 / 위치 기반 SNS 커머스 플랫폼을 제공하는 회사에요. 1개월 간 인턴으로 근무하며 회사의 홈페이지를 제작했어요.
Vue.js 자바스크립트 프레임워크를 사용했어요. React 외에 처음으로 새로운 기술을 적용해 보았아요.
Vue.js로 많은 페이지를 제작하진 않았지만, 별도의 변환작업이 필요없기 때문에 React와 비교하여 상대적으로 간단하다는 느낌을 받았어요. 프로젝트에 대한 소스코드와 영상링크는 아래에 첨부할게요.
<링크첨부>
Github : https://github.com/MinseungJeon/zzieut-homepage
유뷰브 링크 : https://www.youtube.com/watch?v=rYAT4WZFPCs&list=PLZTmS1zO_K1Zj4ZRa-eu3Ugt-DfGC7eXC
🗓 프로젝트 기간
2020.11.16 ~ 12.11 (4주)👨👧👧 애정하는 팀원
FrontEnd (3명)
- 구현정
- 전민승(나)
- 조연정
🎬 데모 영상
🎨 기술 스택
개발도구
- HTML, Sass/Scss
- JavaScript(ES6+)
- Vue.js
협업 도구
- Git & Github 는 개발자의 필수 도구!!
- Git 협업 경험!!
- Trello 로 전체적인 일정 관리와 팀원들의 작업 현황을 파악했어요.
🎨 내가 담당한 Page
채용 페이지
메뉴탭 구현
<script>
export default {
data() {
return {
isSelected: 1,
color: ""
};
},
methods: {
selectMenu(idx) {
this.isSelected = idx;
this.$emit("changeSelected", this.isSelected);
}
}
};
</script>-
채용 페이지는 메뉴탭 이동 시 컨텐츠 부분만 렌더링이 되어야 하는 전형적인 SPA 페이지 였어요.
-
자식 컴포넌트에서 부모 컴포넌트로 props 전달을 $emit 함수로 전달했어요. React 사용했을 때와 달리 다이렉트로 전달이 가능했어요. Vue.js 새로운 기술이 매력적으로 다가왔어요.
반응형 컴포넌트
<script>
export default {
name: "Header",
props: ["title"],
components: {},
created() {
const resizing = () => {
this.activeMenuVisible = false;
};
window.addEventListener("resize", () => {
resizing();
});
return window.removeEventListener("resize", () => {
resizing();
});
},
data() {
return {
activeMenuVisible: false
};
},요-
웹과 모바일 둘 다 사용이 가능한 Nav 컴포넌트를 구현했어요. 사용자 편의성을 신경쓰기 위해서는 Frontend 개발자는 UI에 신경을 많이 써야 함을 배웠어요.
-
브라우저 창의 크기가 변경될 시 MediaQuery 조건에 맞게 창 크기가 변경되도록 addEventListener의 resize 함수를 사용하여 창 크기를 변경했어요.
🎨 좋았던 점
인턴이라는 새로운 환경과 Vue.js라는 새로운 기술을 접해본 것이 개발자로서 시야를 넓히도록 큰 도움을 받았어요. 짧은 기간이었지만 스타트업의 분위기를 느낄 수 있어 행복했어요.
(회사가 사무실 이사한 초기라 회의실에 의자 설치를 도왔어요. 의자조립도 튜토리얼을 보면서 따라하는게 코딩과 비슷하다고 느꼈어요. 그 말은 즉슨 의자 조립도 재밌고 쉽지 않았어요~!)
🎨 아쉬운 점
기본기가 부족함을 깨달았던 소중하고도 아쉬운 순간이었어요. React에서 Vue로 넘어가는 과정이 쉽지 않았어요. 또한, 바닐라 자바스크립트도 능숙하게 구현이 안되는 것을 느끼며 정말 많이 노력해야 겠구나를 느꼈어요.🎨 기업협업 소감
회사의 선배 개발자들이 책임감을 가지고 일을 하는 모습을 두 눈으로 직접 보았어요. 알고는 있었지만 개발자는 정말 많은 책임감이 필요한 직업임을 느꼈어요."나는 어떻게 책임감 있는 개발자가 될 것인가?"를 진지하게 고민해 볼 수 있었어요. 새로운 기술과 새로운 환경에서도 맡은 임무에 책임을 질 수 있는, 그런 개발자를 목표로 해요.
