본문 바로가기
  • 삽질하는 자의 블로그
2. Next.js 와 next-auth 의 실행 순서에 관하여 단순한 코드가 있다. next-auth 의 useSession 을 사용하여, 로그인한 유저의 데이터값을 가져오고 데이터값을 활용하여 fetch 를 하는 코드이다. const MyTestResults = (props: { userId: string | null | undefined }) => { const { userId } = props;// 페이지에서 useSession 을 통해, 로그인한 유저의 아이디를 넘겨받는다. const [userResultData, setUserResultData] = useState(); useEffect(() => { (async () => { const userData = await fetch("/api/get-user-test-data", { method: "POST".. 2023. 2. 6.
1. Google OAuth 액세스 차단됨 : 승인 오류 내용 The OAuth client was not found. 이 앱의 개발자인 경우 오류 세부정보를 참고하세요. 401 오류: invalid_client 원인 Google OAuth 페이지에서 CliendId, Client Secret 이 허용되지 않았다. 해결 1. https://console.cloud.google.com/projectselector2/apis/dashboard?hl=ko&supportedpurview=project (구글 디벨로퍼 API 서비스) 에 접속하여, API 를 만들고, 사용자 인증정보를 발급받고 사용해야한다. 2. 자신의 환경변수가 들어있는 파일에, GOOGLE_CLIENT_ID 와 GOOGLE_CLIENT_SECRET 이 올바른지 확인한다. 3. auth 의 Provi.. 2023. 2. 4.
1. ReferenceError: window is not defined 페이지 안에 window 객체를 참조할 수 없다고 한다. const DogsPage = () => { const testResult = window.localStorage.getItem("test-result"); if (testResult === null || testResult === "undefined") { router.replace("/"); } Next.js 는 getServerSideProps 를 사용하지 않더라도, 기본적으로 SSR을 사용하여 통해 pre-render 하는 기본적인 동작방식을 가지고 있다. Next.js 를 pre-render 할때, HTML 을 생성한 다음, 클라이언트로 보낸다. 이때 사용자가 페이지를 방문하면 HTML 을 로드한 다음 수화(페이지가 상호작용 할 수 있도록.. 2023. 2. 4.
1. clone 하고 npm i 했는데 오류가 막 뜬다. https://community.progress.com/s/article/Issue-while-running-npm-install-on-AdminApp-extensions Issue while running "npm install" on AdminApp extensions - Progress Community community.progress.com [오류] C:\Users\audtl\OneDrive\CodingTest\Anti\anti-frontend-newbie>npm i -f npm WARN using --force Recommended protections disabled. npm WARN ERESOLVE overriding peer dependency npm WARN While resolving.. 2023. 1. 16.
1. dispatch 가 작동하지 않는다면, 혹시 State 를 reducer 함수에 직접 썼는지 확인한다. 리덕스의 reducer 함수 안에서, State 에 바로 접근 하는 것은 불가능하다. const ChoosPartsSlice = createSlice({ name: "choose-part", initialState, reducers: { ChestDescription(state) { state = {...initialState} // state 에 바로접근하면 Porxy 가 나올 뿐이다. }, BackDescription(state) { state = {...initialState} // state 에 바로접근하면 Porxy 가 나올 뿐이다. }, }, }); export const ChooseActions = ChoosPartsSlice.actions; export default ChoosPartsSl.. 2022. 12. 28.
1. trim(), includes() 등을 사용 할 때 오류 [TypeError: trim is not a function in JavaScript] TypeError: trim is not a function in JavaScript 와 대체 이게 무슨말이냐. 오류 내용은 저렇지만 실상은 아니다. trim() 을 사용했는데, 혹은 다른 함수를 사용했는데 저렇게 나온다면, 혹시 "타입" 이 무엇인지 의심해보아야한다. 원인 trim() 을 사용하는, Value 의 Type 이 String인지 판단이 서지 않고, 명시되어 있지 않은 경우 예시 function BasicFormRefac() { const [error, setError] = useState(false); const inputTextResult = useInput((inputText) => inputText.trim() === ""); const inputEmailResult = useInpu.. 2022. 12. 20.
[배포 오류] 내 최악의 오류 40시간을 날려버린 [배포 오류]Error: Error connecting to db: connect ECONNREFUSED 127.0.0.1:27017 0. 들어가기에 앞서 사용한 DB : MongoDB 사용한 DB Hosting : Atlas MongoDB 사용한 Hosting Provider : HEROKU 사용한 API : Stripe API (결제용) 오류의 원인코드 : connect-mongodb-session 패키지 1. 오류처리 실패원인 [몰랐던 사실] 오류코드는 아래부터 위로 읽는것이다. 헤로쿠는 그저 박스일뿐, 실행은 헤로쿠 안의 '코드'가 하는것이다. 127.0.0.1 은 LoopBack IP이다. IP주소가 아니다. 환경변수는 헤로쿠 안의 코드가 실행될때, 헤로쿠가 변수 안으로 넣어주는 용도로 쓰이는 변수이다. 기본적으로 PORT는 넣어주지만, 나머지 환경변수는 직접지정해야 넣어진다. MONGODB ATLAS는 그저 새로운 DB일 뿐.. 2022. 10. 11.
STRIPE API, 왜! 대체 왜! redirect가 이상한 곳으로 먹히나? [고치긴 했는데 답 없음 주의] 어제 stripe api 를 사용하다가, 한시간을 날려보았다. 왜? URL 주소로 접속을 했고, 라우트도 올바르게 설정했고, 컨트롤러도 잘 설정했는데? 결제 성공을 하면 나와야 하는 페이지가 나오지 않고 그~냥 딴페이지가 나와버린다!!!!!! 이렇게 연결해두면? 성공페이지 대신에 뭔 이상한, CLIENT ORDER 페이지가 나온다. 내가 만들어놓은 ORDER PAGE가!! 나는 그것을 RENDER한적 없다고 이놈아... 정말로 한참을 고민하고, 한참을 찾다가, 잠깐 머리를 비우고, 그냥 URL을 바꾸어보았다. 잘된다. 왜? 모른다. 일단 해결됐다. 하... 왜... 2022. 10. 6.
[Failed to load resource: the server responded with a status of 400 (Bad Request)] ajax request 400error! 총체적 난국이었다. 무엇보다 너무나 많은 조건으로 인해 400 error가 나와서, 정말로 답이 없었다. ajax 요청에 400error는 1. 대부분 [URL 주소의 오류로 많이 발생한다.] 2. 나머지는 [DATA를 안보냈거나, 잘못보냈거나] 너무 급하게 코딩을 한 것도 화근이었고, 갑자기 신기하게 팽팽 돌아가는 머리가 이상했었다.. 으윽 우선 코드를 보자면 1. VIEW 2. JAVASCRIPT , ROUTE 3. CONTROLLER 결과는? Failed to load resource: the server responded with a status of 400 (Bad Request) 하나하나 총체적 난국인 나를 짚어보자 1. VIEW, 띄어쓰기의 왕자 나의 결과 저 %20 이 대체 무엇이냐? 바로.. 2022. 10. 3.
PromiseResult값 가져오기!! 왜 내게 찍히는 건 Object Promise의 PromiseResult뿐인가! 들어가기에 앞서, 정답은 promise는 CallBack 함수라는것 이다. 즉, retrun 하려면 .then이나, await 를 사용해야한다는것 javascript로 Cart안에 담긴 개수를 동적으로 담기 위하여! 하던대로 했다. javascript에서 ajax 요청 보내고, middleware로 만든 locals 함수를 사용하여, 전역으로 보내서~ route에서 를 거쳐~ 서버(constroller) 에서 반환해서~ javascript에서 받아서~ span을 타겟해서~ 집어넣었다! 결과는 띠용! Object Promise만 나온다! PromiseReuslt 가 밖으로 빼내지지 않아! 자, 다시말하지만 정답은 promise는 CallBack 함수라는것 이다. 서버에서 로컬로 보내는것 까지 좋으나, 받을.. 2022. 9. 29.
[... is not iterable] find() 에서 잘못 가져올 때의 오류 별건 없는데 두번째 실수해서 적어본다. ... is not iterable 는 무언가가 배열이 아닌 값임을 말해주는 것이다. 즉, 나는 분명 배열로 뽑았는데, 배열이 아니다? 아, 안뽑혔거나, 뽑던 도중 오류가 발생했다는 말과 다름없다. async function(){ await ... } 에서, 대부분의 db CRUD 동작들은 promise 를 자동반환하여, 굳이! retrun을 안해도 외부에서 값에 담긴다. 하지만, static을 써서 그런지, 초기화 되지 않은 사용자함수를 사용할 때에는 (new를 쓰지 않는), 값이 promise를 반환하지 않아서, 반드시 return으로 값을 반환해야한다. 2022. 9. 27.
하루 종일 오류랑 싸웠다. 물론 반은 내 눈썰미가... 오늘은 오류를 고치느라 3시간을 썼다. 하핫 그랬다. 앞으로 매일매일이 이렇게 될것이다! 분명하다! 으하핫... 아무튼 첫번째 커다란 오류는... 얼토당토 없이도, MODEL에 적은 파라미터를 잘못 적어서.... 파일 업로드를 위해 multer를 사용하여, 파일 정보를 받아오고, 저장위치를 잡았다. VIEW 에서 FORM 형식으로 데이터를 받아오고 (쿼리로 csrf 토큰도 추가하고!) 모든 파일정보를 받아오기 위해, enctype = "multipart/form-data" 를 사용하였다. 라우트에, multer 미들웨어를 추가하여, 받아온 파일데이터와 저장위치를 서버로 보낼 수 있었다. 서버에서 사용한 model, Contorller productData에는 req.body들이 들어갈 예정이었다. 와, .. 2022. 9. 23.

티스토리툴바