Trouble Shooting

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

[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",..

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

서버에 요청 시 쿠키 함께 전송하기 + cors 오류 해결

Problem 1. 로그인 토큰을 쿠키에 저장하고, 서버에서는 그 토큰을 이용해 login validation을 하고 있었다. 그런데 이미 로그인을 해서 쿠키에 토큰이 있는데도 로그인 정보가 없다고 뜨는 문제가 발생했다. withCredentials 옵션 추가 axios.get(`${SERVER_URL}/${endpoint}`, { withCredentials: true, }); 표준 cors 요청은 기본적으로 쿠키를 설정하거나 보낼 수 없기 때문에 withCredentials부분을 true로 설정해 수동으로 cors 요청에 쿠키값을 넣어줘야 한다. Problem 2. 이제 쿠키는 잘 전송되는데 cors 오류가 발생했다. 서버에서 credentials 옵션 설정하기 서버에서도 withCredentials..

VSCode Stylelint 적용안될 때 settings.json 설정하기

VSCode에서 Stylelint를 적용해서 잘 쓰고 있다가 노트북을 한 번 포맷하는 바람에 기존의 세팅이 다 사라졌다. 그 기념으로 다시 정리.. Stylelint? Stylelint는 css, scss, less 등 style 구문을 린팅하는 도구이다. 일단 기본적으로 VSCode의 Stylelint 익스텐션과 관련 패키지, .stylelintrc.json 설정이 끝났다고 가정하고, settings.json 설정하는 방법만 정리하겠다. VSCode 설정 변경 (VSCode의 설정에서 json을 검색한 후 Edit in settings.json을 누르면 된다.) Settings.json "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "sour..

[React] [nodejs] req.body 데이터 undefined 오류 해결(FormData undefined)

Node.js와 React를 통해 프로젝트를 하던 중 오류가 발생했다. React와 Node.js를 활용한 고객 관리 시스템 개발 - 구름EDU 리액트와 node.js를 이용해 웹 기반의 고객 관리 시스템을 개발해봅시다. edu.goorm.io 위 링크의 강의를 듣고나서 회원가입 페이지를 구현했는데, 같은 방식으로 로그인 기능을 구현하려니 오류가 발생했다. 기존의 오류가 발생한 코드는 아래와 같다. FormData에 userid, userpw를 추가해 post해 주는 방법을 썼다. 그러나 서버 쪽에서 정보를 받을 때 req.body 데이터가 계속 undefined로 나왔다. (ㅠㅠ)( body-parser도 썼는데 오류가 발생했었다. ) login = (e) => { e.preventDefault() c..

[React] 'unexpected use of 'history' no-restricted-globals' 오류 해결 😭

회원가입을 하고 나서 메인화면으로 보내주고 싶어서 history.push를 쓰려고 하는데 자꾸 history가 없다고 오류가 떠서 계속 고민했다. 원래는 App.js에서 아래와 같이 Route를 써주고, RegisterPage에서 Register라는 컴포넌트를 불러서 쓰는 형식으로 구현을 했었다. 아래 코드와 같이,, App.js import './App.css'; import { BrowserRouter as Router, Switch, Route, } from "react-router-dom"; import Main from './views/Main'; import LoginPage from './views/LoginPage'; import RegisterPage from './views/Regist..

윈도우 기본 브라우저 바꾸는 방법(윈도우 10, 윈도우 11)

윈도우 기본 브라우저가 Edge로 되어있는 경우가 있는데 이를 크롬으로 바꾸려 한다! 윈도우 10 1. 윈도우 설정에 들어간다. (왼쪽 아래 윈도우 버튼) 2. 홈에서 앱 -> 기본앱 3. 기본 브라우저를 Edge에서 Chrome으로 바꿔준다. 윈도우 11 윈도우 10과 비슷하지만 약간 다르다. 1. 윈도우 버튼 클릭 -> 설정 2. 앱 -> 기본 앱 3. Chrome 클릭 -> 기본 파일 유형 또는 링크 유형 설정 Chrome을 누르고 들어가면 파일 형식마다 기본 프로그램을 설정할 수 있다. 원하는 파일 형식의 기본 프로그램을 설정해주면 된다. Edge로 되어있는 것을 클릭해서 Chrome으로 바꿔주면 된다.

[React] devTool의 Network창에서 'You need to enable JavaScript to run this app.' 메시지 없애기

Chrome의 개발자 도구의 Network 탭에서 Preview를 보는데 위와 같은 메시지가 나왔다. 이는 public안의 index.html의 내용 중에 이 내용이 있기 때문이다. 이를 없애주면 더이상 저 문구가 뜨지 않는다!

[PowerShell][VSCode] 이 시스템에서 스크립트를 실행할 수 없으므로 ..

리액트 새 프로젝트를 만들기 위해 Visual Studio Code 터미널에서 create-react-app을 했는데 갑자기 오류가 발생했다. create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. ... 이는 스크립트 실행 권한이 제한되어 있는 상태이기 때문이다. 스크립트 실행 권한을 변경하기 위해서는 Windows PowerShell을 이용해 변경해주어야 한다. 해결 방법 1. Windows PowerShell을 관리자 권한으로 실행 2. 권한 설정 > Set-ExecutionPolicy RemoteSigned > [A] 모두 예 실행 정책 Restricted: 기본 실행 정책. 서식 지정 및 구성 파일(.ps1xml), 모듈 스크립트 파일(.psm..