묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
cypress와 함께 사용하면되는건가요?
Jest와 Cypress중에 하나만 사용 하라고 하셨는데storybook은 Jest와 함께 사용하거나 Cypress와 함께 사용해도 될까요?
-
미해결따라하며 배우는 리액트 네이티브 기초
Remote notification 강의는 없을까요?
Remote notification 관련 내용은 안올라올까요?? ios local notification 강의에서 remote 강의가 나온다고 하셨는데 async storage 강의가 나와서요.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정이 안됩니다..
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 수정하기 다 구현한 것 같은데... 수정이 안됩니다ㅠ 뭐가 문제인지 모르겠어요코드샌드박스 링크 첨부합니다!https://codesandbox.io/p/sandbox/emotion-diary-hnrd4q?file=%2Fsrc%2Fcomponents%2FDiaryEditor.js%3A142%2C17
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
깃허브에서 선생님께서 올리신 파일 받아,, 실행시켜보려했으나 안됩니다
yarn dev하면 사이트 떠야하는데;; 왜 안될가요??
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
상품목록페이지만들기에서 ... 막힙니다..
선생님~!! 상품목록페이지가 안뜹니다 ㅠㅠ뭘 잘못한걸까요?? app.tsx파일엔 아래와 같이 입력했습니다.import { QueryClientProvider } from 'react-query' import { useRoutes } from 'react-router-dom' import { getClient } from './queryClient' import { routes } from './routes' import { ReactQueryDevtools } from 'react-query/devtools' const App = () => { const elem = useRoutes(routes) const queryClient = getClient() return ( <QueryClientProvider client={queryClient}> {elem} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ) } export default Appimport { QueryClient } from 'react-query' // import { getTodos, postTodo } from '../my-api' type AnyOBJ = { [key: string]: any }; export const getClient = (() => { let client: QueryClient | null = null return () => { if (!client) client = new QueryClient({}) return client } })() const BASE_URL = "https://fakestoreapi.com" export const fetcher = async ({ method, path, body, params, }: { method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; path: string; body?: AnyOBJ; params?: AnyOBJ; }) => { const url = `${BASE_URL}${path}`; const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; try { const res = await fetch(url, fetchOptions); const json = await res.json(); return json; } catch (err) { console.error(err); } }; export const QueryKeys = { PRODUCTS: "PRODUCTS", };
-
해결됨Next + React Query로 SNS 서비스 만들기
로그인 클릭시, Failed to construct URL: Invalid base URL 에러로 인해서 리다이렉트가 되지 않습니다
‘next-auth로 로그인하기’ 강의를 다 듣고 나서로그인 버튼을 클릭했더니 아래의 에러가 발생하고'/home'으로 리다이렉트가 되지 않습니다.TypeError: Failed to construct 'URL': Invalid base URL at signIn (react.js:172:19) at async onSubmit (VM5774 LoginModal.tsx:29:13) 에러 로그를 보고 처음에는 URL 설정이 문제인가 싶었는데URL은 문제가 없었습니다#.env AUTH_URL=http://localhost:9090 AUTH_SECRET=mustkeepinsecret // auth.ts CredentialsProvider({ async authorize(credentials) { console.log(credentials); const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ // credentials id: credentials.username, password: credentials.password, }), }); console.log(authResponse); // 로그인 실패 if (!authResponse.ok) { return null; } // 로그인 성공 const user = await authResponse.json(); return user; }, }), // src\\mocks\\handlers.ts http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json( { userId: 1, nickname: '제로초', id: 'zerocho', image: '/5Udwvqim.jpg', }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/', }, }, ); }), 실제로 로그인 버튼을 클릭하면 터미널에 handlers.ts 에 작성한 console.log('로그인'); 가 제대로 출력이 되고CredentialsProvide의 authorize에 작성한 console.log(credentials); 역시 제대로 출력이 됩니다 에러 메세지를 보면 signIn 관련 문제인 것 같은데 이 역시 강사님이 작성해주신 내용 그대로 작성했는데 뭐가 문제인지 모르겠네요ㅠconst onSubmit: FormEventHandler<HTMLFormElement> = async (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); setMessage(''); try { await signIn('credentials', { username: id, password, redirect: false, }); // 로그인 성공하면 리다이렉션 router.replace('/home'); } catch (e) { console.error(e); setMessage('아이디와 비밀번호가 일치하지 않습니다'); } };
-
미해결Next + React Query로 SNS 서비스 만들기
2:56 src/app/page.tsx 파일을 이동해도 메인페이지가 잘 나오는 이유가 궁금합니다.
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c페러렐 라우트용 @modal 페이지를 메인 page.tsx ( src/app/page.tsx ) 에서 사용하기위해 (beforeLogin) 경로로 이동시켰는데, Next.js 가 어떻게 메인페이지를 인식하고 표시하는지가 궁금합니다.Next.js 프로젝트 폴더구조에서 가장 app 폴더와 근접해있는 page.tsx 파일이 메인으로 인식되는건가요.. ㅠㅠ?현재 app 폴더에 layout.tsx(RootLayout) 밖에 없는데 그 파일에서 children 으로 받아지는 page.tsx 가 어떻게 결정되는지가 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
/compose/tweet 새로고침 시 TweetModal 모달 안 뜨는..
https://github.com/ZeroCho/next-app-router-z/blob/master/ch3-1/src/app/(afterLogin)/compose/tweet/page.tsx3-1 보면서 학습 중입니다./compose/tweet 새로고침 시에도 모달이 보여야하는데 안 되길래.. /compose/tweet/page.tsx에 <TweetModal /> 이 빠져있어서 안 됐어요 혹시나 저같은 초보자들은 헤매실까봐.. 글 남겨둡니다~
-
해결됨처음 만난 리덕스(Redux)
Ducks 패턴에 대해서
안녕하세요. Ducks패턴 강의를 방금 들었습니다.실습에서 todoDuck.js에 todo 컴포넌트에서 사용되는 action만을 넣었는데,duck file은 컴포넌트로 구분하여 만드는것인가요??
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
강의 시점과 지금시점이 꽤 달라진게 있는거 같아요
업데이트 해주시면 정말 감사합니다 ㅠㅠ
-
미해결따라하며 배우는 리액트 네이티브 기초
안녕하세요
지금 강의를 듣고있는데 섹션5 [React Nagivation을 이용해서 라우팅 구현하기] 여기에서 IOS로만 하시는데 윈도우에서 안드로이드로 강의를 따라가고 있는 입장에서는 어떻게 해야하는 걸까요? 제가 expo 부분부터 widow- android studio로만 강의를 따라왔었는데 expo 에서 window - IOS 로도 개발을 따라 했었어야 했을까요?ㅜ Android Studio로는 실행을 어떻게 해야할지 안내가 안되어 있어서 막막해서요 제가 뭘 놓친건지 헷갈리네요 갑자기ㅠㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새 일기 등록이 안됩니다..(Uncaught TypeError: Cannot read properties of undefined (reading 'date'))
새 일기를 쓰려고 하면 다음과 같은 에러가 발생합니다.해결해보려고 했는데 어떻게 손대야할지 막막하더라구요ㅠ코드를 뒤져보고 강의도 몇번씩 돌려보고 깃헙 소스코드랑 비교도 해봤습니다... 어떤식으로 에러를 해결해야하는지 찾는 방법도 함께 알려주시면 정말정말 감사하겠습니다..!! 아래는 제가 작성한 소스코드입니다!Home.jsimport { useContext, useEffect, useState } from "react"; import { DiaryStateContext } from "../App"; //components import MyButton from "./../components/MyButton"; import MyHeader from "./../components/MyHeader"; import DiaryList from "../components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); const [data, setData] = useState([]); // 날짜 저장 state const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(() => { if (diaryList.length >= 1) { const firstDay = new Date(curDate.getFullYear(), curDate.getMonth(), 1).getTime(); const lastDay = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0).getTime(); setData(diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay)); } else { setData([]); } }, [diaryList, curDate]); // useEffect(() => { // console.log(data); // }, [data]); const increaseMonth = () => { setCurDate(new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate())); }; const decreaseMonth = () => { setCurDate(new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate())); }; return ( <div> <MyHeader headText={headText} leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data} /> </div> ); }; export default Home; App.jsimport React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { newState = [action.data, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } case "EDIT": { newState = state.map((it) => (it.id === action.data.Id ? { ...action.data } : it)); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 3, content: "오늘의 일기 1번", date: 1702273692142, }, { id: 2, emotion: 2, content: "오늘의 일기 2번", date: 1702273692143, }, { id: 3, emotion: 5, content: "오늘의 일기 3번", date: 1702273692144, }, { id: 4, emotion: 1, content: "오늘의 일기 4번", date: 1702273692145 }, { id: 5, emotion: 4, content: "오늘의 일기 5번", date: 1702273692146, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", date: { id: dataId.current, date: new Date(date).getTime(), content, emotion, }, }); dataId.current += 1; }; // REMOVE const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; // EDIT const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App;DiaryList.jsimport { useState } from "react"; import { useNavigate } from "react-router-dom"; import MyButton from "./MyButton"; import DiaryItem from "./DiaryItem"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const filterOption = [ { value: "all", name: "전부 다" }, { value: "good", name: "좋은 감정만" }, { value: "bad", name: "안좋은 감정만" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select className="ControlMenu" value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option value={it.value} key={idx}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const navigator = useNavigate(); const [sortType, setSortType] = useState("latest"); const [filter, setFilter] = useState("all"); const getProcessedDiaryList = () => { const filterCallBack = (item) => { if (filter === "good") { return parseInt(item.emotion) <= 3; } else { return parseInt(item.emotion) > 3; } }; // 비교함수 const compare = (a, b) => { if (sortType === "latest") { return parseInt(b.date) - parseInt(a.date); } else { return parseInt(a.date) - parseInt(b.date); } }; const copyList = JSON.parse(JSON.stringify(diaryList)); const filteredList = filter === "all" ? copyList : copyList.filter((it) => filterCallBack(it)); const sortedList = filteredList.sort(compare); return sortedList; }; return ( <div className="DiaryList"> <div className="menu_wrapper"> <div className="left_col"> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> <ControlMenu value={filter} onChange={setFilter} optionList={filterOption} /> </div> <div className="right_col"> <MyButton type={"positive"} text={"새 일기쓰기"} onClick={() => navigator("/new")} /> </div> </div> {getProcessedDiaryList().map((it) => ( <DiaryItem key={it.id} {...it} /> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList;
-
해결됨Next + React Query로 SNS 서비스 만들기
gcTime 관련 궁금한 점이 있습니다.
안녕하세요, 제로초님이전 노드버드 강의부터 z.com까지 강의 유익하게 잘 보고 있습니다.섹션3 [react-query를 쓰는 이유와 fresh, stale, inactive] 강의 수강 중 궁금한 부분이 있어서 문의드립니다.강의에서 react-query의 데이터가 inactive 상태가 아니더라도 gcTime이 경과되면 gc가 이뤄진다고 말씀해주셨습니다. 그래서 staleTime을 gcTime보다 길게 설정하더라도 실제론 gcTime을 넘을 수 없다고도 연이어 설명해주시는 내용이 나옵니다. 제가 이전에 react query 블로그에서 본 gcTime 관련 설명에는 'The duration until inactive queries will be removed from the cache.' 라고 적혀있었는데요, 이 내용을 보고선 inactive된 데이터만 gc가 이뤄지는 걸로 알고 있었는데... 혼란스러워 문의드립니다. ㅠㅠ gcTime 관련 내용은 아래 링크에서 읽어봤습니다.https://tkdodo.eu/blog/practical-react-query 미리 답변 감사드립니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
login 페이지와 리다이렉트 관련 질문입니다.
<Link href="/login"> 클릭을 통해서(beforeLogin)/login/page.tsx로 이동 여기서는 replace('i/flow/login')으로 리다이렉트 어쨋거나 <Link>를 통해 이동 -> 리다이렉트 됐으니 인터셉팅 라우팅한 (.i)/flow/login/page.tsx로 이동i/flow/login/page.tsx는 새로고침 시 이동 할 때 보여줌이 맞나요?.?넥스트 처음이라 너무 어렵네요.. 눈물이 앞을 가립니다.. 제대로 이해한건지 모르겠어서 확인하고자 질문 드려봅니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
python manage.py makemigrations instagram 시 created_at default 오류가 발생합니다.
comment 클래스를 정의하고나서python manage.py makemigrations instagram 명령어를 실행하고 나니 default 값을 지정해주라는 메시지가 나왔습니다.구글링을 통해 default 값을 지정해 주었더니 옵션값은 하나만 지정해 주어야 한다는 error 메시지가 출력 되었습니다.(참고한 블로그글 은 https://terrorjang.tistory.com/entry/Django-It-is-impossible-to-add-the-field-createdat-with-autonowaddTrue#google_vignette이곳 입니다.) 어떻게 해결해야 할지 몰라서 도움을 요청합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
초기세팅
안녕하세요! 초기 설정 시 제로초님 깃에서 back과 setting/ts(js는 지워도 되나요?) 만 남겨둔 후 각각 터미널에서 npm i 해서 package-lock.json 의존관계에 의해 모듈 설치한 뒤 시작하면되는건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
안녕하세요 아직 수강중이긴한데 실무에서 작업중 궁금한게 있어서 질문드립니다!
안녕하세요, 강의는 수강중이기도하고 아래에 비슷한 맥락의 질문이 있는데 제가 이해한게 맞나 궁금해서질문 올립니다!현재 next14 버전과 styled-component를 사용중이며 공식문서https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components내용 과 검색등을 통하여 적용하였습니다.// libs/styledCompnents/Registry.tsx 'use client'; import { useServerInsertedHTML } from 'next/navigation'; import { ReactNode, useState } from 'react'; import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; const Registry = ({ children }: { children: ReactNode }) => { const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); useServerInsertedHTML(() => { const styles = styledComponentsStyleSheet.getStyleElement(); styledComponentsStyleSheet.instance.clearTag(); return <>{styles}</>; }); if (typeof document !== 'undefined') { return <>{children}</>; } return ( <StyleSheetManager sheet={styledComponentsStyleSheet.instance}> {children} </StyleSheetManager> ); }; export default Registry; //libs/styledComponets/Provider.tsx 'use client'; import { ThemeProvider } from 'styled-components'; import GlobalStyles from '@/styles/GlobalStyles'; import theme from '@/styles/theme'; import { PropsWithRequiredChildren } from '@/types/common'; import { StyledComponentsRegistry } from '.'; const Providers = (props: PropsWithRequiredChildren) => { return ( <StyledComponentsRegistry> <ThemeProvider theme={theme}> <GlobalStyles /> {props.children} </ThemeProvider> </StyledComponentsRegistry> ); }; export default Providers; // layout.tsx import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import AdminLayout from '@/layouts/AdminLayout/AdminLayout'; import { StyledComponentsProvider } from '@/libs/styledComponents'; import { MSWComponent } from '@/mocks/MSWComponent'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <MSWComponent> <StyledComponentsProvider> <AdminLayout>{children}</AdminLayout> </StyledComponentsProvider> </MSWComponent> </body> </html> ); } 현재 이렇게 사용중인데 AdminLayout에 'use client'를 사용하지않으면, 아래와 같은 에러가 나오고'use client' 를 사용하면 에러 없이 렌더링이 정상적으로 됩니다.```Server ErrorError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-componentThis error happened while generating the page. Any console logs will be displayed in the terminal window.Call Stackonode_modules/styled-components/dist/styled-components.esm.js (1:15911)(rsc)/./node_modules/styled-components/dist/styled-components.esm.jsnext/server/vendor-chunks/styled-components.js (30:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/components/atoms/Text/Text.style.ts (5:75)(rsc)/./src/components/atoms/Text/Text.style.tsnext/server/app/page.js (569:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/components/atoms/Text/Text.tsx (7:69)(rsc)/./src/components/atoms/Text/Text.tsxnext/server/app/page.js (580:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/components/atoms/Text/index.ts (5:63)(rsc)/./src/components/atoms/Text/index.tsnext/server/app/page.js (591:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/layouts/AdminLayout/AdminLayout.tsx (10:80)(rsc)/./src/layouts/AdminLayout/AdminLayout.tsxnext/server/app/page.js (745:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/app/layout.tsx (10:90)(rsc)/./src/app/layout.tsxnext/server/app/page.js (503:1)Function.__webpack_require__next/server/webpack-runtime.js (33:42)async eq/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:401280)async tr/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405046)async tn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405596)async tu/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:409938)async/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:410457)```궁금한 점이 3가지가 있는데 검색만으로는 이해가 잘안되서 질문드립니다ㅠ1. AdminLayout이 'use client'를 선언하지 않고 서버 컴포넌트로 사용을 하여도 StyledComponentsProvider 가 'use client' 이기 때문에 클라이언트 컴포넌트의 자식으로 AdminLayout을 사용하면 AdminLayout도 자동으로 클라이언트 컴포넌트로 변경되는걸까요? 아니면 자식 요소로 사용하는것은 상관없이 import 해오는 경우만 클라이언트 컴포넌트에서 서버 컴포넌트를 불러오면 서버 컴포넌트가 클라이언트 컴포넌트가 되는걸까요?2. 컴포넌트의 자식이 부모의 컴포넌트의 상태를 따라간다면, 만약 최상위 부모 (Layout)가 클라이언트 컴포넌트라면 어차피 AdminLayout 이나 불러오는 NavMenu 들을 서버 컴포넌트로 사용 못하는게 맞나요?3. 강의상 진행할때는 문제 없었습니다. 현재 위에 질문드린 에러는 styled-components 때문에 createContext 는 use client에서만 사용할수있다라는 에러인거같은데 AdminLayOut이나 다른 페이지에서도 useContext를 사용하려하면 'use client'를 작성하여도 같은 에러가 나옵니다. 현재 말씀드린 정보로만으로는 에러의 문제점을 찾을순 없을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
2:34 RQProvider에 "use client"; 로 csr 선언?을 해주신 것 같은데 이런 형식의 구조라면 SSR이나 SSG 적용에는 문제가 없을까요?
안녕하세요 제로초님.리액트 쿼리를 도입해보려고 할 때 마침제로초님 강좌가 올라와서 참고하고 있습니다!근데 제 Nextjs 프로젝트의 데이터가 대부분 ssr이나 ssg로데이터를 가져오게끔 하려고 하고 있거든요강의에서 ssr로 데이터를 가져오는데그전에 RQProvider로 리액트 쿼리를 쓸 범위를 지정해주셨잖아요? 근데 useState를 사용하고 있고, "use client";가 선언되어있는데 그 밑으로 담기는 페이지나 컴포넌트들에 ssr, ssg 적용이 잘 되는지에 대해 궁금해져서 질문을 남기게 되었습니다!!(제로초님 강의와 비슷하게 ssr로 데이터 가져오게 작업해봤을때 csr이 아니라 ssr로 잘 가져오는 거 같기는 한데 어떻게 되는거지?! 계속 궁금하네요..!)
-
해결됨Next + React Query로 SNS 서비스 만들기
클라이언트 컴포넌트로 전환하기 1:07초 파일
안녕하세요 제로초님!현재 강좌를 따라하면서 진행중인데 깃허브에 들어가보니 @modal 밑에 파일들을 못 찾겠어서요,login.module.css은 https://github.com/ZeroCho/next-app-router-z/blob/master/ch1/src/app/(beforeLogin)/_component/login.module.css여기있는거 같은데, page.tsx는 어떤 파일에서 보면 될까요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
Django allauth를 사용한 소셜 로그인 시 에러
안녕하세요. 강의 잘 듣고 있습니다 :)강의 내용과는 상관없지만, 개인 프로젝트에서 소셜로그인을 사용할 일이 있어 테스트해보고 있습니다.https://egg-money.tistory.com/117이 글을 참고하여 구현했는데 구글 로그인 선택 후 계정 선택 화면을 넘어간 후에 아래와 같은 상황이 발생합니다.admin 페이지를 확인해보니 user에 정보가 저장되지 않았습니다. 이에 대한 해결 방법이 있을까요?pip freeze를 통해 출력한 버전은 다음과 같습니다. asgiref==3.7.2 asttokens==2.4.1 cachetools==5.3.2 certifi==2023.11.17 cffi==1.16.0 charset-normalizer==3.3.2 colorama==0.4.6 contourpy==1.2.0 cryptography==41.0.7 cycler==0.12.1 decorator==5.1.1 defusedxml==0.7.1 dj-rest-auth==5.0.2 Django==5.0 django-allauth==0.58.2 django-cors-headers==4.3.1 django-debug-toolbar==4.2.0 django-dotenv==1.4.2 django-pydenticon==0.2 djangorestframework==3.14.0 djangorestframework-simplejwt==5.3.1 et-xmlfile==1.1.0 executing==2.0.1 fonttools==4.46.0 google-auth==2.25.1 google-auth-oauthlib==1.1.0 gspread==5.12.2 httplib2==0.22.0 idna==3.6 ipython==8.18.1 jedi==0.19.1 joblib==1.3.2 kiwisolver==1.4.5 matplotlib==3.8.2 matplotlib-inline==0.1.6 numpy==1.26.2 oauth2client==4.1.3 oauthlib==3.2.2 openpyxl==3.1.2 packaging==23.2 pandas==2.1.3 parso==0.8.3 Pillow==10.1.0 prompt-toolkit==3.0.43 pure-eval==0.2.2 pyasn1==0.5.1 pyasn1-modules==0.3.0 pycparser==2.21 pydenticon==0.3.1 Pygments==2.17.2 PyJWT==2.8.0 pyparsing==3.1.1 PyQt5==5.15.10 PyQt5-Qt5==5.15.2 PyQt5-sip==12.13.0 python-dateutil==2.8.2 python3-openid==3.2.0 pytz==2023.3.post1 requests==2.31.0 requests-oauthlib==1.3.1 rsa==4.9 scikit-learn==1.3.2 scipy==1.11.4 six==1.16.0 sqlparse==0.4.4 stack-data==0.6.3 threadpoolctl==3.2.0 traitlets==5.14.0 tzdata==2023.3 urllib3==2.1.0 wcwidth==0.2.12