몬그로이

21일차,22일차, 23일차 본문

Dev입성기

21일차,22일차, 23일차

Mon Groy 2024. 8. 9. 21:54

 

리액트랑 싸운 날

기초 강의 좀 듣고 테스트용을 작성했는데,

VSC 에서 localhost:3000 이 제대로 열리지 않아서

껐다 켜기도 하고 재설치도 하고

하다하다 안 되서 튜터님께 도움을 요청했다

 

겨우겨우 띄웠는데 기존 리액트 메인페이지에 겹쳐서 떠올랐다

Path 설정이 안 되어 그런 것이라 그것만 손보면 제대로 뜰 것이라는 이야기를 들었다

 

본래자리로 돌아와서 보여주니,

깃허브에서 풀 받고 추가로 작업하면 나을 것이라는 조언을 받았고,

그렇게 만들어둔 브랜치로 팀원이 작업한 것을 머지했는데,

그 머지한 파일들이 모두 무시되는 상황이 발생했다

 

검색을해도 도무지 다른 말만 나와서

9시가 넘었음에도 염치불구하고 또 다른 튜터님도움을 요청했다

기꺼이 도와주셔서 해결했다

파일을 열어보면 제대로 들어있었고 경로도 맞는데 

인텔리제이가 제대로 인식을 못해서 생긴 오류로,

.idea 파일을 삭제한 다음 다시 로드(file open) 하니까 제대로 불러왔다

 


@ModelAttribute 와 @RequestPart 로 file(image) 와 Dto 받기

팀원들과 세네시간 정도 고군분투했는데도 해결이 되지 않아서 다음 날 튜터님의 도움을 받기로 했다 


리액트 한다고 강의를 듣다듣다 벼락치기로는 원하는 페이지를 만들어내기는 무리여서

AI에게 기대기로 했다

그래도 필요한 메서드들을 찾아서

이걸 적용해서 해달라는 식으로 하니 생각보다 잘 나온 것 같다

 


백 API 를 통해 데이터를 받아와서 웹페이지에 표현하는 부분이 정말 많이 힘들었다

 

디폴트 이미지 설정하는 메서드를 구현한 다음

그 이미지가 잘 들어가있는지 불러내서 확인하고 싶었는데

그렇게 하려면 앞서 말한 데이터 받아와 띄우기 능력이 필요했다

기능구현은 진작에 끝났는데 아무리 해도 안되서 그냥 기능만 구현해놓고 다음에 확인하자 마음먹었다

 

USER, ENTERTAINMENT, ARTIST, ADMIN, ARTISTGROUP

모두의 프로필/로고 사진에 등록했고

이렇게 하고나니 정보를 수정이나 삭제를 할 때도 이미지URL 관리를 해야했다

메서드를 추가작성하고 테스트를 끝냈고,

다시 데이터 불러와서 적용하기를 시도했다

 

그런데 마침 오늘 프론트 튜터님이 오신다고 하셔서 찾아가 도움을 받았다

정말 많이 초보라도 괜찮으시냐 여쭈니 괜찮다고 하시며 봐주셨다

상황 설명을 했고,

보시자마자 코드를 수정해 주셨는데

500 에러가 떴고

백엔드쪽 문제이니 해결하고 오라고 하셨다

 

에러 메세지를 구글링해보니 인코딩이 어떻고 저떻고 하고 나왔다

팀원에게 도움을 구하니 AccessToken 선언한 것에 Bearer 가 포함되어 있는데

또 선언하고 있어서 그렇다는 걸 빠르게 찾아주었고,

다시 질문을 하러 갈 수 있었다

 

기다리면서 새로고침 해봤는데, 계속 변화가 없었다

그러다가 로그아웃하고 다시 로그인을 하니

원하던대로 사진, 닉네임, 이메일이 적혀있는 것이 아닌가!

한결 나아보이는 마이페이지가 되어있었다

그리고, 디폴트 이미지도 잘 들어가 있는 모습을 눈으로 확인할 수 있어 좋았다


프론트라는것이 선언변수(?)에 따라서 디자인이 서로 영향을 받는 것 같다

분명히 개인 소개(?) 부분이 제대로 상자모양이었는데

언젠가 풀을 받고나니

맨 위에 메인페이지로 가거나 검색어를 입력할 수 있는 부분

헤더라고 하던가? 그 부분에 상자가 가려졌다

나중엔 고쳐져 있겠지..??


요즘 나도, 팀원들도 너나할 것 없이 모두 아프다

 

열도 나고, 감기도 걸리고.. 나도 원인 모를 복통때문에 이틀을 앓았다

모두 잠도 제대로 못 자서 신경도 곤두섰을법한데,

차분히 열심히 하려고 하는 모습이 정말 대단하다고 여겨졌다

 

존경합니다 여러분


 

https://velog.io/@jinny-l/spring-s3-async-image-upload

 

[Spring + S3] 비동기로 이미지 업로드 속도 개선

💬 들어가며 이전에 중고 거래 플랫폼 프로젝트를 하면서 동기로 처리하고 있던 이미지 업로드 속도를 개선하기 위해 비동기로 개선했던 적이 있는데, 취준하느라 미루었던 기록을 이제 작성

velog.io

https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html#an-interactive-component

 

Tutorial: Tic-Tac-Toe – React

The library for web and native user interfaces

react.dev

https://react-bootstrap.github.io/docs/components/figures

 

Figures | React Bootstrap

Documentation and examples for displaying related images and text with the figure component in Bootstrap.

react-bootstrap.netlify.app

https://velog.io/@jejupalette/%EC%A7%9C%EC%9E%98%ED%95%9C-reactreact-Router

 

[짜잘한 react] react-Router를 index.js, app.js에 구현 할 때

1\. index.js 에서는 App으로 BrouserRouter만 선언해주기2\. App.js 에서 Router들 선언해주기

velog.io

 

https://jindevelopetravel0919.tistory.com/18

 

[에러] Illegal base64url character: ' '

[Reason] - 토큰 정보를 해제하여 그 속에 들어있는 유저의 정보를 가져오려고 하는 와중에 발생한 에러이다. Authorization 이라는 헤더명을 가진 request의 Access토큰값을 tokenprovider의 validateToken 메소드

jindevelopetravel0919.tistory.com

 

'Dev입성기' 카테고리의 다른 글

멘탈이 온전하지 않은 날, 위안 삼는 중  (0) 2024.08.14
24일차  (0) 2024.08.12
19일차(중간발표날)  (0) 2024.08.06
팀프로젝트 17일차, 18일차  (1) 2024.08.05
15일차  (0) 2024.08.02