본문 바로가기

분류 전체보기388

[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.
[영상처리] 영상 품질 비교 지표 (PSNR / SSIM) 영상 품질을 비교하는 지표들은 Super Resolution 의 결과를 측정하는데 사용되곤 한다. 들어가기에 앞서... Super Resolution 이란? "초 해상화" 로 저해상도의 이미지를 고해상도의 이미지로 변환하는 기술을 말한다 딥러닝 이전에는 Nearest Neighbor, Bilinear, Bicubic 등 보간법 (interpolation)에 의존했으며, 최근에는 여러 딥러닝 알고리즘에 의존한다. Super Resolution 을 사용하는 이유는? 고해상도의 이미지를 어딘가로 전송하려면 그만큼 많은 리소스가 필요할 것이다. 저해상도로 전송 후 사용하고자 하는 곳에서 고해상도로 변환할 수 있다면 자원을 효율적으로 이용할 수 있다. MSE 란? Mean Square Error(평균제곱오차) 로.. 2022. 8. 3.
[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.
[Git에러] Password authentication is temporarily disabled as part of a brownout 터미널에서 깃 작업시 user name 과 password를 적게 되어있다. 그런데 이제는 password가 아닌 token을 사용해야 된다고 한다. token 을 얻는 방법 1. settings 클릭 2. 맨아래 Developer settings 클릭 3. Personal access tokens 클릭 4. Generate new token 클릭 5. Repo 권한을 선택하고 생성 생성하면 토큰을 얻을 수 있다. 이 토큰은 생성시에만 보이니 꼭 복사해두길 바란다. 나는 복사 안해두고 몇번이나 재발급받았다ㅎㅎ 끝 2022. 7. 17.
React 프로젝트에 카카오 애드핏 적용하기 프로젝트를 완성했다면 수익을 생각하지 않을 수 없다. 대표적인 방법으로는 구글 애드센스, 카카오 애드핏, 쿠팡 파트너스가 있다. 모두 광고 게재를 이용한 수익창출 방법이다. 그 중 카카오 애드핏을 적용하는 방법을 코드에 적용하는 방법을 알아보도록 하자 적용된 광고의 모습은 아래 페이지에서 확인할 수 있다. 카톡분석 왕 테스트 www.advancer-katalk.click 1.페이지 설정 - 카카오 애드핏 > 광고 관리 > 새 매체 > 광고 단위 등록 - 새 광고단위 > 광고단위명 및 배너 크기 선택 후 발급한다 - 아래와 같이 스크립트가 생성되었음을 알 수 있다. 2. 리액트 프로젝트에 적용 - function 형 컴포넌트 react 에서 script는 return에 사용할 수 없다. 위에 있는 스크립트.. 2022. 7. 17.
반응형

티스토리툴바