173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강사님 React 로 CSR 개발/배포된 시스템을 운영해본 적이 있는데요. nginx 가 단순히 정적 파일들만 클라이언트로 전달하니 서버 성능을 생각할 필요가 전혀 없었습니다. 그런데 Next.js 강의를 들으면서 SSR/SSG 에 대한 설명을 듣고나니 이 경우에는 서버 성능이 중요할 것 같다는 생각이 드네요. SSR/SSG 는 사용자 요청량이 증가하는만큼 서버 스펙도 확장될 수 있는 고민들이 필요한가요?
미해결
처음 만난 리덕스(Redux)
state 변화에 따른 ui를 렌더링 할 때 render 함수 내부 코드가 매우 방대할 경우 보편적으로 어떤 로직 처리를 하는지 궁금합니다. (memo만 추가했지만, memo 렌더링 코드외의 다른 관련없는 렌더링 코드들이 방대할 경우입니다.) 강사님 좋은 강의 감사합니다!! 많이 배우고 있습니다 :)
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
spring boot 3.3.2도 호환되나요?
미해결
자바스크립트 제대로 배워볼래?
안녕하세요 강의 잘 수강하고있습니다! 저번 강의에서 bigNumber 라이브러리, 이번강의에서 moment라이브러리 설명을 해주셔서 사용하다가 문제가 생겨 질문드립니다. 두 라이브러리모두 cdn방식으로 사용을하면 잘 됩니다. 그치만 두 라이브러리 모두 npm으로 설치를 하여 사용하려고 시도를 하니 에러가 뜹니다. moment라이브러리의 경우, 설치를 다 하고난 뒤, script 태그 안에 import moment from 'moment'를 작성하고 사용하려고 하자, SyntaxError: Unexpected identifier 'moment'. import call expects one or two arguments. 라는 오류가 뜹니다. 코드는 이런식으로 짰는데 어떤 점이 문제일까요?
미해결
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
this.template = () => 에서 temp에 태그들을 넣어주고 하는 부분에 input에는 클로징태그가 필요없는 건가요? 클로징태그를 작성시 input에 value에 자동으로 /값이 들어가게 되는 상태가 되어 클로징태그가 필요 없는 부분인가? 필요 없는 이유는 무엇인지..에 대한 궁굼증이 생겨 질문드립니다 <div class='search'> <input type="text" placeholder="Search" id="search" autocomplete="off" value=${searchWord} > </div>
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
오류코드: (venv) PS C:\workspace\melon_clone> python manage.py migrate music not found: C:\workspace\melon_clone\.env Operations to perform: Apply all migrations: music Running migrations: No migrations to apply. (venv) PS C:\workspace\melon_clone> 이렇게 조회하면 sql문장 다 나오는데 이제 migrate가 적용이 안됩니당.. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
Node.js로 웹 크롤링하기
const browser: Browser = await puppeteer.launch({ headless: true, args: ['--remote-debugging-port=9222', '--no-sandbox', '--disable-setuid-sandbox'] }); const page: Page = await browser.newPage(); 크롤링 만들고 있습니다! 헤드리스를 true로 해봐도, 아예 없애봐도, 아래 args 를 이것저것 달아봐도 크롤링을 시작하면 아래 창과 크롬은 안뜨나 화면에 이렇게 크게 빈화면이 나옵니다.. 저만 그런가요? 이거 없애는 방법이 뭘까요 ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의를 듣는중 추가적으로 tanstack-query를 공부하다가 혼자서 도저히 이해를 할수 없는 부분이 있어서 이 부분에 대해 혹시 조언을 받을수 있을까 싶어 문의드립니다. prefetchQuery가 개인적으로 잘 이해가 안되어서 별도로 프로젝트를 생성하여 기본적인 것부터 다시 공부하고 있었습니다만, tanstack-query 공식사이트에서 권장하던 방법대로 임의적으로 코드를 생성하였더니 router.push()로 다른 페이지에 갔다가(->홈으로[/]) 다시 돌아오는것(->Post페이지(/post))을 반복하다보면 가끔 서버 컴포넌트에 있는 prefetchQuery안의 fetch와 클라이언트 컴포넌트에 있는 useQuery의 fetch가 동시에 실행이 되는 일이 가끔 발생을 해서요. fetch가 이중으로 실행이 되고 있는것 같은데 아무리 코드를 살펴봐도 제가 잘못한 부분을 찾을수가 없어서 조언을 구합니다ㅠ page.tsx import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import Post from './_component/Post'; import getPostRecommends from './_hook/fetch'; export default async function tanstackQuery() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Post /> </HydrationBoundary> ); } post.tsx 'use client'; import { useQuery } from '@tanstack/react-query'; import getPostRecommends from '../_hook/fetch'; import { useRouter } from 'next/navigation'; export default function TanstackQuery() { const { data } = useQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const router = useRouter(); type PostItem = { id: number; title: string; }; return ( <div> <button onClick={() => router.push('/')}>홈으로</button> {data?.map((item: PostItem) => { return ( <div key={item.id}> <h2>{item.title}</h2> </div> ); })} {data?.message} </div> ); } getPostRecommends export default async function getPostRecommends() { if (typeof window === 'undefined') { console.log('서버에서 fetch 실행' + new Date()); } else { console.log('클라이언트에서 fetch 실행' + new Date()); } const response = await fetch('https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10', { cache: 'no-store', }); if (!response.ok) { throw new Error('Failed to fetch data'); } const res = await response.json(); return res; } 기본 provider 설정 'use client'; import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactNode } from 'react'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 6 * 1000, }, }, }); } type Props = { children: ReactNode }; let browserQueryClient: QueryClient | undefined = undefined; function getQueryClient() { if (isServer) { return makeQueryClient(); } else { if (!browserQueryClient) browserQueryClient = makeQueryClient(); return browserQueryClient; } } export default function Providers({ children }: Props) { const queryClient = getQueryClient(); return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools /> </QueryClientProvider> ); } 서버 콘솔 브라우저 콘솔 위에 캡쳐화면 같이 fetch가 거의 동시간에 발생을 하고 있는 모습입니다. next.js router cache 때문에 30초마다 서버 컴포넌트쪽이 리랜더링 되어서 페이지를 새로고침을 하지 않고 router.push로 다시 페이지에 들어가도 서버 컴포넌트쪽이 다시 실행된다는건 이해를 했는데, 그렇다면 초기 랜더링할때와 똑같이 데이터가 prefetch되어서 클라이언트쪽 useQuery가 실행이 되지 않아야하지 않나요? 왜 두번이나 fetch가 도는건지 아무리 자료를 찾아봐도 잘 모르겠어서 결국 문의드리게 되었습니다ㅠ
미해결
MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
몽고db질문입니다. 코드를 따라해보는중 몽고DB에서 데이터부분이 안들어 왔습니다. 어떤부분이 문제인지 궁금합니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
리액트를 배포하려고 하는데 502error -nginx- 가 뜹니다. 환경 개요의 상태는 'Degraded'가 발생합니다. 이벤트의 로고에는 ' Environment health has transitioned from Info to Degraded. Application update completed 28 seconds ago and took 73 seconds. Impaired services on all instances.' 와 같은 문구가 발생합니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요. 02-03 장고 핵심 기능 리뷰 #02 - 폼, 템플릿 강의 수강하다가 템플릿 부분에서 궁금한 점이 있어 문의드립니다. 마지막에 별도의 txt 파일로 나누어 관리를 하면 더 좋다고 말씀해주셨는데, txt 파일을 사용하면 I/O 바운드로 성능 많이 저하될 거 같습니다. 아니면 템플릿 엔진을 사용하면 별도로 메모리로 관련 txt 파일을 들고 있나요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
똑같이 코딩해서 테스트를 했는데 에러가 발생합니다. 이유가 무엇일까요? 똑같이 코딩해도 에러가 발생하니 답답하네요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
리스폰스로 json값이 오는건 이해가가는데 ], "pageNumList": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], "pageRequestDTO": { "page": 5, "size": 10 }, "prev": false, "next": true, "totalCount": 105, "prevPage": 0, "nextPage": 11, "totalPage": 0, "current": 0 } 이값들은 api어느부분에서 전송하는건지 알수있을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유? handleLogout function에서 local storage의 accessToken을 삭제시키고, store의 user 정보만 initial state, 그리고 isAuth 등을 false로 바꾸면 그만일텐데, 왜 server에 요청을 보내는 과정이 필요할까요!?
미해결
MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
질문 있어서 남깁니다. 메인페이지에서 Link를 타고 upload, list 들어가서 화면이 로드 돼야하는데 돼지 않고 하얀바탕으로 돼면서 Error표시 없이 No routes matched location "/list" Error Component Stack가 표시 됍니다. 어떤문제이고 해결 방법이 무엇인지 궁금합니다. Ps. 질문이 이해 안가실것 같아서 스샷 올려놨습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
3.6 네비게이팅 18분 10초 관련해서 질문있습니다. 이전 서버 컴포넌트 강의에서는 상호작용이 없는 페이지는 JS가 없기 때문에 RSC로 HTML을 만들어 보내고, JS 번들은 보내지 않는다고 이해했습니다. 그래서 프로젝트상 /book1/1 페이지는 상호작용이 없는 페이지라 프리페칭 받아도 RSC Payload만 받는게 맞지 않나?라 생각했습니다. 그런데 /book/1 페이지가 동적인 페이지라서 JS 번들을 안 받는다고 말씀하셔서 좀 헷갈립니다. 즉, 말씀하시는 부분이 상호작용이 있는 페이지라도 동적인 페이지라면 RSC만 보내주신다는 말씀인가요??
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
왜 이러는지 알 수 있을까요? 찾아봐도 모르겠습니다... '-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Swagger 사용 가능한 건지 문의드립니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 만들었던 예제를 살펴보는 와중에 section1, section4에서 약간의 문제(?)가 발생하여 질문드립니다. section1에서 스크롤을 올려버리면 다시 스크롤을 아래로 내려도 반응이 없고 아예 먹통이 되어버립니다 section4에서는 스크롤을 아래로 내리면 먹통이 됩니다 혼자 해결해보려고 했으나 감이 오질않아서.. 어떻게 코드를 수정하면 좋을지 질문드립니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의에서 보여주시는 코드와 같이 작성하면 모양이 사진과 같이 나와요 emotion_img_wrapper영역 background-color영역에 emotionName이 안들어가는거 같아요. height를 300으로 늘리면 포함이 되긴해요. width도 같이 300으로 늘리면 다시 안들어가고요
