하수도키의 성장일기

개발일기/Javascript

Javascript timezone, language 구하기(타임존, 언어, 국가)

이번에 살펴볼 내용은 타임존, 언어 구하기이다. 다국어 사이트 작업 또는 이 사람이 어떤 언어를 사용하고 있는지에 대한 데이터를 얻고자 할 때 필요한 내용이다. 타임존, 언어, 국가 코등 등 검색을 할 텐데 여기서는 서버, 클라이언트에서 구하는 방법을 몇 개 살펴보겠다. 서버에서 구하기 Accept-Language 모던 브라우저에서 언어를 설정한다면, HTTP 요청할때 header에 Accept-Language을 포함시켜 보낸다. 보통 Accept-Language: en-Ca, ar-Eg:q=0.5 이런 식으로 보낸다. 여기서 q 값은 가중치이다. 명시적으로 적지 않으면 기본값은 1.0 이다. 위 예를 살펴보면 사용자가 en-CA(Canadian English) 를 1.0으로 선호하고 그다음 ar-EG(..

개발일기/Vue.js

[Vue.js] 이벤트 전파(버블링, 캡쳐링) 살펴보기

오랜만에 쓰는 포스팅이다. 이번에는 Vue에서 이벤트 전파에 관련된 포스팅을 쓰고자 한다. 자바스크립트 이벤트 버블링, 캡쳐링, 위임, 전파 등 여러 가지 아마 살펴봤을 걸로 기억한다. 면접이나 기술 질문에도 대부분 포함되는걸로 알고 있다. 그럴 때마다 공부하고 이해하고 다시 까먹고 반복 중이다. 이해가 안 되거나 잘 모르겠으면 우선 외우는 게 중요한 것 같다. 여기까지 온 사람이라면 아마 우선 외워야 할 것 같다. 개요 Vue를 통해 이벤트 Phase를 알아보기 버블링, 캡쳐링 살펴보기 Vue event modifier (prevent, self, stop) 살펴보기 예제 코드 Outer first Inner Inner 예제는 어떤 포스팅에서 보고 테스트한 거 같은데 출처를 잃어버렸다. 우선 이벤트에 ..

책일기

[북리뷰] 실리콘 밸리 리더십

실리콘밸리는 예전부터 들을 때마다 웅장한 느낌이 있다. 미국에 있다는 것 빼고 사실 제대로 찾아본 적도 없고 그래서 어디에 위치하고 있는지도 모른다. 이 기회에 어디있는지 한번 살펴보자. 구글 맵에서 가져왔다. 실리콘 밸리는 미국 캘리포니아주 샌프란시스코 만 지역 남부를 이르는 말이다. 이렇다고 한다. 책 지은이는 마이클 롭(Michael Lopp)이라는 사람이고 엔지니어링 리더로서 슬랙, 볼랜드, 넷스케이프, 팔란티어, 핀터레스트, 애플 등에서 인재를 육성하고 제품을 탄생시켰다고 한다. 책 소개 책 제목부터 리더십 관리자 급이 보는 책이다. 관리자가 아닌 사람들이면 관리자가 어떤 일을 해야되는지 알 수 있는 책이다. 책 목차 목차는 크게 3분류로 나눠진다. 1부 넷스케이프 시절: 진정한 관리자 세상에 ..

책일기

[북리뷰] 러닝 리액트 2판

최근 프론트엔드 개발자로 일하면서 React는 빠질 수 없는 존재다. 페이스북에서 사용하고 있어 Vue 보다 더 점유율이 높고 React-navtive까지 지원하니 많은 사람들이 관심을 갖고 공부를 하고 있다. 그중에 나도 한 명인데 관심만 갖고 공부를 하지 않고 있는 상태였다. 책 사고 스터디하고 강의 결제하고 딱 여기까지 보고 공부하고 듣지를 않는다. 이번에 한빛에서 지원받은 책이 러닝리액트 2판(Learning React)라서 타이밍 좋게 집중하고 힘들게 책을 읽어봤다. O'REILLY 출판사에서 나온 책답게 표지 동물은 멧돼지이다. 아주아주 무섭다. 쓰다 보니 러닝 리액트 1판도 예전에 구매했던 기억이 생각났다. 1판(2018년)에서는 리덕스(redux)에 대한 내용을 다뤘다면 2판에서는 훅스(h..

강아지일기

[강아지 영양제] 롬 헬스 힙 앤 조인트 - Roam Health HIP & JOINT (관절 영양제)

빈희가 피부 쪽이 약해서 피부 영양에만 신경을 주로 썼다. 그래서 샴푸, 사료, 간식, 수분 크림, 오메가 3 영양제 등 피부와 관련된 영양제 및 간식들을 주로 구매했고 줬다. 빈희가 우선 잡종이라서 특정 종들이 갖는 고질병 같은 게 없어서 다른 부분들을 신경을 쓰지 않았다. 별도로 매트를 깔지도 않았고 침대나 소파에 오를 때 계단을 설치하지도 않았다. 하지만, 나이가 하나 둘 많아지고 주변에서 슬개골이나 관절, 허리디스크 등 아픈 강아지들을 보게 되었다. 간식이랑 강아지 용품 구매하다가 관절 영양제가 보이길래 하나 주문했다. 후기 같은 건 찾아보지 않고 사이트에서 판매 중인 제품들 중에서 제일 좋아 보이고 괜찮은 걸로 골랐다.(이 기준은 외국 제품을 선호한다.) 제품 사진에 그림을 보면 사슴이 그려져 ..

책일기

[북리뷰] 김상형의 SQL 정복

SQL, DB, DBMS 이런 용어들은 실무에서 듣긴 하지만 현재 내가 하는 개발 업무에서는 큰 필요가 없는 상태이다. 정보처리기사 시험 준비할때 많이 봤던 친구들이다. 그때는 그래도 대략적으로 느낌이 왔었는데 사용을 안하고 안보다 보니 가물가물해졌다. 김상형의 SQL 정복 소개 책 제목이 너무 정직하다. 김상형의 SQL 정복 본인의 이름을 걸고 SQL 정복 딱 두 단어로 책을 표현했다. 책을 받고 두께를 확인 한 순간!! 이건 SQL의 정석이라고 생각이 들었다.(수학의 정석처럼...) 페이지수는 700페이지 이상이다. 또, 중간에 연습문제라는게 있어 혼자 생각하고 정리할 시간을 준다. 연습문제가 있으니 더더욱 수학의 정석 느낌이 강하게 들었다. SQL에 A-Z까지 모든걸 설명해준다. 초보자들은 처음부터..

개발일기/Javascript

[Javascript] URL페이지를 Location, Redirect, Reload 통해 살펴보자.

Javascript를 통해 URL 페이지를 관리할 때 loaction.load, location.href 등을 많이 사용했다. 사용할 때마다, 자연스럽게 손에 익어 타자를 치고 실행을 했지만 정확하게 살펴본 적이 없었다. 운 좋게 미디엄 포스팅에서 관련 내용이 있어서 한번 의역 위주로 번역해보았다. 원문은 아래 링크를 참고 https://betterprogramming.pub/redirect-refresh-and-access-the-url-of-the-current-page-in-javascript-3d9160e8317e Redirect, Refresh, and Access the URL of the Current Page in JavaScript JavaScript’s location object be..

강아지일기

[강아지 영양제] 아이슬란드 퓨어 사딘 엔쵸비 오일 (강아지 피부 영양제)

저번 사료 포스팅에서도 말했듯이 우리 집 강아지 빈희는 피부가 약한 건지 알레르기가 있는 건지 엄청 긁는다. 처음에는 신경을 안썼지만 늘어가는 병원비와 긁고 난 뒤 강아지 상태를 보면 마음이 아파서 관리를 해줘야겠다는 생각이 든다. 나보다 더 건강 관리를 잘 받고 있다. 내돈내산으로 직접 구매한 후기입니다. 아이슬란드 퓨어 오일 사딘 엔쵸비 구매 이유 찾아보니 오메가3가 피부에 좋다는 글을 봐서 검색을 하기 시작했다. 어떤 사람들은 사람들이 먹는 오메가 3을 줘도 된다 라는 것도 있어서 혹해서 사람들 꺼 줄꺼하다가 급여가 힘들 것 같아서 우연히 검색하다 걸린 오일을 사게 되었다. 그래서 같은 브랜드에 오메가 오일로 대용량을 아마존에서 직구로 구매 후 급여를 시작했다. 근데 펌프를 누를때마다 오일이 사방팔..

책일기

[북리뷰] 한 권으로 끝내는 Node & Express(2판)

한 권으로 끝내는 Node & Express 소개 초판이 아니고 2판이다. 개정판으로 생각하면 된다. Express 4.0을 바탕으로 알려준다.(현재는 Express 5.0 alpha가 나온 상태) 안정성을 인정받은 최선 버전으로 진행된다. 아래부터는 책 내용을 인용했다. 대상 독자는 자바스크립트와 노드, 익스프레스로 웹 애플리케이션을 만들고자 하는 프로그래머를 위한 책이다. 2판에서 달라진 점은 API와 정적 자원의 서버로 익스프레스를 사용하는 법을 설명하고, SPA 예제도 수록해 진화한 노드와 익스프레스를 체험할 수 있도록 개정했다. 책의 뒷편을 참고하면 자바스크립트 개발 스택의 핵심인 노드와 익스프레스로 동적 웹 애플리케이션을 만들어보세요. 이 책은 웹 사이트 개발 과정을 살펴보며 익스프레스 기본..

강아지일기/사료

[강아지 사료] 카나간(CANAGAN) 프리런 치킨 포 독 스몰 브리드 후기(강아지 사료 추천)

강아지 한 마리를 키우면서 해야 할 일들이 너무 많다. 내 몸보다 더 챙겨주는 것 같다. 현재 빈희가 보통 8-9kg를 왔다 갔다 하는데 사료 주문할 때 1-2kg는 금방 먹어서 주문할 때는 6kg나 10kg 주문하고 있다. 예전에는 10kg 주문했는데 생각보다 오래 먹어서 위생적으로 좋지 않을 것 같아서 6kg로 주문하고 있다. 사료통을 보니 2주정도 버틸 수 있는 양이 있어서 슬슬 사료를 알아봤다. 처음에는 사료 사는것도 쇼핑의 일환으로 생각해서 이것저것 찾아보면서 비교하고 가성비 좋은 걸로 꼼꼼하게 따졌다. 첫 사료 캐니대(가성비 좋고 피부에 좋다고 해서 구매)를 시작으로 아카나(오리젠하고 같은 공장인데 더 저렴해서 구매), 토우(아마 포장지가 늑대 사진으로 기억함), 네이쳐스 버라이어티(동결 건조..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity GSAP(이번 포스팅) 개요 이전 포스팅에서는 Velocity.js 라이브러리를 사용했다. 이번 포스팅에선 GSAP(Green Sock Animation Platform) 강력하고 인기 있는 애니메이션 라이브러리를 Vue 에 적용하고 사용하는 법을 알아보자. GSAP이..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity

이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity(이번 포스팅) GSAP 2021.04.11 - [개발일기/Vue.js] - [Vue.js] Vue 애니메이션(Animate) #1 - Transition [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 ..