#server

질문 26
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

6달 전 · 석수민 님의 새로운 답변

리액트에서 브라우저 Intersection Observer 사용 질문,

안녕하세요, 채팅 관련 프로그램을 개발하고 있습니다. 다름이 아니라 Intersection Observer를 통한 화면 최적화를 진행하고 있습니다. 원하는 최적화 방식은 isIntersector의 true/false 여부를 통해 화면에 메시지 컴포넌트를 제공하고 있습니다. 동작은 정상적입니다. 그런데 문제가 있습니다. 부모에 Intersection Observer를 두나 자식에 Intersection Observer를 두나 아래 2가지 버그가 동일하게 나타납니다. 1. 다소 긴 채팅 또는 무거운 채팅 메시지는 화면 영역에 나타났음에도 isIntersector가 가끔 false 인경우가 있습니다. 그래서 부모가 높이는 가지고 있으나 내용이 빈 경우가 종종있습니다. 2. 메시지가 화면에서 딱 사라지는 순간 isIntersector가 무한 루프 되면서 true/false를 번갈아 가면서 반환합니다. 브라우저는 엣지입니다. 크롬은 불가능합니다. 1번 같은 경우는 산발적으로 발생하고, 2번은 저 상태가 되면 무조건 발생하는 에러입니다. 검색을 이리저리 해봤는데 도통 해결방법이 나오지 않아 여기에 문의드립니다.

개발자

#react

답변 1

댓글 0

조회 26

7달 전 · 개발자A 님의 새로운 답변

flask+react 배포

안녕하세요. 서버를 구현해야하는 상황에 이제 막 백엔드를 공부하며 flask로 작업했습니다. 프론트는 react를 사용했구요. 한 프로젝트 폴더 내에 이 flask-server와 client 폴더를 만들었습니다. 이걸 배포하려는데 어떻게 해야하나요? 웹앱을 만들려면 electron을 사용해야할까요? 웹앱을 만들려면 어떻게 해야하는지, 웹앱이 힘들다면, 배포하기 가장 좋은 방법은 무엇인지 궁금합니다ㅠㅠ 마지막으로, 이 두개를 한번에 배포해도 괜찮은지, 나눠서 배포해야하는 건지도 알려주신다면 감사하겠습니다...!!!!!!!

개발자

#배포

#react

#서버

#python

#백엔드

답변 1

댓글 0

조회 120

7달 전 · csw 님의 새로운 답변

3년차 vanilla JS 개발자 이직고민

안녕하세요. 저는 제조업 대기업에서 3년차 개발자입니다. 3년차가 되기까지 직장에서 하나의 프로젝트를 주로 맡았는데요. 저희 회사의 os에서 구동되는 웹앱을 구현했습니다. 프로젝트 처음부터 투입되어 vanilla js로만 개발을 했고, 조금 추가하자면 node로 http모듈을 사용해서 local server 정도만 간단하게 구현했습니다. 아무래도 제조업 특성상 회사 os 버전에 따라 다르게 구동되는 점 때문에 os버전에 따라 분기처리 하는데 많은 시간을 소요하고 있습니다. 회사에서는 나름 평가도 잘 받았지만, 최근 이렇게 이 회사에서 고립될 것 같다는 불안감으로 이직 준비를 하려고 합니다. 막상 포트폴리오를 정리해보니 일반 컴퓨터에서는 잘만 돌아갈 것을 회사 os 성능에 맞추느라 고생한 것만 나열될 뿐 마땅치 않아 보입니다. 주변에서는 vanilla js만으로도 이직이 충분하다고 합니다. 하지만 막상 채용공고를 보면 react 같은 다양한 프레임워크를 다룰 줄 아는 사람을 선호하고 내가 면접관이어도 vanilla보단 다양한 프레임워크를 다룬 적이 있는 사람을 선호할 것이라는 생각이 분명히 듭니다. 아무래도 js를 다뤘고 웹앱을 만졌으니 전혀 모르는 react 라도 배워서 사이드 프로젝트를 해볼까 합니다. vanilla js로만 이직이 충분할지, 그렇지 않다면 사이드프로젝트를 추천하시는지, 중소기업이라도 가서 처음부터 쌓아올려야할지, 일단 시도부터 해야하는 걸까요? 다양한 이직에 대한 말씀 부탁드립니다. 감사합니다.

