#status

FE 화면 디렉토리 어떤 구조로 생성하나요?

BE 개발자입니다. 어쩌다보니 테스트용 화면을 만들게됬는데 백엔드에서 RESTFull 하게 호출할 수 있게 하고 싶다보니 각 path별 디렉토리에 html을 넣어주다보니 구조가 많이 복잡해지는 감이 있네요. 다른 분들은 어떤 방식으로 구조를 만드시는지 궁금해서 질문드립니다. 1. 방법 각 path에 맞는 디렉토리 생성 - test - page - user - edit.html - item.html - equip.html - status.html - home - account - money.html 2. 기능에 맞는 디렉토리 - page - user.html - home.html - component - user-edit.html - user-item.html - user-equip.html - user-status.html - home-account-money.html

Next.js Dynamic Routing 관련 질문

현재 ./pages 폴더에서 page router로 라우팅 관리 중에 있습니다! id별 post 상세창 조회를 위해 ./pages/post-detail/[id].tsx 와 같이 작성했으나 Whitelabel Error Page This application has no configured error view, so you are seeing this as a fallback. Fri Aug 30 21:08:21 KST 2024 [67199a4f-4509] There was an unexpected error (type=Not Found, status=404) 만 발생합니다 참고로 ./pages/post-write.tsx 와 같은 파일은 정상 작동합니다 혹시 무엇이 문제일까요? 추가+) 혹시 Next.js 14에서 page router 방식을 사용하는것이 문제일지 궁금합니다

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"); }

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

사용자 등급에 따라 다른 화면을 보여주고 싶어요.

Next.js 14버전을 사용하고 있습니다. 홈페이지에 접속했을 때, 사용자의 로그인 상태 여부에 따라 각기 다른 컴포넌트를 보여주고 싶습니다. const Main = () => { const isLogin = useRecoilValue(loginStatus); const user = useRecoilValue(userAtom); return ( <> <AuthWrapper> {isLogin && user ? <Login/> : <Logout />} </AuthWrapper> </> ) }; export default Main; isLogin과 user는 로그인 여부와 회원 정보에 대한 전역 변수입니다. isLogin의 default값은 false이고, user의 경우 isLogin이 true일 때만 존재합니다. (로그인 상태일 때 해당 유저 정보를 api로 호출) 그리고 <AuthWrapper>를 통해 해당 전역 변수들을 업데이트 해줍니다. 제가 원하는 건 최초 페이지 접속 시에 AuthWrapper를 통해 state값을 초기화해주고, 이에 알맞게 컴포넌트가 렌더링 되는 것입니다. 하지만 isLogin의 default값이 false이기에 로그인 상태일 경우, 순간적으로 Logout컴포넌트가 출력되었다가 AuthWrapper에서 검증 후 state값이 변경되면 Login컴포넌트가 출력됩니다. 이 순간적인 깜빡임을 없애고 바로 동작할 수 있게 하는 방법이 있을까요? +) 추가로.. 서버 사이드에서 처리하기에는 AuthWrapper 내부에서 storage값을 사용하거나 useEffect등을 사용하기에 불가능했습니다.

API 호출 시, 응답의 반환하는 방법에 대해 질문이 있습니다.

