도영스 공간

ㅠㅠ 저거..정말 많이 찾았는데.. 매직 도트라는 라이브러리가 있었다 !!! 매직 도트 깃허브 누군가가 잘..만들어놓았다.. 나도 나중엔 꼭 하드코딩으로 해봐야지 !! yarn add react-magic-slider-dots 우선 라이브러리 설치를 먼저 해준다. 슬릭 슬라이더 컴포넌트 import React from "react"; import styled from "styled-components"; import Slider from "react-slick"; /* import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; */ import { ReactComponent as Next } from "....

Cloudfront - S3 로 서비스하는 구조에서, S3에 SPA(ex. React)를 이용하여 구성을 하면 Redirect가 발생하여 403/404와 같은 Access Denied가 발생하게 된다. 이는 Cloudfront와 SPA의 조합이되면 발생할 수 밖에 없는 구조적인 문제이기에, Cloudfront에 403, 404 에러 발생 시, 200응답코드로 전환하고 기본 페이지(ex. index.html) 을 호출하게 설정하여야한다. 이 이유를 모르고 왜 404 에러가 콘솔창에 자꾸 뜨는지 이해할 수 없었다. 하지만,,클라우드 프론트에서 1개만 편집해줬더니 해결되었다!! 클라우드 프론트 > 오류페이지 > 사용자 정의 오류 응답 생성 아래 사진 처럼 응답 페이지 경로 /index.html로 설정해주고, ..

오늘은 배포하고.. 이미지 많을 때 swiper 점.........많이 찍히는거........좀 징그러워요...ㅎㅎ 이러한 피드백을 받아서 반영했다 !!! 하핫..조금 징그럽긴 했었다.ㅠㅠ ㅋㅋㅋㅋ이미지 수대로 도트가 나와버리니까~ 징그러울수밖에 ㅠㅠ 이것을 이렇게 바꿔버렸다 !! 슬릭 슬라이더 코드 import React from "react"; import styled from "styled-components"; import Slider from "react-slick"; /* import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; */ import { ReactComponent as Next } ..

그동안 너무 힘들었어서 블로그를 안썼는데 다시 시작이다! 끝이 보인다 보여 🤣~~ 에러메세지 404..에러? 대체 무슨일이야 배포하고 저런 에러메시지가 떠서 조금 당황했다. 카카오 로그인, 구글 로그인이 먹통이 되어버린 것... 이것의 해결 방법은 html파일에 맨 위에 base태그를 넣어준다.. 싱글페이지 리액트에서 경로를 제대로 잡아주는 것이 필요 !! 패키지.json "homepage": ".", 이렇게 하나 추가해준 뒤 다시 배포 !!! { "name": "startup", "version": "0.1.0", "private": true, "homepage": ".", 클라우드 프론트 캐시 0초로 바꾸기 클라우드 프론트 탭 > 배포 > ID 클릭 동작 편집 버튼 클릭 후 캐시 키 및 원본 요청 란..

오늘은 이런 애니메이션 효과를 구현해보았다!!! 맨처음에는 어떻게 해야될지 사실 감이 잘 오지 않았다. 예전에 바닐라 자바스크립트 배울 시절.. 애니메이션 구현은 gsap을 사용하여 구현했던 기억이 스물스물 올라왔지만,, 이걸 어떻게 리액트에 적용시켜..ㅠㅠ 이러한 생각이 먼저였다. 하지만 gsap공식 문서를 ..계속 뒤지다가 뒤지다가 발견한.. 리액트에서 gsap라이브러리 사용하는 문서를 보았다. 우선 라이브러리를 설치한다. yarn add gsap 위의 화면을 구현하기 위한 app.js 코드 import React, { useRef, useEffect, useState } from "react"; import styled from "styled-components"; import { gsap } fr..

오늘은 디자인이 추가되어 공지사항과 자주 묻는 사항 ui가 나왔다. ..으으..아코디언 메뉴를 구현해야되었었다.. 다행히 구글링 도중 아코디언 메뉴를 컴포넌트 화 시킨 블로그를 발견하고 그대로 적용했다. 완성된 화면 !! 예전에 제이쿼리랑 바닐라 자바스크립트로 아코디언 메뉴 구현해본 적은 있었는데.. 이걸 리액트에 어떻게 적용시켜야될지 막막했었다.ㅠㅠ 우선 아코디언 컴포넌트를 하나 만들어준다. 아코디언 컴포넌트 코드 import React from "react"; import styled from "styled-components"; import { ReactComponent as Down } from "../../assets/arrowbottom.svg"; import { ReactComponent a..

오늘은 드림코딩을 보고 pwa를 적용해보았다. 드림코딩URL 접속링크 접속 링크 사이트로 들어간다. URL넣는 곳에 내가 배포한 것의 url을 넣고 start버튼을 클릭한다. 그렇다면 이렇게 점수가 나온다. pwa는 150점 이상이 되어야만 만들 수 있기 때문에.. 150점이 되지 않는다면 드림 코딩 유튜브를 보면서 따라한다. 그러면 150점을 넘길 수 있다!! 드림코딩을 따라한 이후 Next버튼을 클릭하여 다음 페이지로 넘어와서 generate버튼을 클릭하면 파일을 다운로드 받게된다. 해당 파일 압축을 풀고 나의 프로젝트 pubilc폴더에 복붙해준다. 복붙할 파일은 체크한 3개의 파일이다. 이전에 있었던 manifest.json파일은 지우고 다운받은 파일을 넣으면 된다. 해당 파일 내용 { "short..

흑흑 마구마구마구 build로 리다이렉트 ? 되버려서 뒤로 미뤄두었던 클라우드프론트에 도메인 연결..ㅎ 결국 성공해버렸다! AWS에서 필요한 서비스 1. S3 2. Route 53 3. Certificate Manager 4. CloudFront + 도메인 연결을 위해 가비아 ㅎㅎ 우선 S3버킷을 생성해줍니당. 중요한 것은 S3 CloudFront Certificate Manager 모두 지역을 미국 동부 버지니아 북부로 설정해야된다는 점!!! 나는 버킷 이름은 ossack.shop으로 했다..ㅎㅎ 이렇게만 하고 버킷생성 클릭 맨처음에 버킷을 만들면 액세스 부분이 퍼블릭이 아닐 것이다. 퍼블릭으로 만들어주기 위해 버킷 이름 파란색 글씨 부분 클릭한 뒤 속성에서 리소스 이름 복사한 뒤 옆에 있는 권한탭으로..