axios 버전: 1.1.3 jest 버전: ^29.2.1 새로운 프로젝트를 시작하면서 package.json의 모듈 버전들을 다 upgrade해보았다. 리액트 프로젝트에서 jest로 테스트 코드를 작성했는데, 실행을 하니 axios를 import하는 부분에서 Cannot use import statement outside a module라는 오류가 발생했다. D:\--\node_modules\axios\index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js'; SyntaxError: Cannot use import statement outside a m..

get과 post는 http 메서드로, 클라이언트에서 서버로 무언가를 요청할 때 사용한다. get get은 클라이언트에서 정보를 요청하기 위해 사용하는 메서드이다. 요청을 전송할 때 필요한 데이터를 쿼리스트링을 통해 전송한다. 이 때 요청 파라미터가 여러개면 &로 연결한다. get은 불필요한 요청을 제한하기 위해 요청이 캐시될 수 있다. 길이 제한이 있다. 파라미터에 노출되기 때문에 중요한 정보를 다루면 안된다. post 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용하는 메서드이다. 전송할 데이터를 http 메시지의 body 부분에 담아서 서버로 보낸다. body의 타입은 Content-Type 헤더에 따라 결정되고, Content-Type의 종류로는 applicati..

React에서 간단하게 다크 모드를 구현해보려고 한다. 폴더 구조 ├─assets │ └─svgs ├─routes │ ├─Home │ ├─Weather │ └─_shared │ └─GNB ├─states └─types 테마 구분 states/theme.ts import { atom } from 'recoil' const initTheme = localStorage.getItem('theme') || 'light' export const themeState = atom({ key: '#themeState', default: initTheme, }) 간단하게 recoil의 atom으로 전역 상태를 만들어주었다. 기본값으로는 로컬 스토리지에 저장해 놓은 테마를, 없을 경우 밝은 모드를 지정해주었다. route..

SEO에 대해 좀 더 깊게 공부해봐야겠다 싶어서 관련해서 구글 검색 센터의 공식 문서를 읽으며 정리해보려고 한다. https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google Developers 검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요. developers.google.com 검색엔진 최적화(SEO) 기본 가이드 검색엔진 최적화란? 검색엔진이 콘텐츠를 이해하고 제공하도록 돕는 것. 웹사이트의 일부를 손보기만 해도 검색..

i18n이란? 국제화(internationalization; i18n)의 줄임말이다. 언어 및 문화권 등이 다른 여러 환경에 대해 사용할 수 있도록 지원하는 것으로, 보통 텍스트 번역을 의미한다. i18n 적용하기 i18n 설치 npm install i18next i18next-browser-languagedetector react-i18next // or yarn add i18next i18next-browser-languagedetector react-i18next 언어별로 json 파일 만들기 지원할 언어별로 폴더를 만들어서 번역할 내용을 관리해준다. utils/locale/en/front.json { "gnb.home": "Home", "gnb.weather": "Weather" } utils/l..

Series 오라클 클라우드 사용하기 - (1) 인스턴스 생성, ssh 접속 오라클 클라우드 사용하기 - (2) 프로젝트 배포(React, Node.js) 오라클 클라우드 사용하기 - (3) 도메인 연결, 구글 로그인 프로젝트에서 구글 로그인을 사용해 로그인을 구현했는데 새로 배포를 하고 난 후 오류가 발생했다. 알고보니 현재 구글 OAuth에서는 ip주소로는 redirect를 할 수 없다고 한다. 따라서 도메인을 연결해야 했다. 도메인 연결 무료 도메인 서비스를 찾던 도중 noip를 알게 되었다. 사용해보니 아주 간단하게 도메인 연결을 할 수 있었다 :) https://www.noip.com/ Free Dynamic DNS - Managed DNS - Managed Email - Domain Regis..

Series 오라클 클라우드 사용하기 - (1) 인스턴스 생성, ssh 접속 오라클 클라우드 사용하기 - (2) 프로젝트 배포(React, Node.js) 오라클 클라우드 사용하기 - (3) 도메인 연결, 구글 로그인 인스턴스 생성에 이어 프로젝트도 배포해보려고 한다. 프론트, 백엔드 배포는 각각 nginx와 pm2를 이용할 예정이다. 1. Linux 패키지 업데이트 아래 명령어로 linux 패키지를 최신버전으로 다운로드 받아준다. sudo apt update -y && sudo apt upgrade -y update 명령어는 패키지의 최신 버전이 있는지 확인해주는 명령어이고, upgrade는 해당 패키지들을 다운로드받아 설치하는 역할을 한다. 이 때 update 명령어로 최신 버전에 대한 정보를 가져와..