24일차

리액트 너무 어렵다

뭐가 뭔지 하나도 모르겠다

자바처럼 연습할 시간이 필요하다

 

강의를 찾았는데

흠 투자하는게 맞는 건지 판단이 안ㅍ된다

아무튼 맞보기 강의 좀 보다가

마음에 드는 강의를 찾아서 찜해놓았다

 

블로그들을 찾아보다가

리액트를 할 때도 스프링처럼 나눠놓는다는 것을 알았다

컴포넌트를 분리한다고 하여

AI에게 그렇게 해달라고 부탁했다

 

컴포넌트가 한결 가벼워져서 보기 편해졌다

 

아무튼 오늘도 그렇게 AI 의 힘을 빌려서 작업했다

 

아이콘을 눌렀을 때 수정모드로 들어가고

내용 수정 후에 아이콘을 누르면 저장이 되도록 만들고 싶었다

그래서 API 를 연결했는데 500에러가 났다

 

requestpart를 json 으로 받아서 생긴 문제였다

 

고치고나니 400에러가 났다

 

https://simple-ing.tistory.com/47

org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present 에러

 

이것을 참고하여 requestDto 부분을 (request = false) 로 설정했는데

또 오류가 났다

 

{
    "code": 500,
    "message": "Cannot invoke \"cohttp://m.example.fantreehouse.domain.user.dto.ProfileRequestDto.getPassword()\" because \"requestDto\" is null",
    "httpStatus": "INTERNAL_SERVER_ERROR"
}

 

requestDto 가 null 이라서 작동이 안되는 것

 

https://velog.io/@leomj/java.lang.NullPointerException-Cannot-invoke-kosta.mvc.domain.Member.getMemberEmail-because-member-is-null

java.lang.NullPointerException: Cannot invoke "kosta.mvc.domain.Member.getMemberEmail()" because "member" is null

 

진짜 몇 시간을 원인찾다가 안되겠어서

팀원 한 분에게 도움을 요청했다

(주말엔 쉬기로 했었는데 정말 감사합니다!!)

 

그렇게 열심히 찾다가

팀장님에게도 말하니

@ModelAttribute 로 하면 될거라고 해서 바꿔봤더니 오류가 없어졌다

---

그런데 이제 그 다음 오류,

DB 에 변경사항이 적용되지 않는 오류가 발생했다

 

form-data 를 Dto 에 바인딩 하려면 Setter 를 사용하라는 결과들이 보여서 적용해보니 잘들어가긴 했는데

signup 메서드에서 다른 팀원이 작성해 둔 걸 보면 requestDto 에 Setter 를 사용하지는 않았다

대신 axios 를 사용하고 있었다

 

Setter를 빼면 Dto 가 null 로 뜨는 걸 도대체 어떻게 설명해야 하는 건지 모르겠다

웹에서는 200OK 가 뜨는데, DB에는 변경사항 적용이 되지 않는다

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api

🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)

 

여러 글들을 참고해보면 방법이 틀리진 않았는데 이유가 뭔지를 못 찾겠다

 

https://rowonss.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-axios-post-%EC%8B%9C-DTO-%EB%B0%94%EC%9D%B8%EB%94%A9-%EC%97%90%EB%9F%AC

리액트, 스프링부트, axios post 시 DTO 바인딩 에러

requestParam 을 쓰라는데 현재 프로젝트의 상황과 맞지 않아 패스

 

6시간 정도 줄곧 삽질을 한 후에

signup은 잘 되는데 update 는 왜 안 되는 걸까 한참 헤매다가

Dto에서 차이를 발견했다

 

그건

언젠가 튜터님께 조언받던 @JsonCreator 가 달린 생성자의 유무였다

 

그렇게 처리해주고 나자 setter 를 사용하지 않고도 제대로 작동하게 되었다

그런데 문제점은

password 만 바꾸고 싶어도 그렇게 할 수 없다는 것이다

 

빈 곳에 모두 값이 들어가 있어야 하는 것

그리고 닉네임의 경우 유지하고 싶더라도 불가능하다

일단 한 번 바꾸고 돌아오던가 해야한다

 

아무튼 일단 @Setter 사용 없이 하는 것엔 성공했는데..

@JsonCreator 가 아니라 @RequestParam 을 쓰는게 맞는건지도 모르겠다

 

---

찾아보니까 @JsonCreator 는 @JsonProperty 와 짝꿍인듯 하다

다른 인자값을 주입하면서 객체를 생성하고 싶을 때 사용한다고 한다

https://jaime-note.tistory.com/15

Jackson의 모든 것 - 역 직렬화 편

 

프론트 작업부터 끝내고 다시 읽어보자

---

구독한 그룹에 속한 아티스트의 피드를 모아보는 버튼을 만들었다

하지만 아티스트 그룹이 구독이 되어있어야 테스트를 해볼텐데

그러지 못해서 initData 에 구독과 아티스트피드를 추가하였다

 

---

Promise의 기본 개념

 