제가 했던 방식과 다른 새로운 방식을 알게 됐는데 다른 개발자분들은 일할 때 어떤 식으로 통신하는지 궁금증이 생겼습니다. 그리고 이번 기회에 다른 개발자들과 이야기해 보면서 또 어떤 방식이 있는지 알기 위해 커리어리에 첫 글(질문)을 쓰게 됐습니다. —— ***들어가기 전에*** - 신입 백엔드 개발자로 취업 준비 중입니다. - 다양한 방식으로 해보는 걸 좋아하기 때문에 장단점만 있을 뿐 정답은 없다고 생각합니다. - API 요청 시, `Reponse status code`는 클라이언트-서버와의 약속이라고 생각하고 있고, 약속을 했으면 따라야 한다고 생각합니다. - 기간이 짧은 프로젝트이기 때문에 어떤 답변이 오더라도 프로젝트에서 정한 약속을 바꿀 생각은 없습니다. 프로젝트가 끝나고 백엔드 개발자분과 리팩토링을 하면서 의견을 공유해보고 싶긴 합니다. (원하지 않는다면 어쩔 수 없고요..) ***중요*** - 글을 잘 쓰는 편이 아니라 이해가 안되거나 제 말투가 공격적이라고 느껴지는 부분이 있으면 언제든지 말씀해 주세요! - 만약 방식이 잘못됐다고 생각하시면, 그렇게 생각하는 이유와 가능하다면 경험을 공유해주세요! —— # 본문 지금까지 RFC / MDN / IT 기업 기술 블로그 등을 보고 REST API를 공부했고, 설계 원칙에 따라 모든 API 요청에 대한 Response 상태 코드를 200, 400, 401, 403, 404, 500 등과 같이 정확하게 주고받아야 한다고 생각하고 있었습니다. (물론 애매한 경우도 있었습니다) 그런데 최근 짧은 기간 동안 프로젝트를 하게 되었는데, iOS 개발자(2년차 현직)분과 백엔드 개발자(신입 개발자 취업 준비)분께서는 아래와 같은 의견을 주셨습니다. ''' 클라이언트의 입장에서 요청을 보냈을 때, 서버와 연결이 실패한 게 아니라 서버를 통해 정의된 에러 (4xx, 5xx)를 받았으니 통신에 성공한 것이다. 그러므로 API의 모든 요청(권한이 없는 사용자의 요청, 잘못된 리소스 요청, 이미 가입한 사용자가 다시 회원 가입 요청 등)의 `Response status code`는 200을 반환하고 body에 서버에서 응답한 상태 코드(3xx,4xx, 5xx 등)와 함께 커스텀으로 명시한 에러 코드(AUTH-001 등), 에러 메시지를 보내야 한다. ''' 관점을 다르게 보면 그럴 수 있겠구나 싶었고 문득 주변 개발자분들은 어떻게 구현을 하는지 궁금해져서 이야기를 나눠봤는데 그 결과는 반반이었습니다. 아직 그분들도 연차가 높지 않기 때문에 그렇게 설계한 이유와 이점에 대해 자세히 알고 계시지는 못했습니다. —— # 질문 1. 모든 요청의 Response status code로 200을 보내는 건 REST API 설계에 어긋난다고 생각하는데 이렇게 설계하는 이유와 있는지 궁금합니다. 2. 모든 API 요청의 Response status code를 200으로 보내는 방식으로 구현한다면 나중에 어떤 문제가 생길 수 있을까요? (예를 들어 웹으로 확장 등) - 현재 iOS로 개발 중이며, 확장 가능성은 없는 상태입니다. 단순하게 궁금해서 질문드립니다. 3. 만약 두 방식 외에 다른 방식으로 통신한 경험이 있으시면 그 방식을 선택하신 이유와 이점도 궁금합니다.

react에서 에러 status에 따라 에러 모달을 가져오는 법

안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다. ``` catch (error: unknown) { if (error instanceof AxiosError) { handleErrorModal(error.response?.status); } return null; } ``` 이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다. ``` const [errorType, setErrorType] = useRecoilState(errorDataState); const handleErrorModal = (errorStatus: string | number | null) => { setErrorType(errorStatus); }; ``` 그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 ``` Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. ``` 이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?

클라이언트(프론트)에서 api return 처리를 어떻게 하시나요?

안녕하세요 클라이언트(프론트)단에서 axios 사용해 REST api return 스펙정리를 해서 서버단과 이야기해 수정을 하려고 합니다. 고려사항 등 도움을 주시면 감사하겠습니다. Method - GET : 정보조회시 - POST : 저장시(회원, 주문, 아이템 등) - PUT : 수정시 - DELETE : 삭제시 현 구현 - HTTP status 200은 성공, 그 외 에러처리 => 서버단에서 보내주는 msg 혹은 프론트에서 하드코딩으로 문자열 출력(alert) 문제점 1) 성공과 실패 및 실패 사유에 대한 return 구조체가 생각 이상으로 깊은 구조이며 일관성이 없음. ex1) response.data = { 객체 정보 } ex2) response.data = "Success"; -- 여기부터 문제 -- ex3) response.data.detail = "Faile"; ex4) response.data.detail[0].msg = "Faile"; // 기타 다른정보들 포함됨 ex5) response.data.messages "문자열" 2) 몇개의 api는 return 값으로 status가 200으로 string 혹은 object가 날라옴. 3) 사용자 정보제공(문자열) 하드코딩 다국어 설정도 고려하고 있기에.. 실패시 정보를 연상코드로 리턴받을까합니다.(개인 생각) 작성하고 보니 어떻게 문제점은 보이는데 좋은 개선점이 있으시면 의견주시면 감사하겠습니다.

