전체 글

[PWA] 프로그레시브 웹 앱 시작하기 (5) - Push, 푸시 알림

[ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

[JavaScript] 전개 구문 활용 (Spread syntax)

이번 포스팅에서는 ES6 에 추가된 전개 구문(Spread syntax, ...) 활용 트릭을 몇 가지 소개하려고 한다. 구글링을 해보면 꽤 많은 트릭과 활용 방법들이 있는데, 그 중 간단하면서 자주 사용할 수 있는 내용으로 구성해보았으니 한 번 알아보도록 하자. Rest parameter 나머지 파라미터 Rest parameter는 전개 구문에 해당하는 내용은 아니지만 눈에 보이는 코드 상으로 유사하니 한 번 알아보려고 한다. Rest parameter는 이미 널리 사용하고 있을텐데, 함수의 매개변수 갯수가 정해져있지 않을 때 사용하게 된다. const sum = (acc, ...nums) => { for (let num of nums) { acc += num; } return acc; }; sum(0..

깃허브 커밋 히스토리 위젯! Gito

안녕하세요! 이번 포스팅에서는 깃허브 커밋 히스토리(잔디)를 간편하게 확인할 수 있는 위젯 프로그램을 소개할까 합니다~ PC에 설치하고 깃허브 ID를 입력하면 나의 잔디를 언제든지 확인할 수 있습니다! 스크린샷으로 먼저 확인해봅시다~ 프로그램 설치 후 실행해보시면 위와 같은 모습을 확인하실 수 있습니다. 커밋 기록을 확인할 깃허브 ID를 입력한 후 엔터 또는 + 버튼을 눌러주시면 별도의 인증 없이 데이터를 가져옵니다! 2~3초 정도 기다려주시면 됩니다~ 짠! 커밋 기록을 수집하여 위젯으로 보여줍니다 또한, Ctrl + T 를 입력하면 색 테마를 변경하실 수 있습니다~! 오리지널 (초록) 블루 레드 옐로 퍼플 총 5가지의 테마가 있습니다! 커밋 기록이 있는 부분을 더블클릭하면 데이터를 새로고침 합니다! 언..

[Linux] Ubuntu 18.04 테마 설정하기

안녕하세요~ 이번 포스팅에서는 우분투 환경에서 테마를 적용하는 방법에 대해 알아보도록 하겠습니다! 우분투의 기본 테마는 아래와 같습니다. (이미지 출처: 구글) 이전의 16.xx 버전보다는 많이 깔끔해졌는데요 저는 개인적으로 위 스타일을 좋아하지 않습니다.(깔끔한것을 좋아하는 타입) 오늘 저와 동일하게 따라오신다면 아래와 같은 환경으로 세팅이 가능합니다! 엄청 깔끔해졌죠? 위 스타일이 마음에 들지 않더라도 본 포스팅을 참고하시고 나면여러분 스스로 원하는 테마를 찾아서 적용하실 수 있습니다~ 먼저 시작하기 전에 간단한 개념 하나 짚고 가봅시다. (이미지 출처: https://itsfoss.com/install-themes-ubuntu/) 우분투의 데스크탑 환경은 기본적으로 그놈(GNOME)이 사용되고 있으..

[PWA] 프로그레시브 웹 앱 시작하기 (4) - 서비스워커 상태

[ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

[PWA] 프로그레시브 웹 앱 시작하기 (3) - 리소스 캐싱 및 Fetch

[ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

[PWA] 프로그레시브 웹 앱 시작하기 (2) - 서비스워커 등록

[ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

[PWA] 프로그레시브 웹 앱 시작하기 (1) - PWA란?

[ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

[Node.js] 학교 시간표 파싱 라이브러리

[ comcigan-parser ] @@ Node.js 전용! @@ 안녕하세요 얼마 전에 Node.js용 컴시간 학교 시간표 파싱 모듈을 개발했습니다. [Github]https://github.com/leegeunhyeok/comcigan-parser [NPM]https://www.npmjs.com/package/comcigan-parser Node.js 웹 서버, 챗봇 API 서버 등 컴시간에 등록된 학교의 시간표 가 필요하시면 위 라이브러리를 설치하여 사용하시면 됩니다. 데이터는 파싱하여 JSON형태로 변환할 수 있는 형식으로 제공됩니다. 라이브러리 설치 방법 Node.js + NPM이 설치되어있어야 합니다.(기본적으로 Node.js 설치 시 NPM은 기본으로 같이 설치 됨) NPM에 업로드해두었으므..

[JavaScript] 심볼 (Symbol)

안녕하세요 이번 포스팅에서는 ES6 (ECMAScript 2015)에 추가된 심볼(Symbol) 자료형에 대해 간단히 알아보도록 하겠습니다. 심볼은 자바스크립트의 원시(Primitive)타입으로 새롭게 추가되었습니다.원시타입은 객체도 아니고 메서드도 아닌 타입을 의미합니다. 기존에는string, number, boolean, null, undefined가 있었지만여기에 오늘 알아볼 symbol 타입이 추가되었습니다. 심볼 생성 방법은 심볼 Wrapper 함수를 호출하면 됩니다. const sym = Symbol() 심볼을 생성할 때 구분하기 위한 데이터를 추가하여 생성할 수도 있습니다. Symbol(value) 심볼타입은 신기하게도 같은 value를 인자로 주고 생성하더라도 값은 같지 않습니다.Symbo..