-
안녕하세요! 디자인하는 개발자 신성환입니다. Vue.js 프레임워크로 프론트엔드 개발을 주력으로 하고 있으며, UX 디자인에서 개발로 이어지기까지의 생산 경험이 많이 있습니다. 음악과 요리, 운동을 취미로 하고 있습니다.
github
http://github.com/blueStragglr
주요언어
vue.js / html / css / javascript
-
Vue.js와 AWS Lambda, Nodemailer 로 이메일 전송 폼 만들기
Vue.js와 AWS Lambda, Nodemailer 로 이메일 전송 폼 만들기 by 신성환(github.com/blueStragglr) 글의 목적: 이 글을 읽고 나면 온라인에서 폼을 작성해서 submit하면 메일로 도착하는 컴포넌트를 개발하는 과정과 방법에 대해서 알게 됩니다. 서버리스 구축하는 내용은 Vue.js에 무관하게 다른 프로젝트에도 사용하실 수 있습니다. 만들 수 있는 것: 사용하는 것들: 프론트엔드 프레임워크 Vue.js, npm(node-mailer, nodemailer-smtp-transport), 구글계정, AWS계정, AWS Lambda, AWS API Gateway 작업 순서 프론트엔드 (Vue.js) 폼 만들기 axios로 post하기 백엔드(?) (AWS Lambda) Lambda 함수 생성 API Gateway로 POST...
-
S3, ACM, CloudFront, Route53으로 서버리스 프로젝트 https 배포하기
S3, ACM, CloudFront, Route53으로 서버리스 프로젝트 https 배포하기 by 신성환(github.com/blueStragglr) 포스트 소개 어떤 글인가요? 아직 AWS에 익숙하지 않은 프론트엔드 개발자가 처음부터 차근차근 따라해서 자신이 소유한 도메인에 https를 붙여 배포하는 과정을 상세히 작성한 글입니다. 별도의 백엔드가 존재하지 않는 서버리스 앱을 AWS를 통해서 배포하고 싶은데 아직 인프라와 친하지 않아 막막함을 느낄 (저같은)분들이 부담없이 시작해 볼 수 있도록, 삽질했던 것들을 복기하고 정리해 보았습니다. 무엇을 할 수 있나요? AWS의 다양한 서비스(S3, ACM, CloudFront, Route53)와 본인이 소유한 도메인을 이용해서 https로...
-
Github로 멋지게 협업하기
Github로 멋지게 협업하기 by 신성환(github.com/blueStragglr) *이 글은 깃 초심자에게 깃허브 사용법을 알려주기 위한 내용이 아닙니다! 기본적인 깃의 동작 방식을 알고 있는 사람들 중 목적성과 당위성을 바탕으로 한 사용을 원하는 사람들에게 경험을 공유하기 위해서 작성되었습니다. 들어가며 회사에서 이미 쓰고 있어서, 누가 좋다고 그래서, 아니면 어떤 이유로든 일단은 쓰고 있는 깃과 깃허브. 여러분은 깃을 왜 쓰고 계신가요? 스스로 말하기 조금 부끄러운 이야기이지만, 저는 기억력이 꽤 좋은 편입니다. 별 관심이 없는 사람의 음식 취향 같은것을 기억했다 오해를 샀던...
-
Debounce & Throttle: 효율적인 이벤트 핸들링
Debounce & Throttle: 효율적인 이벤트 핸들링 by 신성환(github.com/blueStragglr) Debounce와 Throttle은 자바스크립트 이벤트를 (양적인 측면에서) 효율적으로 처리하기 위한 방법입니다. 이러한 컨트롤이 필요한 경우의 예시로 만들었던 페이지를 가져와 보겠습니다. (퇴사 전에는 좀 더 잘 만들었었는데 애석하게도 유지보수가 잘 되고 있지 않네요.) 해당 페이지에서는 가로 혹은 세로 스크롤을 모두 가로 스크롤 값으로 변환하며, 가로 스크롤 값에 따라 각 사각형 컴포넌트의 위치와 각도를 조절합니다. 이를 위해서 window DOM에 scroll eventListner가 달려 있으며, 아래와 같은 다양한 메소드가 구현되어 있었습니다. 스크롤의...
-
Vue.js에서 Anime.js 사용하기
Vue.js에서 Anime.js 사용하기 by 신성환(github.com/blueStragglr) Vue.js 프로젝트에서 애니메이션의 손쉬운 구현을 위해 Anime.js 라이브러리를 사용하는 방법에 대해서 알아봅니다. 하나의 DOM 객체에 대해 다루는 기능을 중점적으로 서술하였습니다. 애니메이션 종료 후에 실행되는 콜백이나 SVG를 컨트롤하는 방법에 대해서는 다음에 다루도록 하겠습니다! Installation & Import npm을 이용해서 쉽게 설치할 수 있습니다. $ npm install animejs --save 이후, 애니메이션을 사용할 컴포넌트에서 다음과 같이 import합니다. import anime from 'animejs/lib/anime.es.js' // use as `anime(...)` 애니메이션을 사용하는 컴포넌트가 많다면 src/main.js에서 다음과 같이 전역 변수로...
-
CSS pre-loader 없이 변수 만들어 활용하기
CSS pre-loader 없이 변수 만들어 활용하기 by 신성환(github.com/blueStragglr) SCSS와 같은 CSS Pre-loader를 사용하게 되면 변수를 선언하고 스타일을 관리하는데 유용하게 사용할 수 있습니다. primary-color 등을 선언해 두고, 글로벌 단위에서의 색상 변경을 변수 하나의 변화만으로 관리하는 작업 등이 가능해 지는 것입니다. 하지만 CSS에서도 전역변수의 형태로 값을 관리할 수 있는 방법이 있었습니다! 변수 사용, SCSS에서만 되는게 아니었다! 알고 보니 변수의 선언은 SCSS의 전유물이 아니었습니다. 가상 선택자 :root 에 접근하여 CSS에서도 전역 변수 등을 생성할 수 있습니다. 우선 변수...
-
클래스 이름, 막 써도 되나요?
클래스 이름, 막 써도 되나요? by 신성환(github.com/blueStragglr) 프론트 개발을 하다 보면 HTML 요소에 클래스 이름을 붙이는 것을 상당히 어려워 하는 사람들을 많이 볼 수 있습니다. 무슨 이름을 붙였을 때 다른 사람 (혹은 미래의 자신)이 알아볼 수 있을지, 문제가 생기지는 않을지에 대해 고민하는 것이죠. HTML의 클래스 이름을 붙일 때, 각 요소가 어떤 동작을 하는가에 따라 명료한 규칙을 가지고 클래스 이름을 붙이면 보다 생산적으로 개발할 수 있습니다. 이러한 규칙으로써 범용적으로 정의되고 사용되는 BEM에 대해서 간단히 소개해 볼까...
-
SVG 활용: HTML상에 벡터 이미지 삽입하기
SVG 활용: HTML상에 벡터 이미지 삽입하기 by 신성환(github.com/blueStragglr) HTML에서는 벡터 이미지를 렌더링 할 때 각 포인트에 대한 값 형식인 SVG 파일을 전달받아 렌더링을 수행할 수 있습니다. 일반 이미지 형식의 경우, 안티앨리어싱 등의 문제로 자칫 잘못하면 2000년대 양산형 홈페이지같은 느낌을 줄 수도 있으므로, 반응형으로 간단한 형태의 이미지를 활용하여야 하는 경우에는 SVG를 사용하는 것을 고려해볼 만 합니다. SVG파일을 직접 작성하기 위해서는 벡터 패스의 좌표값들과 캔버스 크기, 색깔 등의 속성을 지정해주어야 합니다. 하지만 모든 좌표값을 일일히 입력하는건 굉장히...
-
카카오 2020 공채 알고리즘 문제 풀이
알고리즘 문제 풀이 by 신성환(github.com/blueStragglr) [2020카카오공채] 문자열 압축 (https://programmers.co.kr/learn/courses/30/lessons/60057) 문제 요약: 해당 문제는 임의의 string을 임의의 수의 substing으로 분해하여, 반복되는 substring을 압축함으로써 문자열을 짧게 압축하는 최적의 방법을 찾는 문제입니다. 압축은 아래와 같은 방법으로 수행합니다. ababcdcdababcdcd의 경우 문자를 1개 단위로 자르면 전혀 압축되지 않지만, 2개 단위로 잘라서 압축한다면 2ab2cd2ab2cd로 표현할 수 있습니다. 다른 방법으로 8개 단위로 잘라서 압축한다면 2ababcdcd로 표현할 수 있으며, 이때가 가장 짧게 압축하여 표현할 수 있는 방법입니다. 풀이 해설: import math def solution(s):...