개발자 9Diin의 개발일기

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

본 포스팅은 '러닝 타입스크립트' 도서를 전적으로 참고하여 작성하였습니다. 1️⃣ TypeScript란 무엇인가? TypeScript는 마이크로소프트 회사에서 구현한 JavaScript 슈퍼셋(Superset) 프로그래밍 언어이다. 확장자로는. ts를 사용하며 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다. 위 설명은 어디까지나 정의에 가깝고 쉽게 풀어 설명해 보자면 타입이라는 것이 지정되어있지 않은 자바스크립트에 타입(Type)이라는 것을 설정하여 정적 타입을 명시할 수 있도록 한 것이 순수 자바스크립트와의 가장 큰 차이점이라고 할 수 있다. 보통 자바스크립트를 Dynamic Language라고 부르는데 자유도가 ..

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를 통해 구현한 것이다...

안녕하세요. 구디사는 개발자 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을 사용해서 해보라 그랬으며 그래서 몇 시간 동안 고민해보았으나, 이미 레퍼런스 코드가 있음에도 불구하고 이해가 되지 않아 리드 개발자분께 자문을 구했다..

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