400 or 403

어떤 api 의 요청이 특정 시간대에만 가능하여 서버가 그 외의 시간대를 예외처리한다면, 400 이나 403 중 어떤 status 가 맞다고 보시나요?

로그인 성공 statuscode 질문있습니다

로그인 성공 statuscode로 201과 200중 어느 것이 더 적합한가요? 로그인은 보통 post를 http메소드로 활용해서 기본적으로 201이 오는데 그럼 200으로 설정하기위해서는 직접 변경해야하나요?

게시글 필터링 백엔드가 낫나요 프론트가 낫나요

안녕하세요 개발중에 게시글 페이지를 만들고 있는데, 필터가 총 3개입니다. 1. 카테고리 (전체, IT, 교육, 문화) 2. 완료여부(전체, 진행중, 완료) 3. 정렬 (최신순, 포인트 순) 이 3개를 구현해야하는데, 방법이 1. 프론트 처리 프론트에서 모든 데이터를 받아온 뒤에, js에서 필터링해서 데이터 넣어주기 2. 백엔드 처리 백엔드에서 데이터 처리한거를 버튼 누를 때마다 axios를 통해서 받아오기 1번은 통신비용은 줄이지만 초기랜더링이 많이 느린 것 같습니다. 2번은 통신비용은 늘지만 초기랜더링은 빠른것 같습니다. 그 외에 장단점도 알려주시면 좋을 것 같습니다 그리고 추가로.. 2번 방법을 했을 때, 클릭시 param을 백엔드에 넘겨서 필터링 처리하고 싶은데 그러면 /board/filter?category='IT' & status='complete' & sort('point') 이런식으로 넘기려는데 뭔가 너무 비효율적인 것 같아서 효율적인 방법이나 일반적으로 많이 사용하는 방법 알려주시면 감사할 것 같습니다

[React native] SSE 관련 에러 질문

안녕하세요. 취업 기간 중 React native 일정 관리 앱을 제작중입니다. 일정 알림 기능을 위해 서버의 일정 데이터를 스트리밍하여 컴포넌트에 매핑하는 동작을 구현 중입니다. react-native-sse 라이브러리를 사용하여 SSE를 시도하고 있는데 유효한 accessToken과 url을 전달해도 연결 자체가 이뤄지지 않는 문제가 발생합니다. 컴포넌트 랜더링 시 연결을 시도하고 에러 혹은 언마운트 시 연결 종료하도록 코드 작성했습니다. 에러 로그는 다음과 같습니다. [EventSource][onreadystatechange][ERROR] Response status error. Reconnecting... DEBUG [EventSource][onreadystatechange] ReadyState: 2, status: 401 DEBUG [EventSource][onreadystatechange] ReadyState: 4, status: 401 리커넥팅을 반복하면서 401 에러를 계속 반환하는데 이 경우 url에 문제가 있는 것인지 혹은 라이브러리에서 요구하는 추가적인 속성이 필요한지 잘 모르겠습니다. 비슷한 문제를 겪거나 React native에서 SSE 연결을 해보신 선배님들께 도움 요청드립니다.

RESTAPI 오류 처리는 어떻게 하시나요?

안녕하세요. RESTAPI를 설계하면서 궁금한 점이 있습니다. 서버에서 유저의 인풋이나 서버 자체의 문제로 Response status가 404 혹은 500 등 여러가지 값으로 설정 됩니다. 이때, 에러메시지는 다들 어떻게 작성하시나요? 가끔 타 API를 보면 ``` { "code": "001", "message": "USER_INPUT_INVALID", } ``` 와 같은 형태 입니다. 에러 메시지를 표준화 하고 싶은데 다들 어떤 기준으로 에러 메시지를 작성하시는지 궁금합니다. 또 React와 같은 프론트 엔드에서 이러한 형태의 에러는 어떻게 처리 하시는지 궁금합니다.

getServerSideProps를 모든 페이지에서 공통적으로 사용할 수 있는 방법이 있을까요?

Next.js 에서 loginStatus같은 부분들을 CSR로 처리하다보니 새로고침시 false => true로 변경되면서 깜빡이는 문제가 생겨서 SSR로 처리하고싶은데 app.tsx에서 getIntialProps를 사용하였는데 요즘방식에는 getInitialProps보다 getStaticProps나 getServerSideProps를 권장한다고 들어서 변경할려고 합니다… 매 페이지에 공통적으로 들어가는 getServerSideProps같은 경우는 어떻게 처리를 해야할까요…? ㅜㅜ

