본문 바로가기

전체 글

 (380)
@Controller와 @RestController 어노테이션 출처: https://velog.io/@dyunge_100/Spring-Controller%EC%99%80-RestController%EC%9D%98-%EC%B0%A8%EC%9D%B4 @Controller와 @RestController 둘 다 Spring에서 Controller를 지정해주기 위한 어노테이션이다. 전통적인 Spring MVC의 Controller인 @Controller와 RESTful 웹 서비스의 Controller인 @RestController의 주요한 차이점은 Response Body가 생성되는 방식이다.@RestController 어노테이션은 말 그대로 @Controller와 @ResponseBody가 합쳐진 어노테이션이라고 생각하면 된다. @Controller와 다르게 반환하려는 주..
타입스크립에서의 props 타입스크립트를 쓰지 않으면 propTypes라는 패키지를 다운 받아서  Menu.propTypes ={ }  형식으로 해주면 되지만 타입스크립트에서는 그냥 propTypes다운 받을 필요없이 interface Props{ } 를 쓰면됨.  기본적으로 propTypes는 타입을 확인하여 오류를 줄여주기 위해 사용한다. 즉, PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다.관련글: https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95 ..
서버로 부터 Validation failed에러를 받았다(front와 Back단 연결시 매우중요!!!). 이 문제를 해결하면서 정말 많이 배웠다. JPA의 구현체인 Hibernate는 카멜로 선언된건 알아서 스네이크명명으로된 컬럼 매핑해 주어 위와 같은 오류가 발생할 수 있으므로 테이블 컬럼을 기본적으로 스네이크로 사용하는게 정신건강상 이롭다는 것!! 그리고 원래 문제에 대한 해결책은 아래와 같다.
전역변수 관리하는 프론트엔드 쪽의 라이브러리 사용시 주의점!!!!! 이것때문에 정말 몇시간을 그냥 날렸다... 나는 지금 ZustAnd라이브러리를 사용하고 있는데, 당연히 프론트 엔드쪽의 변수를 관리하는 것이므로 프론트 엔드파일안에 있는, 전역적으로 관리하는 변수의 이름에만 신경을 썼었다.... 하지만 이렇게 하면 안된다. 벡단에서 넘어오는 변수를 프론트쪽에서 관리하는 것이므로 그 전역변수의 이름은 벡단에서 사용하던 이름이 그대로 전달되는 것이다. 그래서 벡단과 다른 이름이지만 의미는 같은 그 변수명을 사용하면 당연히 에러가 나지 않지만 해당값이 없다고 읽히는 것이다...  그 이유는 바로바로...  따라서!!! 즉!! 해결책은 백단의 DTO객체의 맴버변수 이름과 프론트에서 전역적으로 관리하는 변수의 이름을 같게 해주어야 한다!!!
Bearer토근과 JWT혼동 정리 참고: https://overcome-the-limits.tistory.com/741요약: 일반적으로 토큰은 요청 헤더의 Authorization 필드에 담아 보내짐. Bearer는 에 해당함. 토큰에는 많은 종류가 있고 서버는 다양한 종류의 토큰을 처리하기 위해 전송받은 type에 따라 토큰을 다르게 처리함.Bearer타입에는 JWT, OAuth가 존재함.  ex)' Bearer 토큰으로 JWT를 사용합니다' 라고 표현함
[CSS] 단위 관련 관련영상: https://www.youtube.com/watch?v=SmzghM3l228  % 란, 전체의 몇 퍼센트인지에 대한 값입니다. 부모 기준으로 자식의 넓이를 %라고 한다.예를 들어, 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 된다. em과 rem이란? em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위(em은 element의 약자)이다. 예를 들어, 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이다.1.5em = 24px(16*1.5) 이다. 추가로, rem 이란 em 앞에 R이 붙는다. 이것은 Root의 약자로, 최상위라는 뜻이다. 그래서 그냥 가장 상위인 html 태그에 ..
Target container is not a DOM element. 오류의 LIFO구조에 익숙해야 한다. 오류만 놓고 보면 정확히 " 대상 컨테이너가 DOM 요소가 아닙니다. " 라는 말이다. 대상이라니 이 무슨 얼토당토 않은 말인가? 대상이라고 하면 내가 지정해준 무언가이다. 그래서 오류코드로 보았을때 명확히 첫번째 줄에 나오지 않는것이다. 스텍 구조에 익숙하다고 생각되는 나는 오류의 첫번째 줄이   hyojinfront/./node_modules/react-dom/cjs/react-dom.development.js:26086:13 와 같이 얼토당토 않은 말이니 당연히 당황한다. 이때 오류의 LIFO사고에 익숙하다면 바로 다음의 에러를 봐야 한다.   hyojinfront/./client.tsx:14:50 client.tsx에 문제가 있는 것이다.이 코드에서 대상이 될..
File was processed with these loaders: * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.jsYou may need an additional loader to handle the result of these loaders. 파일이 다음 로더로 처리되었습니다. * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js이러한 로더의 결과를 처리하려면 추가 로더가 필요할 수 있습니다.  에러에는 아래와 같은 친절하게 BrowserRouter이 어떤 역할을 하는지 설명하지 않는다.즉 경로에 따른 라우팅, 렌더링, 로딩해주는 것이 BrowserRouter의 역할은 것이다. 근데 에러메시지를 보면 로딩하는데 로더가 추가로 필요할 수 있다는 것이다. 즉, @pmmmwh 로더만으로는 부족할 수 있다는 것!!!해결: 기존에 문제가 있던 client.jsx파일의 확장자를 tsx로 바꾸어 주었고 관련라이브러리를 추가해 주었다(import { render } from 'react..

티스토리툴바