개발자 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️⃣ 타입 시스템 타입 시스템은 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이..

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

국비지원 웹 퍼블리셔 과정을 수료한 나는 제법 긴 시간을 학원에서 보냈지만, HTML과 CSS의 기본적인 기능을 활용할 수 있는 수준이었다. 그래봤자 이제 고작 한 달 남짓 개발자의 맛만 본 나로선 한 달 전이나 지금이나 별반 다를게 없다고 생각한다. 내가 너무나도 운이 좋게 취업에 성공했지만, 내 프로그래밍 실력은 시장에서 전혀 쓸모가 없는 수준. 그래도 감사하게도 회사는 나에게 공부할 시간과 기회를 주셨다. 오늘의 주제는 JavaScript의 동기 처리 방식과 비동기 처리 방식을 알아보는 시간을 가져보고자 했는데 서론이 긴 이유는 이 말을 꼭 하고 싶어서랄까? ✅ JavaScript 를 몰라도 프로그래밍을 할 순 있지만, JavaScript를 모르면 React, Vue, Angular 같은 프런트엔드..

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

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

https://www.daleseo.com/js-async-callback/ [자바스크립트] 비동기 처리 1부 - Callback Engineering Blog by Dale Seo www.daleseo.com Callback함수란?? 뭔데?? 아 진짜 짜증났다...넌 힘내라!! 커몬~~ velog.io 자바스크립트 비동기 처리 로직을 이해하기 위해 전적으로 참고한 'DaleSeo'님의 블로그 포스팅 주소와 '제주에서 온 짱구' 님 포스팅 주소입니다. 이 포스팅에서 설명되는 내용은 모두 'DaleSeo'님의 내용과 '제주에서 온 짱구'님의 블로그 포스팅을 인용했음을 밝힙니다. 아무튼, 본인은 자바스크립트의 콜백 함수와 비동기 함수에 대해 정확한 이해를 하고 싶었기에 이번 포스팅을 통해 공부해보고 기록해보..

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