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 명령어로 최신 버전에 대한 정보를 가져와..

오라클 클라우드의 key를 puttygen으로 만든 후, putty로 접속을 하려고 했는데, PuTTY key format too new 오류가 발생했다. 해결 방법은 두 가지가 있다. 1. PuTTY를 새로운 버전으로 설치하기 putty를 옛날 버전을 사용하고 있어서 생기는 문제였다. 기존 버전은 삭제하고 최신 버전으로 다시 설치했더니 잘 접속이 되었다. PuTTY 다운로드: https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html Download PuTTY: latest release (0.77) This page contains download links for the latest released version of PuTTY. Currentl..

Series 오라클 클라우드 사용하기 - (1) 인스턴스 생성, ssh 접속 오라클 클라우드 사용하기 - (2) 프로젝트 배포(React, Node.js) 오라클 클라우드 사용하기 - (3) 도메인 연결, 구글 로그인 프로젝트를 국비지원에서 제공하는 vm에 올려서 배포했었는데 vm 제공 기간이 끝나서 배포한 사이트도 내려가게 되었다. 그래서 미루고 미루다 다시 배포하기로 결정했다. 그런데 aws 프리티어는 이미 끝난지 오래되었고 과금된 경험도 있었기 때문에.. 많은 사람들이 추천을 한 오라클 클라우드를 써보려고 한다. 일단 평생 무료라는 점이 너무 좋고 혁명적이다! 오라클은 페이먼트 계정으로 따로 업그레이드를 하지 않으면 결제가 되지 않기 때문에 사실상 과금에 대한 걱정이 없다 :-) 오라클 클라우드가 ..

얼마 전에 진행했던 기업 사전 과제에서 Next.js에 css 프레임워크를 적용하라는 조건이 있어 mui를 적용하게 되었다. react에서 개발할 때는 패키지 설치만 하면 간단하게 사용할 수 있었는데 Next.js에서는 추가적인 설정이 필요했다. mui 설치 먼저 mui를 설치한다. npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles // or yarn add @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles CssBaseline 설정 CssBaseline은 Next.js에서 mui를 쓰기 위해서 필수적인 것은 ..

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Pre-rendering 기본적으로 next.js는 모든 페이지를 pre-render한다. 이는 각 페이지에 대해 html을 미리 만들어두는 것을 의미한다. Initial Load 과정에서는 자바스크립트 동작이 없는 html을 먼저 화면에 보여주는데, 아직 js 파일이 로드되기 전이므로 와 같은 컴포넌트는 동작하지 않는다. Initial Load에서 html을 로드한 뒤, js 파일을 서버로부터 받아 html을 연결시키는 과정이 일어나는데 이를 Hydrati..