묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
vscode에서 sqlite오류가 발생합니다(sqlite could not register service,,)
열려있는 VSCode창은 이것 뿐입니다. 어떻게 해결해야 할까요..
-
미해결처음 만난 리액트(React)
챕터0 3강의 Postfix/Prefix 관련 질문입니다.
여기 1-5번까지 출력결과가 a=1이고 b=a++니까 1이 더해져서 1, 2라고 생각했는데 왜 2, 1인건지 이해가 잘 안갑니다!
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
TMDB 사이트 API 가져오기
https://ji-gwang.tistory.com/54참고하기
-
해결됨Next + React Query로 SNS 서비스 만들기
개인 팀프로젝트 중에 NextJS + react-query 관련 궁금증입니다.
먼저 강의와 상관없는 질문 죄송합니다.Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다.이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다.getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다.서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다.로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데,서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다.모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다.이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
Error: Unknown column Hashtag.name in where clause
프론트에는 해쉬태그가 표현되나 백에서는 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 서비스 만들기
[질문X] 로컬에서 build 후 npm start 에러
[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 서비스 만들기
mocks 폴더 파일 별 내용 정리 혹시 제대로 이해한건가요?ㅜ
Next 프로젝트는 클라이언트에서도 동작하고 서버에서도 동작한다. 그래서 MSW가 클라이언트, 서버에서 동작해야한다.그러나 아직 서버에서 MSX를 실행하는 방식이 아직 나오지 않았다. 그래서 우리는 임시로 노드 서버를 사용한다.browser.ts - 클라이언트에서 API 요청 모킹 처리해주는 파일 -> 클라이언트 컴포넌트에서 API 요청 시 처리?http.ts - 서버에서 API 요청 모킹 처리해주는 파일 (노드 서버 사용) -> 서버 컴포넌트에서 API 요청시 처리?handlers.ts - 실제 API 모킹 코드
-
미해결코드로 배우는 React with 스프링부트 API서버
소셜로그인시 이메일 중복 관련 처리 문의
소셜로그인 강의까지 봤는데요,강의에 있는 프로세스는소셜로그인시 이메일을 가져와서 DB에 저장이 되어있지 않으면 카카오이메일로 회원가입을 시키고, DB에 저장이 되어있으면 비밀번호 없이 해당 계정으로 로그인이 되게끔 만드는 프로세스로 이해 했습니다.그런데, 기존에 회원가입을 하지 않은 사람이 소셜로그인을 할 때 이미 기존에 가입되어 있는 이메일이 있다면 다른사람 계정을 비밀번호 없이 로그인 할 수 있게되는게 지금 구현한 상황에서는 맞는거죠? ex) 기존에 회원가입한 'A' 의 이메일이 test@AAA.com 일 때신규 유입된 사람 'B'의 카카오계정 이메일이 test@AAA.com 인 경우 위와 같은 경우를 방지하려면 소셜로그인시(최초로그인) 회원가입을 시킬 때 이메일 중복체크를 하고 중복되어있다면 다른 이메일 사용을 권유 해야되는식으로 처리를 해야 하는건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
className 자동완성 질문
className 자동완성으로 중괄호 { }로 설정하려면 어떻게 해야하나요?설정에서 ', "으로 변경하는 건 찾았는데 중괄호는 못찾아서 질문남깁니다!
-
미해결너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어
onAuthStateChanged 가 가지는 장점에 대해
기존의 렌더링 -> 통신 순으로 진행되던 프로세스를통신 -> 렌더링 순으로 바꿔준다고 하는데그러면 렌더링 -> 통신 -> 변화된 상태 업데이트 였던 것을통신 -> 변화된 상태 업데이트 로 일종의 렌더링 최적화를 시켜준다는 뜻으로 이해해도 될까요?
-
미해결웹 게임을 만들며 배우는 React
React 랜더링이 되지 않습니다.
안녕하세요. 제로초님, 강의 도움이 많이 되고 있습니다.다름이 아니라,webpack-dev-server를 실행을 했을 때, app.js파일은 잘 가져오는데, 화면이 랜더링 되지 않습니다. (아래 사진 참고)크롬 확장 프로그램(React Developer Tools)도 활성화되지 않는 걸 보아 React 코드가 랜더링 되지 않는 거 같습니다.이전 강의처럼 dev server를 쓰지 않고, 웹팩 빌드 후 index.html 에 접근하면 정상적으로 랜더링이 됩니다.제 추측으로는 dev-server로 웹펙 빌드를 할 때의 설정 문제일 거 같은데, 추적이 쉽지 않은데 어떤 부분을 확인하면 좋을지 살펴봐주실 수 있으실까요? ( _ _ )
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
refreshToken useAuth에 적용했을 때 문제점
안녕하세요. 리프레쉬 토큰을 사용하여 useAuth에 적용을 했는데요. 로그인을 하여 리프레쉬 토큰이 발급 되어도 조건에 만족하지 못하고 있습니다.확인해보니 restoreAccessToken을 가져오지 못하여 발생하는 이벤트 였습니다.하지만 새로고침을 하면리프레시 토큰을 찾아서 인증이 됩니다.무슨 이유 때문인지 잘 모르겠습니다.리프레시 토큰 코드도 첨부하도록 하겠습니다.추가적으로 로그인 인증시getAccessToken을 직접 불러오면 문제가 없지만리코일로더블로 이용하면 이런 문제가 생깁니다.!!
-
미해결Next + React Query로 SNS 서비스 만들기
로그아웃 시 router cache 갱신 안됨
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
플러그인이 추천을 안해줍니다
예전 질문글처럼처음부터 다시 설치해봐도 해결이 안되어 질문을 올립니다.
-
미해결코드로 배우는 React with 스프링부트 API서버
Section 8 소셜 로그인 API 서버 인코딩 관련 문의드립니다.
위 코드는 수업중 진행하신 MemberServiceImpl.java 파일의 getEmailFromKakaoAccessToken 메소드의 일부입니다. 저기에서 마지막에 bodyMap 을 로그로 확인하는 부분이 있는데 위와 같이 nickname 을 보면 인코딩이 깨져서 나옵니다.저 nickname 을 확인하려면 어떻게 해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프리캠프 회원가입
<!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; }생긴건 비슷하게 만들었는데 가입하기가 안 눌리는 것 같아요ㅠㅠ 이메일,이름 등 인풋도 밑줄에 맞게 써지지도 않습니다 ㅠㅠ
-
미해결[리액트 2부] 고급 주제와 훅
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
안녕하세요 선생님 질문이 2개 있습니다. const handleClick1 = MyReact.useMemo((postId) => { console.log("handleClick", postId); }, []); const handleClick2 = MyReact.useMemo(() => (postId) => { console.log("handleClick", postId); }, []);double arrow function을 curried function이라고 하던데 이번 예시에서 MyReact.useMemo를 쓰는 경우에는 1) handClick1, handClick2 둘 다 상관이 없나요?2) 있다면 무슨 이점때문에 handleClick2처럼 쓰신건가요?
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
5.리덕스 유용한 툴 소개
npm install --save redux-devtools-extension설치명령어 실행시 에러가 난다면 터미널에서npm install --save @redux-devtools/extension 설치 후 store.js에서 import 하기import { composeWithDevTools } from '@redux-devtools/extension' 출처 누나슬랙 학생분께서 찾으신 자료
-
미해결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 서비스 만들기
넥스트에서 로그인 분기처리 질문
넥스트에서 로그인시 해당유저의 role에 따라 분기를 나눌려면 어떠한 방식을 사용해야할까요?로그인된 유저의 role은 student, teacher, admin 세가지의 값이 있으며유저는 유저페이지만 선생은 선생페이지만 어드민은 어드민페이지만 따로 보여주는 방식이 있나요?폴더구조는 이러합니다.(afterLogin)- (admin)- (teacher)- (student) (beforeLogin)- ...