Ann's log

😱 문제 GitHub Pages로 배포한 React 페이지에서 새로고침을 하면 404 에러가 뜬다는 것을 발견했다. Homepage에서는 새로고침해도 아무런 문제가 없는데, 서브 디렉토리로 이동하고 새로고침을 하면 문제가 발생한다.. 이유를 찾아보니 깃허브 페이지는 SPA(Single Page Applications)를 인식하지 못하는 문제가 있다고 한다! SPA는 일반적으로 웹 브라우저에서 액세스 할 수 있는 하나의 index.html 파일만 사용하기 때문에, Github Pages로 배포를 하게 되면 homepage url 하나만 인식하게 된다. 그래서 hompage url 뒤에 경로가 더 붙으면 그 경로에서 해당 페이지의 파일을 찾으려 하기 때문에 에러가 발생하게 된다. 😄 해결 방법 구글에 검색해..

이 글에서 정리하는 내용: AWS-SDK 사용하기 AWS Access Key 발급하기 Multer-S3 사용하기 AWS-SDK 사용하기 SDK(Software Development Kit)란 특정한 소프트웨어나 플랫폼을 이용해서 소프트웨어를 개발할 때 이를 돕는 개발도구의 집합이라고 한다. (출처) 따라서 AWS-SDK는 개발 환경에서 AWS를 더 쉽게 사용할 수 있게 해주는 패키지이다. AWS Access key 발급하기 AWS-SDK를 사용하기 전에 먼저 엑세스 키가 필요하다. 1. 오른쪽 상단의 내 계정 이름을 클릭하고, 보안 자격 증명을 클릭한다. 2. 스크롤을 내리다가 엑세스키 생성하기 버튼이 보이면 클릭한다. 버튼을 클릭하면 생성된 access key id와 secret access key를 ..

🙀 문제 이전에 배포했던 프로젝트에서 새로운 사진을 업로드하면 사진 파일이 깨져서 보인다는 문제를 발견하였다. 프로젝트에서 Node.js 서버를 배포할때 Heroku를 사용하였기 때문에 Heroku 문서에서 관련 내용을 찾아 보았다. 문서에 따르면 Heroku application은 dyno라고 하는 가벼운 Linux container로 동작하게 되는데, dyno는 수명이 짧은 파일 시스템을 가지고 있다고 한다. 따라서 dyno가 교체되거나 재시작되면 파일은 사라지게 된다. 😨 😺 해결 방법 Heroku 문서에서는 해결 방법으로 AWS S3를 사용하는 방법에 대해 나와있길래 Amazon S3에 대해 알아보고 사용하고자 한다. 이 글에서 정리하는 내용: Amazon S3(Amazon Simple Stora..

다양한 API를 활용하는 프로젝트를 만들기 전에 먼저 Naver API를 사용 방법을 연습해 보려고 한다. 검색한 지역의 맛집 리스트를 보여주는 기능을 만들어 보기 위해 Naver 검색 API를 활용하였다. 이 글에서 정리하는 내용: Naver API 사용 신청하기 React 프로젝트에서 Naver API 사용하기 Naver API 사용 신청하기 1. Naver Developers 홈페이지로 들어간다. https://developers.naver.com/main/ NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 deve..

React 프로젝트는 Github Pages로 배포할 때 추가적으로 해줘야 하는 것들이 있어서 그 과정을 기록해 두려고 한다. (내가 만든 React 프로젝트는 Create React App과 React Router를 사용하였다.) 이 글에서 정리하는 내용: 1. React 프로젝트 배포하기 전에 해야할 것 2. React 프로젝트 build 하고 배포하기 2-1) gh-pages 패키지를 사용하지 않는 방법 2-2) gh-pages 패키지를 사용하는 방법 3. 배포 확인하기 1. React 프로젝트 배포하기 전에 해야할 것 ① 배포하고자 하는 프로젝트 repository가 public으로 되어 있는지 확인 한다. ② 리액트 프로젝트 폴더 안의 package.json 파일에 다음을 추가 해줘야 한다. "..

