#parse

COPY(PG) GC 오버헤드 에러

안녕하세요. 대용량의 텍스트 파일을 postgreSql에 적재하는 모듈을 개발하고 있습니다. copy 함수를 활용하여 텍스트 파일('|'으로 구분되어 있는)을 테이블에 insert 하는데 헤더 스킵을 위해 csv로 parsing하려고 합니다. 근데 파일이 커서 그런가(8GB정도) 'OutOfMemoryError : gc overhead limit exceeded' 에러가 계속 발생합니다.. (어떨 땐 에러 없이 잘 들어가기도 합니다) 코드 중에 불필요한 구문이 있는 건지 판단이 잘 안됩니다... 또 csv로 파싱하지 않고 텍스트 파일의 첫째 줄을 지우고 copy로 밀어 넣는 방법이 있을까요? --------구현 코드-------- try ( BaseConnection c = dataSource.getConnection().unwrap(BaseConnection.class)) { try ( PGCopyOutputStream os = new PGCopyOutputStream(c, "COPY " + tableName + " FROM STDIN WITH (FORMAT CSV)"); CSVPrinter writer = new CSVPrinter(new OutputStreamWriter(os, StandardCharsets.UTF_8), CSVFormat.POSTGRESQL_CSV); CSVParser reader = new CSVParser(new InputStreamReader(inputStream, charset), CSVFormat.INFORMIX_UNLOAD.withFirstRecordAsHeader())) { for (CSVRecord row : reader) { for (String col : row) { if (col != null && StringUtils.hasText(col.trim())) { writer.print(col.trim()); } else { writer.print(null); } } writer.println(); } } } *inputStream은 해당 파일 BufferedInputStream 객체입니다.

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:

Jpa 커스텀 리포지토리 다중 상속 문제

커스텀 리포지토리 사용중 문제가 발생하여 질문 드립니다. @Repository public interface UserRepository extends JpaRepository<User, Long>, CustomRepository { Optional<User> findByUserId(String userId); } public interface CustomRepository { Long search(User user); } public class ACustomRepositoryImpl implements CustomRepository { @Override public Long search(User user) { return 1L; } } 이런식으로 코드를 작성하고 실행 시키면 아래와 같은 에러 메시지가 나옵니다. 그런데 ACustomRepositoryImpl 구현체 이름을 CustomRepositoryImpl 이렇게 바꾸면 정상적으로 실행됩니다. 명명규칙이 그저 개발자들 간의 약속 인줄 알았는데 규칙을 무조건 지켜야 하는 건지 궁금하여 질문 드렸습니다. Caused by: org.springframework.data.mapping.PropertyReferenceException: No property 'search' found for type 'User' at org.springframework.data.mapping.PropertyPath.<init>(PropertyPath.java:90) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:443) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:419) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.lambda$from$0(PropertyPath.java:372) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.concurrent.ConcurrentMap.computeIfAbsent(ConcurrentMap.java:330) ~[na:na] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:354) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:332) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.Part.<init>(Part.java:81) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$OrPart.lambda$new$0(PartTree.java:259) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$OrPart.<init>(PartTree.java:260) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$Predicate.lambda$new$0(PartTree.java:389) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$Predicate.<init>(PartTree.java:390) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree.<init>(PartTree.java:100) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.jpa.repository.query.PartTreeJpaQuery.<init>(PartTreeJpaQuery.java:100) ~[spring-data-jpa-3.2.2.jar:3.2.2] ... 79 common frames omitted

JpaRepository 다중상속 오류

JpaRepository에 다중상속으로 CustomRepository를 상속하려고 합니다. 근데 자꾸 에러가 나서 질문 드립니다. @Repository public interface UserRepository extends JpaRepository<User, Long>, CustomRepository { Optional<User> findByUserId(String userId); } public interface CustomRepository { void search(); } 에러 메시지 ========================================================= Caused by: org.springframework.data.mapping.PropertyReferenceException: No property 'search' found for type 'User' at org.springframework.data.mapping.PropertyPath.<init>(PropertyPath.java:90) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:443) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:419) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.lambda$from$0(PropertyPath.java:372) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.concurrent.ConcurrentMap.computeIfAbsent(ConcurrentMap.java:330) ~[na:na] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:354) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:332) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.Part.<init>(Part.java:81) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$OrPart.lambda$new$0(PartTree.java:259) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$OrPart.<init>(PartTree.java:260) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$Predicate.lambda$new$0(PartTree.java:389) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$Predicate.<init>(PartTree.java:390) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree.<init>(PartTree.java:100) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.jpa.repository.query.PartTreeJpaQuery.<init>(PartTreeJpaQuery.java:100) ~[spring-data-jpa-3.2.2.jar:3.2.2] ... 79 common frames omitted

