본문 바로가기

main

리눅스 서버에서 윈도우로 파일 옮기기 (scp) 윈도우에서만 가능하다는 작업을 시도해보기 위해 방법을 찾아봤다. 리눅스 서버에서의 파일 경로를 찾아둔 후 윈도우에서 cmd를 실행한다. scp [계정이름]@[IP주소]:[전체디렉토리와파일명] [윈도우에서받을위치] scp -P [연결포트] [계정이름]@[IP주소]:[전체디렉토리와파일명] [윈도우에서받을위치] 기본포트(22)가 아니라면 -P 명령어를 통해 추가로 입력해주면 된다. - not a regular file : 가져갈 파일명을 제대로 입력하지 않았을 경우 나오는 에러 - Permission denied : C:\에다 데려올려고 했을 때 이 에러를 봄, C:\의 하위폴더로 받으니 성공 더보기
[CentOS 7] pm2에서 React 무중단 실행하기 # 설치 npm install -g pm2 # 실행, name은 생략 가능 pm2 start npm --name name -- start 더보기
[CentOS 7] Error: listen EADDRINUSE: address already in use 0.0.0.0:port pm2 에서 해당 포트에 띄워져있던 프로세스를 종료하고 어디에서도 포트를 사용하고 있지 않다고 생각하는데 계속 already in use라고 해서 방법을 찾아보았다. 1. netstat -anp | grep LISTEN | grap :port 맨 오른쪽의 28950이 PID이다 kill -9 PID 하지만 이 방법으로 종료되지 않았음.. 2. npx kill-port 5000 나는 이 방법으로 해결되었다. 더보기
[Next.js] SEO를 위한 SSR 시도 - 페이지별og태그 적용기 그냥 전체 페이지에 og태그는 적용이 잘 되는데 나는 각각의 포스트 페이지에 그 페이지에 맞는 og태그를 적용시켜주고 싶었다. 해당 페이지 코드에서 useEffect(), next-seo 라이브러리, getServerSideProps, getStaticProps/Paths 를 모두 사용해보았다. 빌드 후 페이지에서 확인을 해보면 마치 적용이 된 것 처럼 보였으나 사실은 html 파일 자체에 적용되어 전송된게 아니라 적용되지 않은 페이지에서 js로 인해 바뀐 상태가 보여진 것이다. 그래서 카카오톡 공유를 하면 계속 이렇게 og가 없는 .. 상태로 나왔다. 페이지에서는 og가 확인이 됨에도 불구하고. Next.js에서 제공되는 기본 코드를 봐도 그냥 페이지에 입력해서 잘 적용 되는거 같은데 나는 왜 이러는건.. 더보기
npm build 시 NCP/AWS 등 클라우드 서버가 멈출 때, 죽을 때 내 터미널이 한글 버전인건지 처음에는 ..죽었음 이라는 말에 이게 도대체 뭐냐며 ㅋㅋㅋ 적잖이 당황했다. 구글링해보니 클라우드 서버의 성능 때문에 react 빌드 시 메모리 부족으로 프로세스가 죽어버리는 현상이라고 한다. 해결하기 위해서는 성능을 업그레이드 하면 되지만 일단 임시방편으로 디스크의 일부를 메모리에 땡겨 쓰도록 설정해주었다. sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048 sudo mkswap /mnt/swapfile sudo swapon /mnt/swapfile 스왑 메모리를 2GB로 생성해서 메모리 부족으로 인한 빌드 실패를 막는다. 추후에 해제하고 싶을 때에는? sudo swapoff -v /mnt/swapfile sudo rm /mnt.. 더보기
The error while TOAST UI Editor ColorSyntax applying An unhandled runtime error occurred TypeError: Cannot read properties of undefined (reading 'listen') This issue with dependency tree of installed TOAST UI Editor. Before that, see the React code // TOAST UI Editor import "@toast-ui/editor/dist/toastui-editor.css"; import { Editor } from "@toast-ui/react-editor"; import "tui-color-picker/dist/tui-color-picker.css"; import "@toast-ui/editor-plugi.. 더보기
React Router 이동 시 Transition Animation 주기 React Transition Group이 공식 라이브러리라고 하여 사용해보았다. npm install react-transition-group --save _app.tsx function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; Component 부분을 AppLayout 태그로 감싸준다. AppLayout.tsx import React, { ReactNode } from "react"; import { Transition, TransitionGroup } from "react-transition-group"; import { useRouter } from "next/router"; interface P.. 더보기
[React | Next.js | Node.js] TOAST UI Editor 이미지 업로드 기본적으로 이미지 업로드 기능을 제공한다. 하지만 굉장히 용량이 작은 사이즈만 업로드가 되는 것 같았다. 기준은 정확히 모르겠다. React | Next.js 구글링해보니 기존의 Image Import Hook을 제거한 후 새롭게 저장할 Image Import Hook을 생성하는 방식으로 사용하고 있었다. useEffect(() => { if (editorRef.current) { // 기존 Image Import Hook 제거 editorRef.current.getInstance().removeHook("addImageBlobHook"); // 새 Image Import Hook 생성 editorRef.current.getInstance().addHook("addImageBlobHook", (blob,.. 더보기

티스토리툴바