#delete

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하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

RESTful API에서 POST 메서드만 사용하는 것의 문제점과 대량 데이터 처리 시 GET/DELETE와 POST의 차이점에 대해

일반적으로 GET, POST, DELETE, PUT 등의 HTTP 메서드를 구별하여 사용하는 것이 권장됩니다. 하지만 모든 요청을 POST로만 처리하는 방식으로 개발할 경우 발생할 수 있는 이슈가 무엇이 있을까요.. 백단에서 성능에는 큰 차이가 없지 않은가요? post만을 사용해 개발해도 될까요?

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

PostLike 테이블에서의 JPA 관계 설정 (Web, Spring, JPA)

Post 테이블 (Long pno, String cotent) UserInfo 테이블 (String uid, String nickname) PostLike 테이블 (Long pno, String uid) Post에 대한 좋아요 정보를 PostLike테이블에서 관리하고 있습니다. 여기서 PostLike 엔티티를 정의할 때 1) UserInfo userInfo, Post post를 @ManyToOne으로 관리할지, 2) 아니면 그낭 Long pno, String uid로 관리할지 고민입니다. 1번 방법) 장점 : Post, UserInfo를 delete 할때 알아서 관련된 좋아요 정보를 찾아서 삭제해준다는 면에서 무결성 관리가 편함. 단점 : JPA는 where pno=(삭제하는 게시글 id)처럼 쿼리 한 번으로 삭제하지 못 한다. 먼저 PostLike 테이블에 pno가 삭제 게시글 id와 같은 것들이 무엇이 있는지 확인하고, 해당 id에 해당하는 row를 deleteById로 하나하나 삭제하기 때문에 쿼리가 N+1 필요해서 성능 이슈가 생긴다. 2번 방법 ) 장점 : 성능 문제가 해결된다. 쿼리 한 번으로 게시글 혹은 유저를 삭제했을 때 관련 좋아요 정보를 삭제할 수 있다. 단점 : 무결성 관리를 직접 해줘야 해서 프로그래머가 신경써서 관리해야 한다. ◼️ 질문 1 1번 방법과 2번 방법 중에서 2번 방법을 선택하려고 합니다. Trade off를 제대로 한 게 맞을까요? Post와 Comment에서는 @ManyToOne을 사용하고, Follow나 PostLike에서는 @ManyToOne을 사용하지 않는 것이 제멋대로인 것 같아서 고민입니다. ◼️ 질문 2 유저를 삭제할 때 해당 유저가 좋아요를 누른 기록을 유지하는 것이 좋을까요, 삭제하는 것이 좋을까요? 요구사항에 따라 달라진다는 것은 알지만 그래도 일반적으로 사용되는 방법이 궁금합니다.

백엔드 개발할때 http method 활용 여부

get post patch put delete 를 가장 자주 사용하는 것으로 알고 개인 프로젝트에도 활용해서 api를 잘 만들고 있는데요 혹시 get과 post만으로도 개발을 하는 경우가 대부분인가요? 국비에서 팀원간 얘기를 하다가 결론이 안나서 문의 드려요

[Js] 함수 매개변수 전달에 대하여...

안녕하세요! 이제 막 1년 좀 넘은 주니어 개발자 입니다. 공부 중에 한 가지 궁금한 점이 생겨서 선생님들께 여쭤보려합니다. js 함수를 작성하는 중에 매개변수로 event를 전달하려 했더니 event에 취소선이 생성됩니다... 예시) - html - <div class='.card'> ... <button id="deleteCard" onclick="deleteCard(event)">삭제</button> </div> - js - function deleteCard(event){ let card = $(event.target).closest('.card').remove(); }; 위와 같이 작성했는데 함수 실행은 되긴 하는데 매개변수 event에 취소선이 생기니 잘못된 것 같아서 여쭤봅니다... 취소선이 생기는 이유와 문제가 된다면 어떤 점에서 문제가 생기는지 개선점은 뭐가 있는지 궁금해서 문의 남깁니다.

리액트 로그인질문..

