inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 제가 AWS가 아닌 Azure 서버를 이용하고 있는데, Azure는 어떻게 이용 가능한 지 알 수 있을까요? 프로젝트를 수행하고 있는 비전공자라 개념이 많이 부족합니다. 운이 좋게 Azure를 쓸 기회를 얻어서 Azure를 이용해서 작업하고 싶은데, 어떻게 사용할 있을 지 알 수 있나 싶어 질문 드립니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
  • azure
  • microsoft
dpfqjf 댓글 2 좋아요 0 조회수 299

백엔드서버에서 요청은 정상적이나 데이터를 못가져오는 현상

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 책 데이터를 불러오지 못해서 문의 드립니다. 스웨거에서도 아무 데이터를 못 불러오는데 혹시 어떤 문제일까요? npx prisma db push 도 잘 완료 하였고 백엔드 서버도 start 해 놓은 상태입니다.

  • react
  • typescript
  • next.js
univsai_edu 댓글 2 좋아요 1 조회수 446

Next.js vs React.js

해결됨

한 입 크기로 잘라먹는 Next.js

강사님, 안녕하세요. 강의를 들으면서 살짝 혼란스러운 부분이 있습니다. 사실 Next.js 도 바탕은 React 인데요. React 에서 제일 많이 언급되고 중요시되는 부분은 상태(state)관리라고 생각이 되는데 Next.js 로 SSR 위주의 페이지를 작성하게 되면 결국 상태관리는 최소화하게 되는 것인데 이게 React 의 컨셉과 맞는 것인지 살짝 이해가 되지 않습니다. (강의에서도 state 는 거의 언급이 되지 않고요) 그렇다고 상태관리를 최대한 활용하는 CSR 위주의 개발을 하게 되면 Next.js 의 장점을 거의 얻지 못하게 될 것 같기도 하고요. 저는 Next.js 가 제공하는 프레임워크 측면의 혜택을 얻고자 Next.js 로 어플리케이션 구축을 해보고 싶은데 해당 어플리케이션이 CSR 의 비중이 적지 않을 것 같아서 좀 망설여지는 부분이 있습니다. 현대 애플리케이션들은 사용자들과의 상호작용이 적을 수가 없을텐데 대다수의 앱들이 Next.js 의 SSR 위주의 개발로 충분히 커버가 가능한 것일까요?

  • react
  • typescript
  • next.js
아리마 댓글 2 좋아요 0 조회수 607

docker compose up 오류

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

postgres 강의 중 docker compose up을 실행하면 아래와 같이 오류가 뜹니다. version: "3" services: db: image: postgres: latest container_name: postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/data yml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다!

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
마곡동김두팔 댓글 1 좋아요 0 조회수 236

error.js 와 loading.js 에 대한 질문이 있습니다.

미해결

Next + React Query로 SNS 서비스 만들기

Next에서 자체적으로 제공하는 에러 바운더리인 error.js 와 서스펜스인 loading.js는 '서버 컴포넌트'의 에러와 로딩만 처리하는 것인가요? 예를 들어 서버 컴포넌트인 page.tsx의 하위 클라이언트 컴포넌트에서 에러가 발생했을 때는 error.js에서 캐치가 안 되는 것인가요...?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
kraf 댓글 2 좋아요 0 조회수 111

