개발자 9Diin의 개발일기

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

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

안녕하세요, 손재의 파이프라인 블로그 주인장 '손재'입니다. 오늘의 포스팅은 지난 4개월 동안 운영해 온 Vue.js를 시작으로 앞으로 쭉쭉 다양한 콘텐츠를 준비해 갈 제 유튜브 채널, 구디사는 개발자 '9Diin' 채널을 운영해 온 후기를 남겨볼까 합니다. 사실, 기술 블로그만 운영해보고자 했는데 텍스트로 모든 정보를 전달하기가 쉽지 않더라고요. 양도 많고 말이죠. 그래서 예전 여행 영상 편집했던 간단한 편집 스킬을 익혔던 터라 저도 기술개발 유튜버 한 번 해보자고 생각하고 시작해봤습니다. https://www.youtube.com/channel/UCzX62RyG9P1kZaF8YLF7jjA 번거로우시겠지만, 많은 관심 가져주시고 구독과 댓글 많이 부탁드려요! 9Diin 구디사는 개발자🤔 www.yout..

📌 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를 자칭(?) 자바스크립트 프레임워크라고 해서 가볍게 봤는데, 가장 많이 든 생각은 내가 자바스크립트 기초가 너무나 부족하다는 걸 깨달았다. 그래도 기초 개념은 있는 줄 알았지만, 내 개 발바닥 수준을 다시 한번 확인하는 계기가 되어 이 참에 자바스크립트 개념을 바로 잡아보고자 한다. 서두가 길었다. 📌 자바스크립트 기초 개념 바로잡기 ✅ 식별자 식별자는 코드 내의 변..