react + 파이어베이스만 써오다가 react + express 조합을 오랜만에 사용중인데 긴가민가한점이있어서 질문드립니다 ㅠㅠ import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL, timeout: 2500, headers: { 'Content-Type': 'application/json', withCredential: true, }, }); instance.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } else { delete config.headers['Authorization']; } return config; }, (error) => { return Promise.reject(error); } ); export default instance; 이렇게 인터셉터를주어서, 요청할 때마다 토큰을 전달하고있습니다. 그리고 프라이빗 라우터 + 유저정보 인증 훅을 사용해서 로그인사용자만 접근가능하게 페이지를 설정해줬습니다. 근데 질문 1. 네트워크탭 Request Headers 에서 Authorization을 확인해보면 토큰정보가 그대로 노출되고있는데요 원래 이렇게되나요? 질문 2. Bearer + token 이렇게 보내는 경우는 포스트맨이나 이런걸로 테스트할때만 Bearer 을 붙여서 보내주면될까요? 질문 3. 검색 키워드가 생각이안나서 질문으로 올립니다. 아주 옛날에는 (4년전) App.tsx에서 if(localstorage.token){ setAuthToekn(token); } 이런식으로 하고, setAuthToken함수는 import axios from 'axios'; const setAuthToken = (token) => { if (token) { axios.defaults.headers.common['x-auth-token'] = token; } else { delete axios.defaults.headers.common['x-auth-token']; } }; export default setAuthToken; 이런식으로 되어있었는데요, 요즘은 제가 짠 코드처럼 axios.인터셉터 식으로 하는게 맞나요? 질문 4. 그럼 요즘도 회원가입/로그인시 로컬스토리지에 유저 정보 (닉네임 이름 이메일, 토큰정보)만 저장해두고 로그인하면, 로그인버튼이 회원 닉네임으로 변하게 해준다던가.. 이런식으로 분기처리를 하나요? ( 저는 이렇게하고있어서요.. 로딩처리를 줄수도있겠지만 깜빡거리는게 싫고, 또 로컬스토리지로안하면 로그인버튼으로 잠깐바꼇다가 회원닉네임이 표시되더라구요) 질문5. (질문4와 이어집니다.) 만약 질문4처럼하면 사용자가 사이트에 계속 로그인중인데, 이 토큰이 끝났는지 판단하려는 코드를 따로 작성해줘야할까요? 예를들면, App.tsx에 서버 api/auth같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

클라이언트(프론트)에서 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) 사용자 정보제공(문자열) 하드코딩 다국어 설정도 고려하고 있기에.. 실패시 정보를 연상코드로 리턴받을까합니다.(개인 생각) 작성하고 보니 어떻게 문제점은 보이는데 좋은 개선점이 있으시면 의견주시면 감사하겠습니다.

신고 게시글 안 보이도록 하는 기능 질문드립니다

안녕하세요! 현재 진행 중인 사이드 프로젝트에서 게시글 신고 기능을 구현하고 있습니다. 1. 게시글이 누적 신고를 받으면 모든 유저한테 안 보입니다. 2. 유저가 특정 게시글을 신고했을 때 해당 유저한테는 신고한 게시글이 안 보입니다. 1번의 경우에는 신고가 될 때마다 count를 해서 일정 횟수 누적이 되면 해당 게시글을 soft delete를 합니다. 2번의 경우에는 게시글 조회 시 신고 테이블을 outer join 해서 해당 유저가 신고하지 않은 게시글만 조회합니다. 신고 특성상 순간적으로 발생하는 경우가 많을 것 같아서 redis를 사용해볼까 하는 생각도 드는데 조언, 피드백 좀 주시면 정말 감사하겠습니다!

웹 백엔드) Bcrypt를 이용하여 암호화 시 비밀번호 검증