부록) remark 강의 중 parmas 오류

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 localhost에 아래와 같이 오류가 뜹니다. 오류 메시지가 [id].tsx 파일에 아래와 같이 뜨긴 하는데 강의 중 강사님 화면에도 그렇고 강의 자료에도 똑같이 오류 메시지(빨간 줄)가 있더라구요. next13부터 라우팅 방식이 달라졌다고 하던데 버전 문제인건지... 아래 params 오류 제외하고는 모두 동일한 소스 코드를 작성했고 오류도 없습니다. 해결 방법이 궁금합니다. **혹시 몰라서 [id].tsx 랑 post.ts 코드 전체 첨부합니다. <id.tsx> import React from 'react' import Head from 'next/head' import { GetStaticPaths, GetStaticProps } from 'next' import { getAllPostIds, getPostData, getSortedPostsData } from '../../lib/post' const Post = ({postData}: { postData: { title: string date: string contentHtml: string } }) => { return ( <div> <Head> <title>{postData.title}</title> </Head> <article> <h1>{postData.title}</h1> <div> {postData.date} </div> <div dangerouslySetInnerHTML={{__html: postData.contentHtml}} /> </article> </div> ) } export default Post export const getStaticPath: GetStaticPaths =async () => { const paths = getAllPostIds(); return{ paths, fallback: false } } export const getStaticProps: GetStaticProps =async ({params}) => { const postData = await getPostData(params.id as string) return { props: { postData } } } <post.ts> import fs from 'fs' import path from 'path' import matter from 'gray-matter' import { remark } from 'remark'; import remarkHtml from 'remark-html/lib'; const postsDirectory = path.join(process.cwd(), 'posts') console.log('process.cwd()', process.cwd()); console.log('postsDirectory.cwd()', postsDirectory); export function getSortedPostsData(){ //Get file names under /posts const fileNames = fs.readdirSync(postsDirectory) console.log('fileNames', fileNames); //fileNames ['pre-rendering.md', 'ssg-ssr.md'] const allPostsData = fileNames.map(fileName => { //Remove ".md" from file name to get id const id = fileName.replace(/\.md$/, '') //Read markdown file as string const fullPath = path.join(postsDirectory, fileName) const fileContents = fs.readFileSync(fullPath, 'utf8') //Use gray-matter to parse the post metadata section const matterResult = matter(fileContents) //Combine the data with the id return{ id, ...(matterResult.data as {date: string; title: string}) } }) //Sort posts by date return allPostsData.sort((a,b) => { if(a.date<b.date){ return 1 } else{ return -1 } }) } export function getAllPostIds(){ const fileNames = fs.readdirSync(postsDirectory); return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) } export async function getPostData(id: string){ const fullPath = path.join(postsDirectory, `${id}.md`) const fileContents = fs.readFileSync(fullPath, 'utf-8') const matterResult = matter(fileContents); const processedContent = await remark().use(remarkHtml).process(matterResult.content); const contentHtml = processedContent.toString(); return { id, contentHtml, ...(matterResult.data as {date: string; title: string}) } }

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
마곡동김두팔 댓글 1 좋아요 0 조회수 157

route handlers 에 대한 질문이 있습니다

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요, app router에 대해 계속 공부하다가 route handlers 에 대한 궁금증이 해결되지 않아 질문하게 됐습니다. Next app router에서 정확히 route handlers를 사용해야 하는 이유가 무엇인가요? 제가 생각했을 땐 서버 데이터 캐싱이나 API 엔드포인트를 숨길 수 있다는 장점이 있는데 이건 서버 컴포넌트에서 fetch하는 것으로도 대체가 되는데 route handlers를 사용해야 하는 특별한 이유가 따로 있는 것인가요? 모든 API를 route handlers로 하면 Next서버에 부하가 걸릴텐데 어떻게 해결할 수 있을까요? 이 부분은 공식문서에서 제가 못 찾은 것 같은데, 만약 외부 백엔드 API가 있고 여기에 데이터 요청을 할 때 클라이언트 컴포넌트에서의 모든 API 요청을 1차로 route handler에 하고 여기서 외부 백엔드 API로 요청하게되면 route handlers에 요청이 몰리게 되는데 이때 Next 서버에 걸리는 부하를 어떻게 해소할 수 있을까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
kraf 댓글 2 좋아요 0 조회수 166

[id].tsx 서버사이트 호출시 2회씩 되는데요 ㅠㅠ

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. [id].tsx 소스인데요 .. fetch를 2씩 호출되는 걸까요? ㅠ 2번째 호출될때는 id 값에 undefinded 로 되어서 페이지 오류가 발생됩니다 ㅠㅠ 뭐가 잘못 된것일까요? 캡쳐 보내드립니다.

  • react
  • typescript
  • next.js
최경호 댓글 2 좋아요 0 조회수 295

안녕하세요 generateStaticParams 관해서 질문

미해결

손에 익는 Next.js - 공식 문서 훑어보기

// [country]/layout.tsx const SUPPORTED_LANGS = ['kr', 'us']; interface LangMap { [key: string]: string; } const LANG_MAP: LangMap = { kr: 'ko', us: 'en' }; export function generateStaticParams() { return SUPPORTED_LANGS.map(country => ({country})); } export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, params, }: { children: React.ReactNode; params: { country: string }; }) { return ( <html lang={LANG_MAP[params.country]}> <body> <TanstackQueryProvider> <div className='container'> <BannerWrap/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); } import Banner from "@/component/Banner"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { fetchBanner } from "@/fetch/getReviews"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; export default function BannerWrap () { const queryClient = getQueryClient(); queryClient.prefetchQuery({ queryKey:['banners'], queryFn: fetchBanner, }) return ( <HydrationBoundary state={dehydrate(queryClient)}> <Banner /> </HydrationBoundary> ) } 빌드 후 next start로 테스트 중 의문점이 들어서 질문드립니다! generateStaticParams 와 fetch의 revalidate 10초, tanstackQuery staleTime 10초 로 설정후 RootLayout 에서 BannerWrap에 prefetchQuery와 HydrationBoundary 를 통하여 data를 prefetch하고있는데 이게 layout이 전역에서 실행되서 그런지 생성된 페이지 개수만큼 요청을 날리는데 next에서는 같은 요청이 중복되지 않도록 요청을 캐시하고 중복 요청을 제거 한다고 배웠는데 이렇게 중복으로 요청하는 이유는 뭘까요?

  • react
  • typescript
  • next.js
  • next.js13
dev 댓글 2 좋아요 0 조회수 403

[실습용 백엔드 서버 세팅하기] npx prisma db push 명령어 입력시 에러

해결됨

한 입 크기로 잘라먹는 Next.js

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npx prisma db push 명령어를 입력했을 때 위와 같은 에러가 나고있습니다. 같은 에러 발생하신경우 있나요?

  • react
  • typescript
  • next.js
univsai_edu 댓글 3 좋아요 0 조회수 373

Next JS 14.2 public 폴더 미생성

해결됨

한 입 크기로 잘라먹는 Next.js

15버전이 아닌 14.2버전으로 create-next-app을 진행했는데 public 폴더가 자동으로 생기지않습니다. 15버전은 자동으로 생성이 되는데 14.2버전에는 생성되지 않는 이유가 있나요??

  • react
  • typescript
  • next.js
brh1243 댓글 2 좋아요 0 조회수 320

hydration 에러

미해결

Next + React Query로 SNS 서비스 만들기

제로초님 하신대로 그대로 프로젝트를 생성하고 실행했더니 화면은 그대로 뜨는데 에러가 1개 있어서 봤더니 hydration 에러라고 뜨네요 ㅠㅠ 지금 z-com 프로젝트를 수업용 / 연습용으로 총 2개 진행중인데 수업용 프로젝트는 이런 에러가 없었는데 연습용에서 에러가 발생하네요. 아래는 에러 코드입니다 ! Console Error Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch if (typeof window !== 'undefined') . - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded

  • react
  • next.js
  • react-query
  • next-auth
  • msw
심현석 댓글 4 좋아요 0 조회수 2216

7.2 구글 로그인 1 - AuthUI 구현 구글 로그인 관련 질문드립니다.

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

'use client'; import React, { useEffect, useState } from 'react'; import { Auth } from '@supabase/auth-ui-react'; import { ThemeSupa } from '@supabase/auth-ui-shared'; import { createSupabaseBrowserClient } from '@/lib/client/supabase'; import useHydrate from '@/app/hooks/useHydrate'; const AuthUI = () => { const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const [user, setUser] = useState(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); if (result?.data?.user) setUser(result?.data?.user); }; const handleLogout = async () => { supabase.auth.signOut(); window.location.reload(); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div>{user ? `로그인 됨${user?.email}` : '로그아웃'}</div> <> {user && ( <button onClick={handleLogout} className="border-2 border-black"> 로그아웃 </button> )} </> <div className="mx-auto max-w-[500px]"> <Auth redirectTo={process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO} supabaseClient={supabase} appearance={{ theme: ThemeSupa }} onlyThirdPartyProviders providers={['google']} /> </div> </section> ); }; export default AuthUI; {"code":400,"error_code":"validation_failed","msg":"Unsupported provider: provider is not enabled"} 구글 로그인 시 해당 에러가 발생합니다 설정 같은 부분은 강의에 맞게 설정하였습니다

  • react
  • 클론코딩
  • next.js
  • supabase
