next.js에 firebase를 연동하였고, CRUD 작업을 하려고 요청을 보내는데 에러가 나타났다. 찾아보니 firebase firestore Database에 규칙에서 읽기, 쓰기 권한을 수정해 줘야한다고 한다. allow read, write : if false 에서 false 부분을 true로 바꿔주어야하는데 바꾸고 게시를 누르면 계속 "알 수 없는 오류"가 나타났다고 떴다. 다른 에러 메세지없이 이렇게만 나타나니 계속 삽질을 한 끝에 원인을 찾아냈다. 이 익스텐션이 설치되어있어서였다. 삭제하고 다시 설정 후 게시버튼을 누르니 정상적으로 값이 바뀌었다.
Nextron 기본 환경설정이 끝나고 npm run dev로 실행을 시켰다. 그런데 실행된 환경에서 개발자도구를 이용해서 디버깅을 해야하는데 F12를 눌러도 작동을 하지않았던 것이다. 두가지 방법을 통해 해결을 할 수 있었고 두번째 방법을 사용하는 것을 추천한다. 1. 렌더러 프로세스에서 메인 프로세스로 요청 아래는 렌더러 프로세스(renderer.js)에서 키보드를 감지하고 F12가 발생되면 메인 프로세스(main.js)에 메시지를 보내 디버그 툴을 On/Off 하는 코드이다. main/helpers/background.ts (메인 프로세스)import { app, ipcMain } from 'electron'; import serve from 'electron-serve'..
Nextron이란? Nextron = Electron + Next.js Electron : 모바일 환경에서 실행되는 앱을 데스크탑 환경에서 개발하고자 할 때 사용하는 플랫폼 Next.js : React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크 Nextron 설치 Nextron 설치는 아래 링크를 참고하면된다. Nextron github 주소 : https://github.com/saltyshiomix/nextron github에 보면 여러 Nextron 설치 예시가 있는데 나는 typescript와 antd-design을 같이 사용할 것이기 때문에 npx create-nextron-app chat-app --example basic-typescript ..
Set-Cookie 설정을 통해 서버에서 브라우저로 쿠키를 저장하는 식으로 로그인 로직을 구현하고 사용자가 로그아웃을 하면 서버에서 세션을 파괴하고 쿠키를 삭제하는 식으로 진행하였다. 쿠키 생성 코드 const express = require('express'); const app = express(); const session = require('express-session'); app.use( session({ key: 'user_auth', saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, proxy: process.env.NODE_ENV === 'productio..
이번 포스팅은 Mac 기준으로 작성이 되었다. 1. expo-cli, watchman 설치 npm install --global expo-cli expo-cli을 설치해준다. 그리고 Mac이기 때문에 watchman도 설치해주어야 한다. brew install watchman 2. expo init 작업폴더로 이동한뒤 다음 명령어를 실행시켜준다. expo init 프로젝트이름 그러면 expo 프로젝트가 생성이된다. 3. 휴대폰에 Expo Go 설치 App store에서 Expo Go를 다운로드받고, 회원가입을 진행한다. 4. expo login 프로젝트 폴더로 이동한뒤 expo login 명령어를 실행시켜주고, 회원가입시 입력한 username과 password를 입력해주면 로그인이 완료된다. 5. np..
//index.html js폴더안에 있는 index.js를 불러옴 위와같이 js파일을 불러오지못하는 에러발생 //server.js const express = require('express'); const app = express(); app.use('/경로', express.static(__dirname + '/경로')); app.listen(8080, function () { console.log('listening on 8080'); }); app.get('/pet', function (req, res) { res.send('펫페이지'); }); app.get('/', function (req, re..
마크다운 에디터 라이브러리인 toast-ui/react-editor 사용도중 아래와 같은 에러를 마주침 Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. 문제 원인 외부 페이지에서 탐색 사용자가 다른 사이트에 있고 페이지 링크를 클릭 페이지에 오류가 표시 요청이 서버로 직접 이동했고 Next.js가 페이지 window가 존재하지 않을 때 미리 렌더링하기로 결정했기 때문에 오류가 발생 페이지 새로고침 next/link사용자가 구성 요소 를 사용하는 내부 링크를 클릭 페이지에 오류가 ..
Next.js에서 localStorage를 사용하려고 할 때 다음과 같은 에러가 나타난다. ReferenceError: localStorage is not defined 에러가 발생하는 이유 Next.js는 client-side를 렌더하기 전 server-side 렌더를 수행한다. Next.js에서 제공하는 Server Side Rendering(SSR)에서는 window, document 같은 브라우저 전역 객체를 사용할 수 없다. window 객체는 client-side에만 존재한다. => 따라서, 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근할 수 없다. 해결 방법 typeof window !== 'undefined' if (typeof window..