사용중인 라이브러리: Express.js bcrypt mongoose 현재 진행중인 사내 웹 프로젝트내에 게시판을 만들려고 하는데 DC인사이드 처럼 게시글마다 비밀번호를 설정하도록 기능구현을 한 상태입니다. 비밀번호는 bcrypt를 이용해서 암호화를 진행했고 수정이나 삭제를 할 땐 비밀번호 검증 후 수정/삭제가 이뤄지도록 구현하고 있습니다. 패스워드가 bcrypt로 암호화되어 있기 때문에 수정의 경우 1. request body에 비밀번호를 보내서 백엔드에서 bcrypt.compare() 2. 비밀번호가 일치할 시 해당 게시글의 데이터를 response 3. response에서 받은 데이터를 기반으로 프론트 수정페이지에 보여준다음 4. 수정페이지 내용을 다시 PUT요청으로 수정하도록 구현되어 있습니다. 이 과정에서 API가 1. 비밀번호 검증용(GET) 2. 게시글 수정용(PUT) 이렇게 두가지가 필요한 상황이 되었는데, 비밀번호 검증 GET에서 질문이 생겼습니다. 기본적으로 GET과 DELETE요청은 request body를 가지지 않는게 규칙이라고 배웠습니다. 하지만 request body를 가지는 POST와 PUT은 그 의미가 생성/수정이라고 이해하고 있습니다. 그렇다고 비밀번호를 URL에 Query Params로 보내자니 보안상 문제가 되지않을까 걱정이 되구요... 1. GET 또는 DELETE요청에 request body를 포함하여 보낸다. - 현재 사용중인 방식이고 앞서 말한 규칙 때문에 수정을 고민중이며 구현, 사용상에 문제는 없었습니다. 2. POST 또는 PUT요청에 request body를 포함하여 보낸다. - 현재 고려중인 방식이고 의미적인 문제가 없다면 이렇게 사용하려고 합니다. 개발 자체를 공부해본지 얼마안된 개발어린이라 제 상식외의 문제가 발생하면 대처하기가 어렵네요..ㅜㅜ 위에 제시한 1, 2번 방법중 어떤게 더 Best Practice에 가까울까요? 더 좋은 방법이 있다면 의견도 제시해주시면 너무 감사하겠습니다. <(__)>

안녕하세요 HardDelete를 하는 과정속에서 궁금한 점이 생겨 이렇게 질문을 남깁니다.

현재 저는 프로젝트를 진행하고 있습니다. hard delete 특정 연관관계 칼럼까지 삭제를 해야 하는데 이에 있어 보통 어떻게 삭제하는지 궁금합니다. 저희는 프로젝트 용이기 때문에 매 년마다 HardDelete를 구현을 담당하고 있습니다.(내부적인 회의를 통해서 hard delete를 구현하기로 함) 근데 구현에 있어서는 스케줄러를 통해서 삭제를 할 예정이고(코드 참고) @Scheduled(cron = "0 */2 * * * ?") // test cron public void teamDisbandCheckAndDelete() { List<Long> teamIds = teamRepository.findIdsByIsDeleteIsTrue(); teamRepository.deleteAll(teamIds); // cascade remove } 할 생각이었지만 이는 성능상 이슈가 있을 것이라고 생각합니다. 그러한 이유는 팀을 하나만 삭제하는데 다른 연관 관계 테이블은 최소 10배가 최대 100배 넘는 데이터를 가지고 있을 것이라고 예상합니다. 이러한 관점에서 봤을 때 성능상 이슈가 있을 것이라고 예상하고 배치 delete를 구현하려고 했습니다. 근데 만약 이렇게 배치 delete를 아래와 같이 진행을 하려고 합니다.(예시 코드) // 연관된 데이터 삭제 // (예: TeamParticipants, SimpleSchedule, RepeatSchedule 등) teamParticipantsRepository.deleteByTeamIdIn(ids); simpleScheduleRepository.deleteByTeamIdIn(ids); repeatScheduleRepository.deleteByTeamIdIn(ids); // Team 엔터티 삭제 teamRepository.deleteAllByIdIn(ids); 근데 이렇게 삭제하는 게 최선인지도 궁금합니다. 여기서 문제점은 만약 다른 엔티티(TeamParticipants 등등) 삭제 시 제약조건 오류가 났을 때 그렇다면 그 해당 칼럼도 삭제를 해줘야 하는데 이렇게 구현하는 게 맞나?? 싶어서 이렇게 글을 남깁니다.

API 요청 시 헤더에 토큰이 안 담깁니다.

안녕하세요. 현재 개발 서버에서 게스트 모드 로그아웃 시 delete 요청을 보내는 플로우인데 일반 회원 계정 삭제와 동일한 api를 사용하고 있습니다. 일반 회원 계정 삭제는 잘 되는데 게스트 모드로 로그인을 하고 delete 요청을 보내면 헤더에 토큰이 안 담겨져 401 에러가 납니다... 현재 next.js를 사용하고, api 관련 로직은 class로 로컬 스토리지에서 엑세스 토큰과 리프레쉬 토큰을 가져오고, axios instance를 사용하여 headers에 토큰을 넣어 요청을 하고 있습니다. 로컬 스토리지에는 토큰들이 잘 보이고, 똑같은 api를 사용하는데 왜 이런 이슈가 생기는지 모르겠습니다 ㅜㅜ...

타입스크립트 recoil 타입선언에 대한 질문입니다.