개발자

#vanilla

#javascript

#이직

답변 1

댓글 0

추천해요 1

조회 68

8달 전 · 익명 님의 질문

OAuth2 + jwt 환경 부하 테스트 방법에 대한 질문..

최근 성능 테스트의 중요성에 대해 알게 되어서 목표 성능치를 두고 부하테스트를 진행해보려는 계획에 있습니다! 테스트 툴로는 nGrinder를 사용할 생각인데요, 문제는 제 서버가 이메일 로그인을 지원하지 않고 oauth2와 jwt를 활용한 인증/인가 방식을 사용하는데 부하테스트 시 가상 유저에게 어떻게 accessToken을 발급해주어야 하는지에 대한 궁금증이 생겼습니다..! 제가 생각해본 방식들은 다음과 같습니다. 1. 실제 유저에 대한 accessToken을 하나 발급해두고 이를 고정값으로 사용한다. - 이 방식은 제일 편하지만 사실상 한명의 유저에 대한 시나리오만 테스트할 수 밖에 없고, 같은 유저에 대한 각종 캐싱된 데이터들로 인해 실제 상황과는 동떨어진 작업이 될 것 같아 채택하지 않았습니다. 2. FakeAuthServer와 같은 가상의 OAuth 서버를 만들어 로그인을 시도한다. - 구현하기는 어려워보이지만 그나마 가장 실제 서비스와 동일한 형태입니다. 하지만, 제가 테스트하려는 시나리오는 여러 요청에 대한 순차적인 테스트가 아닌 하나의 API가 얼마나 많은 부하를 견딜 수 있는지 보기 위한 테스트라서 굳이 로그인 과정을 테스트에 포함시킬 필요는 없어보입니다.. - 사실 하나의 API에 대한 테스트만 진행해도 괜찮은지 몰라서 이 방법을 버리지 못하고 있습니다 3. nGrinder의 테스트 스크립트에서 @BeforeThread에 jwt를 발급받는 로직을 작성해서 테스트 전 미리 토큰을 발급받아 요청한다. - 이 방식은 로그인 과정은 포함되어 있지 않고 이미 토큰을 발급받았다는 가정하에 하나의 API만 테스트하기 가장 적합한 방법이라고 생각이 되었습니다. - 번거롭지만 jwt를 직접 생성해주기 위해 jjwt 라이브러리를 nGrinder에 포함시켜야 될 것 같습니다 - 하지만 이렇게 스크립트에서 토큰을 발급해주는게 맞는지 실무에서도 이런식으로 사용하는 경우가 있는지 궁금합니다.. 처음 부하 테스트를 적용하려고 하는데 oauth2 + jwt로만 구성된 예제가 보이지 않네요 ㅠㅠ 어느 방법이 가장 적절한지 혹은 더 나은 방법이 있는지 조언을 구하고자 질문 남깁니다!

개발자

#ngrinder

#oauth

#jwt

#부하테스트

#성능테스트

답변 0

댓글 0

조회 118

9달 전 · 상현 님의 새로운 답변

next14의 next/headers의 cookies를 이용한 쿠키설정

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

개발자

#next.js

#cookie

#jwt토큰

답변 1

댓글 0

조회 172

9달 전 · 익명 님의 질문 업데이트

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

개발자

#프론트엔드

#next.js

#react

#ssr

#csr

답변 0

댓글 0

조회 76

10달 전 · 익명 님의 질문

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

개발자

#micro

#react

#monorepo

#nextjs

#build

답변 0

댓글 0

조회 32

10달 전 · moon고리 님의 질문

우분투 리눅스 실습을 위해 공부중에 안되는 부분 질문 드리려합니다..

vmware에서 하고있는데 live-server 설치부분 하는중인데 ip addr을 해보아도 이렇게 ip가 할당이 안된건지 계속 고정 ip수정도 안되고 sources.list 설치도 안되고 미치겠습니다.. 도와주세요

개발자

#linux

#리눅스

#우분투

답변 0

댓글 0

조회 26

10달 전 · 바보 님의 질문

Nextjs, 비용차이 많이 날까요?

