개발자 9Diin의 개발일기

Vue.js 3.x 버전으로 프로젝트를 진행하면서 레퍼런스 API를 Options API가 아니라 Composition API로 개발하고 있는 중인데, 여기에 더불어 TypeScript까지 접목시켜 개발 중이다 보니 개발 속도가 상당히 더뎠다. (물론, 내가 이 둘을 처음 사용해 보는 것도 큰 이유이긴 하지만) 그래도 UI 라이브러리를 최대한 걷어내고 생개발로 진행하다 보니 배우는 점도 많고, 특히 React에는 굉장히 UI 플러그인이 잘 되어 있는데 Vue.js는 Element UI라는 것 밖에 없어 정말 힘들었다. (Element UI는 디자인도 구림.) 그래도 HTML CSS를 하나하나 재개발해가면서 컴포넌트화 시키는 과정이 나에게 굉장히 큰 도움이 되고 있다. 아무튼, 각설하고 등록 다이얼로그를 ..

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

첫 프로젝트 진행이 마무리 단계에 접어들면서, 8월이 밝았다. 그러나 모든 개발이 그렇듯 예상치 못한 이슈가 생겼다. 다행히(?) 크리티컬 한 이슈는 아니었지만, 이번 이슈로 인해 몇 가지 경우의 수가 발생할 수 있음을 깨달을 수 있었던 좋은 계기가 되었다. 그래서 이번 시간엔 해결했던 이슈를 기록해보고자 했다. 1️⃣ Issue - 월초에 데이터 리셋이 될 경우 - 빈 데이터가 넘어오기 때문에 화면에 데이터 조회가 되지 않는다. 나는 자바스크립트 reduce라는 메서드를 사용하여 배열의 각 요소의 합을 구하는 로직을 짠 적이 있다. Vue.js의 계산된 속성 / 계산된 데이터를 만들어 내는 computed 속성에 total이라는 데이터를 새로 만들었는데 그 리턴 값을 reduce를 통해 구현한 것이다...

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..

안녕하세요. 구디사는 개발자 9Diin(구디인)이라는 닉네임으로 웹 프로그래밍 강의 콘텐츠를 다루고 있는 초보 유튜버입니다. 이번 포스팅은 제가 거의 반년 동안 강의 콘텐츠를 준비하면서 무얼 얻었고, 무엇이 바뀌었는지 회고를 작성하는 시간을 가져보고자 합니다. 사실 경력이라고 하기에도 창피한 초보 개발자라서 누군가를 가르친다는 게 말도 안 된다고 생각을 하고 있는 터라 어디까지나 내 개인적인 성장을 위해, 스스로 공부한 것들을 기록하는 것에 중점을 두고자 시작했던 콘텐츠였기에 구독자나 조회수에 연연하지 않았는데 그래도 200명이 넘는 분들이 내 채널을 구독해주시고, 댓글도 달아주시고, 메일로 여러 문의까지 오는 걸 보고 사뭇 많은 것을 느꼈는데요. 그래서 서두에 말했던 것처럼 감사한 마음과 다시 한번 더..

https://sungjaecloud.tistory.com/355 자바스크립트 콜백 함수란 무엇인가? https://www.daleseo.com/js-async-callback/ [자바스크립트] 비동기 처리 1부 - Callback Engineering Blog by Dale Seo www.daleseo.com Callback함수란?? 뭔데?? 아 진짜 짜증났다...넌 힘내라!! 커몬~~ velog... sungjaecloud.tistory.com 비동기 처리 Promise를 알아보기 전에 ES6에서 Promise가 도입되어 널리 사용되기 전의 문제점을 한 번 살펴보고 갈 필요가 있다고 생각한다. 콜백 함수를 통한 비동기 처리의 문제점은 무엇이 있을까? findUserAndCallBack(1, funct..

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

https://www.youtube.com/watch?v=k55sVToI5B0 아래 포스팅을 보기 전, 제가 만든 영상을 미리 시청하시고 보신다면 더 쉽게 이해하실 수 있을 것 같습니다. 😊 이번 포스팅에서는 과연 비전공자 출신 취업준비생은 어떻게 개발자로 취업할 수 있을지, 어떻게 개발자가 될 수 있을 지에 대한 고민을 함께 진행해보도록 하겠습니다. 저 역시 비전공자 출신 프런트엔드 개발자이기에 보다 더 진솔하게 팁(?)을 전달해드릴 수 있지 않을까, 혹여 저와 같은 고민을 했던 분들이 계시지 않을까 하여 준비해 본 포스팅이니 가볍게 읽어주셔도 좋을 것 같습니다. 목차를 총 5개의 파트로 준비해봤습니다. 첫 번째로 개발자란 무엇인지에 대한 정의와 같은 근본적으로 어떤 업무를 하는 사람인지 알아보고, 두..