개발자 9Diin의 개발일기

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

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

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

https://sungjaecloud.tistory.com/339 JSDoc이란 무엇인가? 최근 스타트업에 이직을 하게 되면서, 개발자로서 무지함과 부족함 그리고 여러 가지 만감이 교차하는 요즘이다. 그래도 아직 개발이 너무 재밌기에 웹 프런트엔드 개발자로서 내 역량과 나를 sungjaecloud.tistory.com 위 포스팅에 이어 빠르면 내일 늦으면 차주부터 새로운 회사에서 새로운 업무에 투입이 될 예정이라, 이곳에서 현재 작업하고 있는 작업자들의 스타일과 개발 규칙들을 익힐 필요가 있다고 생각하여 'JSDoc이란 무엇인가?' 포스팅에 이어 'CSS Variables란 무엇인가?'라는 근본적인 질문에 답을 해보는 시간을 가져볼까 한다. 1️⃣ What are CSS variables? Custom ..

📌 API Data is Changed!? 위 사진은 내가 Vue.js 프레임워크를 이용해 KakaoMap API와 OpenWeatherMap API를 활용하여 지도에 표시된 마커를 클릭하면 클릭한 좌표 값을 토대로 날씨 API로 데이터를 Props 하여 그 지역별 날씨 정보와 이미지를 불러오는 미니 프로젝트를 진행했다. 이처럼 좌표를 클릭하면 해당 지역의 정보가 출력되는데, 이 프로그래밍을 완성하기에 앞서 data 변경 시 화면단에서 출력이 될 때, 데이터가 바뀌는 모습이 깜박거림 현상과 더불어 버그가 발생했다. 정확히 어떤 원인인지 알 수 없지만, v-for을 돌리는 과정에서 index 값이 변경되면서 해당 데이터를 통으로 불러오는 게 아니라, 변경된 데이터만 불러오는 과정에서 생기는 오류인지, Pr..

안녕하세요, '손재의 파이프라인' 블로그를 운영 중인 주인장 '손재'입니다. 지난 4월 22일부터 저는 본격적으로 국비과정으로 진행되는 웹디자인 프런트엔드 과정을 수강 중에 있습니다. IT 개발자 직업군에는 특히 국비지원 과정에서는 생각보다 전공자보단 비전공자의 비율이 훨씬 높습니다. 그래서 아무래도 비전공자들은 처음부터 이해하기가 어렵기도 하지만, 따라가는데 급급할 수밖에 없지요. 그래서 무엇보다도 복습이 철저하게 진행돼야 하는데, 이곳을 빌어 저는 개인적인 복습도 진행하면서 제가 만든 자료와 공부 내용도 공유하고자 이렇게 포스팅을 진행하게 되었습니다. 'CSS의 정의' 기초 편을 보기 전에 아래 링크를 클릭하여 'HTML의 정의'편을 가볍게 보고 오시길 바랍니다. https://sungjaecloud..

안녕하세요, '손재의 파이프라인' 블로그 주인장 '손재입니다. 국비지원을 받아 웹퍼블리셔 프런트엔드 개발자에 도전하는 저의 따끈따끈한 후기 2탄 바로 시작하겠습니다. 오늘도 어김없이 오전 10시부터 오후 7시까지 점심시간을 제외하고, 1주일에 5번 8시간씩 교육을 받는다. 위치는 강남. 아침마다 지옥철을 타고 오는데 여간 힘든 게 아니다. 얼마 전 포스팅한 '웹퍼블리셔 프런트엔드 도전기 1탄'에 댓글이 몇 개 달렸는데 나를 진심으로 걱정해주는 건지 아니면, IT업계에선 웹퍼블리셔와 프런트엔드를 동일하게 보는 걸 싫어하는 건지 모르겠지만, 조언처럼 보이는 댓글이 꽤 신경 쓰였다. 나는 이쪽에 대해 아무런 지식이 없기도 하고, 금전적으로 여유가 없어 국비지원을 받는 건데 국비지원에서 배우는 모든 과정은 프런..