이전에 만들어둔 React 프로젝트에 잠재적인 보안 취약점이 있다고 계속 GitHub에서 이메일이 오길래 해결 방법을 찾아 보게 되었다. 그리고 GitHub 저장소에 들어가서 볼때마다 이렇게 계속 메세지가 떠있어서 너무 신경이 쓰였다... 이 글에서 정리하는 내용: 1. Create React App으로 생성한 React 프로젝트의 vulnerabilities 보완하기 2. GitHub Dependabot alerts 제거하기 Create React App으로 생성한 React 프로젝트의 vulnerabilities 보완하기 일반적으로 vulnerabilities를 제거하기 위해서는 terminal에서 npm audit 명령어를 입력해서 확인하고, npm audit fix (--force) 명령어를 통해..

이 글에서 정리하는 내용: 웹페이지에 YouTube 동영상을 삽입하는 방법 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하는 방법 웹페이지에 YouTube 동영상 삽입하기 YouTube 동영상 아래의 공유 버튼을 클릭한다. 퍼가기 버튼 클릭. 그러면 동영상 퍼가기 창이 뜨는데, 원하는 조건을 선택한 다음에 복사 버튼을 클릭하면 태그 전체가 복사 된다. 이제 복사된 태그를 HTML 문서 안의 원하는 곳에 붙여넣기 하면 YouTube 동영상 삽입 완료! HTML 나는 CSS를 이용하여 반응형으로 만들기 위해 div로 iframe 태그를 감싸주고 player 라는 class 이름을 붙여줬다. 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하기 비율이 유지되는 반응형 동영상을 위해서는 동영상의 종횡비를..

예전에 프로젝트 만들다가 알게 된 반응형 사각형 만드는 법. 예를들어, 이렇게 div 안에 들어있는 img의 크기를 화면 크기가 달라져도 정사각형으로 유지하고 싶을때 사용할 수 있다. HTML CSS div { width: 40%; position: relative; } div::after { content: ""; display: block; padding-bottom: 100%; } div img { width: 100%; height: 100%; position: absolute; } 반응형 정사각형을 만들기 위해서 div에 after 요소를 만들어 주고 padding-bottom을 100%로 설정해 줬다. 그리고 img의 width와 height은 100%로 설정하고, position을 absol..

폰트를 적용할때 cdn을 사용하면 성능이 안 좋아진다고 해서 폰트를 직접 다운 받아 적용하는 방법에 대해 알아 보았다. 1. 적용할 폰트를 다운 받는다. 나는 눈누라는 사이트를 사용하였다. (예쁜 한글 폰트가 많아서 자주 사용함 🤩 ) https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 폰트 상세 페이지에서 다운로드 버튼을 볼 수 있다. 이 버튼을 클릭하면 다운로드 페이지로 바로 이동하여 다운 받을 수 있음. 2. 다운받은 폰트를 src 폴더 안에 넣어준다. 나는 src 폴더 안에 fonts 폴더를 먼저 만들고 그 안에 넣어줬다. 3. font-face 정의 후 원하는 곳에 적용한다. 나는 전체 페이지에 한번에 적용하기 위해 index.css 파일에서 font-face를 ..

새로 배울때마다 계속 해서 업데이트 할 예정. Git 저장소 초기화 git init Git config list 보기 (사용자 이메일, 이름 등의 정보를 볼 수 있음) git config --list 전역적으로 사용자 이름 정보 변경하기 git config --global user.name "사용자이름" 전역적으로 사용자 이메일 정보 변경하기 git config --global user.email "이메일 주소" GitHub 원격 저장소 추가하기 git remote add origin https://github.com/[github 계정 이름]/[저장소 이름].git 기존 저장소 remote 제거하기 git remote remove origin 모든 파일의 변경 사항을 git에 추가하기 (.gitign..