본문 바로가기

전체 글

 (401)
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..
[webpack-cli] Unable load 'C:\FrequentlyUsedFiles\MyProject\workoutFront\webpack.config.ts'[webpack-cli] Unable to use specified module loaders for ".ts". [webpack-cli] Unable load 'C:\FrequentlyUsedFiles\MyProject\workoutFront\webpack.config.ts'[webpack-cli] Unable to use specified module loaders for ".ts". webpack이 webpack.config.js를 인식하지 못할때 생기는 애러!!! webpack은 기본적으로 TS(타입스크립트)를 인식하지 못함 tsconfig.json 에 다음 설정을 추가하여 인식하게 해야한다.
Critical dependency: the request of a dependency is an expression "문제 해결의 순서는 항상 에러를 예의주시하는 것에서 시작하지만 예외가 너무 범용적인 예외로 뜨거나 당체 무슨 뜻인지 알수 없는 애러인 경우의 해결책은 내가 가장 마지막으로 성공적으로 실행한 버전과 비교해 보는 것이다!!!"Critical dependency: the request of a dependency is an expression  라고?? 한국어로 바꾸어 말하면 "심각한 종속성: 종속성 요청이 표현식입니다." 이 에러가 나올당시에 내 코드는 아래와 같았다(실전적으로 말하면 아래 부분의 코드가 문제인 것인지도 인지 하지 못했지만). 도대체 내 코드의 어떤 부분이 문제인지 알려주지를 제대로 알려주지를 않아 어디가 오류를 내는 코드인지 몰랐던 것이다(적지 않은 경우는 당연히 어디가 문제라고 명확히 ..
메인 화면의 Cannot GET / 에러 결과부터 말하자면 웹팩설정파일인 webpack.config.js와 index.html파일이 같은 디렉토리 아래 있지 않아서 생긴 문제였다. 즉, npx webpack serve라는 명령어를 터미널에 입력하면 webpack.config.js파일부터 찾아서 실행하고 그 다음에 index.html파일을 찾는다. 여기서 index.html을 기본적으로는 webpack.config.js과 같은 디렉토리에서 찾는다. 찾아보고 없으면 에러를 위와 같은 에러를 발생시키는 것이다.(그리고 webpack.config.js 파일에서는 index.html파일이나 index.html에서 언급된 파일을 어느 디렉토리에서 찾을지 마저 설정해 줄수 있는 기능이 있다. webpack공식문서 참고하면 나온다. 물론 검색어는 잘 설정해서..
react_WEBPACK_IMPORTTTED_MODULE_0_.useContext(...) 에러 메인 화면에 나온 에러를 구글링해도 원인을 찾을 수 없었다. 한동안 이것때문에 시간을 보냈다. 그런데 다 필요없고 그냥 504라는 것만 보고 서버측에 문제가 있다는 것을 인지하는 것이 가장 중요하다. 오랜만에 손대는 프로젝트이다 보니 단지 서버의 영향 없이 프론트만 가지고 돌아가는 프로그램으로 오해하고 프론트만 가지고 낑낑 거리다보면 해결될 줄 알았다. 내가 임시로 만들어놓은 8085번 포트의 서버를 켜고 해보니 문제가 그냥 순식간에 해결되었다.

티스토리툴바