안녕하세요. redux를 recoil로 변경하면서 typescript도 같이 사용해보고 있는데 감이 잘 잡히지 않네요 타입스크립트에서 다른타입의 값을 가져와서 비교후 처리해야한다면 어떻게 해야할지 모르겠어서 질문을 드리게 되었습니다. 애초에 이러한 경우는 성립을 하지가 않는걸까요? 컴포넌트에서 deleteTagHandler에서 Tag타입으로 값을 받아와서 setRemoveToNoteTags()로 Tag타입의 매개변수 tag를 전달해주는데요 selector에서는 NotesList의 타입을 지원하고 있어서 그런거 같습니다... 가르침 부탁드리겠습니다 ㅠㅠㅠ 컴포넌트``` const setRemoveToNoteTags = useSetRecoilState(removeTagsSelector); const deleteTagHandler = (tag: Tag): void => { setTagsState({ type: "delete", tagsList: [tag] }); setRemoveToNoteTags(tag); }; ``` selector``` interface NotesList { mainNotes: Note[]; archiveNotes: Note[]; trashNotes: Note[]; editNote: null | Note; } const initialState: NotesList = { mainNotes: [...notes], archiveNotes: [], trashNotes: [], editNote: null, }; export const notesListState = atom({ key: "notesListState", // 고유한 키 default: initialState, // 초기 상태 }); export const removeTagsSelector = selector({ key: "removeTagsSelector", get: ({ get }) => {}, set: ({ get, set }, newValue: Tag) => { const notesList = get(notesListState); const removeTagFromNotes = (notes: Note[]) => { return notes.map((note) => { return { ...note, tags: note.tags.filter(({ tag }) => tag !== newValue.tag), }; }); ...... ```

스프링부트 서비스 코드 작성 기법

현재 학교에서 웹서비스를 만드는 프로젝트를 진행하고있습니다 진행하는 프로젝트의 코드 중 일부분이 저로서는 이해가 잘 안되는 코드가 있어서 질문드립니다 Service부분의 일부 코드입니다 웹 크롤링 api를 사용하여 시장정보를 가져와 mapper의 두가지 기능(delete와 insert)를 사용하고 있는데 제가 이해한 바로는 스케쥴링을 통해 api를 호출할 때마다 delete쿼리를 실행하고 다시 insert쿼리를 실행시키는 방식인데 정말 이방법 밖에 없는지 궁금합니다 또한 mapper interface에서 정의한 기능 여러개가 service interface에서 하나의 기능으로 합쳐지는 코드로 작성하는 방법에 대한 의견도 궁금합니다 많이 가르쳐주시면 감사하겠습니다

React Query 커스텀훅 제작시 파일 분리 어떻게 해야할까요

현재는 /users API 관련 커스텀훅 작성시 useUsersQuery.ts useUserQuery.ts useCreateUserMutation.ts useUpdateUserMutation.ts useDeleteUserMutation.ts 과 같이 기능별로 ts파일을 모두 작성하였는데 문득 불필요하게 파일을 많이 생성하는거 아닌지 생각이 들었습니다. 실제 프로젝트를 진행하시면서 어떻게 커스텀훅을 제작하는지 궁금합니다. 폴더 구조도요!

정말 막막합니다...

원래 국비지원 코딩 개발학원이 이렇게 교육이 맞는지요 저는 비전공자로서 정말 열심히 하고자 하여 개발자 6개월 양성과정 학원 등록후 지금 한달째 접어들었는데 한달동안 오라클 php 리눅스 수업들어갔는데 진도는 무지하게 빠릅니다 이걸 한달안에했으니까... 매일 새벽 2시까지 복습하며 공부는했습니다 주말도 당연히 매일 10시간이상 공부만했구요 공부하다보면 정말 진도가 엄청나서 주말10시간 공부해도 공부시간이 부족할정도입니다 또한 깊게 이해를 못하구요 php도 게시판 만들때 언어도 모르니 복습이 정말 힘들었습니다 아직 자바를 배우지 않은 상태에서 스프링을 3일동안 들어갔는데 도무지 이해가안가서요 VO,Controller,Service,Dao 데이터연결 그리고 select, insert,deleted,update Client 그리고 게시판까지 만들었는데 설명도 그냥 짤막하게만 설명해주시는데 이게 어떻게 작동되고 그런 설명도없이 빠르게 타자입력하면서 수업이 진행되구요 그걸따라가기 바쁩니다 한번놓치면 못따라가거든요 강사님 기다려주는것없이 그냥 진도 계속해서 나갑니다 공부법을 어떻게 해야할지 막막하구요 공부법도 모르겠습니다 그냥 그 언어들만봐서는 이게 어디로 연결이되며 이게 어떻게 리턴이되고 그런것을 모르니 정말 힘드네요 강사님께서는 그냥 완성된 커리문만 자료올려주시며 복습하라고하는데 .. 파일이 10개이상이다보니 입력순서가있는데 게시판을 만들려면 그 순서를모르다보니 뭐부터해야할지 이걸보고 어찌 입력을해보고 공부를해야할지 막막합니다 연결순서가있는데 언어만봐서 이게어디로 연결이되며 값을받아오는지 너무 스트레스입니다 언어들만봐도 정말 모르겠어서 스트레스받아 힘드네요 개발자가안맞는걸까요 공부를 어찌해야할지 막막합니다..

