글

라벨이 에러인 게시물 표시

error TS2339: Property 'id' does not exist on type 'User'.

-
이미지
  express.js, passport.js, typescript 를 사용해서 로그인 기능을 구현했다. passport local 로그인 동작 순서는 아래와 같다. passport-local -> passport.authenticate -> local strategy -> req.login -> passport.serializeUser -> response 각 순서에서 작업을 수행하고 각 단계에서 callback 함수와 함께 다음 함수에서 필요한 값을 넘겨주게 된다.  error TS2339: Property 'id' does not exist on type 'User'. 해당 에러는 아래 코드에서 발생되었다. passport . serializeUser (( user , done ) => { done ( null , user . id ); }); 아래 코드처럼 req.login으로 user 정보를 넘겨passport.serializeUser에서 해당 유저 정보를 받는데 return req . login ( user , async ( err ) => { if ( err ) { console . error ( err ); return next ( err ); } if ( typeof user === 'object' && user !== null ) { if ( user ) { return res . status ( 200 ). json ({ success : true , message : 'login success' , user : { email : user . email , nickname : u...
댓글 쓰기
Read more »

ts(2322), ts(2339) : typescript에서 useRef 사용할때 발생하는 에러 처리

-
이미지
ts(2322) 에러 Type 'undefined' is not assignable to type 'HTMLInputElement | null'. ts(2322) // 1번 const inputRef = useRef () ; // 2번 const inputRef = useRef ( null ) ; useRef 선언시 null 값을 작성하지 않아서 발생하는 에러이다. 1번을 2번처럼 변경하여 오류를 해결할 수 있다. ts(2339) 에러 Property 'focus' does not exist on type 'never'. ts(2339) const inputRef = useRef < HTMLInputElement > ( null ) ; useRef<해당하는 엘리먼트 객체> 를 작성해주면 해당 오류를 해결할 수 있다.
댓글 쓰기
Read more »

크로스 도메인 CORS 에러 문제 해결(공공 데이터 포털)

-
이미지
프론트단에서 공공데이터 포털에서 제공해주는 OPEN API를 바로 요청해서 사용하려고했는데 해당 오류가 발생했다. API KEY만 삭제한 오류  내용: Access to XMLHttpRequest at 'http://apis.data.go.kr/B552584/EvCharger/getChargerInfo?serviceKey=${API KEY}&numOfRows=5&pageNo=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 자바스크립트의 표준 스펙에는 다른 출처(서버)로의 요청을 허용하지 않는 동일 출처 정책(Same Origin Policy)이 있다. 도메인, 서브도메인, 프로토콜, 포트가 다른 곳에서 요청을 보내는경우 발생한다. 브라우저에서 다른 서버에 요청할 경우 해당 정책이 적용되지만 브라우저를 거치지않고 서버간의 통신에서는 해당 정책이 적용되지 않는다. 사진으로 간단히 그려봤다. 찾아낸 해결방법이 Node.js로 서버 통신을 통해 API 데이터를 받을 수 있다는 것이었다. 다행히도 Node.js를 공부했었어서 데이터를 받아오는데는 쉬웠지만 JSON이 아닌 XML 데이터를 제공해주기 때문에 변환이 필요했다. 이부분은 라이브러리를 사용해서 변환할 수 있었다.
댓글 쓰기
Read more »

[Error] signInWithPopup failed: First argument "authProvider" must be a valid Auth provider.

-
이미지
Material UI와 React를 함께 사용할때 해당 오류가 발생하는 경우가 있다. 문제점을 찾아보니 React의 index.js에 작성되어있는 <React.StrictMode>가 문제였다. 해외 커뮤니티를 찾아봐도 다들 말이 다른데 오류가 해결된 방법은 <React.StrictMode> 를 주석처리 시키는것이었다. 외국인들 말로는 Material UI 자체 문제라고 한다.
댓글 쓰기
Read more »

[MongoDB] Mongoose 연결 에러 ( MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. )

-
Mongoose 로 MongoDB 연결시 에러  MongoDB를 Mongoose를 사용하여 연결해주었다. 원래 잘 작동했었는데 갑자기 에러 메세지를 뿜었다. Example app listening at http://localhost:5000 [0] MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. 찾아보니 mongoDB 연결시에 맨처음에 아이피 주소를 설정해줬었는데  집에서만 맨날 공부하다가 오랜만에 카페에 나왔더니 아이피 주소가 변경되어서 접속이 안된것이었다. mongoDB 사이트에 접속해서 해당 cluster에서 Network Access로 들어가서    ADD IP ADDRESS ADD IP ADDRESS 버튼을 클릭하여 맥의 경우  시스템 환경설정 -> 네트워크 에 접속하여 현재 연결된 Wi-Fi 의 IP 주소를 복사여 추가해준다.
댓글 쓰기
Read more »

Uncaught TypeError: Cannot read property 'addEventListener' of null

-
에러의 원인은 HTML이 모두 로드되기 이전에 JavaScript가 HTML을 참조하기 때문이다. 즉, addEventListener 함수가 참조해야할 태그가 HTML에 아직 생성되기 이전이기 때문에 null 값을 참조하여 에러가 발생하는 것이다. 해결방법은 몇가지가 있다. 해결 방법1. 닫는 태그인 </body> 태그 위에 선언 <head></head> 태그안에서 js파일을 호출하지 않고 HTML 코드가 작성된 맨 아래에 즉, <body></body> 태그에서 닫는 태그인 </body> 태그 위에 선언하는것이다. 이렇게 작성하게되면 HTML 코드가 완전히 로드된 후에 JavaScript 파일이 호출되기 때문에 해당 문제를 해결할 수 있다. 해결 방법2. window.onload = function(){} window.onload = function(){} 함수를 사용하면 웹브라우저의 모든 구성요소들의 로드가 완료되었을 때 브라우저에의해 호출되는 함수로  해당 부분에 코드를 작성하면 HTML의 모든 구성요소들의 로드가 완료된 뒤 해당 함수를 호출한다. 해결 방법3. (추천) <script></script> 태그에 defer 속성 사용하기 <head></head> 태그 내부에 script 태그를 사용하고 src 속성을 이용해서 js파일을 불러온다. 그리고 속성으로 defer 키워드도 함께 작성해준다. < script src = "index.js" defer ></ script > defer은 비동기적으로 스크립트를 불러오는 속성이다. 해결 방법2에서 window.onload와 마찬가지로 HTML의 모든 요소들의 로드가 완료되면 그 후에 해당 js파일을 실행하는것이다. 하지만 위의 해결 방법들과 다른점이 존재하는데 이 속성을 사용하면 비동기적으로 코드가 동작한다는것이다. 프로그램은 코드를 해석할때 왼쪽에서 오른쪽으로...
댓글 쓰기
Read more »

[JavaScript] try/catch/finally + throw (에러 핸들링)

-
이미지
일반적으로 에러가 발생하면 스크립트가 제대로 동작하지 못하게 된다. 이러한 에러를 사람이 완벽하게 예측하여 처리할 수 없기 때문에 try ~ catch 문법을 사용하면 예상치 못한 에러에대하여 대응을 할 수 있다. try ~ catch 문법은 try 와 catch 라는 필수적인 두개의 블록이 존재하며  상황에따라 추가하여 사용할 수 있는 finally 도 존재한다. try { // 수행할 코드 } catch ( error ) { // 에러 핸들링 } try 블럭 내부에 수행할 코드를 작성하고 해당코드가 정상적으로 실행되면 catch 블럭을 건너뛰고 다음 코드를 이어 실행한다. 반면에 try 블럭 내부에 수행할 코드에 에러가 발생하면 try 블럭 내부의 코드 실행이 중단되고 catch 블럭으로 에러에 대한 객체가 인자로 넘어가면서 catch 블럭안에서 에러를 처리할 수 있다. 매개변수 error로 전달되는 에러 객체에는 무슨 문제가 발생했는지에 대한 설명이 담겨있다. 인자로 전달된 error 객체에는 name, message, stack 프로퍼티가 존재한다. 각각의 프로퍼티를 알아보면 error.name : 에러 명칭 error.message : 에러에대한 상세 내용을 담고있는 메세지이다. error.stack : 에러가 발생한 순간의 스택 (디버깅시 사용) try ~ catch 문법은 런타임 환경에서 실행되며 런타임 환경에서 발생하는 Error를 런타임 에러(runtime error) 또는 예외(Exception)라고 부른다. 에러 던지기 throw try ~ catch를 사용하여 예외( Exception )를 잡아낼 수 있지만 에러 종류와 관계없이 동일한 방식으로 에러를 처리해 주기 때문에 디버깅을 어렵게 만든다. 그러므로 추가적인 자세한 정보를 담은 에러를 만들어야 한다, 사용방식은 아래와 같다. throw 'errrorrr' ; // 던지는 것에 타입 제한은 없으나 throw new Error ( 'throw erro...
댓글 쓰기
Read more »

에러코드 읽는법, 의미

-
이미지
사진과 같이 에러코드가 발생하면 영어로나오는 TypeError를 확인하고 맨밑에 3:3이라는 숫자를보면  첫번째 3은 3번째줄 뒤에 3은 띄어쓰기포함 왼쪽으로부터 3번째  단어에 에러가 발생했다는 것이다.  해당부분에 문제가 발생한것이기때문에 해당부분을 확인한다.
댓글 쓰기
Read more »