안녕하세요 그냥 제 주변인이나 학우 대상으로 플젝 조그만하게 만드는 사람입니다 새 프로젝트를 nextjs로 가다보니 단순 호기심이에요 지금까지 프로젝트는 csr 방식으로 제작해 배포했고 비용은 0원나왔어요(트래픽이 많이 발생한 것도 아니고ㅋㄷ) 이번 플젝은 nextjs approuter을 사용하지만(ssr) client component만을 사용할 것이고 server side에서 Fetching하지 않을 계획이에요 실제 트래픽이 유의미하게 발생해야하고, 배포 플랫폼(버셀, aws)에 따라 다르지만 여러분들의 사례를 대충 알려주신다면 제 궁금증이 해소될 것입니다

개발자

#react

#next.js

답변 0

댓글 0

보충이 필요해요 3

조회 135

일 년 전 · 포크코딩 님의 새로운 답변

Python cloud service

Python으로 작성된 ai 분석 api를 Cloud에 올려서 serverless로 하고 싶습니다 요청 처리에 대해 짧게는 10초 길게는 몇 분동안 (영상 길이에 따라) 분석을 수행하는데, 추천해줄만한 것들이 무엇이 있는지 질문드립니다

개발자

#python

#cloud

#aws

#lambda

#ec2

답변 1

댓글 0

조회 35

일 년 전 · 정창록 님의 질문

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

개발자

#next.js

#fluent-ffmpeg

#mp4

답변 0

댓글 0

조회 92

일 년 전 · 소지우 님의 답변 업데이트

Next.js 질문

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

개발자

#프론트엔드

#프론트

#next

답변 1

댓글 0

조회 68

일 년 전 · 신진철 님의 새로운 댓글

SpringBoot와 MySQL 도커 배포 과정에서 계속 오류가 발생합니다.

선배님들 안녕하십니까? 제목 그대로 스프링부트와 MySQL 배포 과정에서 HikariPool-1 - Exception during pool initialization. server-1 | server-1 | java.sql.SQLNonTransientConnectionException: Could not create connection to database server. Attempted reconnect 3 times. Giving up. 위와 같은 오류가 발생합니다. MySQL은 정상적으로 배포가 되어서 접근이 가능한 것을 확인했습니다. 하지만, SpringBoot의 경우, 계속 DB와 연결이 실패합니다. 아래는 SpringBoot의 application.properties 파일과 docker-compose.yml 파일입니다. 한 수 가르쳐주셨으면 합니다. 감사합니다. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=${SPRING_DATASOURCE_URL} spring.datasource.username=${SPRING_DATASOURCE_USERNAME} spring.datasource.password=${SPRING_DATASOURCE_PASSWORD} spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update spring.jpa.properties.hibernate.format_sql=true

개발자

#오류

#스프링부트

#도커

#mysql

답변 1

댓글 3

조회 389

일 년 전 · 짹 님의 새로운 답변

nextjs 14 form xss방지를 위한 검증방법

nextjs 14 server action 으로 form 전송하려고 합니다 xss공격을 방지하기위해 input의 html이나 script코드를 걸러내고싶은데 혹시 어떤라이브러리를 사용하는게 좋을까요?

개발자

#nextjs14

#next.js

#xss방어

#xss방지

#form

답변 1

댓글 0

조회 143

일 년 전 · 백승윤 님의 새로운 댓글

데이터 엔지니어 취업 관련 질문드립니다.

