개발새발 (18) 썸네일형 리스트형 [git] 날려버린 스태시를 찾아서 [problem] VSCode로 작업하다가 잘못된 스태시를 드랍해버린 걸 깨달았다. 깨달았을 때는 이미 드랍하고도 한참 지나서 커밋해시는 기억도 안나고... 근데 생각보다 작업은 많이 했었음. [solution] 1. 명령창에 아래 명령어 입력 git fsck --no-reflog | awk '/dangling commit/ {print $3}' | xargs -L 1 git --no-pager show -s --format="%ci %H" | sort 2. 목록에 있는 커밋 해시를 검색해서 찾기 (gitLens 확장프로그램 쓰면 편함) 3. 이제 살릴 수 있다! git stash apply [회고] 일단 스태시는 영원하지 않고, 휴먼에러로 날려버리기 딱 좋다. 앞으로 중요한 작업물은 꼭 꼭 commit.. [Git] Git History 정리를 위한 rebase -i 명령어 알아보기 안녕하세요, 김선진입니다. 이번에 개발서버에 배포를 줄기차게 하는 프로젝트(모바일 웹뷰 테스트...) 개발을 진행하면서, 커밋로그를 신경쓰지 않고 작업했더니 로컬 브랜치의 깃 히스토리가 살짝 보기싫어졌습니다. 비슷한 커밋로그의 반복... 그래서 마스터 브랜치에 푸시하기 전에 커밋을 하나로 합쳐버릴 생각입니다. 그럼 어떻게 하면 커밋을 하나로 만들 수 있는지 알아볼까요? 0. 서론 However, once you push your work, it is a different story entirely, and you should consider pushed work as final unless you have good reason to change it. In short, you should avoid pu.. [Typescript] Interface 안녕하세요, 김선진입니다. 회사에서 모바일-웹 통신 인터페이스를 정의했고, 코드를 정리하는 과정에서 typescript interface를 사용했습니다. 그리고 매번 프로젝트성 글만 썼었는데, 개념글을 쓰면 블로그 유입량이 늘어날까? 하는 실험도 있음. 0. 서론 아시다시피 타입스크립트는 자바스크립트의 슈퍼셋으로, 자바스크립트의 요상한(?) this와 함수를 1급 객체로 취급하는 부분이 동일하다. 이번에 어떤 문제를 해결하는 과정에서 유틸 펑션을 만들어야 하는 부분이 있었는데, 위 언급한 특성 덕분에 타입스크립트에서는 클래스 대신 함수에도 interface 적용이 가능하다. MDN에서도 class의 첫 소개에 이렇게 적혀있다. "클래스는 사실 함수입니다." 1. Duck typing 인터페이스는 타입스크.. [VueJS] VueStyledComponent 안녕하세요, 김선진입니다. 여러분은 컴포넌트를 만들 때 scss와 styledcomponent중에 뭘 더 선호하시나요? 저는 원래 회사 내 프로젝트에서는 scss를 쓰고 있었는데요, 이번에 별도 프로젝트를 진행하면서 scss의 불편한점이 있다고 생각했습니다. (지극히 주관적임) 1. 자식 컴포넌트에 props에 따라 클래스 바인딩을 해줘야 함(클래스가 존재해야 함) 2. 1번이 아니면 style바인딩 해야함(스타일을 쓰면 위계를 좀 더 생각하며 짜야함) 특히 이번 프로젝트에서는 '테마'를 적용할 수 있게 코딩하는 게 목표였는데요, scss를 통해 테마를 적용하려 하다 보니 메인 테마 컴포넌트에 다른 컴포넌트들이 전부 디펜던시를 가지게 되는 문제가 발생했습니다. 저는 메인 스타일 컴포넌트를 몰라도 테마를 .. [Vue js] Vue js에서 axios를 이용한 HTTP 통신 구현하기. 깃허브 블로그에 방문자 수 세는 기능을 안달았더니 유입량을 알 방도가 없어서 이번 포스트는 티스토리에 작성하기로 했다. 아래 이사한 블로그는 2주 뒤까지는 댓글 기능과 방문자수 기능을 달 생각이다... 이번 포스트는 아래 포스트에서 연재중인 PWA 모임 어플리케이션에서 HTTP 통신부 구현할 때 했던 생각과 코드다. https://junnis0123.github.io/2020/07/25/codingTogether.html [Vue js] Vue js + PWA 모임 어플리케이션 만들기 1.기획 - DOG FOOT 안녕하세요, 김선진입니다. 기존에 개발하던 딜리장터 프로젝트 에서 firebase 로그인을 버리고 코그니토 로그인으로 롤백하는 걸로 결정났습니다…. 열심히 달았는데 슬퍼져 vue 개발 하면서 기.. [Vue.js] 동적으로 rowspan이 있는 table 만들기 --- layout: post title: "[Vue.js] 동적으로 rowspan이 있는 table 만들기" date: 2020-01-21 15:37:31 +0900 --- 안녕하세요, 김선진입니다! vue 에는 동적 엘리먼트 생성 방식으로 아주 쉽고 유용한 v-for 구문이 있습니다. 이 v-for를 이용해서 rowspan이 있는 테이블을 만드는 방법에 대해 작성해보려고 합니다. # 기존 테이블 구조 생각하기 html으로 table에 rowspan을 생성하는 방법을 생각하면 쉽게 만들 수 있습니다. rowspan이 딱 하나 있을 경우는 아주 쉽죠. 3칸 행 병합 예시 예시 예시 예시2 예시2 예시2 첫 행에서 병합할 셀에 대해서만 rowspan 속성값을 병합하고 싶은 행 개수 만큼 주면 됩니다. 그러.. [Vue.js] 이모지 입력이 되지 않는 TextArea Component 만들기 --- layout: post title: "[Vue.js] 이모지 입력이 되지 않는 TextArea Component 만들기" date: 2020-01-08 15:37:31 +0900 --- 안녕하세요, 김선진입니다! 회사에서 개발 프로젝트를 진행하던 중, 이모지 입력을 막아야 하는 일이 있었는데요, 필터나 다른 귀찮은 방법 대신 mixin을 적용해서 이모지 입력만 막는 커스텀 텍스트 에리어 컴포넌트를 만들었습니다. 차근차근 커스텀 컴포넌트 만들기에 대해 작성해보겠습니다! # Custom TextArea Component 만들기 ## vue file 만들기 우선, 커스텀 컴포넌트를 만들 뷰파일을 하나 생성해주세요. 이름은 CustomTextArea 로 하겠습니다. template에 아주 간단하게 tex.. [Vue] regex를 적용한 TextInput에서 값 업데이트가 제대로 되지 않는 현상 0. 서론 반나절동안 저를 괴롭힌 부분이었습니다. 커스텀 텍스트인풋 컴포넌트를 만들었는데 도무지 값 업데이트가 되지 않는것이었죠. 이모지를 regex로 거르고 input 리스너를 통해 emit을 하는데, 분명 값은 제대로 깔끔한 텍스트가 넘어오는 반면, 보이는 부분의 값은 변하지 않는겁니다... 1. 원인 아주 당연한 원인이었습니다. 입력 : 1234덜덜 입력 : 1234덜덜😀 -> regex -> 1234덜덜 아시겠나요? 바로 실제 값이 변하지 않아서 렌더링을 하지 않았던 겁니다. 너무 충격적인 이유로 고민했네요. 2.해결법 간단하게 vm.$forceUpdate(); 한줄 추가해주시면 됩니다. 이전 1 2 3 다음