JMeter Websocket테스트 질문드립니다

JMeter로 Websocket 테스트를 구현해야 하는 상황인데 테스트 진행하는 도중 아래 에러가 나서 찾아보니 Single Write Sampler에 Data 인코딩 문제로 추측만 되고 있습니다... Failed to parse TextMessage payload=[SEND desti..], byteCount=242, last=true] in session ujvhyrid. Sending STOMP ERROR to client. org.springframework.messaging.simp.stomp.StompConversionException: Frame must be terminated with a null octet JMeter Sampler 인코딩 UTF-8로 설정하는건 찾아서 해봤는데 그래도 안되네요...ㅠㅠ 정말로 인코딩 문제인지 혹시 동일한 경험이 있으신 분이 계실까요? 구글링을 해도 자료를 못찾겠고.. 사내에 해당 지식을 가지신 분도 전무하셔서 너무 답답해서 질문남겨봅니다....

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

안녕하세요. 혼자 해보던 도중 도저히 해결이 되지 않아 문의드립니다. - 서버 설계 - 현재 저는 Express앱을 AWS EC2 인스턴스에 NGINX를 설치한 후 proxy_pass에 express앱이 구동중인 port를 연결하여 사용하고 있습니다. 이 과정에서 ALB를 통해 ACM을 연동하여 HTTPS 프로토콜이 사용가능하게 설정까지 하였습니다. 이미지 파일업로드는 multer-s3를 이용해 s3버킷과 연결하여 업로드 되는 방식입니다. - 문제상황 - 로그인과 기본적인 CRUD는 문제없이 되는데, 프론트에서 이미지 파일(multipart/form-data)을 서버로 전송하면 504 오류가 출력됩니다. 1. nginx의 access.log에는 해당 uri의 상태코드가 408이라 출력됩니다. 2. nginx의 error.log에는 readv() failed (104: Connection reset by peer) while reading upstream가 출력됩니다. 3. 개발자도구의 console창에 'server의 이미지 업로드 uri' from origin '프론트 도메인'이 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이라 출력됩니다. 위 오류를 해결해보기 위해 시도해본 것은 아래와 같습니다 1. NGINX의 proxy_connect_timeout, proxy_send_timeout, proxy_read_timeout, send_timeout을 600으로 설정, client_max_body_size를 500M으로 설정 2. ALB의 유휴제한시간 600 설정 3. Express 앱에 app.set('trust proxy', true); 추가 4. Express-session에 app.use(session({proxy:true})) 추가 5. body-parser에 app.use(bodyParser.json({limit: '1000mb'})); 추가 및 app.use(bodyParser.urlencoded({limit: '1000mb', extended: true})); 추가 6. 업로드되는 uri의 미들웨어에 (req, res, next) => { req.setTimeout(1000000); next(); } 추가 7. upload.single()미들웨어를 주석처리 후 req.file 출력 시도 아직도 해결을 하지 못하였습니다 ㅜㅜ 연휴임에도 도와주시면 너무 감사하겠습니다..

json parse error 문제입니다.

리엑트에서 {userId : id} 이렇게 보내는데 컨트롤에서 Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type int from String "[object Object]": not a valid int value] 에러가 발생합니다. User VO로 맴버필드도 int 타입으로 선언되어있는데 파싱에러가발생... @RequestBody User user 로빼고 있는데 이유가 뭘까요?.. 예전에도 비슷한 문제가 있었던거 같은데 검색해도 못찾겟습니다 ㅠㅠ 알려주세요 ㅠ

리액트 로그인 jwt 구현중 나타나는 에러

제가 jwt를 통해서 로그인을 구현하고 있는데요. 서버에서 jwt토큰을 가져오면 그 토큰을 디코딩해서 사용하고 있습니다. 로그인 코드를 짜놓고 실행을 시키면 저렇게 에러 코드가 나오고 let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); 이부분을 지우면 화면이 잘 나타나게 되고 저상태로 아이디랑 비밀번호를 넣어 로그인 버튼을 누르면 jwt토큰이 잘 들어옵니다. 토큰이 들어온 상태서 다시 let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); 이 코드를 넣으면 작동이 되는데 예외 처리를 해서 작업을 해야하나요??..

제너릭 타입을 분리해 재사용하는 방법을 알려주세요.

React Query의 useQuery를 재사용 가능한 hook로 만들고 있습니다. config라는 options 객체를 hook를 사용하는 쪽에서 전달하고 싶었고 아래의 코드까지 도달했습니다. 실행은 되지만 <ResponseType, AxiosError, ParsedType> 제네릭 타입이 UseQueryOptions와 useQuery에서 중복으로 사용되고 있는게 마음에 들지 않습니다. 저 제네릭 타입을 별도로 분리해서 재사용할 수 없을까요?

파이썬 웹스크래핑 beautifulsoup

