Dev
-
[GAS] 구글 앱스 스크립트를 이용해 구글 설문 결과 슬랙 알람을 만들어보자(Feat. django)Dev 2021. 1. 12. 01:52
안녕하세요. 오늘은 구글 앱스 스크립트(GAS)를 이용하여 구글 설문 콜백을 통해 알람을 구현해보겠습니다. 구글 설문의 제출 결과를 구글 스프레드시트에 연동하는 것은 아주 간단하지만, 그러면 꼭 시트를 주기적으로 확인해봐야 모니터링할 수 있다는 단점이 있었습니다. Gmail로도 연동도 가능하나, 저희 팀에서는 슬랙을 공용 업무 툴로 사용하고 있기 때문에 업무 쓰레드를 통일시키기 위해 슬랙 알람으로 메시지를 보내도록 구현해보았습니다. 🧐 GAS란? Google Apps Script는 Google Workspace 플랫폼(스프레드시트, 워드 등등)에서 사용하기 위해 사이드 프로젝트로 개발한 스크립팅 플랫폼입니다. 경량화된 앱을 만들기 위해 많은 기능을 제공하고 자체 서버에서 Event, Trigger 처리를..
-
[CSS] transform scale을 이용한 Image Zoom 애니메이션 넣기Dev 2020. 12. 29. 11:16
안녕하세요. 오늘은 이미지 Zoom 효과를 주는 법에 대해 포스팅합니다. 이 포스팅에서 최종적으로 구현해 볼 효과는 다음과 같습니다. 고정된 요소에 마우스를 올렸을 때 이미지만 확대되는 것처럼 보이는 효과입니다. 저는 Album이나 Article 형태의 퍼블리싱을 작업하면서 간단한 hover 효과를 주고 싶을 때 자주 사용합니다. 우선 기본적인 컨테이너와 이미지, 텍스트 배치를 해 봅시다. .container { width: 700px; height: 700px; border: 1px solid #222; } .parent { width: 100%; height: 500px; } .child { width: 100%; height: 100%; } 핑핑이 자, 핑핑이가 화면에 나타나지만 아무런 효과가 일어..
-
내 사이트 이미지 로딩속도는 왜 느릴까?Dev 2020. 12. 22. 20:40
SPA가 대세로 자리매김한 요즘 사이트 최초 로딩 속도는 사이트의 품질 뿐만 아니라 프론트엔드 개발자의 실력까지 볼 수 있는 지표가 되었습니다. SPA에서는 페이지가 로드되었을 때 바로 VIews의 Interaction이 가능하도록 페이지 로드에 필요한 모든 것들을 맨 처음에 한번에 로딩하기 때문이죠. 구글은 최초 페이지 로딩이 3초 이상 걸릴 경우 50%의 사용자가 이탈한다는 분석값을 내놓았으며, 페이지 로딩 시간이 긴 경우 검색 순위를 낮추겠다는 말까지 나왔습니다. nownews.seoul.co.kr/news/newsView.php?id=20180123601013 https://nownews.seoul.co.kr/news/newsView.php?id=20180123601013&rftime=201506..
-
내 맘대로 추천하는 프론트엔드/리액트 개발자를 위한 편리한 VSCode Extension(확장 프로그램) 모음Dev 2020. 12. 15. 20:00
이번 포스팅에서는 제가 Vscode에서 자주 사용하는 확장 프로그램에 대해 공유하려고 합니다. 저는 자바스크립트나 타입스크립트 뿐 아니라 대부분의 개발을 VSCode로 하는 편이라 설치한 것들이 프론트엔드 개발 관련 확장 프로그램 위주이긴 하지만, 추가로 사용해보면 좋을 듯 한 확장 프로그램도 함께 소개하려 합니다. ESLint, Prettier는 너무나도 많이 사용되고 있기도 하고, 다른 포스팅에도 소개한 사례가 많아 제외하였습니다🙂 1. Beautify marketplace.visualstudio.com/items?itemName=HookyQR.beautify Beautify - Visual Studio Marketplace Extension for Visual Studio Code - Beautif..
-
[django] shell 스크립트를 이용해 배포 자동화하기Dev 2020. 11. 30. 21:47
안녕하세요. 오늘은 장고에서 bash 스크립트를 사용하여 배포 과정을 간결하게 만든 경험에 대해 공유합니다. 웨? 귀찮으니까!😉 현재 제 프로젝트는 정적 파일은 Amazon s3에, 데이터베이스는 mysql로 관리하고 있습니다. 장고 프레임워크를 사용하고 있기 때문에 settings.py에 s3과 mysql 정보가 들어가 있고 기본적으로 python manage.py runserver 명령어를 통해 서버를 시작하면 해당 setting에 따라 s3, mysql에 접근하게 되죠. 따라서 dev에 작업(머지)된 내용을 master에 합치고 aws ec2에 배포를 하려면 다음과 같은 과정을 지나게 됩니다. * Github의 기본 브랜치는 이제 master에서 main으로 바뀌었습니다! 제 프로젝트는 git fl..
-
웹 개발에서 svg 형식의 이미지 파일을 활용해보자Dev 2020. 10. 4. 23:28
안녕하세요. 오늘은 웹 개발 중 자주 사용하는 이미지 파일 포맷 중 하나인 svg에 대해 포스팅합니다. 일반적으로 웹 개발에서 사용하는 jpg,png 혹은 인코딩된 jpeg 이미지 파일 등에 비해, svg는 다소 생소할 수 있습니다. 하지만 svg 파일의 장점은, 웹 개발시에 CSS, Javascript, HTML 등과 함께 동작할 수 있다는 점입니다. 이게 무슨 뜻인지 알아보기 전에 svg 파일은 다른 파일과 어떤 차이가 있는지 부터 알아봅시다. svg 파일은 우리가 잘 아는 픽셀로 구성되는 비트맵 방식의 png 파일과는 다릅니다. svg는 XML 기반의 파일 형식으로 이루어진 벡터 이미지로, 수학을 기반으로 하는 점, 선, 곡선 등으로 이미지를 표현하는 형태입니다. 즉 비트맵 방식의 파일은 일정 수의..
-
크롬 개발자도구를 잘 활용해보자! 1) Network 활용하기Dev 2020. 9. 15. 20:43
안녕하세요. 이번 포스팅에서는 제가 크롬의 개발자 도구를 사용하면서 가장 많이 사용한 기능 중 하나에 대해 소개합니다. 프론트엔드 개발자라면 개발자 도구는 사용하지 않을래야 사용하지 않을 수가 없을 거에요. 특히 이 기능은 Rest API를 연동하는 작업을 할 때 효율적으로 사용할 수 있습니다. 우선 개발자 도구의 Network 탭을 열어 봅시다. 맥 기준 cmd + shift + c를 누른 뒤 상위 탭에서 Network를 선택합니다. 그리고 구글에 아무거나 검색해 볼까요? 이 Network 탭에서는 XHR(XMLHttpRequest)를 포함해 JS, CSS, IMG등의 정적 파일까지 로드가 잘 되고 있는지에 대한 정보가 나옵니다. 여기서 XHR은 AJAX 요청을 생성하는 JavaScript API입니다..
-
[django] SEO를 위한 사이트맵(sitemap.xml)을 장고 프로젝트에 등록하기Dev 2020. 8. 14. 18:00
안녕하세요. 오늘은 검색 엔진 최적화(SEO)를 위해 사이트맵을 장고 프로젝트에 추가해 봅시다. 그전에, 사이트맵이 무엇인지 알아보아야겠죠? 사이트맵이란 무엇인가요?에 대한 ⭐구글 웹마스터 공식문서⭐의 대답 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일입니다. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 지능적으로 크롤링하게 됩니다. 사이트맵은 내가 사이트에서 중요하다고 생각하는 페이지와 파일을 Google에 알리고 이러한 파일에 관한 중요한 정보를 제공합니다. 예를 들어, 페이지의 경우 마지막 페이지 업데이트 시간, 페이지 변경 빈도, 페이지의 대체 언어 버전 등에 관해 알립니다. 사이트맵을 사용하여 동영상, 이미지 콘텐츠 등 페이지의 특정..
