개발로그

전직장에서는 윈도우를 쓰니까 원격접속할때 항상 putty를 써왔다. 지금 회사는 맥을 쓰지만 젠킨스로 배포하니 직접 서버 접속할 일이 없어서 세상 편한것... 그런데 개인공부겸 사고싶은 물건이 있어서 재입고 알람봇을 만들다가 맥으로 서버에 접속할 일이 생겼다. 그래서 예전에 구글 블로그에 포스팅 해두었던 자료를 재탕!! 맥에서는 putty를 받을 필요도 없다. 기본 터미널로 바로 연결되는걸~ 방법은 아래와 같다. 터미널에서 직접 명령어를 입력해서 연결하는 방법도 있지만 나는 UI를 이용하는게 편하니까 그 방법으로 적어두어야지. 1. 먼저 터미널을 연다. 2. 상단에 셸 > 새로운 원격 연결... 을 누른다. 3. 보안 셸(ssh)를 선택하고 아래에 [+] 버튼을 누른다. 4. 다음과 같은 창이 뜨면 [서..

1. 2019 W3C HTML5 컨퍼런스 매년 과기부에서 주최하는 행사. - Vue.js 발표 자료 링크https://github.com/joshua1988/vue-five-common-mistakes - 흥미로운 주제들 - SVELTE - Project Fugu https://www.chromium.org/teams/web-capabilities-fugu - fugu는 복어라는 뜻. 잘쓰면 좋지만 잘못쓰면 독이된다... - fugu로는 네이티브에서만 가능한 파일시스템에 접근 가능하다. - PWA 최신 API 목록 https://developers.google.com/web/updates/capabilities 2. vim으로 자동 생성된 import 구문의 경로 앞에 붙는 '@'는 얼라이언스라고 하는데..

얼마전 본 면접에서 this에 대한 질문을 받았었는데 전역에 선언된 화살표 함수 내에서 this가 undefined 값을 가진다고 완전히 잘못된 대답을 하고는 집에 돌아와서 심히 자괴감을 느낀터라 이번 기회에 정확하게 정리를 해야겠다고 결심했다. 이 글은 [코어 자바스크립트 (정재남, 위키북스)] 책을 참고하여 제 생각과 함께 정리한 글입니다. https://wikibook.co.kr/corejs/ 코어 자바스크립트: 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다! 최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아닙니다. ECMAScript2015 시대인 현재에 ..

오늘 한 일 패스트 캠퍼스 "Vue.js로 구현하는 PWA 캠프" 3주차 강의 수강. 공부 내용 1. 상수는 vue 인스턴스의 data 속성에 넣지 않는다. 넣는 순간 get, set 함수 생기기 때문에 그게 다 비용이다. 불필요한 비용은 줄여야 한다. 2. $(달러)속성은 되도록 사용하지 말자. 나중에 고급패턴을 이용할 때 쓸일이 있긴 하나, this.$data.user 같은 코드는 공식 문서에서도 권고하지 않는다. 3. 터미널에서 touch TodoHeader.vue TodoInput.vue TodoList.vue 이런식으로 하면 한 번에 여러파일 생성가능. 4. 컴포넌트 파일 생성하는 scf 단축키 -> vue 로 변경 5. vex 단축키는 import와 export default를 한번에 생성해주..

JSConf Korea는 세계 각국에서 열리는 JSConf의 일환으로 2019년에 한국에서 처음으로 열리는 행사다. 이러한 행사에 운좋게 양도티켓을 얻어서 참가할 수 있었던 것은 정말 행운이었다. (그것도 얼리버드 티켓으로...ㅎㅎ) 사실 예전부터 로망이었는데 이렇게 규모가 있는 컨퍼런스에 꼭 참여해보고 싶었다. 그러나 규모가 큰 행사는 대부분 평일에 열리기 때문에 회사 다니면서는 연차내고 겨우 NAVER TECH CONCERT: FRONT END 2019 에 한 번 참여했었다. 이것도 운좋게 당첨이 되서 갈 수 있었는데 당시 회사에서는 컨퍼런스에 간다고 하니 지원은 커녕 '뭐 다녀와도 상관은 없지만 큰 도움은 안될거다' 라는 식으로 말하고 그냥 내 연차를 하루 써서 다녀와야 했다. 그렇게 발전없는 회사..

오늘 한 일 [node.js 교과서] 책 3장 [노드 기능 알아보기] 공부 완료. 프로그래머스 알고리즘 1문제 풀기 완료. 패캠 강사님이 주신 자료중 How DNS Works 1회독 완료. 9월 3일 열리는 JSConf Korea 2019 티켓을 양도하고싶다는 사람을 오픈채팅방에서 우연히 만나 극적으로 양도 받음..!! JSConf 운영진 프로필을 보다가 블로그를 벨로퍼트님이 만드신 velog로 운영하는 분이 있어서 들어갔다가 자연스럽게 가입함. 그러나 그곳에 TIL을 올리기엔 내 글이 너무 허접해 보여서 일단 기존 운영하던걸로 하기로 결정. 기존에 구글블로그를 메인으로 하고 티스토리를 작성용으로 썼으나, 구글블로그는 태그가 곧 네비게이션이 되는지라 태그지정을 마음껏 하기가 어려운 점, 템플릿이 예쁘지 ..

얼마전 Chart.js로 그래프 작업을 하면서 겪었던 황당한 버그였는데 혼자 몇 분간 삽질하다가 구글에 검색해보니 생각보다 간단하고 명확한 이유여서 빠르게 해결할 수 있었다. 한 캔버스에서 일간, 주간, 월간 버튼을 클릭할 때 마다 다르게 보여지게 구현해야해서 하나의 변수에 그래프 데이터를 저장해두고 사용자 이벤트가 발생할 때 마다 해당 변수의 datasets 프로퍼티에 그래프 데이터를 할당해주었는데 그래프의 특정 포인트에 마우스 오버 할 때 마다 이전 데이터가 화면에 나타나는 것이다. (예를 들어, 월간 클릭된 상태인데 처음에 로드한 일간 데이터 바뀜) 게다가 마우스를 움직이면 또 새로운 그래프로 나왔다가 왔다갔다 함... 처음엔 너무 황당한 버그라서 어디서부터 손을 대야할지도 몰랐는데, 검색하니 바로..

velopert 김민준님이 쓴 책 [리액트를 다루는 기술]을 보는데 공부를 시작하기에 앞서 nvm 설치를 권장하길래 설치하려는데 설치도 안되고, vim 사용법도 몰라서 설치하는데만 30분정도를 허비했다... 그래서 혹시 나와 같은 일을 겪는 사람을 위해, 또 나중되면 또 까먹을(것이 분명하지만) 나 자신을 위해 이렇게 포스팅을 해둔다. NVM 설치는 사실 그렇게 어렵지 않다. https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1">NVM Quick Start 여기에 나온것처럼 코드 몇 줄이면 끝난다. 그러나 처음 명령어로 제대로 설치되지 않을 경우, vim 에디터를 이용하여 스크립트를 추가해야하는데, 여기서 나처럼 vim 사용법을 1도 모르는 사..