안녕하세요. 데이터 분야 직무를 희망하고 있는 대학교 3학년 1학기차 컴퓨터공학과 전공생입니다. 먼저 시간내어 글 읽어주셔서 정말 감사합니다. 공공데이터 API등을 사용해 혼자 간단한 프로젝트들을 경험해보면서 데이터를 수집하고 활용할 수 있도록 정제하는 것에 흥미를 느꼈습니다. 이에 데이터 엔지니어와 데이터 사이언티스트에 대해 더 조사해보면서 관련 직무로 취업하고 싶다는 생각을 하게 되었습니다. 하지만 지금까지 해온 경험과 지식이 데이터 엔지니어가 되기 위해 많이 부족하다고 생각해 제가 부족한 부분들과 앞으로 노력해야 할 부분들에 대해 질문드리고 싶습니다. ##현재 상황 1. 프로젝트 경험 - 데이터 엔지니어링(데이터 파이프라이닝 등) 관련 프로젝트 경험 없음 - AWS를 활용해 cloud server와 edge server를 구축하고, 공공데이터 application과의 API 통신을 통해 content caching을 구현하는 프로젝트를 진행했었습니다. 2. 알고리즘 - 백준 골드 4(C++)입니다. 반년 전 컴퓨터 알고리즘 수업을 들은 이후 꾸준히 풀고 있습니다. 3. 오픈소스 경험 - git과 github사용법만 알고, 진행했던 간단한 프로젝트들만 깃허브에 올려놓았는데, 크게 의미가 없는 것 같습니다. 오픈소스에 기여해본적은 없습니다. 4. 학과 공부 인서울 상위권 대학교 다니고 있고, 전체평점 3.97/4.5, 전공평점 4.08/4.5 입니다. 5. 언어 - python은 library 잘 활용하는 정도로만 이해하고 있고, SQL, Go 등의 언어에는 지식이 전무한 상태입니다. 이러한 제 상황을 바탕으로 앞으로의 계획에 대해 질문드리고 싶습니다. 1. 데이터 엔지니어로 취업하기 위해 어떠한 역량과 경험을 더 키워야 할 지 궁금합니다. 2. 프로젝트 경험을 쌓고 싶은데, 관련된 기술 스택을 어느 정도로, 또 어떤 방식으로 공부해야 효율적일지 감이 잘 잡히지 않습니다. 전문가분들께서 추천해주실 만한 책이나 강의가 있을까요? 3. 데이터 엔지니어 채용 공고를 살펴보면, 빅테크나 대기업의 경우 경력 n년 이상을 자격 요건에 걸어두는 경우도 종종 확인할 수 있었습니다. 신입으로 데이터 엔지니어 채용은 많이 힘든가요? (4). 데이터 엔지니어 관련해서 열심히 찾아보고 더 나아가 기여해 볼 만한 오픈소스들이 어떤게 있을지 궁금합니다. 꼭 모든 질문에 대한 답변이 아니더라도, 한두개 정도의 질문에 길지 않은 분량으로 답변 주셔도 저에게는 큰 도움이 될 것 같습니다. 전문가분들의 답변을 토대로 앞으로 더 열심히 노력해보겠습니다. 이상 긴 글 읽어주셔서 감사합니다.

개발자

#데이터-엔지니어

#데이터

#취업

#개발자

#대학교

#대학생

답변 1

댓글 2

보충이 필요해요 1

조회 408

일 년 전 · 익명 님의 질문

MS SQL 네트워크 환경 문제

어제까지만 해도 잘만 사용하던 네트워크 환경에서 VBA 코드로 DB연결 계정 정보가 틀린 이후로 SSMS도 연결이 되질 않습니다. 이런 경우 기존에 설치 되어 있는 SQL SERVER 관련 파일을 모두 삭제한 후 하나의 버전만 재설치를 진행해도 데이터가 날라가지 않는 건지 궁금합니다. 초기에 네트워크 문제인 것을 확인 했을때 TCP/IP 사용 확인, 포트 번호 체크, 서비스 재시작, 방화벽 인바운드,아웃바운드 규칙까지 모두 체크했는데도 해결이 되지 않았습니다. ㅠㅠ 확인해보니 SQL SERVER STANDARD EDITION 을 사용중인 것으로 보아 회사에서 유료 서버를 사용중인 것으로 보입니다. 이럴 경우에는 로컬 컴퓨터를 포맷하거나 하여도 기존 DB는 MS 서버로 저장이 되는것인지도 궁금합니다! 선배님들의 답변이 필요합니다 ㅠㅠ 제가 질문에 충분한 정보를 제공한지 모르겠네요... 답변을 주시기에 부족한 내용이 있다면 보충하겠습니다!

개발자

#mssql

#sql

답변 0

댓글 0

조회 40

일 년 전 · 포크코딩 님의 새로운 답변

Next dev server가 자꾸 chunks error로 터집니다

