173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
CredentialsSignin이 존재하지 않다고 뜨는데 next-auth 버전 몇으로 해야하나요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ex1) useMyMoveToPage1.tsx import { useRouter } from "next/router"; export const useMyMoveToPage1 = (path: string) => () => { const router = useRouter(); // error void router.push(path); }; ex2) useMyMoveToPage2.tsx, 강의내용 import { useRouter } from "next/router"; interface IUseMyMoveToPage2Return { onClickMoveToPage: (path: string) => () => void } export const useMyMoveToPage2 = (): IUseMyMoveToPage2Return => { const router = useRouter(); const onClickMoveToPage = (path: string) => () => { void router.push(path); }; return { onClickMoveToPage }; }; ex3) /test/index.tsx import { useMyMoveToPage1 } from "../../src/components/commons/hooks/useMyMoveToPage1"; import { useMyMoveToPage2 } from "../../src/components/commons/hooks/useMyMoveToPage2"; export default function TestPage() { const { onClickMoveToPage } = useMyMoveToPage2(); return ( <> <button onClick={useMyMoveToPage1("/test/01")}> useMyMoveToPage: Move To Test01 Page </button> <button onClick={onClickMoveToPage("/test/01")}> useMyMoveToPage2: Move To Test01 Page </button> </> ); } [useMyMoveToPage1 error 내용] useMoveToPage 만들기를 실습하다가 더 짧게 리팩토링할 수 있을 것 같다는 생각에 맨위에 ex1 처럼 해봤는데 const router = useRouter() 부분에 문제가 있다고 하더라구요. 에러 내용을 번역해서 봐도 "잘못된 hook 호출이고 함수 컴포넌트 내부에서만 호출될 수 있다"라고 하는데 무슨 말인지도 사실 잘 모르겠습니다.. 강의내용처럼 useRouter를 밖에 두고 onClickMoveToPage라는 hof 함수를 따로 만들어 return 해줘야 문제가 없다는 것은 알겠지만 음... 이해가 되지 않아서 더 자세한 원리와 error가 나는 이유에 대해서 알려주시면 감사드리겠습니다. 잘 알려주시는 것에 비해 제 부족한 학습능력이 살짝 부끄럽네요 ㅠㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 2.14 비동기작업처리하기, 5:59 비동기는 프로세스의 병렬 처리를 위해 사용하는 것인데 비동기 함수를 await 키워드를 통해서 값이 반환되기를 기다렸다가 사용하면 동기 와 다른 점이 뭔지 궁금합니다. 어떤 경우에 await가 비동기 함수를 사용하면서 중요한 역할을 담당하는지도 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의 잘 보고 있습니다. msw 2버젼때문에 type window를 먼저 체킹하시라고 하셨는데요. MSWComponent 는 최초 "use client"를 선언하였고, 또 useEffect 안에서 실행했기 때문에 브라우져에서 실행되는 로직으로 보장된걸로 이해하고 있는데요, 그렇다 보니 해당 코드가 불필요하지 않을까 싶어서요. 제가 못찾았을수도 있는데 msw측에서 useEffect 안에서도 필요하다고 한걸까요? [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요.. 우분투에서 git pull 하고 build가 메모리문제로 되지 않아서, 직접 로컬 fornt에서 build 한 뒤, build 폴더를 scp로 우분투 front 폴더로 보내줬는데요.. 필요한 몇가지도 같이 보내주어서 아래와 같이 있습니다. 1. 여기서 바로 sudo npx pm2 start npm -- start를 하는게 맞나요? CORS 문제도 back과 front 둘다 해결했습니다. back과 front 둘다 pm2로 실행하였고, 성공한거 같은데.. 페이지가 열리지가 않습니다 ㅠㅠ monit으로 확인해보니.. 2. build폴더 안에서 index.html을 찾지 않고,, fornt/pubilc에서 index.html을 찾는데요.. 왜 그럴까요? 3. pubilc 폴더도 같이 우분투 서버에 보내줘야하나요? react와 ts로 작업하였고.. scp도 처음 해보는거라 너무 버벅거립니다 ㅠㅠ 아래는 제 깃허브 주소 첨부하였습니다.. https://github.com/nuring9/sns-nora-react
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
조금 포괄적인 질문인데 어텋게 하면 state 구조를 잘 짤수 있을까요? 라이브러리 문법이나 그런 건 쓰다보면 익숙해지는 부분이 있어서 크게 어렵게 느껴지지는 않는데 이 강의에서 reducer을 user reducer랑 post reducer로 나누는 부분처럼 state 구조 짜는 것은 스스로 생각하기 쉽지 않은 것 같아요. 예전에 자바 살짝 공부 했을 때 배웠던 객체지향적인 부분도 있는 것 같고 좀 혼란스럽네요
미해결
[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
32 32 에서는 보다 작은 이미지들이 검출되고 4 * 4에는 보다 큰 이미지들이 검출된다고 말씀하셨는데. FC layer은 사이즈 마다 실행되는건가요? 예를들어 32 32에서는 사람이 검색되고 4 4에서는 자동차가 검출되었다고 했을 때 32 32에서도 FClayer가 수행이되고 4 4에서도 FClayer가 수행되서 결과로는 자동차 & 사람 모두가 검출되는 원리 인건가요?
미해결
프로그래밍 시작하기 : 도전! 45가지 파이썬 기초 문법 실습 (Inflearn Original)
in_str = "../source/22-1.txt" with open(in_str, 'r') as file: txt = file.read() txt = txt.replace(","," ") txt_list = txt.split() print(txt_list) print(len(txt_list)) 영상속에서는 split()을 기본값으로 설정을 안하고 split(" ") 으로 해서 which\npermits 을 한단어로 인식해 정답이 72로 나오는데 기본값으로 하면 73으로 나옵니다 저거는 왜 인식이 안되서 72가 정답이되는거죠? 정규표현식으로 했을때도 저 단어만 인식을 못하고있습니다
해결됨
Next + React Query로 SNS 서비스 만들기
먼저 강의와 상관없는 질문 죄송합니다. Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다. 이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다. getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다. 서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다. 로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데, 서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다. 모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다. 이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
프론트에는 해쉬태그가 표현되나 백에서는 Hashtags 테이블에 기록되지 않습니다 에러 메시지 확인해 본 결과 Hashtag.name 칼럼이 없다고 오류가 발생되는데 https://www.inflearn.com/questions/18298/sequelizedatabaseerror-unknown-column-x27-name-x27-in-x27-field-list-x27?commentId=44343#44343 여기 질문과 유사하여 서버 끊고 워크벤치에서 drop table을 진행하였으나 계속 같은 오류가 발생되고 있습니다 네트워크 오류 메시지 백 오류 메시지 워크벤츠 해쉬태그 테이블
미해결
Next + React Query로 SNS 서비스 만들기
[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost 백엔드를 로컬에서 돌리고 Next를 build 후 npm start 로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다. 신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1. AUTH_TRUST_HOST=http://localhost:3000 .env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071 방법 2. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ... src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113
해결됨
Next + React Query로 SNS 서비스 만들기
Next 프로젝트는 클라이언트에서도 동작하고 서버에서도 동작한다. 그래서 MSW가 클라이언트, 서버에서 동작해야한다. 그러나 아직 서버에서 MSX를 실행하는 방식이 아직 나오지 않았다. 그래서 우리는 임시로 노드 서버를 사용한다. browser.ts - 클라이언트에서 API 요청 모킹 처리해주는 파일 -> 클라이언트 컴포넌트에서 API 요청 시 처리? http.ts - 서버에서 API 요청 모킹 처리해주는 파일 (노드 서버 사용) -> 서버 컴포넌트에서 API 요청시 처리? handlers.ts - 실제 API 모킹 코드
미해결
Next + React Query로 SNS 서비스 만들기
className 자동완성으로 중괄호 { }로 설정하려면 어떻게 해야하나요? 설정에서 ', "으로 변경하는 건 찾았는데 중괄호는 못찾아서 질문남깁니다!
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 리프레쉬 토큰을 사용하여 useAuth에 적용을 했는데요. 로그인을 하여 리프레쉬 토큰이 발급 되어도 조건에 만족하지 못하고 있습니다. 확인해보니 restoreAccessToken을 가져오지 못하여 발생하는 이벤트 였습니다. 하지만 새로고침을 하면 리프레시 토큰을 찾아서 인증이 됩니다. 무슨 이유 때문인지 잘 모르겠습니다. 리프레시 토큰 코드도 첨부하도록 하겠습니다. 추가적으로 로그인 인증시 getAccessToken을 직접 불러오면 문제가 없지만 리코일로더블로 이용하면 이런 문제가 생깁니다.!!
미해결
Next + React Query로 SNS 서비스 만들기
signOut({ redirect: false }).then(() => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/logout`, { method: "post", credentials: "include", }); router.refresh(); router.replace("/"); }); 로그아웃 버튼에 `router.refresh()`를 추가하면 로그아웃 버튼을 누르고 다시 로그인했을 때 기존 정보의 캐시가 삭제되고 새로 갱신된다고 하셨는데 저 코드를 추가해도 기존 정보가 계속 남아있는 경우는 어디를 확인해봐야 할까요? 브라우저에서 캐시 지우고 새로고침, 브라우저 창 재시작, 서버 껐다 켜기를 해봤는데도 계속 이전 정보가 남아있습니다..
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
예전 질문글처럼처음부터 다시 설치해봐도 해결이 안되어 질문을 올립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="wrapper"> <div class="main"> <div class="detail"> <div class="detail1">회원가입을 위해<br> 정보를 입력해주세요</div> <div class="detail2"> <input type="text" class="box" placeholder="* 이메일"> </div> <div class="detail3"> <input type="text" class="box" placeholder="* 이름"> </div> <div class="detail4"> <input type="password" class="box" placeholder="* 비밀번호"> </div> <div class="detail5"> <input type="password" class="box" placeholder="* 비밀번호 확인"> </div> <div class="gender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <div class="checkbox"> <input type="checkbox">이용약관 개인정보 수집 및, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="line"></div> <div class="join"> <button>가입하기</button> </div> </div> </div> </div> </div> </body> </html> * { box-sizing: border-box; margin: 0px; } html,body { width: 100%; height: 100%; } .wrapper { width: 1920px; height: 1080px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .main { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; display: flex; flex-direction: row; align-items: center; justify-content: center; box-shadow: 7px 7px 39px 0px #0068FF40; } .detail { width: 470px; height: 818px; display: flex; flex-direction: column; align-items: center; } .detail1 { width: 466px; height: 94px; font: 700; font-size: 32px; color: #0068FF; } .detail2 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #0068FF; } .detail3 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; } .detail4 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; } .detail5 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; margin-bottom: 20px; } .box { border: none; padding-top: 30px; } .gender { width: 140px; height: 23.94px; border: none; display: flex; flex-direction: row; justify-content: space-between; margin: 20px; } .checkbox { width: 454px; height: 21.06px; display: flex; flex-direction: row; justify-content: center;; font-size: 15px; margin: 30px; } .line { width: 470px; height: 1px; color: #E6E6E6; border: 1px solid #E6E6E6; margin: 20px; } .join { width: 470px; height: 75px; border: 1px solid #0068FF; border-radius: 10px; display: flex; justify-content: center; margin: 20px; } button { border: none; background-color: white; color: #0068FF; } 생긴건 비슷하게 만들었는데 가입하기가 안 눌리는 것 같아요ㅠㅠ 이메일,이름 등 인풋도 밑줄에 맞게 써지지도 않습니다 ㅠㅠ
해결됨
코딩테스트 [ ALL IN ONE ]
구글폼으로 작성하였습니다.
미해결
Next + React Query로 SNS 서비스 만들기
현재 상태는 201로 불러와도 redirect가 되지 않습니다. console.log()로 찍어보니 await signIn 이후로는 console.log()가 찍히지가 않았습니다. axios로 바꿔봐도 그대로이고 버전도 @auth/core 버전도 바꿔보았는데 꿈쩍 않습니다 ㅠ 물론 DB에도 정상적으로 데이터가 저장되고요.. 시간만 날리다가 도저히 안되겠기에 질문 남깁니다.. signup.ts "use server"; import { signIn } from "@/auth"; import { redirect } from "next/navigation"; // import axios from "axios"; export default async (prevState: any,formData: FormData) => { // 입력값이 없거나 || 빈칸이 존재하지않을때 if (!formData.get("id") || !(formData.get("id") as string)?.trim()) { return { message: "no_id" }; } if (!formData.get("name") || !(formData.get("name") as string)?.trim()) { return { message: "no_name" }; } if (!formData.get("password") || !(formData.get("password") as string)?.trim()) { return { message: "no_password" }; } if (!formData.get("image")) { return { message: "no_image" }; } formData.set("nickname", formData.get("name") as string); let shouldRedirect = false; try { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,{ method : 'post', body: formData, credentials: "include", // 쿠기 전달 가능캐 함 }); console.log("회원가입상태 : ",response.status); // 회원가입시 이미 가입되어있을때 if (response.status === 403) { return { message: "user_exists" }; } shouldRedirect = true; await signIn("credentials", { username: formData.get('id'), password: formData.get('password'), redirect: false, }) } catch (err) { console.error(err); return {message : null}; } console.log("11") if (shouldRedirect) { console.log("리다이랙트"); redirect("/home"); } return { message: null}; };
미해결
Next + React Query로 SNS 서비스 만들기
https://github.com/nextauthjs/next-auth/discussions/10399#discussion-6417675 next-auth 쪽에도 help 쪽에 질의를 해놨는데요, 원래 이슈로 쓰려했는데 reproduce url을 요구하더라구요 ㅠㅠ 현재 auth는 이슈가 적다고 하신 라이브러리를 쓰고있어요 "@auth/core": "^0.27.0", "next": "14.0.4", "next-auth": "^5.0.0-beta.11", 를 사용중이고요, custom login 페이지를 두었는데 credentials 정보는 잘 넘어와서 login api 도 잘 타는데 그 내용을 토대로 클라이언트에서 useSession으로 유저 정보를 확인하려해도 name 만 정상적으로 리턴이되네요.. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import { NextResponse } from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/login", }, providers: [ CredentialsProvider({ async authorize(credentials) { console.log( "credentials info: " + credentials.email + " " + credentials.password ); const params = new URLSearchParams( `empNo=${credentials.email}&empPassword=${credentials.password}` ); console.log(params); const authResponse = await fetch( `http://?????:9080/api/getempinfo`, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: params, } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); console.log("user", user); // user.retData[0] inside informations are all string. // { // user_id: '*******', // user_name: 'jinyoung', // sert_num: '*********', // user_rgst_patr_code: '001', // rdp_code: '000' // } console.log("user.retdata.user_id =", user.retData[0].user_id); console.log( "user.retdata.user_name=", user.retData[0].user_name ); const id = user.retData[0].user_id; return { // mapping info // id?: string // name?: string | null // email?: string | null // image?: string | null id: id, name: user.retData[0].user_name, ...user.retData[0], }; }, }), ], // secret: , trustHost: true, }); 아래는 useSession 을 사용하는 클라이언트 컴포넌트에요 "use client"; import React, { useEffect, useState } from "react"; ... // import useSWR from "swr"; import { useSession } from "next-auth/react"; ... const Home = () => { const { data: session, status } = useSession(); console.log("status?"); console.log("status=" + status); console.log("session="); console.log(session?.user); useEffect(() => { if (session) { console.log("session useEffected = "); console.log(session); } }, [session]); 아래는 콘솔 찍어본 내용이에요
