개발자 9Diin의 개발일기

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

본 포스팅은 '러닝 타입스크립트' 도서를 전적으로 참고하여 작성하였습니다. 1️⃣ 타입의 종류 타입스크립트에서의 타입은 자바스크립트에서 다루는 값의 형태에 대한 설명이다. 우리가 흔히 알고 있는 자바스크립트의 자료형과 비슷하다고 이해하면 좋다. 여기서 '형태'란 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산자가 설명하는 것을 의미한다. 타입스크립트의 가장 기본적인 타입은 자바스크립트의 일곱 가지 기본 원시 타입 (Primitive Type)과 동일하다. 타입스크립트의 Type null undefined boolean string number bigint symbol 2️⃣ 타입 시스템 타입 시스템은 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이..

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. 개요 우리가 함께 앞으..

첫 프로젝트 진행이 마무리 단계에 접어들면서, 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..