안녕하세요. Next에서 npm run dev로 실행시키고 작업물을 저장하다보면 몇번 수정을 안했는데도 다음과 같은 에러창으로 인해 서버가 터집니다. ㅠㅠㅠ 저장 혹은 새로고침을 하면 웹에 Internal server error 뜨고 터미널에는 사진과 같은 에러들이 나열됩니다. .next에 있는 작업하고 있는 해당 페이지 폴더 경로들만 뜨며 몇일째 비슷한 문제를 겪으신 분들의 방법을 따라했는데 해결이 안되고 있습니다 ㅠ 챗 지피티가 알려준 방법도 안되더라고요 ㅠㅠ 도와주세요 시도한 방법 : 1. node, npm관련 캐시파일 모두 삭제 후 최신lts버전업그레이드 2. next 폴더 삭제 후 다시 빌드 3. 드라이브 공간확보 4. 폴더 읽기전용 권한 변경 ( next 다시 빌드하니까 초기화 ...) 5. 자동 빌드 (auto save) 확장팩 깔기 아래에 에러 캡쳐사진과 현재 package 첨부합니다..

개발자

#next.js

#front-end

#frontend

#server

답변 1

댓글 0

보충이 필요해요 1

조회 121

일 년 전 · 최성수 님의 새로운 댓글

넥스트js에서 사용자 인증 페이지 구분

사용자 인증은 jwt토큰으로 하고 있습니다 현재는 serversideprops 또는 클라이언트 사이드에서 토큰을 가져와서 로그인 페이지로 보내고 있는데요 어느정도 모듈화가 필요한 것 같은데 마땅한 방법이 떠오르지 않아 질문 드립니다 제가 생각한 방법은 사용자 인증이 필요한 pathname을 array로 정리해 app.js에서 구분하려 하는데 더 좋은 방법이나 현재 사용하고 계신 방법이 있다면 공유 부탁드립니다

개발자

#nest.js

#프론트

답변 1

댓글 1

추천해요 1

조회 99

일 년 전 · 익명 님의 질문

백엔드 테스트 와 머신러닝 테스트가 따로 하면 잘되는데 같이 하면 오류가 발생합니다.

저희 프로젝트의 기본적인 골자는 osmd라고 하는 mxl포맷 파일을 악보 형태로 렌더링해주는 라이브러리를 사용하구요, 스트림되는 오디오를 듣고 그걸 머신러닝 파이썬 코드가 처리한 뒤 timestamp라는 값을 반환하면 그에 맞춰 악보의 현재 위치를 가리키는 cursor를 움직이는 프로젝트입니다. 또한 오디오 스트림을 넘겨받기 위해서 aws에다가 쿠렌토 미디어 서버를 만들었구요, 머신러닝 코드는 로컬에서 돌아가고 있습니다. 각기 따로 스트림을 처리했을때(stdin stdout) 잘 되는 것을 확인했습니다(https://github.com/Kurento/kurento-java 쿠렌토 서버의 구현은 이 레포를 참고해서 만들었습니다) 또한 import sys def main(): while True: line = sys.stdin.readline() if not line: break output = line.strip() + '2' print(output) if __name__ == "__main__": main() 이 예제를 활용해서 테스트해봤을 때 문제없이 작동했습니다(쿠렌토) 머신러닝 코드는 wav 파일을 버퍼 잘라서 stdin에 집어넣고 테스트해보았습니다 작동은 둘 다 문제없이 작동했지만 같이 이어서 하게되면 Failed to write data: The pipe is being closed라는 오류 로그가 찍힙니다. (요약) 1. 백엔드에서 Kurento Media Server(webrtc) 인풋 들어온거에 아무거나 붙여서 반환하는거로 테스트 해봤을 때 문제 없이 스트림 처리가 되는 것으로 확인 됨 2. 머신러닝 쪽에서 오디오 스트림 모드를 만들고 stdin으로 들어온 스트림에 대한 결과값을 stdout으로 반환하는 것이 확인 됨 3. 그렇지만 둘을 이제 갖다붙이면 위 에러 로그 발생 이유 아시는 분들은 알려주시면 감사드립니다. 두서없이 장문을 써서 이해가 안되는 부분들 말씀해주시면 설명드리겠습니다. 감사합니다.

개발자

#backend

#machinearning

답변 0

댓글 0

조회 52

일 년 전 · 김현수 님의 새로운 댓글

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

개발자

#javascript

#node.js

#axios

#rest-api

답변 2

댓글 2

조회 171

일 년 전 · 안희수 님의 답변 업데이트

NextJS 14에서 JWT를 쿠키를 통해 관리하려고 하는데 서버에서 set-cookie 해주는 방식말고 route 핸들러에서 주입할수는 없나요?

안녕하세요. 최근 NextJs를 공부하며 이전 리액트 기반의 사이드 프로젝트를 NextJs로 구현해보고 있습니다. 카카오 로그인만 지원을 하고 있고, 프론트 쪽에서 카카오 인가 코드를 백엔드로 넘기면 백에서 jwt를 발급해서 응답으로 access token과 refresh token을 프론트로 넘겨주고 있습니다. 이전 프로젝트에서는 두 토큰 모두 localStorage에 저장하는 방식으로 했었는데요, 이번에는 쿠키를 이용해보려고 하고 있습니다. 다만 백엔드에서 set-cookie를 해놓지 않아서 응답으로 받은 토큰을 따로 쿠키에 저장해야하는 상황입니다. 하지만 Server Component에서는 set cookie가 안되는 것으로 알고 있습니다. <목표 구현 방식> route handler를 통해서 백엔드 api를 호출하고 그 값을 쿠키에 저장하도록 코드를 짰습니다. (/app/api/token/route.ts) return 값은 확인을 위해서 임의로 넣었습니다. 그리고 쿠키에 저장된 토큰을 통해서 서버 컴포넌트에서 이를 이용해 백엔드 api 통신을 하고 싶습니다. 하지만 서버 컴포넌트에서 쿠키를 확인하니 비어있는 쿠키인 것을 알 수 있었습니다. 얕은 지식으로 생각을 했을때, (route handler - 브라우저 혹은 서버 컴포넌트)에서 생성한 쿠키는 (백엔드 도메인 - 브라우저 혹은 서버 컴포넌트) 통신에 사용되는 쿠키와 다르기 때문이라고 생각이 들었는데 해답을 찾지 못했습니다. <질문 사항> - 백엔드 서버에서 set-cookie를 하지 않고 직접 구현할 순 없을까요? 쿠키는 forwarding이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)

