개발자 9Diin의 개발일기

https://sungjaecloud.tistory.com/380 Vue.js로 CRUD 구현하기 - 1강 안녕하세요, 구디사는 개발자 '9Diin' 입니다. 오늘부터 Vue.js 자바스크립트 프레임워크를 사용하여 흔히 '투두리스트'라고 불리는 웹 서비스를 한 번 만들어 볼 텐데요. 이전 콘텐츠였던 Open Weather sungjaecloud.tistory.com 안녕하세요, 구디사는 개발자 '9Diin' 입니다. 먼저, 제 강의에 관심을 가져주신 구독자 여러분께 진심으로 감사하단 말씀 드립니다. 1강 - 프롤로그 영상에서 영상으로 보셨던 내용 중 일부는 위 게시물에서 발췌한 부분이 있기 때문에 위 게시물을 보시는 것도 추천드립니다. 다시 한 번 감사드린다는 말씀 드리면서 프롤로그 강의 자료는 아래 첨..

안녕하세요, 구디사는 개발자 '9Diin' 입니다. 오늘부터 Vue.js 자바스크립트 프레임워크를 사용하여 흔히 '투두리스트'라고 불리는 웹 서비스를 한 번 만들어 볼 텐데요. 이전 콘텐츠였던 Open Weather Api를 이용하여 간단한 조회기능을 구현했던 것처럼 디자이너 친구에게 투두리스트 디자인을 부탁했습니다. 굉장히 높은 퀄리티의 투두리스트가 될 것이라 예상이 듭니다. 저 역시 아직 개발에 착수한 상태가 아니기 때문에 그리고 경력이 고작 1년밖에 되지 않은 주니어 개발자이기 때문에 어느 부분까지 기능 구현이 가능할지 가늠은 안되지만, 최대한 디자인과 비슷하게 그리고 모든 기능을 구현할 수 있도록 공부하고, 구글링을 해보면서 여러분들께 하나하나 알려드리도록 하겠습니다. 1. 개요 우리가 함께 앞으..

Vue.js라는 언어를 가지고 웹 개발을 하는 사람들에게 Vuex는 반드시 사용되어야 할 편리한 도구이다. 최근 Pinia라는 Vue.js의 공식 상태 관리 라이브러리가 새롭게 개발되어 이제 아니 앞으로 Vuex 사용이 점차적으로 줄어들 테지만, 우리는 그래도 Pinia로 넘어가기 전에 Vuex를 반드시 알 필요가 있다. Pinia와 기능이 크게 다르지 않기 때문에. 그래서 공식문서와 내가 따로 유튜브 영상으로 만들어 놓은 자료가 있으니 한 번 참고해주길 바란다. https://www.youtube.com/watch?v=A3vmGPdXlyA https://vuex.vuejs.org/#what-is-a-state-management-pattern What is Vuex? | Vuex What is Vuex..

'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란 무엇인가? https://sungjaecloud.tistory.com/290 Vue.js란 무엇인가? 상기 자료는 Vue.js가 무엇인지 필자의 소견대로 정리 작성한 내용입니다. 많이 부족하고, 다소 잘못된 부분이 있을 수 있기에 아래 자료를 보시는 분들께선 너그러이 이해해주시면 감사하겠습니 sungjaecloud.tistory.com Vue.js 라이프사이클 훅은 무엇일까? https://sungjaecloud.tistory.com/335 Vue.js 라이프사이클 훅이란 무엇일까? Vue.js라는 매력적인 자바스크립트 프레임워크를 가지고 처음 개발을 할 때, (필자 기준) 가장 어려웠던 점은 이번 포스팅에서 다룰 '라이프사이클 훅'이었다. Vue.js라..

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