본문 바로가기

전체 글148

[항해99 74일차] 2022.05.19 TIL (pwa적용) 오늘은 드림코딩을 보고 pwa를 적용해보았다. 드림코딩URL 접속링크 접속 링크 사이트로 들어간다. URL넣는 곳에 내가 배포한 것의 url을 넣고 start버튼을 클릭한다. 그렇다면 이렇게 점수가 나온다. pwa는 150점 이상이 되어야만 만들 수 있기 때문에.. 150점이 되지 않는다면 드림 코딩 유튜브를 보면서 따라한다. 그러면 150점을 넘길 수 있다!! 드림코딩을 따라한 이후 Next버튼을 클릭하여 다음 페이지로 넘어와서 generate버튼을 클릭하면 파일을 다운로드 받게된다. 해당 파일 압축을 풀고 나의 프로젝트 pubilc폴더에 복붙해준다. 복붙할 파일은 체크한 3개의 파일이다. 이전에 있었던 manifest.json파일은 지우고 다운받은 파일을 넣으면 된다. 해당 파일 내용 { "short.. 2022. 5. 20.
[항해99 73일차] 2022.05.18 TIL (AWS https로 배포) 흑흑 마구마구마구 build로 리다이렉트 ? 되버려서 뒤로 미뤄두었던 클라우드프론트에 도메인 연결..ㅎ 결국 성공해버렸다! AWS에서 필요한 서비스 1. S3 2. Route 53 3. Certificate Manager 4. CloudFront + 도메인 연결을 위해 가비아 ㅎㅎ 우선 S3버킷을 생성해줍니당. 중요한 것은 S3 CloudFront Certificate Manager 모두 지역을 미국 동부 버지니아 북부로 설정해야된다는 점!!! 나는 버킷 이름은 ossack.shop으로 했다..ㅎㅎ 이렇게만 하고 버킷생성 클릭 맨처음에 버킷을 만들면 액세스 부분이 퍼블릭이 아닐 것이다. 퍼블릭으로 만들어주기 위해 버킷 이름 파란색 글씨 부분 클릭한 뒤 속성에서 리소스 이름 복사한 뒤 옆에 있는 권한탭으로.. 2022. 5. 18.
[항해99 71일차] 2022.05.16 TIL (말풍선 테두리 css ) 오늘은 별로 한게 없다 ㅠㅠ 어제 돌아다녀서 힘이 안나서 많이 못 했던 것 같다 !! const Talk = styled.div` color: #000; width: 134px; height: 28px; background-color: #fff; top: -36px; border: 1px solid #c4c4c4; font-size: 0.75rem; display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; border-radius: 10px; transform: translateX(-50%); animation-duration: 1s; animation-iteration-count: infinite.. 2022. 5. 17.
[항해99] 10주차 WIL [실전프로젝트 3주차] 🧸 이번 10주차 WIL 키워드 ! MVP개발을 하는 3주 동안 어떤 기술들을 다뤄봤는지 정리해보세요. 우선 우리조는 오피스 매물을 찾아주는 모바일 웹을 기획하여 제작중에 있다. 기획 단계가 어려웠다... 우선 카카오 지도 api를 이용하여 사용자가 지도에서 매물들을 찾아볼 수 있는 기능을 구현했다. 네모라는 사이트와 비슷하다.ㅎㅎ 네모에 있는 매물들을 크롤링해와서 보여준다,.. 다른조들보다는 기술들과 스코프가 조금 적어보인당 ㅠㅠ 그런데 더 추가할 게 생각나지 않는다.. 간단한 CRUD를 넣고 싶다 !! 내가 구현한 기능은 지도 기능과 프로필 수정 기능 및 대체적인 뷰작업이다.. 한 60퍼센트는 진행이 된 것 같다. 앞으로 해야될 작업들은 이러하다. 검색 최신 키워드 저장 되지 않고, 페이지 이동 문제.. 2022. 5. 15.
[항해99 69일차] 2022.05.14 TIL (트러블 슈팅 지도 문제 해결!! ) 클라우드 프론트 + 라우터 53 + 버킷s3 + CM를 통해 배포했을 경우 도메인 연결한 것으로 접속했을 때 url에 /build/build/build로 엄청난 리다이렉트가 생기면서 도메인을 연결하지 못하는 엄청난 문제가 발생하여 아침6시에 잤는데도 아직도 해결 못한 상황이다ㅠㅠ 이것은 꼭 해결해서..포스팅을 다시 해봐야겠다.!!https 도메인 연결은 어려웡! 지도 페이지에 로딩 스피너 연결하던 중 문제가 발생했다!! 원래 이전부터 있었던 문제였는데 로딩 스피너를 연결하면서 문제가 내 눈에 보였다.ㅠㅠ 지도 페이지에 맨 처음 들어오면 매물들을 못 불러와서 로딩 스피너만 계속 뜨는 상황이었다. onDragend이벤트가 발생할 시에만 매물들이 불러와지는 useEffect가 일어나는데, 지도 페이지에 맨처음.. 2022. 5. 14.
[항해99 68일차] 2022.05.12 TIL (스플래시 인트로 페이지 ) 오늘은 한 것은 별로 없고,, 디자인을 입히는 일을 했당 ㅠㅠ 우선 스플래시..맞는지 모르겠지만, setTimeout으로 해당페이지에서 3초 후 자동으로 페이지를 이동하는 데 성공했다 !! 맨처음에는 리액트 네이티브에서만 할 수 있을 거라는 생각과는 다르게 ㅎㅎ잘되어서 다행이다 ㅠㅠ 하지만 다시 localhost:3000으로 돌아가는 순간 디버깅..페이지로 들어온다 ㅠㅠㅠㅠ ㅎ..ㅎ..ㅎ.. 스플래시 코드 import React,{useEffect} from "react"; import { Grid, Image } from "../elements/index"; import styled from "styled-components"; import { history } from "../redux/configS.. 2022. 5. 13.

티스토리툴바