개발자

#next.js

#jwt

#react

#front-end

#cookie

답변 1

댓글 0

추천해요 1

조회 1,052

9달 전 · 권순원 님의 새로운 답변

useSuspenseQuery의 SSR 요청

안녕하세요, Next.js (v13-14), react-query (v5), page router 환경일 때, useSuspenseQuery와 Suspense를 사용했는데 찾아보니 useSuspenseQuery는 컴포넌트 렌더링 시점에 데이터를 로딩하도록 설계가 되어 있어서 Next.js에서 getStaticProps or getServerSideProps 함수를 사용하지 않아도 서버에서 api 요청이 보내지는게 맞을까요? 제가 테스트해보니 위의 가정 했던 것 처럼 동작하는것을 확인을 했지만 문서에서는 그런 내용을 찾을 수가 없어서 질문을 올려봅니다. 감사합니다!

개발자

#next.js

#suspense

#react

#react-query

#fronted

답변 1

댓글 0

추천해요 1

조회 321

일 년 전 · 김민서 님의 새로운 댓글

현역 군인 싸지방에서 GCP 를 이용한 CODE-SERVER 설치 중 오류 질문입니다

안녕하세요 대한민국 육군 현역입니다. 싸지방에서 CODE-SERVER 를 이용해서 자바공부좀 하려고 하는데, GCP가입 후 vm인스턴스 생성까지 했습니다. 문제는 SSH 에서 curl -fsSL https://code-server.dev/install.sh | sh 명령어 입력 후 실행 하기 위해 code-server --link 를 입력하면 error Unknown option --link 가 뜹니다.. 문제가 뭘까요 절박합니다 ㅠㅠ + Code-Server가 업데이트 되면서 명령어가 바뀐거 같습니다 ,, 이슈쪽 봐도 못찾겠네요 고수분들 도와주세요 🥲

개발자

#gcp

#code-server

답변 1

댓글 1

조회 264

일 년 전 · 이수빈 님의 질문

next.js에서 interceptor 어떻게 사용하고 계신가요?

안녕하세요 page router 형식으로 프로젝트 진행 중 궁금한게 있어 게시글 남깁니다. 현재 프로젝트에서는 두가지 AJAX 요청이 존재하는데요. 한가지는 클라이언트 사이드에서의 요청(좋아요 누르기 기능 등)과 서버 사이드 렌더링을 위한 getserversideprops에서의 요청입니다. 문제는 인증 방식으로 엑세스토큰을 사용중인데 axios interceptor을 사용하려고 보니 하나의 interceptor로 두가지 요청을 커버하기가 어렵겠더라구요. 혹시 비슷한 경험이 있으신분들 어떻게 사용하셨는지 공유해주시면 감사하겠습니다.