soup = BeautifulSoup(response.text, "html.parser")  print(soup.find_all("sections",class_='jobs'))  print(soup.find_all("section",class_='jobs')) 이 부분에서 계속 [ ]만 뜨는데 문제가 뭘까요 웹 사이트에 보면 분명히 존재하거든요

가계부 어플리케이션 만들기 java질문

import javax.swing.*; import java.math.*; import java.util.ArrayList; import java.awt.event.*; import java.util.Scanner; import java.text.NumberFormat; import java.util.Locale; class momry extends JFrame { private ArrayList<Integer> incomeList = new ArrayList<>(); private ArrayList<Integer> expenseList = new ArrayList<>(); private boolean isIncome = false; // 초기값은 지출로 설정 public momry() { setTitle("가계부"); setSize(800, 200); JButton button1 = new JButton("추가"); JButton button2 = new JButton("제거"); JButton button3 = new JButton("수입"); JButton button4 = new JButton("지출"); button3.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent actionEvent) { JFrame frame = new JFrame(); frame.setTitle("수입입력"); frame.setSize(500, 600); JLabel label = new JLabel("수입을 입력하세요");//수입을 입력한다. frame.add(label);//라벨에 표시한다. JTextField textField = new JTextField(10); // 텍스트 필드를 생성하여 수입을 입력 받음 frame.add(textField); JButton submitButton = new JButton("확인"); submitButton.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { ArrayList<Integer>i1=new ArrayList<Integer>(); int income = Integer.parseInt(textField.getText()); // 입력된 값을 정수로 변환 int income1 = Integer.parseInt(textField.getText()); // 입력된 값을 정수로 변환 i1.add(income); // 수입을 ArrayList에 추가 submitButton.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent actionEvent) { int income = Integer.parseInt(textField.getText()); incomeList.add(income); frame.dispose(); // 입력 창 닫기 } }); frame.add(submitButton); frame.setVisible(true); } }); } NumberFormat numberFormat = NumberFormat.getNumberInstance(Locale.KOREA); }); button4.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent actionEvent) { JFrame frame1 = new JFrame(); frame1.setTitle("지출입력"); frame1.setSize(500, 600); JLabel label1 = new JLabel("지출 내용을 입력하세요");//수입을 입력한다. frame1.add(label1);//라벨에 표시한다. JTextField textField = new JTextField(10); // 텍스트 필드를 생성하여 수입을 입력 받음 frame1.add(textField); JButton submitButton1 = new JButton("확인"); submitButton1.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { ArrayList<Integer>i1=new ArrayList<Integer>(); int income = Integer.parseInt(textField.getText()); // 입력된 값을 정수로 변환 int income1 = Integer.parseInt(textField.getText()); // 입력된 값을 정수로 변환 i1.add(income); // 수입을 ArrayList에 추가 submitButton1.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent actionEvent) { int income = Integer.parseInt(textField.getText()); incomeList.add(income); frame1.dispose(); // 입력 창 닫기 } }); frame1.add(submitButton1); frame1.setVisible(true); } }); } }); } } class Scratch { public static void main(String[] args) { } } 이게 맞나요?

queryString에 관하여

http://test.com?auth=true&data={"endPoint":"/auth","data":"{"email":"test@test.com","name":"홍길동"}"} const query = queryString.parse(window.location.search); query 사용해서 data안에 객체로 되어있는 정보들 중 data안에 email 정보(test@test.com)을 뽑아오려면 어떻게해야하나요? const query = queryString.parse(window.location.search); console.log('query.data',query.data) //query.data까지는 뽑히는데 console.log('query.data.data', query.data.data) //undefined 그래서 const parsedData = JSON.parse(query?.data); //JSON형식 const email = parsedData.data.email; //test@test.com 정보가 뽑혔어요! 하지만 query?.data에서 에러가 납니다. **error 메세지 No overload matches this call. Overload 1 of 2, '(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): unknown', gave the following error. Argument of type 'string | (string | null)[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 2, '(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any', gave the following error. Argument of type 'string | (string | null)[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. query?.data에서 위와 같은 에러가 납니다.. query?.data의 type은 JSON형식 아니고 string입니다. console.log(query?.data) // {"endpoint":"/auth","data":{"email":"test@test.com","name":"홍길동"}} string에서 email을 뽑아야할까요?.. JSON형식으로 가져올순 없을까요? 에러 원인 및 피드백 부탁드립니다.

채팅 새로고침시 연결 끊기는 문제

안녕하세요. 현재 Websocket과 stompjs v6.0.0을 활용해 채팅을 구현했습니다. roomId로 여러 채팅방을 만들 수 있게 구현했고, 현재 새로고침을 하지 않는 이상 잘 돌아갑니다. 그러나, 새로고침 할 시에는 바로 연결이 끊겨 이전의 채팅 내역도 보이지 않고, 연결, 구독 내역이 사라집니다 ... 어떻게 reconnect 해야할까요? 단순히 채팅 페이지에서 useEffect로 connect를 다시 하니 이미 연결 구독이 된 상태라고 뜨더라구요 .... ㅠㅠ (고민글을 올렸을 때 채팅방이 생성되고, 연결 구독이 됩니다. 채팅 시작 버튼을 눌렀을 경우에는 본인이 연결 구독이 되어 1대 1로 상대방과 채팅이 시작되는 구조입니다. ) import { CompatClient, Stomp } from "@stomp/stompjs"; import { createContext, useContext, useMemo, useRef } from "react"; import { useSetRecoilState } from "recoil"; import { messageState } from "../../states/chatting"; import audio from "../../assets/audios/chatting.mp3"; const ChatContext = createContext( {} as { connect: (roomId: number) => void; disconnect: () => void; send: (roomId: number, message: string) => void; }, ); export const useChatContext = () => useContext(ChatContext); export function ChatProvider({ children }: any) { const setMessages = useSetRecoilState(messageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connect = (roomId: number) => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe( `/sub/chat/room/${roomId}`, (message) => onMessageReceived(message, roomId), { token: token!, }, ); }, ); return client; }; const onMessageReceived = (message: any, roomId: number) => { const audioElement = new Audio(audio); audioElement.play(); setMessages((prevMessages) => { const updatedMessages = { ...prevMessages, [roomId]: [...(prevMessages[roomId] || []), JSON.parse(message.body)], }; return updatedMessages; }); }; // 채팅 나가기 const disconnect = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const send = (roomId: number, message: string) => { if (client.current) { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: roomId, message: message, type: "TALK", }), ); } }; const handlers = useMemo(() => ({ connect, disconnect, send }), []); return ( <ChatContext.Provider value={handlers}>{children}</ChatContext.Provider> ); } ----------이 부분은 connect 하는 부분입니다 --------- const { connect } = useChatContext(); const chatRoomId = worryBoard && worryBoard.chatRoomId; const handleStartChatting = () => { navigate(`/chatting`); connect(chatRoomId!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------