국비지원 코딩 개발학원 정말막막합니다

원래 국비지원 코딩 개발학원이 이렇게 교육이 맞는지요 저는 비전공자로서 정말 열심히 하고자 하여 개발자 6개월 양성과정 학원 등록후 지금 한달째 접어들었는데 한달동안 오라클 php 리눅스 수업들어갔는데 진도는 무지하게 빠릅니다 이걸 한달안에했으니까... 매일 새벽 2시까지 복습하며 공부는했습니다 주말도 당연히 매일 10시간이상 공부만했구요 공부하다보면 정말 진도가 엄청나서 주말10시간 공부해도 공부시간이 부족할정도입니다 또한 깊게 이해를 못하구요 php도 게시판 만들때 언어도 모르니 복습이 정말 힘들었습니다 아직 자바를 배우지 않은 상태에서 스프링을 3일동안 들어갔는데 도무지 이해가안가서요 VO,Controller,Service,Dao 데이터연결 그리고 select, insert,deleted,update Client 그리고 게시판까지 만들었는데 설명도 그냥 짤막하게만 설명해주시는데 이게 어떻게 작동되고 그런 설명도없이 빠르게 타자입력하면서 수업이 진행되구요 그걸따라가기 바쁩니다 한번놓치면 못따라가거든요 강사님 기다려주는것없이 그냥 진도 계속해서 나갑니다 공부법을 어떻게 해야할지 막막하구요 공부법도 모르겠습니다 그냥 그 언어들만봐서는 이게 어디로 연결이되며 이게 어떻게 리턴이되고 그런것을 모르니 정말 힘드네요 강사님께서는 그냥 완성된 커리문만 자료올려주시며 복습하라고하는데 .. 파일이 10개이상이다보니 입력순서가있는데 게시판을 만들려면 그 순서를모르다보니 뭐부터해야할지 이걸보고 어찌 입력을해보고 공부를해야할지 막막합니다 연결순서가있는데 언어만봐서 이게어디로 연결이되며 값을받아오는지 너무 스트레스입니다 언어들만봐도 정말 모르겠어서 스트레스받아 힘드네요 개발자가안맞는걸까요 공부를 어찌해야할지 막막합니다..

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

서버 엔드포인트 및 컨트롤러 구조에 대해 조언 부탁드립니다.

현재 nestjs로 서버를 구현하고 있습니다! 서점과 관련된 서비스를 구현하고 있는데 엔드포인트와 그와 관련된 컨트롤러 설계를 어떻게 해야할지 고민 되어 여쭤봅니다. 서점의 리뷰를 불러오는 것은 [GET places/:placeId/reviews] 서점에 리뷰를 등록하는 것은 [POST places/:placeId/reviews] 특정 리뷰를 삭제하는 것은 [DELETE reviews/:reviewId] 로 엔드포인트를 설계하려 합니다! 다만 리뷰와 관련된 엔드포인트가 places 도메인과 reviews 도메인에 산계되어 있어서 파일 구조에 영향을 끼치는데요, places 도메인을 담당하는 핸들러는 전부 place controller에, reviews 도메인을 담당하는 핸들러는 전부 review controller에 넣을 생각입니다. 그리고 서점 리뷰 조회와 등록은 place controller에서 요청을 받고 해당 비즈니스 로직은 review service에 위임하려고 하는데요 이렇게 하는 것이 나중에 프로젝트 유지보수에 좋을지.. 다른 분들은 어떻게 엔드포인트를 설계하고 컨트롤러 구조를 잡고 계신지 궁금하여 질문 남깁니다...! 많은 조언 부탁드립니다

프론트엔드 개인프젝 구현시 백엔드 서버 해결하는 방법??