개발자

#react

#next.js

답변 0

댓글 0

보충이 필요해요 1

조회 104

일 년 전 · 류호준 님의 새로운 답변

이거 해킹당한건가요?

Ec2에 개인 프로젝트를 배포했습니다. 그런데 요청이 시간 초과로 계속 실패해서 톰캣 매니저 페이지에 들어가봤습니다. “/web-server”라는 새로운 페이지가 생겨있고, 사용자도 거의 없어서 저 혼자만 드나드는 사이트인데 세션이 20개 가까이 생겨있더라구요. Ec2 cpu 사용율도 100% 가까이 찍힌 기록도 발견했습니다. 이거 해킹당한건가요? 현재는 인스턴스를 중지해 놓은 상태입니다.

개발자

#해킹

답변 2

댓글 0

조회 555

일 년 전 · 다혜 님의 질문

POST Body 가 간헐적으로 잘려서 들어옵니다.

App (react-native) 에서 RNFS 로 여러장의 이미지를 base64로 변환하여 post body 에 넣어 요청을 보냅니다. 하지만 간헐적으로 서버 (spring boot) 에서 post body 가 잘려서 들어오고 EXCEPTION : org.springframework.http.converter.HttpMessageNotReadableException ERROR MESSAGE : JSON parse error: java.io.EOFException 아래와 같은 에러가 발생합니다. 동일 이미지들을 다시 base64로 변환하여 요청하면 대부분 성공합니다. 어떤 문제일까요? spring boot yml 에는 아래와 같이 설정해두었습니다. server: port: tomcat: connection-timeout: 1800000 max-http-post-size: 100MB max-swallow-size: 100MB threads: max:

개발자

#react-native

#spring-boot

답변 0

댓글 0

추천해요 1

보충이 필요해요 1

조회 135

일 년 전 · olcloolzj 님의 새로운 댓글

Next.js에서 page.js

안녕하세요. Next.js를 공부하던 중 궁금한점이 생겨 질문드립니다 ! 제가 app/page.js 파일에 사용자가 로그인했다면 메인화면 컴포넌트를 보여주고, 로그인하지 않았다면 로그인 컴포넌트를 보여주도록 작성해두었습니다. 그런데 궁금한 점이 로그인을 했는지 유무를 getserversession을 통해 세션을 확인해서 판단합니다. 그런데 이때 비동기처리를 위해 await를 붙여줘야하는데, 그렇다면 page.js의 Home() 자체에 async를 붙여주어야합니다. 그래서 해당 방법을 사용해 제가 생각한 로직은 구현했습니다. 그런데 궁금한 점이 page.js에서 export default async function Home() 이런식으로 작성해도 되나요? 제가 page.js의 역할을 정확히 이해하지 못한 느낌이 들어 질문드립니다. (챗 지피티에게 물어보니 13버전 이전의 내용만 알고 있는 듯합니다. 또한 컴포넌트 자체에 async를 붙이면 안된다고 답변이 옵니다 !)

개발자

#next.js

답변 1

댓글 1

추천해요 1

조회 492

일 년 전 · 손우진 님의 새로운 답변

Spring Cloud Config 서버에 관하여 질문이 있습니다.

