crabLab

CloudFront이란? AWS CloudFront란 AWS 제공하는 CDN 서비스이다. CDN은 Contents Delivery Network의 약자로 콘텐츠 제공자와 사용자 간 지리적으로 떨어져 있는 환경에서 콘텐츠를 빠르게 제공하기 위한 기술이다. CloudFront는 전 세계에 분포된 엣지 로케이션이라고 하는 데이터 센터의 엣지 서버를 사용해 콘텐츠를 캐싱하고, 사용자가 위치한 곳에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공받을 수 있도록 해주는 역할을 한다. 또 CloudFront는 SSL 인증서를 이용한 HTTPS 호스팅을 지원한다. 사실 이번에 우리가 CloudFront를 이용하는 이유는 HTTPS 호스팅 때문인데, S3로 배포한 앱은 SSL 인증서 적용이 불가능하다. 따라서 우리는 Cl..

Route53과 SubDomain 보통의 경우는 Route53에서 도메인을 사면 일사천리로 다른 레퍼런스들을 따라하면 해결되겠지만 나의 경우 SubDomain을 통해 기존의 웹사이트가 아닌 내가 지금 만든 s3버킷이 들어갈 곳을 만들어야 하기에 새롭게 진행해본다. 따로 서브도메인의 경우를 작성할 예정 물론 나의경우는 이미 도메인이 있었지만 여기서는 처음 즉, Route53에서 도메인을 사는것부터 할 것 이다. 또한 이후에 진행할 CloudFront와 ACM같은 경우 사실 순서는 크게 중요하지 않은 것 같다. Route53이란? Route53이란 AWS에서 제공하는 DNS 서비스이다. 우리는 Route53을 통해 도메인을 구매하고 호스팅 영역을 생성 및 NS(네임서버) 구축을 통해 DNS에 요청을 처리할 ..

Github Action을 통한 자동배포 GitHub Action이란? 이번에는 Github Action을 살펴보자! Github Action은 Github 저장소를 기반으로 소프트웨어 개발 Workflow를 자동화 할 수 있는 도구로, Github에서 직접 제공하는 CI/CD 도구이다. github action은 Workflow를 기반으로 동작하며, Github 저장소에서 발생하는 build, test, package, release, deploy 등 다양한 이벤트를 기반으로 사용자는 직접 원하는 Workflow를 만들 수 있다. 즉 우리는 Workflow를 만들고, 이를 통해 빌드 및 배포 프로세스를 자동화 할 수 있다!😎 각각에 이벤트에 대해 더 자세한 내용이 궁금하신 분은 공식문서를 읽어 보시는 ..

들어가는 글 이번에는 개발환경에만 있던 서버리스 페이지를 https로 배포하는 업무를 진행했다. 단, 우리회사에는 기존에 도메인이 이미 있었고 그래서 서브도메인으로 진행하게 되었다. 서브도메인이란 예를 들어 www.naver.com이라는 도메인이 있다면 www.admin.naver.com으로 들어오게 하는 도메인을 파는 것이다. 나도 이번에 처음 알게 된 것 이지만 이미 도메인을 가지고 있다면 저 방식으로 다른 s3 bucket을 연결할 수 있다. 또한 이번과정에서 github actions를 이용한 자동배포 또한 적어볼 생각이다. 이걸 이용해서 다음에는 꼭 CI/CD라는 이름에 걸맞는 코드를 짜고 싶다. 어떤 순서로 진행되나요? 배포할 프로젝트 준비 프로젝트 구현 및 배포용 빌드 S3 버킷에 올리기 g..

들어가는 글 게시판에는 글을 보여주는 방식에 크게 두가지가 있다. 무한스크롤 페이지네이션 둘 다 모바일과 데스크탑에 사용해도 상관이야 없지만 보통은 모바일에는 무한스크롤 데스크탑에는 페이지네이션을 사용한다. 그리고 항해 실전프로젝트때 나름 무한스크롤을 꽤나 파봤고 이번에는 페이지네이션을 좀 파봤다. 그래서 정리해본다. 페이지네이션을 위해 우선 알아야 할 것들 우선 내가 이번에 사용한 라이브러리는 react-paginate이며 이유는 나에게 레퍼런스가 이게 많았기 때문이다. react-js-pagination가 다운로드수와 지속적인 업데이트면에서 더 좋으므로 이것을 사용해도 괜찮다. 메소드명만 다르고 기본적인 원리는 같다. 우선 구현사항을 정의해보자. 처음 로딩되면 게시물의 개수에 맞춰 페이지의 숫자들이 ..

