마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 "UX/UI 의 10가지 심리학 법칙" 이라는 책을 리뷰한다. "Uxer 를 위한 101가지 법칙" 이후에 읽은 책으로써, 조금 더 심화된 책으로 느껴진다. 본인은 UX 디자이너가 아닌 FE 개발자라는 것을 염두에 두길 바란다. 책 링크 - http://www.yes24.com/Product/Goods/92426632 개인적으로 직군 상관없이 이 책을 읽어보는 것은 추천한다. 제목처럼 심리학을 중점으로 다루어진다고 해서, 이해하기 힘든 내용이 아니다. 책을 읽는 내내 우리가 일상적으로 느낄 수 있는 것들을 토대로 읽게 되어, 많은 생각과 재미를 느꼈다. 본인은 문제 해결에 있어, 조금 더 이해하기 쉽게 혹은 명료하게 대답할 수 있는 힌트들을 얻었다고 생각한다. 다시 한번 말하지만... 본인은 디..

이 글은 styled-components 에서 발생할 수 있는 Warning 을 다룬다. "non-boolean attribute" 에 관한 Warning 을 경험했다면, 이 글이 충분히 도움이 될 것이다. 원인과 해결방안 그리고 실제 Github 에 등록된 이슈와 버전 히스토리을 살펴본다. styled-components 를 사용하다보면, 다음과 같은 Warning 을 경험할 수도 있다. Warning: Received `true` for a non-boolean attribute `{속성}`. If you want to write it to the DOM, pass a string instead: {속성}=“true” or {속성}={value.toString()}. 사실 Warning 내용만으로는 ..

이 글은 AWS 에서 제공하는 서비스 중 하나인 "Simple Email Service" 를 다룬다. AWS 의 SES 는 이메일과 관련된 많은 기능들을 제공한다. 대표적인 예로, 많은 서비스들이 사용자에게 정보를 제공하는 수단 중 하나로 이메일을 활용한다. 이를 위해 이메일 서버를 구축하는데, SES 는 이를 쉽게 제공해준다. SES 의 기본적인 사용법을 다룰 것이다. 예제는 serverless 프레임워크를 기반으로 진행된다. 우리가 흔하게 볼 수 있는 이메일 활용 사례는 무엇인가? 대표적으로 특정 서비스의 정보를 제공하는 수단 중 하나로 사용된다. 페이스북을 예로 들어보자. 마이구미님과 다른 사람들이 보낸 알림 4개가 있습니다. 마이구미님이 어떤 그룹에 게시물을 올렸습니다. 마이구미님이 최근에 새로운..

이 글은 pre-signed URL 에 관련된 내용을 다룬다. pre-signed url 은 만료시간 전까지 유효하다. 이러한 흐름에서 나올 수 있는 문제점과 대처할 수 있는 방안이 글의 주제가 된다. 전반적인 pre-signed url 을 다루는 글이 아닌, 생성한 pre-signed url 을 소멸시키는 방법을 다룬다. 참고 링크 https://medium.com/@laardee/uploading-objects-to-s3-using-one-time-presigned-urls-4374943f0801 참고한 글에서 제공하는 예제 코드를 기반으로 설명한다. https://github.com/laardee/one-time-presigned-url 글의 주제를 시작하기에 앞서, pre-signed URL 을 ..

이 글은 "UXer 를 위한 101가지 원칙" 이라는 책을 리뷰한다. 책을 읽고, 101 가지 모두 정리하기에는 뭔가 그러면 안될 것 같아, 기억에 남았던 것을 중점으로 정리해보려한다. 본인은 UX 디자이너가 아닌 FE 개발자라는 것을 염두에 두길 바란다. 책 링크 - http://www.yes24.com/Product/Goods/80391112 이 책은 사실 UX 디자이너를 위한 책이다. 본인은 UX 디자이너가 아닌 프론트엔드 개발자이다. 원래 UX 에 관심이 많았고, 조금 읽어보다가 개발자가 읽기에도 이해하기 쉽고 가벼운 책이라는 느낌을 받았다. 결과적으로는 개발자가 읽어도 좋은 책이라고 생각한다. (강력 추천) 책 이름 그대로 목차가 101개로 분류되어있고, 총 400페이지 분량이다. 하지만 하나의..

이 글은 Jenkins 를 활용한 CI/CD 구축을 다룬다. 여기서 다루는 모든 앱은 Docker 기반으로 구성되고 실질적인 배포는 AWS 의 EB(Elastic Beanstalk) 를 사용하는 것을 가정한다. 도커에 대한 지식이 필요하다. 익숙하지 않다면, 관련 글을 추천한다. https://subicura.com/2017/01/19/docker-guide-for-beginners-1.html 기본적으로 알아야할 도커의 용어는 다음과 같다. Dockerfile 파일은 빌드를 거치면, 도커 이미지를 생성할 수 있다. Dockerfile 과 도커 이미지는 살아움직이는 것이 아닌 단순히 파일이라고 보면 된다. 이를 기반으로 숨을 불어넣어 서버와 같은 존재를 구축되는 것이 도커 컨테이너이다. 도커 이미지는 u..

이 글은 Lambda@Edge 를 활용한 이미지 리사이징을 다룬다. 이전에 Lambda 를 활용한 이미지 리사이징을 다룬적이 있다. 두 가지 방식을 비교하는 것을 중점으로 작성되었다. 람다를 이용한 이미지 리사이징 1편 - https://mygumi.tistory.com/349 Lambda@Edge 이미지 리사이징 예제 실서비스 적용 사례 1편의 내용을 간략히 정리하자면 다음과 같다. S3 는 Events 감지를 통해 이미지 업로드를 탐지한 후, 리사이징을 하는 Lambda 함수를 호출하게 된다. 이로 인해, 원본 이미지를 업로드를 하면, 리사이징된 이미지들이 S3 에 자동으로 생성되게 된다. 클라이언트에서는 생성된 리사이징된 이미지들을 제공받을 수 있게 된다. 하지만 이 방식에는 단점들이 존재한다. 원..

이 글은 infinite scroll(무한 스크롤) 에 대해서 다룬다. 어떻게 코드를 구현해야하는지? 어떤 라이브러리를 써야하는지? 에 대한 코드를 제공하는 글은 아니다. 어떤 접근과 아이디어를 통해 무한 스크롤을 구현할 수 있는지에 대한 그저 하나의 방법을 다룬다. 이를 위한 모델은 인스타그램으로써, Web 버전 인스타그램을 대상으로 진행된다. 간단하게 "인스타그램은 어떻게 무한 스크롤을 구현하는가?" 로 볼 수 있다. 예제 코드 - https://github.com/hotehrud/instagram-infinite-scroll 실제로 무한 스크롤을 위해서는 많은 케이스에 따른 기능과 대안을 제공해야한다. 이러한 초점보다는 어떤 아이디어로 큰 틀을 구현했는지를 보길 바란다. 예제 코드는 tag 를 통해..