173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 ! 강의를 듣기전부터 궁금했던 내용인데 강의를 듣고나서도 답을 찾지 못해서 질문을 남깁니다..! 개발자도구 > Network 탭 > 문서 > 응답 이나 소스보기 에 서버사이드에서 불러온 데이터가 HTML 로 만들어져있으면 SEO 에 영향을 주는 데이터라고 알고 있어요 제가 혼자 테스트해보려고 만든 스트리밍에서는 <script /> 내부에만 서버 사이드에서 패치한 데이터가 들어가있고 HTML 로 만들어지지는 않았더라고요 ( 아마 <script /> 에 있는 정보가 RSC Payload 겠죠..? ) 그래서 이게 SEO 에 영향이 가는 데이터일지 궁금해서 여기저기 찾다가 발견한 Next Playground 에서는 HTML 로도 만들어지고 <script /> 에도 들어가있더라고요 최종적으로 궁금한것은 <script /> 에만 들어있는 스트리밍된 데이터도 SEO 에 영향을 주는지 가 궁금해요 그리고 영향을 주든 안주든 이런 정보는 어디서 찾아봐야하는지 어떻게 검증하는지 알고 싶습니다..! ( 참고로 Playground 에서 패치하는 첫번째 리스트의 이름인 Fusce commodo porta 로 확인해봤습니다! )
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 등록되어 있는 리뷰를 삭제하기를 누르게 되면 "Error: Internal Server Error" 에러가 발생합니다 백엔드 로컬 서버 콘솔에서는 아래의 사진과 에러 메세지가 뜹니다 해결했습니다!
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 덕분에 next.js를 깊게 공부할 수 있었습니다. next.js는 기존 리액트와 다르게 jsbundle(청크) 파일을 나누어 받아 옵니다. 강의에서 본 것처럼 청크 파일들이 각각의 유니크한 해쉬 값을 가지는 것도 확인했습니다. 시나리오 next 프로젝트를 빌드 배포 된 웹페이지를 오픈 next 프로젝트를 다시 빌드 기존의 웹페이지를 새로고침 하지 않고, 페이지 이동 기존 리액트 프로젝트에서는 하나의 청크 파일을 처음 한 번에 받아서 새로고침 전까지 1번의 이전 빌드된 웹페이지로 동작이 되는 것으로 알겠는데요. next프로젝트에서는 jsbundle과 rsc_payload를 필요한 시점에 받으니까 새로 빌드한 파일엔 기존 청크해시 값과 달라서 문제가 생기지 않을까? 라는 생각이 들었습니다. 그런데 테스트 해보니 별다른 문제가 생기지 않는 것 같더라구요.. jsbundle과 rsc_payload의 유니크한(해쉬) 파일 이름이 도중에 변경 되더라도 next 서버측에서 찾을 수 있게 조치가 되어 있는 걸까요?
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
안드로이드 버전 14 해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고 홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요 npx create-next-app@14 section02 설치 후 (강의 8분49초), npm run dev 실행후 브라우저에 localhost:3000 입력했더니 이미지가 깨져서 나옵니다. 해당 프로젝트를 지우고 다시 설치해도 그대로입니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 강의와 관련없는거 알지만 혹시나해서 문의남깁니다. 현재 강의 구매한 분들 대상으로 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의 90% 할인해서 구매할 수 있었던 것으로 기억하는데, 이미 기간이 끝난거 알지만 지금이라도 할인된 가격으로 구매할 수 있을까 해서 문의남깁니다.
미해결
Next + React Query로 SNS 서비스 만들기
강의와 같이 구현한다면 page.tsx 에서 데이터 fetch PostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용 이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ? 제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요. 이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠? 아 강의는 " 클라이언트 react-query" 입니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 6.5 에러 핸들링 강의를 들으며 실습을 진행하고 있는데 브라우저에 http://localhost:3000을 접속하면 "지금 추천하는 도서"에 캐시를 사용안하는데 데이터가 조회가 되고 있습니다. 코드를 잘못적었을까봐 깃허브에 올려주신 소스로 개발서버 실행해도 같은 상황입니다.
해결됨
핸즈온 리액트 네이티브
안드로이드는 빈 하얀화면과 아이폰 빈 까만화면으로 나오는데 버전문제인지 도저히 모르겠어서 질문드립니다... 처음에 실행했을 때 로그에 "react-native-safe-area-context": "^4.12.0", "react-native-screens": "^4.4.0" 이 두 부분 버전때문에 제대로 실행이 안될수도 있다고 expected 되는 버전이 나와서 저 두 부분을 npm uninstall 후 expected 버전으로 수정한후 실행한건데도 그대로 빈화면이 출력됩니다.... 7.3 AuthStack 컴포넌트 만들기 부분에서 화면 출력(SignInScreen부분)이 안되는 상태입니다 실행시 vscode 로그화면 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS) › Using Expo Go › Press s │ switch to development build › Press a │ open Android › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › shift+m │ more tools › Press o │ open project code in your editor › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit. Android Bundled 1325ms index.js (878 modules) (NOBRIDGE) LOG Bridgeless mode is enabled INFO 💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
eas와 notification 설정 후에는 로그인 시에 android emulator 상에서 코딩해주신 대로 '실제기기를 사용해주세요' 문구가 나옵니다. ios 는 개발자모드 설정을 구매해야 한다고 해서 기기는 안드로이드로 진행하려고 하는데 android 기기가 따로 없고 emulator 로는 실행이 안되는 걸까요? expopushToken만 보내고 로그인이 되지는 않습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님, 질문이 있어서 남깁니다. 만약 book/4를 URL로 요청하면 과정이 URL로 book/4 요청 시 Link 등이 없으므로 프리페칭은 안됨 - 서버에서 JS 실행 (렌더링) - 렌더링 된 HTML 브라우저에 넘김 - 브라우저에서 화면에 렌더링 - 서버에서 JSBundel, RSC payload 브라우저에 넘김 - 수화과정 - 상호작용 가능 이게 맞나요? book/1~3은 staticPage로 풀라우트캐시되어있으니 URL로 요청하면 풀라우트캐시에서 바로 HIT해서 주는거고요?
미해결
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. ( 일부만 자르거나 일부만 복사하지말아주세요 .) 현재 3가지 문제가 있는데 1. PC 로 url 클릭시 현재 로그인 까진 잘뜨는데 확인하고 계속하기를 누르면 사이트에 연결할수 없다고 뜹니다. 어떤걸 확인해야되는걸까요? 2. 안드로이드랑 ios 시뮬레이터에서 맨위에 로그인 화면 부터 하얀화면으로 뜨고 있는 상황입니다. 피씨로 url 클릭하면 저렇게 잘보이긴해요. rest 키 제대로 들어갔고 redirect url 에 추가 잘했는데 왜그런지 감이 안잡힙니다.. 3. 아이폰이나 안드로이드 폰에서 직접 테스트해보고 싶은데 어떻게 하면 되는지 알수 있을까요?
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
안녕하세요! 선생님 글쓰기 누르고, 제목, 내용 밑에 카메라 모양 눌러서 사진을 추가하면 사진이 매우 느리게 뜹니다... 혹시 이건 왜 그런건가요??
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 강의 잘 듣고 있습니다! suspense태그 관련 질문이 있습니다! 5.2 풀 라우트 캐시2 강의에서 저희가 useSearchParams() 훅이 빌드타임에서 실행되는 오류를 없애기 위해 <SearchBar/ > 컴포넌트를 suspense로 감싸잖아요 이때 강의 4분45초 쯤에서 사전 suspense를 사용해서 이제 사전 렌더링 과정에서 완전히 배제한다고 하셨는데, 그러면 페이지를 만들때 suspense로 감싼 컴포넌트는 nextjs app router방식이 아니라 csr방식으로 구현이 되는건가요 나머지 컴포넌트들만 approuter의 사전 렌더링 방식으로 구현이 되는건가요?? 제가 정리했을땐 동적 페이지도 정적 페이지도 사전렌더링의 시점은 다르지만 (요청할때, 빌드할때) 사전렌더링이라는 기능은 nextjs에서 기본으로 작동한다고 알고 있습니다! 그래서 사전렌더링에서 완전 배제된다는 부분이 헷갈려서 질문 남깁니다!
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. ( 일부만 자르거나 일부만 복사하지말아주세요 .) 강사님 혹시 내위치 이동을 하면은 강사님은 서울특별시로 이동이 되는데, 코드 틀린거없고 깃허브 소스코드까지 다시 확인했는데 미국으로 이동하는 이유가뭔가요? 윈도우 안드로이드 유저입니다
해결됨
한 입 크기로 잘라먹는 Next.js
fetch 부분에서 다음과 같이 작성하였는데 params.id부분에서 id 부분에 Property 'id' does not exist on type 'Promise<{ id: string | string[]; }>'.ts(2339) 이러한 에러가 발생합니다. const result = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` );
미해결
한 입 크기로 잘라먹는 Next.js
어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요? 새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
"resource": "/c:/Porject/ReactNative/lottoApp/front/src/features/map/hooks/queries/useGetInfinitePosts.ts", "owner": "typescript", "code": "2322", "severity": 8, "message": "Type 'unique symbol | QueryFunction<ResponsePost[], readonly unknown[], number>' is not assignable to type 'QueryFunction<ResponsePost[], readonly unknown[], number> | undefined'.\n Type 'typeof skipToken' is not assignable to type 'QueryFunction<ResponsePost[], readonly unknown[], number>'.", "source": "ts", "startLineNumber": 22, "startColumn": 5, "endLineNumber": 22, "endColumn": 12, "relatedInformation": [ { "startLineNumber": 28, "startColumn": 5, "endLineNumber": 28, "endColumn": 12, "message": "The expected type comes from property 'queryFn' which is declared here on type 'UseSuspenseInfiniteQueryOptions<ResponsePost[], ResponseError, InfiniteData<ResponsePost[], number>, ResponsePost[], readonly unknown[], number>'", "resource": "/c:/Porject/ReactNative/lottoApp/front/node_modules/@tanstack/react-query/build/modern/types.d.ts" } ] }] 라는 오류인데 queryfn이랑 skiptoken이랑 겹친다는 식으로 이야길하는것같은데 영상에서는 딱히 오류가없어서요.. import {queryKeys} from '@/app/config'; import {getFavoritePost, ResponsePost} from '@/shared/api'; import {ResponseError} from '@/shared/types/common'; import { InfiniteData, QueryKey, UseInfiniteQueryOptions, useSuspenseInfiniteQuery, } from '@tanstack/react-query'; const useGetInfiniteFavoritePosts = ( queryOptions?: UseInfiniteQueryOptions< ResponsePost[], ResponseError, InfiniteData<ResponsePost[], number>, ResponsePost[], QueryKey, number >, ) => { return useSuspenseInfiniteQuery({ queryFn: ({pageParam}) => getFavoritePost(pageParam), queryKey: [queryKeys.POST, queryKeys.FAVORITE, queryKeys.GET_FAVORITE_POST], initialPageParam: 1, getNextPageParam: (lastPage, allPages) => { const lastPost = lastPage[lastPage.length - 1]; return lastPost ? allPages.length + 1 : undefined; }, // select: data => data.pages, ...queryOptions, }); }; export default useGetInfiniteFavoritePosts;