다시 돌아가서 인증방식에 대해 다시 생각해보자. http 통신은 header에 요청에 대한 정보(인증 토큰)가 들어간다. jwt방식은 서버가 클라이언트로 부터 받은 ID와 Password가 맞는지 확인하고 맞으면 JSON Web Token이라는 긴 문자열을 브라우저에 전송해준다. JWT의 TOKEN을 만들기 위해서는 Header, Payload, Verify Signature 이렇게 세 가지가 필요하다. Header : 이 세 가지 정보를 암호화 할 방식, 타입 등이 들어간다. Payload : 서버에서 보낼 데이터가 들어간다. 일반적으로 유저의 고유 ID 값, 유효기간 등이 들어간다. Verify Signature : Base64 방식으로 인코딩한 Header, Payload 그리고 SECRET KEY..

axios에 대해 알아보자. axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. (Promise API는 나중에 다시 정리할 수 있도록 하자.) 더 쉽게 설명하면 프론트랑 백이랑 통신할때 사용하는 라이브러리이다. 자바스크립트에는 fetch api가 기본적으로 있지만 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 와 같은 이유로 axios를 더 많이 사용한다. 나는 지금까지 그냥 다른 레퍼런스 코드들이 axios를 사용해서 따라 똑같이 사용해왔었는데..(아..

들어가는 글 항해99를 할 때 나 나름의 도전과제가 있었다. 그것은 바로 refresh token! 반에서 잘하시는 분이 이것을 도전해서 어찌저찌 성공하셨고 그 후에 나도 어찌저찌 성공했었지만 너무 얼렁뚱땅이었다.. 이번에 다시 도전하게될 기회가 생겨 구현해봤고 전보다는 나 나름대로 만족할만한(적어도 이해는 되는)코드가 나왔기에 포스팅을 해본다. 그전에 배경지식으로 http와 인증의 세가지 방식을 먼저 들어간다. 인증의 구현의 세 가지 방식 인증 구현은 크게 세션, JWT, OAuth가 있다. 전에 항해할때는 백엔드리더가 우리 세션으로 한번 해보죠! 라고 해서 해봤는데 이해가 잘 안됐어서인지 백엔드에서 문제가 생겨서 인지 잘되지는 않았고 JWT 방식으로 돌아왔던 경험이 있었다. 그 경험때문인지 이번에 세..

팔레트 라이브러리 나의 경우 React Color를 사용했다. 제일 사용자가 많았고 레퍼런스도 좋았으며 우리가 추구하는 팔레트 기능과 모양에 가장 부합했다. React Color는 유저가 선택한 컬러를 hex코드로 변환한다. hex코드? 문제없네 아니 당연히 문제가 있다. 지금 하려고 하는 건 실시간으로 색상이 변해야 하는 것이다 중요한건 단색 div의 백그라운드 컬러를 바꾸는게 아니라! 이미 있는 이미지의, 실생활 사진의 이미지의 색상을 전부 자연스럽게 바꿔주는 것이다. 이때 hex코드를 그대로 쓴다는 건 svg시절로 돌아가는 것과 마찬가지이며 이미지마다 들어간 색상들을 찾아내 그 색상들을 하나하나 계산해서 넣어줘야한다. filter 결과적으로 필터를 써야만한다. 그렇다면 어떤 필터를 써야 할까? 제일..

??은 답을 알고 있다. 기록을 남긴다는 것은 여러모로 참 좋은 행동이다. 왜냐면 이번에 이 기록을 통해 이번 해결법의 핵심 키워드를 잡았으니까! 그렇다면 ??은 무엇일까? 정답은 “나를 제외한 모든 사람들” 이다. 하하하.. 디자이너분들은 답을 알고 있다. 내 생각에는 디자이너님들의 아이디어에서 출발한 것 같다. 포토샵에는 서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 블렌드 모드라는 것을 사용해서 그 효과를 준다고 한다. 이걸 css에서 사용하면 이런 느낌인데 이것을 이용해서 우리가 바꾸고자 하는 이미지 하나와 그 이미지의 배경이 될 단색 이미지 하나 총 두 개를 겹쳐서 css의 필터값을 이용해 색상을 변경하면 해결완료이다! 박사님은 답을 알고 있다. svg를 파며 한참 삽..