개발자 9Diin의 개발일기

'Vue.js의 가장 큰 장점이라고 할 수 있는 것이 무엇일까'라는 질문을 넌지시 던져보았을 때, 바로 떠오른 것은 바로 v-model 양방향 데이터 바인딩 디렉티브였다. 바로 어제 Vue.js + Chart.js를 활용하여 API Data를 조회하고 가공하여 화면단에 보여주는 작업을 마쳤다. 하지만 디자이너의 요청으로 버튼 클릭이벤트에서 input radio로 다시 말해 Button에서 Radio로 변경함에 따라 $emit을 통한 클릭 이벤트 전달이 아닌 input data를 넘겨줘야 하는 변경사항(?) 이슈(?)가 생겼다. 팀원분들께서는 v-model을 사용해서 해보라 그랬으며 그래서 몇 시간 동안 고민해보았으나, 이미 레퍼런스 코드가 있음에도 불구하고 이해가 되지 않아 리드 개발자분께 자문을 구했다..

6월 말부터 지금까지 새로운 직장에서 각자 실력이 월등한 팀원들과 함께 서비스를 준비하고 있는데요. 개발이란 직군이 매 순간 어려움에 부딪힐 수밖에 없지만, 그래도 너무 친절한 동료 덕에 잘 헤쳐나가고 있습니다. 아무튼, 오늘의 개발 포스팅은 나름 Vue.js를 공부했다고 자부했지만, 기본기도 없었던 저였음을 새삼 실감했던 시간인데요. 바로 Vue.js 내장 컴포넌트(Built-In Component) 때문이었습니다. 오늘은 그중 component라는 내장 컴포넌트를 알아보고자 해요. 😎 내장 컴포넌트 Built-In Components Vue.js에서 기본적으로 제공하는 내장 컴포넌트는 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 공식문서에서 말하더라고요. 하지만 이게 정확히 무슨 뜻인지 알..

https://youtu.be/XwMBu6yrlUo 📌 Reusability & Composition 이번 포스팅은 'Vue.js 프로젝트 투입 일주일 전' 도서를 참고했습니다. ✅ Composition API 컴포지션 API는 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API이다. 컴포넌트 API가 생긴 이유는 Vue는 프로젝트 규모가 커질수록 관리하기 힘들다. 는 단점이 있어서 컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리가 어려웠다고 한다. 그래서 생겼다고 한다. 그래서 컴포지션 API를 이용하면, setup( )이라는 메서드 안에서 한 덩어리로 코드를 구현할 수 있기에 코드에 대한 관리가 훨씬 쉬워진다고 한..

Vue.js라는 매력적인 자바스크립트 프레임워크를 가지고 처음 개발을 할 때, (필자 기준) 가장 어려웠던 점은 이번 포스팅에서 다룰 '라이프사이클 훅'이었다. Vue.js라는 언어를 가지고 공부를 한 지 어느덧 9개월이란 시간이 지났는데 가장 기본이 되는 공식문서 내용조차 온전히 내 것으로 만들지 못해 반성하는 의미에서 그리고 나와 같이 고민하는 사람들을 위해 정리해보고자 한다. 공식문서를 살펴보면 라이프사이클 훅이란, 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어 데이터 관찰, 템플릿 컴파일, 인스턴스 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야 합니다. 그 과정에서 라이프사이클 훅이라 불리는 함수도 실행하며, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회..

📌 Prologue 나는 Vue.js라는 자바스크립트를 활용한 지 이제 한 달 남짓이다. Vue.js (이하 Vue)를 사용하면서 느꼈던 것은 Vue라는 언어를 만들어 낸 창시자는 정말 너무나도 대단한 사람처럼 느껴졌고, 프런트엔드 개발자라면 당연히 자바스크립트라는 언어를 잘 다룰 줄 알아야 하지만, 보다 멋지고 간편한 그리고 효율성 좋은 Vue를 활용하는데 자바스크립트의 기초만 있는 사람이어도 어느 정도 활용이 가능하는 게 내겐 너무나도 큰 장점으로 와닿았다. 그래서일까? 나는 Vue가 너무 좋고, 더 깊게 잘 배우고 싶다. 아무튼, 본격적인 Vue.js의 Lifecycle Hooks에 대해 살펴보도록 하자. 📌 Lifecycle Hooks 내가 근 한 달 가까운 시간 동안 그중의 반은 회사 적응 기간..

📌 API Data is Changed!? 위 사진은 내가 Vue.js 프레임워크를 이용해 KakaoMap API와 OpenWeatherMap API를 활용하여 지도에 표시된 마커를 클릭하면 클릭한 좌표 값을 토대로 날씨 API로 데이터를 Props 하여 그 지역별 날씨 정보와 이미지를 불러오는 미니 프로젝트를 진행했다. 이처럼 좌표를 클릭하면 해당 지역의 정보가 출력되는데, 이 프로그래밍을 완성하기에 앞서 data 변경 시 화면단에서 출력이 될 때, 데이터가 바뀌는 모습이 깜박거림 현상과 더불어 버그가 발생했다. 정확히 어떤 원인인지 알 수 없지만, v-for을 돌리는 과정에서 index 값이 변경되면서 해당 데이터를 통으로 불러오는 게 아니라, 변경된 데이터만 불러오는 과정에서 생기는 오류인지, Pr..

최근 Vue.js 와 API 통신을 활용한 간단한 미니 프로젝트를 진행한 적이 있었다. 그리고 공식문서를 활용해보며 Vue.js 라이프사이클 훅을 짧게 살펴봄으로써 우리가 외부 api 데이터를 불러왔을 때, 변경된 자료를 어떻게 화면에 뿌려줄 수 있는 지를 살펴보았다. 또한 미니 프로젝트든, 대형 프로젝트든 상관없이 사용하는 코드는 뷰 개발자라면 Vue에서 제공하는 공식 문서 내용을 토대로 활용해야 하기 때문에 프로그래밍에 정답은 없지만, 기초지식을 쌓고 활용해야 한다는 것에는 모두가 이견이 없을 것이다. 그래서 오늘은 Vue로 만들어보고 있는 미니 프로젝트에서 궁금했던 점을 한 번 살펴보고자 한다. 📌 Vue.js 디렉티브가 뭐야? 디렉티브의 영단어를 살펴보면 Directives이다. 직독 직해해보면 ..

📌 데이터 바인딩 그게 뭔데? 국비지원 웹 퍼블리셔 과정을 수강했던 나는 개발자 친구가 2명이 있다. 한 놈은 프런트엔드 개발자, 한 놈은 백엔드 개발자. 두 친구 모두 나를 개발자의 세계로 인도해준 좋은 친구들이다. 물론, 혼도 많이 났지만 말이다. 아무튼, 불과 몇 개월 전 친구들과 술 한 잔 기울이며 나눴던 대화에서는 프런트 개발자인 친구도, 백엔드 개발자인 친구도 내게 리액트 (자바스크립트 라이브러리)를 꼭 하라고 했다. 개발 시장에서 가장 많이 쓰이고 있다나 뭐라나? 그 당시만 해도 그런 게 있나 보다 하며 넘겼다. 그리고 몇 개월 후 나는 리액트 대신 뷰 Vue라는 프레임워크를 공부하고 있다. 내가 리액트가 아닌 뷰를 선택한 이유는 아래 링크를 통해 확인해보면 좋을 것 같고, ✅ 내가 Vue...