MSA 아키텍처에서는 대개 환경 정보를 일괄적으로 관리하는 서버를 두는 것으로 알고 있습니다.(Cloud Native 12 Factors) 그 중에서 Spring에서 사용할 수 있는 것은 Spring Cloud Config Server입니다. 해당 컨피그 서버를 사용하면 효율적으로 application.yml를 관리할 수 있죠.. 그런데 여기까지는 좋습니다만 제 지식으로는 해결할 수 없는 문제가 발생했습니다. Github Actions CI/CD에서 빌드를 할 때 application.yml이 없어도 되지만 빌드 검증을 위해선 필요합니다. 그런데 이때 Config Server를 외부 포트로 열어놓고 Github actions 접속시 비보안적이지 않나요..? 그래서 Spring Basic Auth를 사용하여 접근하려 했지만 왜인지 모르게 오류가 계속 뜹니다. (몇 시간 동안 해봤지만 안됩니다.. 충돌 때문인지는 모르겠지만 그냥 Security 관련 Bean이 설정이 안되더라구요..) 관련해서 AWS를 활용하여 일회성 인증을 하는 방법이 있다고 합니다만.. 이것만이 방법은 아닐 거 같습니다. 에이 몰라! Config Server 외부 포트 열어놓는건 위험하니까 그냥 Github actions secrets에도 application.yml를 다 넣고 빌드 검증해보고, 실제 배포때는 Dockerfile로 프로파일 설정해서 Config Server에서 불러와야지! 라고 하기에는 그럼 application.yml이 수정될 때 마다 github actions, config server 둘다에서 수정해줘야 할 것 같습니다… 관련하여 조언 주시면 감사하겠습니다.

개발자

#spring

#spring-cloud

#spring-cloud-config

#msa

답변 1

댓글 0

조회 80

일 년 전 · 여진석 님의 새로운 댓글

nextJS 에서 안전하게 token 처리하기

nextjs에서 nextAuth 쓰지않고 안전하게 token 처리하는 완벽한 예시가 있는지 알고싶습니다. 사이드 프로젝트중에 여러 시도를 해봤는데 정답을 못찾겠습니다. 일단 axios 인터셉트로 ssr이나 csr이나 모두 토큰을 헤더에 담아서 보내는 것을 목표로 하고 있습니다. 1. 상태관리 라이브러리를 사용한다. 당연히 ssr 환경에서는 불가하니 탈락 2. 그냥 쿠키를 사용한다 보안 문제가 있으니 탈락. 3. http only 쿠키를 사용한다. csr 환경에서 접근할 수 없으니 탈락. 대안으로 생각해본 방법들은 1. 모든 api를 server action을 랩핑해서 미들웨어처럼 사용하고 http only 쿠키 이용하기 2. 쿠키와 상태관리 모두 값을 넣어두고 두가지 다 관리하면서 서버와 클라이언트 컴포넌트에서 각각 제어하기 하지만 두가지 방법은 너무 번거롭고 버그 양산일 것 같습니다. 많은 분들께 여쭤봤을 때는 그냥 쿠키를 사용하고 보안은 어느정도 포기한다는데 다른 방법이 있을까요?

개발자

#next.js

#react

#jwt

답변 1

댓글 6

추천해요 1

조회 1,160

일 년 전 · 김우현 님의 질문

Next.js RSC Network response관련해서 질문이 있습니다.

Next.js App router를 사용하고 있습니다. 간단한 검색기능을 구현하는 프로젝트를 진행 중인데 패칭 과정은 아래와 같습니다. 1. 자식 Client 컴포넌트에서 url의 searchParams(router.replace)를 변경하면, 2. 부모 Server Component는 변경된 Search Params를 바탕으로 라우트 핸들러에서 서버에 요청을 하고 필요한 데이터를 Server Component로 받아옵니다 . (부모 RSC는 캐싱을 하지 않게 구현되어있습니다.) 3. 받아온 데이터를 가공 후 자식 Client 컴포넌트에 내려주면, 4. props를 받은 자식 Client 컴포넌트에서 보여주는 방식으로 진행하고 있습니다. 위 과정에서 에러가 발생하는 것은 아니고 정상적으로 잘 동작하고 있습니다. 다만 브라우저 devtool의 Network 탭을 확인하는데 의문점이 있어서 질문을 드립니다. RSC에서 요청을 하면 _rsc 페이로드로 데이터를 받아오는 걸로 알고 있습니다. 분명 _rsc로 요청이 가고 정상적으로 네트워크탭의 preview에 RSC 페이로드가 찍히는가하면 정상적으로 요청이가고 페이지를 확인했을 땐 정상적으로 패칭과 렌더링까지 완료되었는데, 네트워크에서 preview에는 "no data found for resource with given identifier"로 나옵니다. 결론은 패칭과 렌더링은 정상적으로 동작하지만 네트워크탭의 preview와 response가 나올 때도 있고 안 나올 때도 있어서, 명확한 기준이 있는지 궁금해서 질문을 올립니다.

개발자

#next.js

#network

#devtool

답변 0

댓글 0

추천해요 2

조회 299