173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 css에서 calc부분에 대해 강의를 보고 있는데 궁금한 점이 처음부터 계산해서 한번에 값을 적으면 되지 왜 calc(100% - 70px) 이런식으로 하는지 궁금합니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
저장할 때 밑에 코드를 쓰면 에러가 뜹니다ㅠㅠ어떻게 해결해야하나요? const initalTodoData = localStorage.getItem("todoData") ? JSON.parse(localStorage.getItem("todoData")) : []; function App() { const [todoData, setTodoData] = useState([initalTodoData]);
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 제목처럼 api호출 3초뒤로 하고, loading.tsx 파일이 있을 때 없을때 /home/page.tsx 이런식으로 테스트를 해봤습니다. /home/page.tsx에서는 react-query로 ssr을 적용했고 import style from './home.module.scss' import Tab from "@/app/(afterLogin)/home/_component/Tab"; import TabProvider from "@/app/(afterLogin)/home/_component/TabProvider"; import PostForm from "@/app/(afterLogin)/home/_component/PostForm"; import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; import TabDecider from "@/app/(afterLogin)/home/_component/TabDecider"; import { getPostRecommends } from '@/app/(afterLogin)/_lib/getPostRecommends'; export default async function Home() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends, initialPageParam: 0, }); const dehydratedState = dehydrate(queryClient); return ( <main className={style.main}> <HydrationBoundary state={dehydratedState}> <TabProvider> <Tab /> <PostForm /> <TabDecider /> </TabProvider> </HydrationBoundary> </main> ); } /mocks/handlers.tsx에서는 postRecommends를 가져오되 3초 delay를 줬습니다. http.get('/api/postRecommends', async ({ request }) => { console.log('----------------------------------handlers /api/postRecommends'); await delay(3000); const url = new URL(request.url); const cursor = parseInt(url.searchParams.get('cursor') as string) || 0; return HttpResponse.json( [ { postId: cursor + 1, User: User[0], content: `${cursor + 1} ${faker.lorem.paragraph()}`, Images: [{ imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }], createdAt: generateDate(), }, { postId: cursor + 2, User: User[0], content: `${cursor + 2} ${faker.lorem.paragraph()}`, Images: [ { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, ], createdAt: generateDate(), }, { postId: cursor + 3, User: User[0], content: `${cursor + 3} ${faker.lorem.paragraph()}`, Images: [], createdAt: generateDate(), }, { postId: cursor + 4, User: User[0], content: `${cursor + 4} ${faker.lorem.paragraph()}`, Images: [ { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 3, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 4, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, ], createdAt: generateDate(), }, { postId: cursor + 5, User: User[0], content: `${cursor + 5} ${faker.lorem.paragraph()}`, Images: [ { imageId: 1, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 2, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, { imageId: 3, link: faker.image.urlLoremFlickr({ category: 'animals' }) }, ], createdAt: generateDate(), }, ] ); }), 이 후에 ssr화면 테스트를 위해서 브라우저의 자바스크립트 사용중지 했습니다. 서버도 각각 재시작하고 테스트했습니다. 그리고 나서 테스트한 화면입니다. 아래 화면은 loading.tsx가 업을때, 아래 화면은 loading.tsx가 있을때 입니다. 선생님 강의에서 ssr을 적용했을때 loading화면을 포기해야한다고 이해했었습니다. prefetchInfiniteQuqery를 쓰고 loading을 포기하거나, prefetchInfiniteQuqery을 포기하고 loading을 사용하거나. 그런데 제가 테스트했을때는 ssr이라도 로딩 화면이 보이는걸로 봐서 제가 테스트를 잘못한건지, loading.tsx가 있는것 자체가 suspense를 사용한것과 동일한 효과를 주어서 보여지게 되는건지 여쭙고 싶습니다. 제가 잘못테스트했다면 어떻게 테스트를 해야 좀 더 정확히 구분지을 수있을지도 궁금합니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
List 컴포넌트 생성하기에서 props로 key={ data.id }를 넘겨주는데 저기서는 사용하지 않는데 넘겨주어야 하나요? 빼도 상관 없나요??
미해결
Next + React Query로 SNS 서비스 만들기
미들웨어 matcher에 추가한 페이지 home으로 replace 시에 이렇게 에러가 뜨는데 이유를 모르겠습니다 ㅠ ⨯ Error [ERR_HTTP_HEADERS_SENT]: Cannot append headers after they are sent to the client at ServerResponse.appendHeader (node:_http_outgoing:689:11) at AsyncLocalStorage.run (node:async_hooks:346:14) import { auth as middleware } from "./auth"; export const config = { matcher: ["/compose/tweet", "/home", "/explore"], };
미해결
Next + React Query로 SNS 서비스 만들기
localhost 환경에서 모바일로 접속 하였을때 IP 주소 확인하여 넣어줬는데도 api error가 발생하는데 이유를 잘 모르겠습니다. app.use( cors({ origin: 'http://내 IP 주소:3000', optionsSuccessStatus: 200, credentials: true }) );
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 다 듣고 혼자 프로젝트를 진행해보고 있는 중인데 궁금한 것이 생겨 질문 드립니다! msw로 모킹하여 스트림데이터를 넘겨주고, 브라우저에 데이터가 나타날 때 gpt 답변처럼 한글자씩 보여지게 처리하고 싶은데 공식문서를 봐도 잘 안되네요..(한글자씩 안 나오고 한번에 나타남) 감사합니다. 버전 : msw 2.0 참고 문서 : https://mswjs.io/docs/recipes/streaming/
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
합계, 길이, 개수 이런식으로 문제에 명시되지 않고 데이터 수를 구하여라 이런 식으로 적혀있을 때, sum이 사용된 적도 있고 len이 사용된 적도 있는데 sum(), len(), count() 각각 언제 사용되는지 궁금합니다 수치형, 범주형에 따른 사용 가능 여부 차이도 있나요??
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님! 강의를 듣던 중 궁금한게 생겨서 질문 드립니다. TabDeciderSuspense 컴포넌트를 사용하는 것을 보았습니다. 원래는 postRecommends의 데이터를 프리페칭해서 서버에서 데이터를 페칭하고 클라이언트에서 하이드레이션 하고있었는데, suspense를 사용해버리면 서버에서 프리페칭이 되는건지 궁금합니다. suspense를 적용하고 나서 페이지 새로고침 후에 페이지 document를 보면 이렇게 prefetch한 데이터가 있는 것이 아니라 loading이 넘어와 있습니다. 원래는 서버에서 prefetch한 데이터가 document로 넘어왔는데, suspense 적용 후 로딩스피너가 넘어 온 것으로 보아 suspense를 적용하면 prefetch가 되지 않는 것 인가요 ?? 그것이 아니라면 suspense를 적용하고 prefetch를 사용하는 이유가 궁금합니다.
미해결
[React 2부] 고급 주제와 훅
안녕하세요. 아래 질문에 대한 답글을 보고 …rest에 대해 이해를 했는데요. https://www.inflearn.com/questions/1186424 몇 가지 궁금한 점이 생겨 질문 드립니다! 강의에서 나온 방식이 1번 어트리뷰트로 버튼 컴포넌트에 인자를 전달하는 것 맞을까요? App.jsx <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} > 주문하기 </Button> Button.jsx const Button = ({ styleType, block, ...rest }) => { let className = 'Button'; if (styleType) className += ` ${styleType}`; if (block) className += ` block`; return <button className={className} {...rest}/> }; export default Button; 위 App.jsx의 Button에 대한 JSX 코드를 JS 코드로 변환하면 아래와 같이 변환 되나요? onClick은 어떤 식으로 변환되는지 궁금합니다. createElement( Button, // 함수 { styleType: "brand" }, // props onClick: () => console.log("TODO: 주문하기 클릭") // children "주문하기 , 결제하기" // children ) onClick도 …rest 나머지 매개변수 구문에 들어갔는데, 개발자 도구에서 props를 보면 onClick은 onClick이라는 프롭스에 맵핑 되어 있습니다. rest 객체에 children, onClick 속성이 포함되어 있어서 내부적으로 구분해주는 것인가요? 아래처럼 작성 하는 게 2번 태그 안에 인자를 전달하는 방식 맞을까요? <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} children={"주문하기"} > </Button> 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 는 없습니다. 그리곳 eslint 설치시 첫 옵션 3가시 선택(강제로 고처주는옵션) 3번째 옵션도 없습니다. 2가지만 나오네요
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 새소식 올려주신거 참고해서 await signIn('credentials', { ...data, redirect: true });수정한후 로그인 후 홈으로 이동안됩니다. home 갔다가 로그인화면으로 이동해버리는데 어디서 이동시키는건지 뒤저봐도 못 찾겠더라구요. 로그인화면으로 새로고침되는듯 합니다... true만 하고 이전 코드와 다 똑같은데 조언 부탁드립니다 ㅠ /src/app/(beforeLogin)/_component/Loginmodal.tsx const onSubmit: SubmitHandler<formProps> = async (data: formProps) => { console.log(data); try { await signIn('credentials', { ...data, redirect: true }); router.replace('/home'); console.log('---------------------------------------after LoginModal login') } catch(error) { console.error(error); console.log('아이디와 비밀번호가 일치히자 않습니다.'); } }; src/middleware.ts export async function middleware() { const session = await auth(); console.log(session, '------------------------------middleware session') if (!session) { return NextResponse.redirect('http://localhost:3001/i/flow/login'); } } // See 'Matching Paths' below to lean more // 미들웨어를 적용할 라우트로 로그인을 해야하는 페이지 // 페이지 접근관리 하기 쉬워짐 export const config = { matcher: ['/compose/tweet', '/home', '/explore', '/messages', '/search'] } /src/auth.ts import NextAuth, {CredentialsSignin} from "next-auth" // import CredentialsProvider from "next-auth/providers/credentials" import Credentials from "next-auth/providers/credentials" import { NextResponse } from 'next/server'; export const { // api 라우트 handlers: { GET, POST }, // auth 함수 실행하면 로그인 유무알 수 있다. auth, // 로그인 하는 함수 signIn } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: '/i/flow/signup', }, providers: [ Credentials({ // You can specify which fields should be submitted, by adding keys to the `credentials` object. // e.g. domain, username, password, 2FA token, etc. credentials: { id: {}, password: {}, }, authorize: async (credentials) => { console.log('-------------------------------------------auth.ts'); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }) // 여기 주목!!! 서버에서 에러가 발생할 때 그 에러 내용이 서버에 담겨 있을 겁니다. console.log(authResponse.ok, authResponse.status, authResponse.statusText) if (!authResponse.ok) { const credentialsSignin = new CredentialsSignin(); if (authResponse.status === 404) { credentialsSignin.code = 'no_user'; } else if (authResponse.status === 401) { credentialsSignin.code = 'wrong_password'; } throw credentialsSignin; } // 로그인 성공 const user = await authResponse.json(); console.log('user', user); // return user object with the their profile data return { ...user, name: user.nickname, email: user.id, } }, }), ] }) next-auth 소식이나 말쓰하시는거 들어봐도 아직 안정화가 되지 않은것같은데 선생님은 next-auth를 실무에 도입해도 된다고보시나요? 아니면 nodebird 처럼 express로 하는걸 더 추천하실지 궁금합니다. 넥스트오쓰에서 가입한 사용자를 데이터베이스로 볼수있는지도 궁금하구 어차피 배워야할것이니 이런저런 부족한게 좀 있더라도 밀고나가야하는지.. 여유되실때 확인해주시면 감사하겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님. 로그인 후에 새로고침이나 url을 치고 /(메인)으로 가면 홈으로 잘 리다이렉트 되는데 로그인 후 바로 뒤로가기를 누르면 리다이렉트되지 않고 / 페이지로 이동합니다. 이 부분 어떻게 하면 좋을지 문의 드립니다. 회원가입 후 303뜨면서 홈으로 이동하는데, 이 303이 괜찮은건지와 이동 후에 로그아웃버튼에서 session 정보를 가져오지 못하고 있습니다. 새로고침하면 잘 나옵니다. me정보를 가져올때 useEffect로 바꿔야할지 문의 드립니다. 로그를 보면 회원가입 후, 로그인도 잘 되는것 같은데 어떤부분을 확인해야할지 알려주시면 감사하겠습니다. @/app/(beforelogin)/_lib/signup.tsx 'use server'; import { signIn } from '@/auth'; import { redirect } from 'next/navigation'; const onSubmit = 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' }; } let shouldRedirect = false; try { console.log('-------------------------signup start'); const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: 'post', body: formData, credentials: 'include', // cookie 전달 위해서 }); // console.log(response); console.log(response.status); if (response.status === 403) { return { message: 'user_exists' }; } const user = await response.json(); console.log(user, '-------------------------signup'); shouldRedirect = true; // 회원가입 성공하고 로그인 시도 await signIn("credentials", { username: formData.get('id'), password: formData.get('password'), redirect: false, }) } catch (error) { console.error(error); return { message: null }; } if (shouldRedirect) { redirect('/home'); // redirect는 try/catch문에서 쓰면 안된다. } } export default onSubmit; @/auth.ts import NextAuth from "next-auth" // import CredentialsProvider from "next-auth/providers/credentials" import Credentials from "next-auth/providers/credentials" export const { // api 라우트 handlers: { GET, POST }, // auth 함수 실행하면 로그인 유무알 수 있다. auth, // 로그인 하는 함수 signIn } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: '/i/flow/signup', }, providers: [ Credentials({ // You can specify which fields should be submitted, by adding keys to the `credentials` object. // e.g. domain, username, password, 2FA token, etc. credentials: { id: {}, password: {}, }, authorize: async (credentials) => { console.log('-------------------------------------------auth.ts'); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }) // console.log('authResponse-----------------------------------', authResponse); // 로그인 실패 if (!authResponse.ok) { return null } // 로그인 성공 const user = await authResponse.json(); console.log('user', user); // return user object with the their profile data return { ...user, name: user.nickname } }, }), ] }) @/app/(beforelogin)/_component/loginmodal.tsx 'use client'; import style from '@/app/(beforeLogin)/_component/login.module.scss'; import { useRouter } from 'next/navigation'; import { SubmitHandler, useForm } from 'react-hook-form'; // import { signIn } from '@/auth'; // 서버환경일 때 import { signIn } from 'next-auth/react'; // 클라이언트일 때 type formProps = { id: string, password: string, } export default function LoginModal() { const { register, handleSubmit, formState: { errors } } = useForm<formProps>(); const router = useRouter(); const onClickClose = () => { router.back(); // TODO: 뒤로가기가 /home이 아니면 /home으로 보내기 }; const onSubmit: SubmitHandler<formProps> = async (data: formProps) => { console.log(data); try { await signIn('credentials', { ...data, redirect: false }); router.replace('/home'); } catch(error) { console.error(error); console.log('아이디와 비밀번호가 일치히자 않습니다.'); } }; 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={handleSubmit(onSubmit)}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='id'> 아이디 </label> <input id='id' className={style.input} type='text' placeholder='' {...register('id', { required: '아이디를 입력해주세요.' })} /> {errors.id?.message && typeof errors.id.message === 'string' && <p>{errors.id.message}</p>} </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='password'> 비밀번호 </label> <input id='password' className={style.input} type='password' placeholder='' {...register('password', { required: '비밀번호를 입력해주세요.' })} /> {errors.password?.message && typeof errors.password.message === 'string' && <p>{errors.password.message}</p>} </div> </div> <div className={style.modalFooter}> <button className={style.actionButton}>로그인하기</button> </div> </form> </div> </div> ); } @/app/(beforelogin)/page.tsx import Main from '@/app/(beforeLogin)/_component/Main'; import { auth } from '@/auth'; import { redirect } from 'next/navigation'; export default async function Home() { console.log('--------------before login home'); const session = await auth(); if (session?.user) { redirect('/home'); return null; } return ( <> <Main /> </> ); }
해결됨
파이썬 알고리즘 트레이딩 파트2: Interactive Brokers API를 활용한 실시간 알고리즘 트레이딩
안녕하세요 강사님 IBKR Desktop 다운로드 이후 api 설정을 해주려고 했는데요 뭔가 버전이 다른 건지 화면이 달라서 어디서 설정을 할 수 있는지가 잘 안보여서 문의드립니다! 감사합니다!
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요 파이썬 강의 자료 부탁드립니다 mhchoi933@gmail.com 감사합니다 !
미해결
Next + React Query로 SNS 서비스 만들기
테일윈드랑 비교하셨는데욥! tailwind는 결국 프레임워크이고 다른 css 는 직접 작성을 해야하니 목적이 다르다고 생각했는데요. css를 직접 작성하신 이유가있을까요?? 테일윈드를 쓰면 호불호가 있긴 하겠지만 강의특성상 css 를 빠르게 사용할수있다고 생각되어서요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
사이트에 연결할 수 없다라고 나옵니다.. 혹시 몰라 5000/qqq도 해봤는데.. 액세스 거부로 나오구요. 방화벽도 꺼져있습니다..ㅠ
미해결
Next + React Query로 SNS 서비스 만들기
제로초님 강의를 보면서 새롭게 페이지 작업을 하고 있는데 최다 클라이언트 컴포넌트로 작업이 되고 잇어서 고민이 됩니다. 예를들어 쇼핑몰의 상세페이지를 만드는데 좋아요나 판매하기 기타등등 여기에 써야하는 click이벤트 들때문에 서버컴포넌트를 쓰기는 애매해서 클라이언트 컴포넌트로 작업 중인데... 모든 컴포넌트들이 이런 상황입니다ㅠㅠ 혹시 클라이언트 컴포넌트와 서버컴포넌트를 나누는 기준 같은거 알수 잇을까요??
미해결
Next + React Query로 SNS 서비스 만들기
next.config.js 파일이 아닌 next.config.mjs 파일이 생기는데 import 문을 사용하면 해결이 되는 것 같습니다. 그런데 기본적으로 js -> mjs파일이 셋팅되는 이유와 mjs파일을 그대로 쓰는게 나을지 js 파일로 사용하면 될지 궁금합니다.
