172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
PS C:\Users\Master\Desktop\onbite-next> npm run dev npm ERR! Missing script: "dev" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: C:\Users\Master\AppData\Local\npm-cache\_logs\2024-11-18T14_22_23_262Z-debug-0.log 이런 오류가 발생했습니다..
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 9.4 강의 최적화 후 배포 빌드때 문제가 발생했습니다. - 에러메시지 book/[id]/page.tsx 소스코드 server는 이미 배포가 되어있고.. vercel 서버 URL도 환경설정 잘 적용된거 확인했고. 로컬에서 npm run build까지 잘되었는데 혹시 any타입 빌드를 해결하려고 (.)book/[id]/page.tsx에서 이런식으로 프롭스를 넘겨서 발생한 문제일까요..?
미해결
한 입 크기로 잘라먹는 Next.js
스트리밍은 Fetch 등 서버 컴포넌트에서 비동기 실행되는 것들이 완료되기 전에 로딩 화면 같은 것을 보여주는 것이라 이해했습니다. 그렇다면, 스트리밍을 사용하기 않는다면 API를 호출하고 이를 기다린 후, 이에 대한 데이터가 HTML에 포함되어 SEO에 도움을 줄 것 같은데요. 스트리밍을 사용한다면 HTML에 로딩 데이터가 보여집니다. 이를 해결할 수 있는 방법이 있나요? 아니면, 이는 SEO를 고려하지 않는 곳에서 사용해야 하는 기법인지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
PS C:\Users\Master\Desktop\onebite-books-server-main> npx prisma db push Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "postgres", schema "public" at " aws-0-ap-northeast-2.pooler.supabase.com:6543 " 이렇게 뜨고 성공했다는 문구는 안 뜹니다..
해결됨
Next + React Query로 SNS 서비스 만들기
https://github.com/ZeroCho/z-com/blob/master/src/auth.ts#L16 배포하신 깃헙에서 궁금한점이 생겨서 질문드립니다 1. signOut에서 백엔드로 로그아웃 요청만 보내고 authorize()처럼 쿠키값을 set해주지 않았으니 connect.sid는 남아있는게 맞나요? 2. next auth 세션값이 지워지면서 프론트서버와 인증이 끊기는데 프론트서버에서 굳이 백엔드로 요청을 보내는 이유가 뭘까요? 백엔드 서버에 로그 남기기 위해서인가요?
해결됨
[React 2부] 고급 주제와 훅
안녕하세요. 강사님! 학습 중에 궁금한 점이 생겼는데, 제가 이해하고 있는 내용이 맞는지 궁금해 질문 드립니다! const obj1 = { a: 1 }; const obj2 = { a: 1 }; const obj3 = obj1; console.log(obj1 === obj2); // false console.log(obj1 === obj3); // true 자바스크립트에서 객체나 배열을 비교할 때 기본적으로 참조를 비교하는 것으로 알고 있습니다. 즉, 1번에서 두 객체가 같은 값을 가지고 있으나 메모리 주소가 달라 false를 출력하고, 2번에선 같은 메모리 주소를 참조해 true를 출력하는 것으로 알고 있습니다 여기서부터 제가 궁금했던 내용입니다! 캐시된 filteredPosts를 사용해 렌더링하는 경우를 가정했을 때 : const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag]); filteredPosts는 useMemo를 통해 filterPosts 함수로 생성된 배열을 클로저 공간에 넣어두고, posts와 tag가 변경되지 않는다면 항상 똑같은 값을 FilteredPosts로 전달 => <FilteredPosts posts={filteredPosts} /> const FilteredPosts = MyReact.memo(({ posts }) => { ... } // FilteredPosts는 캐시된 filteredPosts를 memo 함수로 전달 => function memo(TargetComponent) { return (nextProps) => { ... const [prevValue, prevProps] = TargetComponenet.memorizedState; if (prevProps === nextProps) { return prevValue; } ... } } 그럼 여기 전달된 nextProps(캐시된 filteredProps)는 당연히 같은 메모리를 참조하니 깊은 비교 없이 참조 비교만으로도 비교가 가능하지 않나? 싶었습니다. filteredPosts는 결과적으로 useMemo로 캐시되어있고, 새로 생성된 배열이 아니니 메모리 주소가 동일해 prevValue가 리턴되지 않을까? 했는데 아니더라구요.. useMemo를 통해 filteredPosts 배열의 참조는 동일하게 유지되고 있는건 맞는데, { posts: filteredPosts } 이렇게 FilteredPosts 컴포넌트에 전달되는 props 객체가 매번 새로운 객체로 생성돼서 그런건가? 싶은데 이게 맞는지 궁금해서 질문 드립니다..
미해결
따라하며 배우는 리액트 네이티브 기초
강의에서 <android:exported="false"> 부분 이후 안드로이드 실행시 Execution failed for task ':app:checkDebugDuplicateClasses'. 오류가 나면 gradle.properties 파일에 아래 부분을 추가해보세요 android.useAndroidX=true android.enableJetifier=true
미해결
따라하며 배우는 리액트 네이티브 기초
선생님 이다음 remote push 부분 강의가 없습니다. 누락된걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
form으로 put, patch, delete 요청이 안되는걸로 알고있는데 그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 putty 터미널에서 vi로 vi /etc/nginx/sites-.../ 에서 수정하는데 저는 다음과 같은 화면이 나옵니다. ㅠㅠ 이거 왜 이런건가 요
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님께서 올리신 완성본 코드를 깃허브에서 다운받아서 결과를 보고싶은데, 지도상에 음식점들의 핀이 뜨지 않습니다 ㅠ 아마 sql상에 더미 데이터들이랑 연결이 안되어서 그런것같은데 지도상에 마커들이 뜨게 하려면 어떻게 해야할까요 도와주세요
해결됨
한 입 크기로 잘라먹는 Next.js
Next.js로 사전 렌더링을 하여 서버에서 html을 채워서 클라이언트에 응답해줄때 초기로딩 속도가 빨라진다는 개념은 이해가 됩니다. 다만, 제가 확인하고 싶은 부분은 다음과 같습니다. Next.js로 SSR을 구현할때 API 요청과 같이 서버에서 동적인 데이터를 통해 html을 채워서 응답하는 경우에는 요청마다 서버에서 JS를 실행해야 할 것입니다. 이 경우에 CSR보다 초기 로딩 속도가 빠르다고 장담할 수 있나요? (FCP, TTI 모두 어떤 상황에서든 우세할까요?)
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
[nodemon] 3.1.7 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: js,mjs,cjs,json [nodemon] starting node index.js [nodemon] app crashed - waiting for file changes before starting... 다음과 같은 오류가 발생하는데 어떻게 해결해야하나요 ㅠ
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
auth.ts에서 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) console.log(token) //쿠키 저장 res.set("Set-Cookie", cookie.serialize('token', token)); return res.json({user, token}); token은 잘 찍히고 요청 헤더에 포함되어 있는데 TypeError serialize 부분에서 에러가 뜨고 실제 응답 에러가 납니다.... 쿠키 저장이 안되는 것 같습니다. serialize가 undefine 되었다는데 위에 const token으로 제대로 선언되고 출력까지 잘 되는데 이유를 모르겠습니다...
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
아래 질문 관련입니다. server.ts origin 부분을 강사님처럼 다음과 같이 작성하면 header 오류가 납니다. const origin = process.env.ORIGIN; app.use(cors({ origin, credentials: true })) 근데 아래처럼 const origin을 다음과 같이 환경변수를 거치지 않고 명시하면 헤더 오류 대신 500 오류가 나면서 토큰이 생성되지 않습니다. (로그인 페이지에서 로그인 시) const origin = 'http://localhost:3000'; app.use(cors({ origin, credentials: true })) 서버에서 process.env.ORIGIN, process.env.JWT_SECRET을 찍어봤을땐 잘 나오는데... 이 이유로 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) 이 명령줄이 제대로 실행되지 않는 걸까 싶어 process.env.JWT_SECRET를 'super_secret'으로 바꿔봐도 똑같은 증상입니다. 확실하진 않지만 이 때문에 토큰 생성에 오류가 생겨서 500 에러가 뜨는 것인가 싶은데 어떻게 해결하면 좋을까요?
미해결
손에 익는 Next.js - 블로그 만들기
우선 강의 잘 봤습니다. nextjs와 관련된 질문들이 있습니다. SSR,CRS,SSG,PPR,ISR 등은 만약 실무에서 투입한다면 개발자들이 렌더링이 어떻게 되어야한다는 도메인 지식이 있는하에 결정하는건가요? 그리고 블로그성 개발 관련 질문입니다. 이 블로그라는게 어떻게 개발하고 만드냐는 여러가지 방법이 있겠지만 현 강의 처럼 mdx 파일에 직접 포스트를 기재를 하고 빌드해서 배포하고 올린다? 가 있고, CRUD를 구현해 블로그성 홈페이지를 만드는 방법이 있겠는데 보통 개발자분들은 어떤 방법으로 블로그를 만드는지 궁금합니다. (개인적인 의견으로 답변주심 감사하겠습니다(_ _). 그리고 만약 mdx파일로 한다고 하면, md파일을 직접 작성해서 올리는것 말고 티스토리와 일반 블로그같은 UI를 생성해서 mdx파일로 올릴수있는지?도 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 리액트를 공부하기 위해 어제 처음 등록을 했서 잘 듣고 있습니다. 강의에 대한 질문은 아니지만 수업준비관련해서 비주얼스튜디오 부분에 대해 질문이 있는데 제가 현재 맥북으로 사용하고 외장하드를 연결해서 이 외장하드에 폴더를 만들어 사용하고 있는데 어느순간 파일을 만들거나 리액트를 설치할때 파일명앞에 이미지처럼 ._ 이런식으로 붙더라구요. 삭제하면 또 생겨서 구글링을 통해 찾아봤지만 해결이 되지 않았습니다. 혹시 방법이 없을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
강의를 들어보니 React Query와 꽤 비슷한 부분이 많다고 생각되서 혹시 대체할 수 있을까 생각이 들었는데요. 정환님은 어떤 생각을 가지고 계신지 궁금하여 질문 드립니다. 만약 App Router로 새로운 프로젝트를 구축해야 한다고 하면 React Query를 사용하실건가요?
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
Congratulations! Your Docker Container is now running in Elastic Beanstalk on your own dedicated environment in the AWS Cloud. This environment is launched with Elastic Beanstalk Docker Platform Video Tutorials YouTube: Run a Docker Container from the Docker Registry YouTube: Use Private Docker Repositories Sample Apps GitHub: PHP and Amazon RDS GitHub: Python, DynamoDB, and SNS Documentation Deploying Docker with AWS Elastic Beanstalk AWS Elastic Beanstalk overview AWS Elastic Beanstalk concepts 이러한 화면이 나오는데 이것도 성공한 것인가요? 아니면 제가 배포한 화면이 나와야 하지 않나요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
postgres 주소는 오프라인 강의 시에만 제공하고 온라인은 제공을 하지 않는다고 이해했는데요. 해당 부분으로 대체 가능한 방법과 postgres 없이 graphql만 실행하여 강의를 따라가도 지장이 없는지 궁금합니다. 이후 강의에는 데이터 처리하는 부분이 포함되어있는 것 같은데요. 해당부분 확인 바랍니다!
