공부/AWS28 [AWS] 카톡분석 프로젝트-13 / React / 폰트 적용 서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다. 카톡분석 서비스 주소 카톡분석 왕 테스트 www.advancer-katalk.click 프런트엔드를 개발하면서 기본 폰트를 그대로 사용하는 경우는 없을것이다. 폰트를 적용하는 방법을 알아보자. 1. 폰트 다운로드 폰트는 많은 사이트에서 가져올 수 있겠지만 아래 링크에서 가져왔다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 눈누 상업용 무료한글폰트 사이트 noonnu.cc 원하는 폰트를 클릭한 뒤 Download 버튼을 눌러 다운받아준다. 2. 폰트 변환 다운로드한 ttf 파일들은 모든 브라우저에서 동작하지.. 2022. 8. 21. [AWS] 카톡분석 프로젝트-12 / CSS 배경 관련 속성 서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다. 카톡분석 서비스 주소 카톡분석 왕 테스트 www.advancer-katalk.click 프런트작업을 처음 해봤기때문에 처음 배경을 설정하는데 굉장히 애먹었던 기억이 있다 개발 초기 배경 화면 : 배포 시 배경 화면 : 어떻게 백그라운드를 완성할 수 있었는지 배경 속성을 정리해보도록 하자. 1. background-color 위 프로젝트처럼 background image 를 쓰면 관계없지만 color 속성을 통해 배경색상을 정할 수 있다. div{ background-color : black; } 2. background-image 배경을 이미지로 지정할때 사용하는 속성값이다. div{ background-image:url("https://~.. 2022. 8. 6. [AWS] 카톡분석 프로젝트-11 / React 이미지 슬라이드 구현 서비스 배포는 이미 했지만 그동안 못한 포스팅을 이제야 쓴다. 카톡분석 서비스 주소 카톡분석 왕 테스트 www.advancer-katalk.click 카톡분석 서비스는 기본적으로 카카오톡 파일을 업로드 해야 분석을 시작할 수 있다. (파일은 저장하지 않는다) 그런데 저장후 불러오는 과정이 까다로워 이미지 슬라이드로 설명이 필요한 상황! 아래와 같은 슬라이드 구현이 필요했다. React-slick 과 Carousel React-slick 과 Carousel(캐러셀) 을 이용해 슬라이드를 구현해보자. 1. 설치 npm install react-slick --save npm install slick-carousel --save 2. import import "slick-carousel/slick/slick.c.. 2022. 8. 5. [AWS] 카톡분석 프로젝트 - 마무리 및 배포 드디어 프로젝트 마무리 포스팅이다 개인 프로젝트는 아니였기에 모든 과정을 포스팅에 담을 수는 없었다. 지금은 프로젝트가 마무리되어 정리 포스팅을 작성하지만 놓친 과정,팁들을 이후에도 계속 작성해나갈 예정이다. 결과 페이지 배포 한번 테스트를 해본 후 포스팅을 읽는다면 더 이해가 잘 갈 수도..? (Android, Mac, Windows 지원합니다) 카톡분석 왕 테스트 www.advancer-katalk.click 실행 흐름도 실행 이미지 프로젝트 정리 개발목표 카톡을 분석해서 "나는 단톡방에서 어떤'왕' 인가" 를 보여주고, 개인별 선물도 추천해주자 차별점 - 카톡분석은 대부분 앱으로 개발되어있으나 공유가 편한 웹으로 제공 - 개개인별 선물을 추천 팀원 구성 - 인원 : 3명 (임베디드개발자, UX개발자.. 2022. 8. 1. [AWS] S3 정적웹호스팅 변경내용 바로 적용하기 AWS S3를 이용한 정적 웹호스팅을 구성한 사용자들은, 페이지 업데이트를 위해 새로 업로드한 파일들이 페이지에 바로 적용되지 않는 경험을 했을 확률이 높다 대개 AWS의 CDN 서비스인 CloudFront 를 사용하고 있는 경우인데, 바로 적용하는 방법을 알아보도록 하자. 1. 새 프로젝트를 빌드 하고 S3 에 업로드 이후 사이트에 접속해보면 바로 변경내용이 적용되어 있지는 않은 것을 알 수 있다. 2. CloudFront - ID 클릭 3. Invalidations 클릭 4. Create invalidation 무효화 하고자하는 페이지를 적어준다. 내가 호스팅하고 있는 React 페이지의 경우 index.html 을 무효화 해야했다. 5. 결과 Create invalidation 시 Status가 I.. 2022. 7. 24. [AWS] 사용자별 고유 페이지 배포 Access Denied(403) error 현재 진행하고 있는 프로젝트는 S3로 정적 웹호스팅을 하며, CloudFront 서비스를 이용하고 있다. 기능적으로는 결과페이지 '공유하기' 기능이 있으며 공유하면 랜덤한 고유 token을 넣어 개인별 페이지를 생성한다. 상황설명 및 예시 : 만약 개인별 페이지를 아래와 같이 공유한다면 개인결과라고 볼 수 있을까? www.advancer-katalk.click/결과페이지 위 페이지는 모두에게 호스팅되는 페이지로 나만의 페이지가 아니다. www.advancer-katalk.click/결과페이지/2039rkj032fuh0f2j34k23hj4 위와 같이 고유 token을 만들어 공유한다면 내 페이지를 공유할 수 있다. 하지만 S3를 이용해 배포하니 403 에러가 뜨고말았다. Failed to load reso.. 2022. 7. 17. [AWS] 오류 : DNS_PROVE_FINISHED_NXDOMAIN 오류내용 : DNS_PROVE_FINISHED_NXDOMAIN 위 에러는 많은 상황에서 발생할 수 있지만 내가 처한 상황은 아래와 같았다. AWS에서 도메인구입 S3 정적 호스팅 ACM 발급 CloudFront 사용해 https 적용 Route53에 CloudFront호스팅 --- 여기까지 정상동작 했었음 --- 정적웹호스팅 S3 파일 전체삭제 후 재업로드 Route53의 호스팅영역 삭제 후 재생성 정확히 어떤작업후에서 부턴지 모르겠지만 오류가 뜨며 사이트 접속이 되지 않았다. 우선 dig 명령어를 통해 서버에서 내 도메인이 어디까지 연결되어있는지 확인해보았다 윈도우 환경에 dig를 설치하기는 싫으니 dig web interface라는 사이트에 접속해 분석해보았다. 사이트에 접속후 Hostnames or.. 2022. 6. 24. [AWS] 카톡분석 프로젝트-10 / React 링크 복사 버튼, 팝업 AWS Lambda 를 이용한 Serverless 서비스 제작 중 현재 React를 이용한 FE쪽에 집중하고 있다. 이번엔 간단한 링크복사 버튼과 그에 대한 팝업을 만들어 보려 한다. 리액트 시작 포스팅은 아래에서부터 이어진다 [AWS] Lambda 프로젝트-4 / React 연동 파일 업로드 이전장까지 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해봤다. [AWS] Lambda 구축하기-3 / S3 trigger로 Lambda 호출 이전장 에서는 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해.. dbstndi6316.tistory.com 링크 복사 버튼 구현하기 - react-copy-to-clipboard 1. 라이브러리 설치 npm install .. 2022. 6. 22. 이전 1 2 3 4 다음 반응형
