173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
넥스트에서 로그인시 해당유저의 role에 따라 분기를 나눌려면 어떠한 방식을 사용해야할까요? 로그인된 유저의 role은 student, teacher, admin 세가지의 값이 있으며 유저는 유저페이지만 선생은 선생페이지만 어드민은 어드민페이지만 따로 보여주는 방식이 있나요? 폴더구조는 이러합니다. (afterLogin) - (admin) - (teacher) - (student) (beforeLogin) - ...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자잘하게 궁금한게 있으면 여러방식으로 직접해보고는 하는데요 아래의 코드처럼 {...["a", "b", "c"]} 이렇게 props를 전달했을 때 console에는 {0: "a", 1: "b", 2: "c"} 이렇게 없던 배열값의 키값이 생겼습니다. 짐작하기로는 index 위치가 key값이 된 것 같기는 한데 왜 이렇게 되는지 궁금합니다. ex) parent/index.tsx import Child from "./child/index.tsx"; export default function Parent(): JSX.Element { return <Child {...["a", "b", "c"]} />; } ex) parent/child/index.tsx export default function Child(props: any): JSX.Element { console.log(props); // {0: "a", 1: "b", 2: "c"} return <></>; }
해결됨
핵 of 핵 파이썬 기초 문법
1강 파이썬 프로그래밍 환경 설치 및 설정하기로 되어 있고 이어서 해보겠다라고 하는데, 환경 설치 및 설정 내용이 없습니다. 의도하신 내용이신지요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
// posts.js router.get("/", async (req, res, next) => { // GET /posts console.log(Comment); try { const posts = await Post.findAll({ limit: 10, order: [["createdAt", "DESC"]], include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; LOAD_POST_REQUEST 액션이 dispatch돼서 api 요청을 통해 data를 받아오면 data안에 Comments의 값이 Comments 테이블에 들어있는 값이 들어있을 것으로 예상이 되는데 빈배열인 상황입니다. 혹시 다른 살펴볼만한 곳이 있는지 알려주시면 감사하겠습니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
message페이지 수정하기편에서 queryClient.prefetchQuery를 사용했는데 다른 컴포넌트에서 queryClient. prefetchQuery를 사용할때는 HydrationBoundary컴포넌트로 감싸고 state에 fetching 해온 데이터를 주입시켜서 사용했는데 여기서는 왜 아무곳에서도 사용하고 있지 않은건지 궁금합니다. 그리고 HydrationBoundary컴포넌트로 감싸고 state에 fetching해온 데이터를 주입시켜서 사용하고 있는곳들도 자식 컴포넌트에서 또 useQuery를 사용하는데 부모 HydrationBoundary에 접근해서 데이터를 사용하지 않고 useQuery로 fetching해와서 사용하는건지 궁금합니다. 저는 여태 HydrationBoundary가 fetching해온 데이터를 공유해주는 ContextAPI같은 컴포넌트라고 생각했었습니다. 자식컴포넌트에서 일일이 useQuery로 데이터를 가져오는거면 상위에 HydrationBoundary컴포넌트 안만들어줘도 되는거 아닌가요?
미해결
[개정판] 파이썬 머신러닝 완벽 가이드
안녕하십니까 교수님. 사이킷런 업그레이드 수행 및 XGBoost와 LightGBM 설치 강의를 듣는 중 영상이 윈도우에 초점이 되어있는데 저는 mac os를 쓰고 있습니다. 1:19초부터 진도를 못따라가겠는데 mac 용 설치방법 영상이나 가이드는 따로 없을까요?
미해결
궁금한게 저기서 i와 j가 동일한 행을 뽑고 싶은데 해당하는 df전체 열을 뽑고 싶으면 코드를 어떻게 짜야할까요? 도와주세요..
미해결
파이썬으로 영화 예매 오픈 알리미 만들기
안녕하세요. 인프런 강의에 푹빠져서 여기까지 오게 된 사람입니다. http://www.cgv.co.kr/common/showtimes/iframeTheater.aspx?areacode=01&theatercode=0013&date=20240322 지금 보여주는 링크는 requests로 페이지 정보 가져오기에서 CGV 용상아이파크몰 상영시간표를 가져오는 것인데 iframe의 주소를 가져오면 하얀 화면만 나오고 아무것도 안나옵니다. 이럴 경우 어떻게 해야하는지 알고싶습니다. 도움을 좀 주셨으면 합니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
msw에서 DB를 연결해서 사용하고싶습니다.몽고디비를 연결하고싶은데 타입스크립트를 잘 몰라서 연결을 못하겠습니다 ... 구글 찾아봐도 잘 안나오는데 혹시 방법이 있을까요 ?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 중고마켓 리스트를 무한스크롤로 구현 중에 있는데요. 부모 요소를 감싸서 overflow로 스크롤을 주면 height값이 먹혀서 데이터를 20개 가져오고 나서는 더이상 스크롤을 내릴 수가 없네요. 이건 ListWrap인 스크롤 컴포넌트의 부모요소를 없앨때 이구요. 이건 ListWrap을 넣었을 때 저렇게 값이 나옵니다. 어떻게 해야할까요? 아니면 무한스크롤은 아래처럼 overflowscroll을 넣고 구현이 안되는건가요?
미해결
Next + React Query로 SNS 서비스 만들기
next: { tags: {'posts', id} } nextjs에서의 위의 코드는 nextjs의 캐시를 하는거라면 nextjs는 서버캐시를 하고 react-query는 클라이언트 캐시를 해주는건가요? 둘 다 중복적으로 캐시를 지원해주거 맞죠? 헷갈리네요
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼 ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요? 데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 자바스크립트 배열 중에 email split 따라하면서 콘솔에 있는 내용 복사해서 vb Code에 붙혀 넣고 주석처리 했습니다. 근데 주석 뒤에 "codecamp": Unknown word. 라고 나타납니다. 이건 왜 그런가요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 해당 영상을 통해 학습하고 따로 프로젝트를 진행하는 중에 서버 컴포넌트에서 data를 fetch하고 api 상태코드에 따라서 next에서 제공하는 error.tsx에서 해당 에러 상태에 따라 모달에 메세지를 띄우는 작업을 하고 있습니다. 로컬 환경에서 실행시켰을때는 정상적으로 error status가 523이 발생했을때 정상적인 메세지를 받아서 error.tsx 화면에서 해당 에러 메세지를 모달에 띄우나 빌드 후 실행시켰을 때에는 An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. 모달안의 메세지에 이러한 문구가 뜹니다. 아무리 찾아봐도 정확한 원인을 모르겠는데 혹시 해결방법을 아실까요? 다국어 처리 라이브러리는 next-intl를 사용하였습니다. /note/page.tsx async function fetchSharedNote(guid: string) { try { const res = await fetch( `${process.env.API_SERVER_URL}/v1/...`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(guid), } ); if (res.ok) { return res.json(); } else { const errorData = await res.json(); throw errorData; } } catch (err: any) { const t = await getTranslations("Index"); if (err.status === RestApiErrorType.notExistResourceException) { throw new Error(t("error523")); } throw new Error(err.message); } } /note/error.tsx "use client"; // Error components must be Client Components import CommonDialog from "@/app/_components/CommonDialog/index"; import { useState } from "react"; export default function Error({ error, }: { error: Error & { digest?: string }; reset: () => void; }) { const [showDialog, setShowDialog] = useState(!!error.message); return ( <CommonDialog isShow={showDialog} contents={error.message} onClick={() => { setShowDialog(false); }} /> ); }
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요 00-06 black 설치과정에 질문입니다. 라이브러리에 추가하고 black 패키지 추가하려고 하니깐 활성화가 안되어있습니다.. 어떻게 조치해야 될까요?
미해결
워드프레스 자동 포스팅 프로그램 개발 강의 (ChatGPT API)
안녕하세요, 수강중인 학생입니다. 3.upload.py 부터 코드가 제대로 동작하지 않습니다. raise RemoteDisconnected("Remote end closed connection without" http.client.RemoteDisconnected: Remote end closed connection without response 이런 내용으로 인해 글이 올라가지 않는데 원인이 무엇일까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요? 그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 항상 강의 잘 보고 있습니다! return ( <html lang="en"> <body className={inter.className}> <MSWComponent /> <AuthSession> {children} </AuthSession> </body> </html> ) next-auth 강의 내용 중 최상위 layout.tsx에서 위 코드와 같이 AuthSession 감싸주신 걸 볼 수 있는데 이는 next-auth에서 제공하는 SesisonProvider를 통해 감싸진 자식 컴포넌트들에서 session 데이터를 공유하기 위함으로 이해하였습니다. 그런데 SessionProvider는 useSession 훅을 사용하는 컴포넌트에 대해 session 데이터를 공유하는 것이기에 "use client"가 사용되는데 최상위 layout 파일에 AuthSession으로 그것의 children을 감싸게 되면 그 아래에 포함된 모든 컴포넌트들이 전부 클라이언트 컴포넌트가 되기 때문에 이렇게 되었을 때 계층 아래의 서버컴포넌트들이 제대로 서버 컴포넌트로써 작동할 수 있는지가 궁금합니다. 그래서 useSession을 사용해야 하는 컴포넌트의 상위에서만 해당 provider로 감싸주고 서버 컴포넌트에서 session이 필요한 경우 해당 provider로 감싸지 않아도 session을 가져올 수 있지 않나 궁금증이 들어 질문드립니다.
해결됨
Next + React Query로 SNS 서비스 만들기
해당 영상에서 질문들을 참고해봐서 그나마 재영님 질문과 비슷해서 버전 문제일 수 있을 것 같아 버전도 낮춰보고 했음에도 해결이 되지 않아 새로 질문 올립니다.. [[[ 문제점 ]]] 아이디와 패스워드를 치고 로그인을 눌렀을 때 오류페이지로 이동됩니다. 정상적일때 경로 => [ localhost:3000/home ] 현재 이동되는 경로 => [ localhost:3000/api/auth/error ] [ 해당 사진 ] [ 적용했었던 버전 내역 ] next-auth@5.0.0-beta.3 next-auth@5.0.0-beta.4 next-auth@5.0.0-beta.11 @auth/core@0.19 @auth/core@0.27 [ 디렉토리 구조 ] [ 코드 ] env NEXT_PUBLIC_BASE_URL=http://localhost:9090 AUTH_SECRET=testtest auth.ts import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: '/i/flow/login', newUser: '/i/flow/signup', }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }) if (!authResponse.ok) { return null } const user = await authResponse.json() return user; }, }), ] }); mocks/handlers.ts import {http, HttpResponse, StrictResponse} from 'msw'; export const handlers = [ http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json({ userId: 1, nickname: '프림입니다만', id: 'pream', image: '/5Udwvqim.jpg' }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' } }); }), http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }); }), http.post('/api/signup', async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0' } }) }), ]; @/app/(beforeLogin)/_components/LoginModal.tsx "use client"; import { ChangeEventHandler, FormEventHandler, useState } from "react" import style from "@/app/(beforeLogin)/_components/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const [message, setMessage] = useState(''); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(''); window.alert('aaa'); try { await signIn("credentials", { username: id, password, redirect: false, }); window.alert('bbb'); router.replace('/home'); } catch (err) { console.error(err); setMessage('아이디와 비밀번호가 일치하지 않습니다.'); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"> <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id">아이디</label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder=""/> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password">비밀번호</label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder=""/> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}>로그인하기</button> </div> </form> </div> </div> ) } 여기서 onSumbit 함수 부분에서 alert를 중간에 넣었는데 window.alert('aaa')은 떴고, 확인 버튼 누르고, 다음 window.alert('bbb')가 뜨자마자 바로 에러 페이지로 이동됩니다. ( 확인 버튼 조차 못누르고 바로 이동됩니다 ) 그리고 auth.ts 에서는 재영님 질문처럼 터미널 로그들이 안찍힙니다... 9090 서버는 잘 띄워놨었구요. 회원가입 로그는 잘 나오는데 로그인 로그는 안뜹니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요. 아래는 제 package.json 인데, 특정 버전으로 진행해야 하나요? "dependencies": { "axios": "^0.26.1", "classnames": "^2.3.1", "dayjs": "^1.11.4", "env-cmd": "^10.1.0", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0", "react-icons": "^4.4.0", "sharp": "^0.30.7", "swr": "^1.3.0" }, "devDependencies": { "@types/node": "17.0.23", "@types/react": "17.0.43", "@types/react-dom": "17.0.14", "eslint": "8.12.0", "eslint-config-next": "12.1.4", "postcss-preset-env": "^7.4.3", "tailwindcss": "^3.0.23", "typescript": "4.6.3" }
