개발자 9Diin의 개발일기

최근 스타트업에 이직을 하게 되면서, 개발자로서 무지함과 부족함 그리고 여러 가지 만감이 교차하는 요즘이다. 그래도 아직 개발이 너무 재밌기에 웹 프런트엔드 개발자로서 내 역량과 나를 믿어준 회사에 이바지하기 위해 기술 블로그(?)를 한 번 작성해보고자 한다. 그리고 전적으로 내가 이해한 기준을 바탕으로 작성된 것이기에 틀린 부분 혹은 다른 부분이 있을 수 있으니 그 점 양해 바란다. 이번 포스팅은 Vue.js 버전 2에서 TypeScript 호환이 원활하게 되지 않아 JSDoc을 활용한 타입 및 에러 체크를 보다 용이하게 할 수 있다고 동료 개발자분들의 조언을 받아 공부해보고자 한다. 이번 포스팅은 아래 'poiemaweb' 포스팅을 전적으로 이용했다. 그리고 오리지널 공식문서를 살펴보고 싶은 사람은 ..

📌 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에서는 말 그대로 스위치를 껐다..

📌 자바스크립트 기초 개념 바로잡기 ✅ 변수 변수란? 데이터를 저장하고 참조(사용)하는 데이터의 이름 변수는 var, let, const가 있는데 var는 권장사항이 아님 1. let과 const let : 값(데이터)의 재할당이 가능하다. const : 값(데이터)의 재할당이 불가능하다. 2. 예약어 Reserved Word 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어를 말한다. 아래와 같은 변수는 할당할 수 없다. this, if, breack 등과 같은 예약어는 특정 기능을 가지고 있기 때문이다. let this = "Hello!"; // SyntaxError let if = 123; // SyntaxError let break = true; // SyntaxError..

최근 웹스퀘어 5 툴을 익혀야 하는 상황이 되었다. 회사에서 웹스퀘어 5라는JavaScript 프레임워크를 활용한 프로젝트가 내게 할당되었기 때문이다. 어찌 됐던 프런트엔드 개발자의 길로 들어선 이상, 내가 하고 싶은 언어만 할 수 있는 상황이 아니라는 건 알고 있었지만, 신입인 나에게 첫 업무가 웹스퀘어 5라 적잖이 당황했다. 웹스퀘어 5를 자칭(?) 자바스크립트 프레임워크라고 해서 가볍게 봤는데, 가장 많이 든 생각은 내가 자바스크립트 기초가 너무나 부족하다는 걸 깨달았다. 그래도 기초 개념은 있는 줄 알았지만, 내 개 발바닥 수준을 다시 한번 확인하는 계기가 되어 이 참에 자바스크립트 개념을 바로 잡아보고자 한다. 서두가 길었다. 📌 자바스크립트 기초 개념 바로잡기 ✅ 식별자 식별자는 코드 내의 변..

📌 What is this? ✅ this 자바스크립트를 사용함에 있어 가장 흔히 사용하는 값 중 하나는 바로 this 가 아닐까? 매번 this를 사용하면서 정확히 this가 무엇인 지에 대해 깊게 고민해본 적은 없었던 것 같다. 단순히 인터넷 강의에서 사용하다 보니 그냥 나도 모르게 익숙하게 사용했던 것 같다. w3Schools.com에서는 this를 이렇게 정의하고 있다. In a method, this refers to the owner object Alone, this refers to the global object In a function, this refers to the global object In a function, in strict mode, this is undefined In a..

최근 Vue.js 와 API 통신을 활용한 간단한 미니 프로젝트를 진행한 적이 있었다. 그리고 공식문서를 활용해보며 Vue.js 라이프사이클 훅을 짧게 살펴봄으로써 우리가 외부 api 데이터를 불러왔을 때, 변경된 자료를 어떻게 화면에 뿌려줄 수 있는 지를 살펴보았다. 또한 미니 프로젝트든, 대형 프로젝트든 상관없이 사용하는 코드는 뷰 개발자라면 Vue에서 제공하는 공식 문서 내용을 토대로 활용해야 하기 때문에 프로그래밍에 정답은 없지만, 기초지식을 쌓고 활용해야 한다는 것에는 모두가 이견이 없을 것이다. 그래서 오늘은 Vue로 만들어보고 있는 미니 프로젝트에서 궁금했던 점을 한 번 살펴보고자 한다. 📌 Vue.js 디렉티브가 뭐야? 디렉티브의 영단어를 살펴보면 Directives이다. 직독 직해해보면 ..