채팅 기능 client 가 null 값이 돼요

하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }

ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?

안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

typescript 에서 동일한 string 타입에 들어가는 데이터를 다르게 type check 하는 방법이 있나요 ?

typescript 고수분들께 질문이 있습니다! 서버에서 string 값을 내려주는데, 프론트에서 해당 string 을 파싱해서 만든 string 을 이용해야 해요 근데 둘다 type 을 string 으로 두게 되면 서로 동일한 타입이 되기 때문에, 파싱 로직을 거치지 않고 할당해도 타입스크립트가 경고하지 않아요 그래서 ""파싱 전의 문자열"" 과 ""파싱 후의 문자열"" 둘을 서로 호환되지 않는 타입으로 만들고 싶은데, 혹시 좋은 방법이 있을까요? BeforeParse 를 string 대신 unknown 으로 주면 원하는 걸 만들 수 있긴 한데, 그냥 좀더 좋은 방법이 없을까 고민중입니다.

WebStorm 에서 ESLint: TypeError: this.libOptions.parse is not a function 오류가 발생합니다.

오랜만에 사이드 프로젝트를 켰는데 린터 기능이 잘 동작을 안하네요. WebStorm IDE 를 사용하고 있는데 모든 파일에서 다음 오류가 보이면서 린터가 동작을 안하고 있는 상태입니다. ESLint: TypeError: this.libOptions.parse is not a function 다른 프로젝트에서는 문제 없이 사용중인 config 이고 IDE 설정도 제대로 적용 했는데 뭐가 문제일지 짐작이 안가네요. 혹시 비슷한 오류 경험하신 분이 있을까요 ? 일단 사용 중인 version 공유합니다. - nodejs - v14.19.0 - npm - v6.14.17 - webstorm v2021.2.1 - eslint v8.14.0"

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

FrontEnd Data Serialize

현재 벡엔드 프레임워크는 자바 스프링을 사용하고있습니다 자바 객체를 만들어서 프론트엔드에서 주는 데이터를 받을려고 하는데 자바 객체안에 또객체가있고 리스트형태의 객체도있습니다 푸론트엔드에서 어떤식으로 데이터를 보내줘야할까요? 아래보시면 as-is 를 to-be의 형태로 보낼려고합니다 차이점은 무엇이고 어떻게 프론트에서 데이터를 만들고 벡엔드로 보내줘야하나요 ? 벡엔드에서 데이터를 받을때 JSON parse error가 발생합니다 도와주세요 ㅠㅠ as-is { key :value } to-be { node :[ { key: value } ], node2: { key: value } }