moko 댓글 2 좋아요 0 조회수 426

github 공개 업로드 질문

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

김영한님 강의를 따라하면서 실습한 코드를 github public 레포로 올려도 되나요 ? 업로드 해도 되는 항목과 업로드 하면 안되는 항목이 궁금합니다 실습하면서 따라 작성한 코드 다운로드 받은 코드 강의자료 pdf 파일 강의자료 pdf 일부분 캡쳐 (예, spring mvc 구조 그림, 회원가입 도메인 요구사항 ERD) 감사합니다

  • spring
  • github
권도균 댓글 2 좋아요 0 조회수 278

익스텐션이름

해결됨

한 입 크기로 잘라먹는 Next.js

강의 중간에 요런식으로 설명나오는거 어떤 익스텐션 깔아야하나요?

  • react
  • typescript
  • next.js
댓글 2 좋아요 0 조회수 162

Next.js 페이지 별 레이아웃 적용 방법에 대한 궁금증입니다!

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요!! 페이지 별 적용을 원하는 레이아웃이 있는 경우 getLayout 함수를 컴포넌트의 메서드로 추가하여 적용하는 강의를 들었습니다. 그런 식으로 레이아웃을 설정하는 방법은 처음 봐서 매우 새롭고 신기하고 즐거운 강좌였습니다. 감사합니다! 궁금한 점이 있는데요, 그렇게 했을 때 페이지별로 최상단에 SearchableLayout 컴포넌트를 적용하는 것과 무슨 차이가 있는지 궁금했습니다. (혹은 강의에서 그렇게 설명해주신 이유가 궁금합니다!)

  • react
  • typescript
  • next.js
