개발자 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라고 부르는데 자유도가 ..

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

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

📌 Prologue 나는 Vue.js라는 자바스크립트를 활용한 지 이제 한 달 남짓이다. Vue.js (이하 Vue)를 사용하면서 느꼈던 것은 Vue라는 언어를 만들어 낸 창시자는 정말 너무나도 대단한 사람처럼 느껴졌고, 프런트엔드 개발자라면 당연히 자바스크립트라는 언어를 잘 다룰 줄 알아야 하지만, 보다 멋지고 간편한 그리고 효율성 좋은 Vue를 활용하는데 자바스크립트의 기초만 있는 사람이어도 어느 정도 활용이 가능하는 게 내겐 너무나도 큰 장점으로 와닿았다. 그래서일까? 나는 Vue가 너무 좋고, 더 깊게 잘 배우고 싶다. 아무튼, 본격적인 Vue.js의 Lifecycle Hooks에 대해 살펴보도록 하자. 📌 Lifecycle Hooks 내가 근 한 달 가까운 시간 동안 그중의 반은 회사 적응 기간..

📌 함수 Function ✅ 콜백 Callback 콜백(Callback) 함수는 함수의 인수로 사용되는 함수이다. 이해를 돕기 위해 아래 코드 setTimeout 메서드를 활용한 예제를 보자. // setTimeout(함수, 시간) function timeout(callback) { setTimeout(() => { console.log('SON7AE'); callback(); }, 3000); } // timeout 함수 내부의 함수를 callback 함수, callback이라고 한다. timeout(() => { console.log('Done'); }); // console.log('Done'); 위 코드를 보면, function timeout(callback) 이 부분에 인수로 callback을 ..

📌 조건문과 반복문 ✅ 조건문 (If statement) 랜덤 함수를 형제 컴포넌트로 만든 후에 import 시킨 후, 랜덤 함수의 반환 값이 0과 2 혹은 그 나머지 값일 때 출력되는 값을 다르게 설정해보았다. import random from './getRandom'; // 조건문 (If statement) console.log(random()); const a = random(); if (a === 0) { console.log('a is 0'); } else if (a === 2) { console.log('a is 2'); } else { console.log('Rest...'); } ✅ 조건문 (Switch statement) 조건문 switch statement에서는 말 그대로 스위치를 껐다..