동일한 페이지 내 컨트롤러(jdbc) 작성

안녕하세요 개발자분들 :) 제가 리액트를 통해 한페이지 내 3개의 컴포넌트로 이동하도록 설계를 해놓았는데요(링크처럼 화면의 로딩방식이 아닌 같은 화면 내 탭이동 개념) 두개의 컴포넌트는 동일한 값을 받아오기 때문에 하나의 컨트롤러로 작성했지만 남은 컴포넌트 하나를 어떻게 작성해야될지 도무지 감이 안잡혀서요ㅠ (2개의 컴포넌트: 테이블형식 / 한개의 컴포넌트 : 카드형식, 동일한 디비사용) 컨트롤러의 Getmapping("/board_list") 주소가 같다보니 카드형식의 컨트롤러를 따로 만들어야할지 경로를 다르게 설정해야하는지 답변부탁드려요ㅠㅠ 만약 따로 작성해야된다면 어떻게 작성해야될까요ㅠ @CrossOrigin(origins = "http://localhost:3000) @RestController public class BoardController { private final BoardDAO BoardDAO; public BoardController(BoardDAO BoardDAO) { this.BoardDAO = BoardDAO; } @GetMapping("/board_list") public ResponseEntity<List<BoardVO>> getAllBoards() { List<FreeBoardVO> boards = BoardDAO.getAllBoards(); return new ResponseEntity<>(boards, HttpStatus.OK); } }

react-native 사진 권한이 선택한 사진인 경우에 발생하는 문제

안녕하세요 처음으로 질문글 작성합니다. 현재 React-Native, Expo, TypeScript 환경에서 개발을 진행 중입니다. 'expo-media-library' 를 사용하여 직접 갤러리를 구현했습니다. 여기서 생기는 문제가 사용자가 사진 권한이 선택한 사진인 경우 이런 팝업을 노출하게 됩니다. "사용자의 사진에 접근하려고 합니다." 라는 IOS 시스템 팝업에서 "더 많은 사진 선택..."을 선택하여 추가적으로 사진을 선택 시 추가된 사진을 불러오고 싶습니다. 현재 제 코드에서 ``` const requestMediaLibraryPermissions = async () => { const { status } = await MediaLibrary.requestPermissionsAsync(); if (status !== 'granted') { console.log('Media library permission denied'); Linking.openSettings(); return; } fetchPhotos(); }; useEffect(() => { requestMediaLibraryPermissions(); }, []); ``` 이런 식으로 권한 확인 후 사진을 불러오고 있습니다. 이러한 코드 때문에 처음에는 권한이 허용되어 있는 사진을 잘 불러오지만 IOS 시스템 팝업에서 "더 많은 사진 선택..."을 통해 선택된 사진은 불러오지 못 하고 있습니다. 해결할 수 있는 방법 조언 주시면 감사하겠습니다.

Next.js API 에서 쿠키를 접근할수 있는 방법이 궁금합니

안녕하세요 nexst.js 쓰고 있는 주니어 프런트엔드 개발자입니다 DB API에 접근하기 위해 next에서도 API를 구성했는데 쿠키에 저장되있는 토큰값을 가져오질 못하고 있네요 방법 알려주시면 감사하겠습니다 아래 파일은 src/pages/api 에 존재합니다 const getOrder = async (token, order_no) => { return await fetch(`${process.env.NEXT_PUBLIC_API_HOST}/front/order/${order_no}`, { headers: { Authorization: `Bearer ${token}`, Accept: "application/json" } }).then(res => res.json()).then(data => data) } export default async function handler(req, res) { const { order_no } = req.query const token = "쿠키에 어떻게 접근해야 하나요???" const order = await getOrder(token, order_no) try { res.status(200).json({ ...order }) } catch (err) { res.status(200).json({ err }) } }

git을 하다가 바탕화면 폴더들을 모두 날렸어요

(깃 한지 얼마 안 된 초보라 설명이 이상할 수 있습니다) git bash here을 통해 바탕화면에서 접속했고 사진에 나와있는 명령어들을 사용했습니다 원래 git add 만 하려고 했는데 git status 를 쳐서 확인하는 과정에서 untracked 파일들을 발견했고 지저분하다고 생각하여 삭제하는 방법을 구글링 한 뒤 삭제했습니다 그 이후 ssh 서버에 접속해서 한 파일을 add 한 뒤(커밋 사용) 바탕화면을 봤는데 파일들이 모두 날라갔습니다 요약: git status에 있는 untracked 파일을 삭제하려다 바탕화면에 있는 모든 파일을 삭제했습니다

RestApi 반환 값 자바스크립트에서 처리를 어떻게 해야되나요??

게시글 작성 기능을 자바스크립트로 post요청을 보내서 처리하는데 컨트롤러에서 게시글 생성 후 리턴값을 ResponseEntity.status(HttpStatus.OK).body(저장된 객체) 이렇게 했습니다. 근데 여기서 자바스크립트에서 객체를 어떻게 받아야될지 모르겠습니다..

<input type="file"> 관련하여..

<template> <label for="camera1"> 촬영 </label> <input type="file" id="camera1" accept="image/*" capture="camera" style="display: none" @change="onStartFileSelected" /> </template> <script> const startFile = ref({}) //@change const onStartFileSelected = event => { const startFileInfo = event.target.files[0] startFile.value = startFileInfo if (startFileInfo) { startImageYn.value = 'Y' console.log('startFileInfo', typeof startFileInfo) } else { startImageYn.value = ' ' console.log('no image') } } // 파일 포함 다음 상태 업데이트하는 api const fileUpdateStatusApiHandler = async () => { const formData = new FormData() console.log('startFile===',startFile.value)//File형식 데이터 정상 찍힘 -> 타입 : 객체(Object) console.log('startFile',JSON.stringify(startFile.value)) //안찍힘???왜?????? 객체->스트링으로 바꿈 formData.append('file_upload', JSON.stringify(startFile.value),startFile.value) //빈값이 들어감.. try { const res: any = await ApiCert.post( API_URL.url, formData, { headers: { 'Content-Type': 'multipart/form-data' } } ) console.log('response =====', res) if (res.resCode === 'OK') { console.log('OK') } else { alert(res.resMsg) } } catch (err: any) { console.log('error =====', err) } } </script> file형식 데이터를 api보낼때 formData에 넣어 보내고싶은데 file이 안들어가네요.. file_upload: {} 빈값으로 들어갑니다. 도와주세용

스프링 패스변수 질문

@RequestMapping("/member/delete/{id}") public ResponseEntity<String> deleteMember(@RequestParam List<String> id) { int result1=secessionService.deleteSecession(id); int result = memberService.deleteMember(id); HashMap<String, String> map = new HashMap<String, String>(); map.put("count", String.valueOf(result)); if(result != 0) { map.put("message", "데이터 삭제 성공"); }else { map.put("message", "데이터 삭제 실패"); System.out.println(result); } return new ResponseEntity(map,HttpStatus.OK); } 체크박스로 선택한 여러개의 아이디들을 한꺼번에 삭제하려는데 하나만 선택했을 때만 삭제가 되고 있어요 삭제하려는 아이디가 1개가 될수도 10가 될수도 있어 불특정, 유동적입니다 그러려면 RequestMapping부분을 어떻게 고치면 좋을까요??

input type="file" 사용법

<template> ...(생략) <label for="camera" class="btn btn-purple btn-square btn-lg col-6 right-border" v-if=" imageYn === 'N' && imageYn === null" > 사진 촬영 </label> //class가 조건에 따라 달라짐. <label for="camera" class="btn btn-secondary btn-square btn-lg col-6 right-border" v-if=" imageYn === 'Y' " > 사진 촬영 </label> <input type="file" id="camera" accept="image/*" capture="camera" style="display: none" @change="onFileSelected" /> <button class="btn btn-secondary btn-square btn-lg col-6 left-border" @click="rightButton" v-if="status === '방전 시작'" > 방전 완료 </button> ...(생략) </template> <script setup lang="ts"> const imageYn:string = ref('') console.log('2', imageYn.value) //사진촬영 const onFileSelected = event => { const file = event.target.files[0] if (file) { imageYn.value = 'Y' console.log('1') console.log('imageYn', imageYn.value) console.log('yes file', file) } else { imageYn.value = 'N' console.log('imageYn', imageYn.value) console.log('no image') } } </script> 결과 사진 찍기 전 -> imageYn ='N' 이거나 null일 경우-> class에 btn-purple 적용 카메라를 실행하여 사진을 찍었을 경우 -> imageYn='Y' -> class에 btn-secondary 적용 / disable처리도 되야함 문제점 사진촬영 후 console 1번은 'Y' 찍히되 2번엔 null입니다. 도와주세요!

두개의 객체 배열 비교

<template> {{ ?? }} </template> <script> temp = [ {name:"John1", status:"A"}, {name:"John2", status:"B"}, {name:"John3", status:"C"}, {name:"John4", status:"D"} ] code=[ {value:"A", label:"좋음"}, {value:"B", label:"나쁨"}, {value:"C", label:"보통"}, {value:"D", label:"기타"} ] </script> temp 배열에 있는 status값을 code배열의 value값에서 찾아 같으면 해당 code의 label값을 출력하고싶어요ㅜㅜ 도와주세요

일시적으로 기능을 끄고 켜는 endpoint를 위한 에러 코드는 뭐가 좋을까요?

백엔드 설계 중에 질문이 생겨서 남깁니다. endpoint 별로 기능을 껐다 켜는 미들웨어를 만들고 있는데, 기능이 꺼져 있을 경우 어떤 에러 코드를 반환해줄지 고민이 되더라구요. RESTful한 API를 만든다고 했을 때, 어떤 HTTP status code를 내려줘야 할까요?

Nginx 에서 던지는 413에러 처리하는법

안녕하세요! 처음 질문 남겨봅니다 Nginx 에서 용량이 너무 크면 413에러를 던지는것 까진 좋은데, 이후에 사용자에게 해당 에러는 용량이 너무 커서 발생했다는걸 알려주려고 합니다. 그런데 catch error를 해보면 status가 따로 없이 그냥 network error 아니면 CORS가 뜨더라구요. 혹시 이런경우에 어떻게 해야하는지 알수 있을까요?

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;

next js 미들웨어 리턴 메시지, status는 어디서 받을 수 있나요?

공식문서에 아래 이미지와 같이 메시지, 상태 코드를 보낼 수 있는데 이걸 화면 어디서 받을 수 있나요? next js 버전은 13.1.0 이상 쓰고있습니다.

로컬 환경에서 외부 사이트 로그인 인증 질문입니다 !

nodejs - axios - express - cors 안녕하세요 올해 컴공으로 전과하게되어 웹 프론트엔드를 바라보고 공부중인 3학년 학생입니다. 다름이아니라 간단하게 학교 홈페이지에서 식단 리스트를 받아와 데이터베이스에 저장 후 한 주의 학식과 기숙사 식당의 메뉴를 보여주는 웹 사이트를 만드는 중입니다만... 학교 홈페이지에는 재학생만 접근이 가능하여 nodejs 서버에서 제 아이디와 비밀번호로 post 요청을 보냈고 response 헤더에는 status 200이 나타나는데 메뉴 페이지에 get 요청을 보내면 세션이 만료되었다는 응답과 응답 헤더에는 connection: 'close'로 나타납니다. 그래서 인증 문제인가싶어 로그인 요청 후 받은 cookie값을 변수에 저장하고 get 요청에 담아 보냈지만 결과는 같았습니다. post 요청 이후 get 요청을 하도록 비동기 처리했습니다. 지금 화장실에서 글을 쓰느라 코드를 적지 못하는점 양해 부탁드립니다 ㅠㅠ... +아 혹시 포스트맨에서 로그인 요청시에는 쿠키 값이 총 세개가 있었는데 나머지 두개가 인증에 관한 것인지 찾아보겠습니다. ++ 로그인 요청시 받은 쿠키입니다 cookie : { 세션아이디 httpOnly : true, sameSite : 'none', maxAge : 5300000, secure : true, httpOnly : true },

인증 실패시 http status code

로그인 요청이나 휴대폰 인증같은 요청을 할때, 잘못된 비밀번호, 인증번호를 보낸 경우에는 어떤 상태코드가 맞을까요? 401이라고 많이 하는 것 같은데, 401은 인증정보를 가지고 있지 않은 사용자가 인증을 필요로하는 요청을 할때 인증되지 않았으니 이후 진행 불가! 하면서 내려주는 것으로 생각하고 있어서요.. 개인적으로는 409가 적절하지 않을까 싶긴 한데, 저장된 비밀번호(서버의 상태)와 충돌이 일어났다고 생각할 수 있지 않을까요? 혹은, 아이디+비밀번호를 보내서 인증정보를 내려주는 api을 로그인이라고 하면, 아이디+비밀번호 또한 인증정보라서 인증 실패다! 하면서 401을 내려준다는 원리인가요?