Sunny Sideup 댓글 2 좋아요 0 조회수 191

배포 환경에서 request.nextUrl.origin 질문

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요 nextjs를 활용해서 프로젝트를 진행하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다. 현재 도커를 활용해서 nextjs를 배포하고 있는데 middleware에서 request.nextUrl.origin값이 https://localhost:3000이 들어가고 있습니다. x-forwarded-host를 찍었을때는 제가 사용하는 https://test.domain.com이 들어가는데 request.nextUrl.origin에 x-forwared-host와 같은 값이 들어가도록 설정하기 위한 방법이 있는지 알 수 있을까요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
박지수 Jisu Park 댓글 2 좋아요 0 조회수 314

v15 업데이트 이후, 하이드레이션 오류 발생

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. v15로 업데이트를 했는데 하이드레이션 오류가 발생하기 시작했습니다. /book/1 페이지에서 vscode 저장으로 Next.js가 재실행이 되면은 오류가 발생하는데요. 하이드레이션 과정에서 서버와 클라이언트의 HTML이 일치하지 않아 클라이언트에서 재생성이 된다는 오류가 발생하고 있습니다. 그래서 속도 저하가 굉장히 심해진 상태입니다. https://nextjs.org/docs/messages/react-hydration-error 이 곳에서 오류가 발생하는 원인과 해결법을 말해주고는 있는데, 지금 저한테만 발생하는 현상인건지 좀 궁금합니다.

  • react
  • typescript
  • next.js
mins 댓글 2 좋아요 0 조회수 491

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

<Row title="Netflix ORIGINALS" id="NO" fetchUrl={requests.fetchNetflixOriginals} isLargeRow > </Row> <Row title="Trending Now" id="NO" fetchUrl={requests.fetchTrending} > </Row> return ( <section className="row"> <h2>{title}</h2> <div className="slider"> <div className="slider__arrow-left"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft -= window.innerWidth - 80 }}>{"<"}</span> </div> <div id={id} className="row__posters"> {movies.map((movie) => ( <img key={movie.id} className ={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name} > </img> ))} </div> <div className="slider__arrow-right"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft += window.innerWidth - 80 }}>{">"}</span> </div> </div> </section> ) 넷플릭스 오리지널에서는 슬라이드가 제대로 동작합니다. 그런데 아래 row들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
samkookji12 댓글 1 좋아요 0 조회수 210

Next.js 15에서 Material Tailwind 설정

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

# Material Tailwind 와 연관된 라이브러리 설치 npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save npm install @tailwindcss/typography autoprefixer --save-dev 지난주 공개된 next.js 15에서 Material Tailwind 설정하려니 안되서 도움 부탁드립니다. 아직 초보라 이런 부분들이 개인적으로 좀 어렵네요~~^^;

  • firebase
  • next.js
  • tailwind-css
  • react-query
  • supabase
bibipapa 댓글 2 좋아요 0 조회수 738

인기 태그

인프런 TOP Writers

주간 인기글