전체 글

PuTTY key format too new 오류 해결하기

오라클 클라우드의 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..

오라클 클라우드 사용하기 - (1) 인스턴스 생성, ssh 접속

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

Next.js에서 mui 사용하기(TypeScript)

얼마 전에 진행했던 기업 사전 과제에서 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를 쓰기 위해서 필수적인 것은 ..

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

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..

[Next.js] Unknown property 'jsx' found 오류 해결

강의를 들으면서 Next.js 공부를 시작했다. 분명 강의를 들으면서 할 때는 잘됐는데 새로운 프로젝트를 만든 후 styled jsx를 쓰니 eslint 경고 메세지가 떴다. Unknown property 'jsx' found eslint(react/no-unknown-property) https://github.com/vercel/next.js/discussions/40269#discussion-4365502 원인은 제대로 찾지 못했지만 해결 방법은 아래와 같다. .eslintrc.json파일의 rules에 "react/no-unknown-property" rule에 jsx를 ignore하도록 추가해주면 된다. .eslintrc.json { "extends": "next/core-web-vitals",..

Next.js 시작하기 - (2) CSS-in-JS, Custom App

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Next.js에서 css를 적용하는 법과 앱을 커스텀하는 방법에 대해 알아보자. 1. CSS-in-JS(Styled JSX) Next.js에서는 기본적으로 CSS-in-JS를 지원한다. 따로 설정을 할 필요없이 style 태그에 jsx 옵션을 주고, {``} 안에 스타일을 작성해주면 된다. 이 때 이 스타일들은 해당 컴포넌트 내부로 범위가 한정된다. 그렇기 때문에 global style을 적용하고 싶다면 ); }; export default GNB; GNB ..

Next.js 시작하기 - (1) Project setting, Routing

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching React 공식 문서에서는 Next.js를 아래와 같이 소개하고 있다. Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다. 이게 무슨 말인지 바로 해보면서 알아보자. 1. Project setting 프로젝트를 만들 폴더에서 아래 커맨드를 입력한다. npx create-next-app..

TypeScript에서 FormData로 이미지 업로드하기

React+TypeScript로 프로젝트 개발 중 프로필 사진 변경 기능을 추가하기 위해 formData에 이미지를 추가해서 보내주려고 하는데 안되서 삽질 좀 했다. 😕 왜 안돼..? const [image, setImage] = useState(); const handleInfoSubmit = async (e: FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append('profilePicture', image); // ... } 기존에 자바스크립트에서 formData를 보낼 때는 다른 것들과 마찬가지로 append를 해서 보내면 됐었는데 ts는 그렇게 하도록 두지 않았다. :( 오류 메시지 Argument o..