안녕하세여 리액트로 개인프로젝트를 해볼려하는데 데이타를 불러오고 정장할때 데이터베이스가 필요하잖아요?, Put post get delete 레스트 api로 통신하면서 만들잖아요 그걸 해줄 백엔드 url 서버가 필요한데 어떻게 해야할까요?

nextjs 초보 fetch & DELETE 동작이 안되요.

app/api/list/[id]/route.js export async function DELETE(request, {params}) { const id = params.id; const {searchParams} = request.nextUrl; const sort = searchParams.get('sort'); return NextResponse.json({message: 'test', id, sort}); } 위처럼 되어있고, app/list/ListItem.js <button className="blue"> <span onClick={() => { fetch('/api/list/' + post._id, { method: 'DELETE' }).then(() => { console.log('call delete'); }); }}>삭제</span> </button> 위 처럼 코드를 작성했는데, DELETE route가 실행이 되지 않습니다. 어떻게 해야 하나요?... POST의 경우에는 아래와 같은데 동작이 잘 되서요.. app/write/route.js export async function POST(request) { const data = await request.formData(); let body = Object.fromEntries(data); const db = (await connectDB).db('exam'); await db.collection('post').insertOne(body); return new Response('POST'); } app/write/page.js <form action="/api/write" method="POST"> <input type="text" name="title" placeholder="제목"/> <br/> <input type="text" name="content" placeholder="내용"/> <button type="submit">NEW</button> </form>

데이터베이스 인덱스

데이터베이스에서 인덱스를 설정할때 1. 조회가 빈번한 2. 수정, 삽입 적은 3. 중복도 적은 컬럼을 설정해야하는걸로 알고 있습니다. 여기서 궁금한게 인덱스 설정한 컬럼에 대해 수정이 발생하면 인덱스 테이블에서는 soft delete를 하고 새로 추가가 되는걸로 아는데 이때 왜 soft delete를 하는건가요? b+tree가 삭제 삽입만 가능하다고 들은거같기도한데 그러면 삭제하고 삽입을 하면되는거 아닌가요?? 그냥 어떻게 동작하는지 알고있었지만 생각해보니 왜 이렇게 동작하는지는 이해를 못하고 있었던거같습니다.. 아시는분이 있다면 답변 부탁드립니다.

스프링 패스변수 질문

@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부분을 어떻게 고치면 좋을까요??

안녕하세요 delete문으로 바꾸고 싶은데 모르겠어서 질문드려요

지금 중복된 값을 찾았어요 중복된 값만 지우려고 하는데 아래 코드를 통해서 삭제해야할 것 같아요 SELECT DISTINCT A . * , D.cptype FROM nowon_event_appointment2 AS A LEFT OUTER JOIN nowon_event_appointment AS B ON A.appidx = B.idx LEFT OUTER JOIN nowon_member C ON A.mbId = C.mbId LEFT OUTER JOIN n_edu D ON C.mbCpName = D.cpname WHERE A.clickKindZ = '1679902451' && A.clickTimeCode = '117' && B.clickAppCancel = 'N' AND A.cpt = 'Y' GROUP BY A.cptNum DESC 사진은 sql 해석이라고 해요 WHERE절을 사용하면 된다고 하는데 저 코드를 풀어서 다시 코드를 어떻게 짜는지 모르겠어요 많은 관심 부탁드려요

react-query useQuery vs useMutation (데이터 조회 시)

안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고, Create/Update/Delete 작업은 useMutation을 쓰라고들 말씀하시는데요, 특정 페이지 렌더링 시 자동 fetch하지 않고, 사용자 액션 발생 시에만 fetch 요청을 하는 경우 useQuery가 반환하는 refetch 함수를 쓰거나 useMutation가 반환하는 mutate 함수를 사용하면 구현이 가능하더라구요. (제가 테스트한 코드는 gist에 있습니다.) 여기서 궁금한 건 Read 작업임에도 불구하고 useMutation으로도 구현이 가능하다면 굳이 위 상황에서 useQuery로 구현했을 때의 이점이 있을까요?

데이터를 삭제할 때 현업에서 어떻게 하나요?

데이터를 삭제할 때, soft delete와 hard delete가 있다고 배웠는데 현업에서 보통 어떻게 사용하나요? soft delete를 사용했다가 데이터를 복구하는 경우가 많이 있나요? 그리고 soft delete를 하게되면 where조건으로 한번 더 데이터를 확인해야하는데 비효율적이지 않나요?