• 대기(Pending): Promise가 아직 해결되지 않은 상태입니다.
• 이행(Fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
• 거부(Rejected): 비동기 작업이 실패한 상태입니다.

fetchData('https://api.example.com/data')
    .then(data => {
        // Promise가 이행된 경우 실행되는 코드
        console.log('Data:', data);
    })
    .catch(error => {
        // Promise가 거부된 경우 실행되는 코드
        console.error('Error:', error);
    })
    .finally(() => {
        // 비동기 작업이 완료된 후 항상 실행되는 코드
        console.log('Fetch attempt finished.');
    });

 

** 비동기 작업(Asynchronous Operation)은 프로그램이 특정 작업을 기다리지 않고, 다른 작업을 동시에 수행할 수 있도록 하는 방식.. 동기( Synchronous )가 함께 수행하는 느낌이지만 비동기( Asynchronous )가 동시에 수행되는 것임

---

에러시 표시하도록 둔 

 

Failed to fetch data

 

가 화면에 나타났다

 

백엔드를 확인하니

Invalid character found in method name ~ 라는 에러가 적혀있었다

 

https://yeonyeon.tistory.com/84

[Java] Invalid character found in method name. HTTP method names must be tokens 에러

 

를 참고하여 https -> http 로 수정하니 다른 에러 발생

 

디버깅이 돌기 시작

왜인지 groupName 이 script 라고 되어 있다

이러니 검색이 안되지

 

확인해보니 URL 대소문자 문제였다

~/artistGroup/~ 을 artistgroup 이라고 적어둔 것

다음 api 는 ~/artistgroup/~ 이라고 되어있어서 당연히 소문자일 것이라 생각했는데 아니었던 것

 

수정하고 나니 다행히 정보가 잘 들어오는 것을 확인했다

 

---

 

아티스트 게시글에 좋아요를 누른 것을 모아서 볼 수 있도록 만드는 중인데

1. 0: {id: 1, artistName: "카리나", contents: "안녕하세요.", imageUrls: ["START_PROFILE_URL", "START_PROFILE_URL"],…}
2. 1: {id: 2, artistName: "카리나", contents: "반갑습니다.", imageUrls: ["START_PROFILE_URL", "START_PROFILE_URL"],…}
3. 2: {id: 3, artistName: "카리나", contents: "컴백했어요.", imageUrls: ["START_PROFILE_URL", "START_PROFILE_URL"],…

개발자도구 Preview 에는 이렇게 뜨는데도 불구하고

페이지에서는 좋아요 누른 게시글이 없다고 나온다

 

const data = response.data.data;

 

여기에서 .data 가 빠져서 생겼던 헤프닝

 

 

 "detail": "No static resource feed/3.",

라는 404 오류가 났다

groupName 을 제거하면서 주소를 재설정했는데

그 때 슬라이드(/) 를 두겹이 되게 만들어서 경로가 잘못되어 발생한 오류였다

 

---

 

11시 10분 좀 지났을 때부터 갑자기 localhost:3000이 먹히지가 않았다

Network 에러라고 뜨고, 공용DB는 Drop도 되지 않았다

마침 zep에 접속하니 팀원이 있어서 말씀드리니 본인도 갑자기 안된다고 하셨다

그래서 슬랙의 팀원 채팅방에 말했는데

하필 dev에 프론트와 백 모두 다 푸시하고 풀 받은지 얼마 안 된 때라서

뭐가 문제지, 뭐가 문제지 하고 있었다

그리고 공용DB에서 실행을 하면

막판에 HikariPool-1 - Starting... 이라는 문구만 몇 번 나오다가 그냥 종료되어버렸다

구글링을 해보니까 딱히 기술된 상황과 맞지 않아서 넘어간 다음

공용디비를 다시 드랍시도하고 인텔리제이를 껐다 켜기도하고 하다가

잘 안되니까 그냥 아예 local 디비를 날려버리자 싶어서 진행하고 있었다

 

그런 와중에 다른팀의 한 분이 오셔서는 혹시 환경변수 설정하셨냐고 물으셨다

아차 싶어서 변경하고 연결하니 local 디비는 잘 연결되었다

문제는 공용디비였던 것

 

RDS 한번 보자고 하셔서 AWS에 접속하여 확인했고

그곳에 등록해 놓은 MySql이 죽은 것이었다

사흘에 한 번씩은 죽는다고

벌써 두 번이나 죽었다고 하셨고

완전 끄고 다시 주소 받아야 한다고 해결책을 주셨다

끝까지 도움주시고 그렇게 유유히 본인자리로 가셨다

 

이렇게 한시간 반 정도 그냥 날아가 버렸다

그래도 새로운 것 알았네

싶다

---

눈이 충혈되서 안약을 넣었는데 가라앉을 기미가 없다

그래서 혹시나 항생제도 넣었는데 왜 안가라앉니?

이번에 프로젝트가 끝나면 안과도 가봐야할지도 모르겠다

 

 

 

 

 

 

 

 

 

 

 

 

 

---

https://velog.io/@moreso/designing-complex-components-flexibly

복잡한 컴포넌트 유연하게 설계하기

https://www.stevy.dev/react-design-guide/

리액트 설계 가이드

https://batory.tistory.com/470

Form 데이터 요청을 DTO에 바인딩하는 방법

https://4sii.tistory.com/431

[Nest.js] FormData 전달받기 with multer

https://stackoverflow.com/questions/74471540/multipart-form-data-not-working-on-axios-put-request

Multipart/form-data not working on axios put request

 

https://stackoverflow.com/questions/51759905/spring-mvc-application-put-request-with-modelattribute-with-multipart-request-f

Spring Mvc application PUT request with @ModelAttribute with multipart request form not binding

https://velog.io/@qudtjs0753/Spring-multipartform-data-%EC%97%85%EB%A1%9C%EB%93%9C-%EA%B4%80%EB%A0%A8

Spring-boot 업로드 기능 구현에 MultipartResolver가 필요할까?

https://bcp0109.tistory.com/309

Spring Request DTO 에 null 값이 들어가는 이유 (Jackson, Lombok)

https://kdev.ing/http-requests-from-client-to-response-from-spring/

클라이언트 HTTP 요청부터 스프링 애플리케이션 응답하기까지의 과정