강사님 안녕하세요. 강의 잘 듣고 있습니다! 강사님께서는 스타일링을 하실때 리액트 네이티브 기본 styleSheet를 사용 해서 개발하시는데, 현재 강의에서 개발하는 토이프로젝트 규모의 앱이 아니라, 실제 서비스용 앱을 개발하실때에도 기본 styleSheet를 사용해서 개발하시는지 아니면 다른 외부 라이브러리를 사용해서 개발하시는지 궁금합니다! next.js 나 react 에서는 생산성이나 기능적인 부분때문에 다양한 라이브러리를 사용하는 경우가 많은데, 리액트 네이티브에서는 기본 스타일만으로 충분한지 조언들 듣고 싶습니다. 감사합니다!
안녕하세요 Next app router 관련해서 질문드립니다. 현재 사이드프로젝트에서 route handler를 적극활용하고 있는데요. 제가 인프라나 백엔드 관련 지식이 없다보니 좀 헷갈리는게 있습니다. 현재 저희 서비스에서 특정 API는 클라이언트 컴포넌트에서 route handler로 API 호출 -> route handler에서 외부 백엔드 API 호출 이런 형태로 사용되고 있는데요, 이때 실제로 route handler 서버가 아래의 사진 중 어느 형태로 운용되는 것인가요? 즉, Next 프로젝트를 배포했을 때 각 유저마다 route handler 서버가 할당되는 것인가요? 아니면 모든 유저의 요청을 오직 하나의 route handler서버에서 대응하는 것인가요? 아니면 이게 배포 환경에 따라 달라지는것인가요?
초기 설치 시 취약점 발생 ``` npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated superagent@8.1.2: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net added 795 packages, and audited 796 packages in 7s 122 packages are looking for funding run npm fund for details 18 vulnerabilities (4 low, 5 moderate, 9 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run npm audit for details. ``` 이후 ```npm audit fix``` 실행 후 두 번째 취약점 발생 ``` # npm audit report multer 1.4.4-lts.1 - 2.0.0 Severity: high Multer vulnerable to Denial of Service via unhandled exception - https://github.com/advisories/GHSA-g5hg-p3ph-g8qg fix available via npm audit fix --force Will install @nestjs/platform-express@8.2.3, which is a breaking change node_modules/multer @nestjs/platform-express >=8.2.4 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of multer node_modules/@nestjs/platform-express @nestjs/core >=9.0.0-next.1 Depends on vulnerable versions of @nestjs/platform-express node_modules/@nestjs/core @nestjs/serve-static 2.0.0-next.1 - 2.0.0 || >=3.0.0 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of path-to-regexp node_modules/@nestjs/serve-static @nestjs/testing >=9.0.0-next.1 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of @nestjs/platform-express node_modules/@nestjs/testing path-to-regexp 0.2.0 - 1.8.0 Severity: high path-to-regexp outputs backtracking regular expressions - https://github.com/advisories/GHSA-9wv6-86v2-598j fix available via npm audit fix --force Will install @nestjs/serve-static@5.0.3, which is a breaking change node_modules/@nestjs/serve-static/node_modules/path-to-regexp 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force ``` 취약점 6개 발생 이후 안사라지길래 npm audit fix --force 진행해도 6개 그대로 나오는 현상 발생 현재 node 23.7, npm 10.9.2 사용중인데 gpt한테 물어보니 nest js 버전 어쩌구 하던데 서버는 잘 몰라서 건들지를 못하겠네요. 어떻게 해야 할까요? ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요)
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요? 컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다. 프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다. 컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요
안녕하세요. 린캔버스 수정 수업 관련해서 질문이 있어서 문의 드립니다. const handleCanvasChange = async updatedCanvas => { try { await updateCanvas(id, updatedCanvas); setCanvas(updatedCanvas); } catch (err) { alert(err.message); } }; addNote, deleteNote, updateNote 등의 이벤트가 발생할 경우 setCanvas를 통해 useState에 선언된 canvas 값을 바꾸는데 그렇게 되면 CanvasDetail과 그 하위에 선언된 자식 컴포넌트들이 전부 리랜더링되는 것 같은데 강의에서는 그렇게 보이지 않아서 문의 드립니다. const [canvas, setCanvas] = useState(); canvas가 setCanvas 메서드를 통해서 상태가 변하면 리랜더링 되면서 하위 컴포넌트인 Note의 isEditing 값이 다시 false로 초기화되는데 강의에서는 여전히 true값이 남아있는 것 같습니다. 전체적인 코드를 동일하게 작성한 것 같은데 차이점이 발생하는 이유가 무엇일까요?
안녕하세요 제로초님 fetch 캐싱과 revalidate 관련해서 궁금한 점이 있어 질문드립니다. await fetch('https://api.example.com/posts', { next: { revalidate: 60 }, }); A가 /posts를 최초 요청합니다. → API에서 데이터를 받아오고, 해당 데이터는 Next.js 서버 캐시에 저장 이후 60초 동안은 다른 누구든지 이 캐시된 데이터를 그대로 받음 그런데 60초가 지나기 전에 DB에서 게시글 1번의 제목이나 내용이 수정 됨 60초가 지나고 A가 다시 목록을 요청 → 이 시점은 revalidate 만료 시점 이후이므로 재검증 타이밍 → 하지만 A는 여전히 이전 캐시 데이터를 먼저 받고 , → A의 요청을 계기로 Next.js가 백그라운드에서 API를 다시 fetch하여 캐시를 갱신 곧이어 B가 /posts를 요청하면 → B는 A 덕분에 갱신된 최신 데이터를 바로 받음 제가 이해한 것이 맞을까요? 만약 저런식으로 동작하면 상세 페이지와 데이터 불일치 문제가 발생할 수 있지 않을까 해서요 만약 상세 페이지 요청도 이렇게 작성되어 있다면 await fetch('https://api.example.com/posts/1', { next: { revalidate: 60 }, }); A는 목록 요청만 했고, 상세 페이지는 요청하지 않음 B는 A 이후에 목록을 보고 → 최신 제목을 확인한 뒤 , → 게시글 1번의 상세 페이지를 클릭 그런데 상세 페이지의 제목은 여전히 수정 전의 이전 제목 으로 보임 → 목록과 상세 페이지 간에 데이터가 불일치 할 수 있음 정리하자면 제가 이해한 Next.js의 fetch + revalidate 캐시 동작이 맞는지 궁금하고 위와 같은 목록-상세의 데이터 불일치 현상은 실제로 발생 가능한 문제인지 궁금합니다. 제가 실제로 테스트해봤을 때 위 시나리오대로 목록과 상세 페이지에서 서로 다른 제목이 보이는 걸 확인했습니다. 혹시 제가 잘못 이해하고 테스트한 부분이 있는 건지, 아니면 실제로도 발생할 수 있는 동작인지 궁금합니다.
안녕하세요. 강의를 어떤 방식으로 듣는 것이 가장 효율적인지 여쭤보고 싶습니다. 처음 page.tsx를 만들 때는 하나하나 따라 만들며 진행했지만, 중간부터는 급하게 따라가기만 하다 보니 시간도 오래 걸리고, 오히려 비효율적이라는 생각이 들었습니다. 또한 수업 자료의 GitHub를 보면 각 폴더 설명에 "따라치기 위해 보면 안 된다"고 안내되어 있어서, 제가 잘못된 방식으로 수강하고 있는 건 아닌지 고민이 됩니다. 그리고 ch0~ch4 강의 이후의 코드를 올려주신 것은, 강의를 들으면서 이해가 안 되거나 따라가지 못한 부분이 있을 경우 해당 코드를 참고하거나 다운로드해서 사용해도 괜찮다는 의미일까요? 또한 강의 초반에 GitHub에서 해당 폴더로 들어가 복사하고, 설명을 들으며 진도를 나가는 방식이라고 말씀하신 것을 보았는데, 그렇다면 굳이 모든 코드를 따라 치기보다는 전체 코드를 먼저 불러온 뒤 실행해두고, 강의를 들으며 흐름과 설명 위주로 이해하는 방식으로 수강해도 괜찮을지 궁금합니다. 지금처럼 따라치며 수강하려다 보니 상대적으로 시간이 많이 소요되고, 비효율적일 수 있다는 생각이 들어 이렇게 문의드립니다. 이에 대해 보다 효율적인 수강 방법에 대해 조언해주시면 감사하겠습니다.
안녕하세요! 40강 관련 질문입니다. 강의에서 로그인 하는 방식을 두 가지 알려주셨습니다. 서버액션 사용 서버액션 미사용 서버액션 미사용해서 구현할 때 tanstack query 의 mutation 을 사용하는 방식도 좋지 않을까 생각을 하는데요, 로그인 버튼에 loading 처리를 하거나 등 의 이유로요! 근데 제로초님은 useState 만 쓰셨는데, 간단하게 보여주기 위해서 그렇게 하신걸까요? 로그인/회원가입에 tanstack query 를 사용하는 것이 추천하는 방식은 아닌걸까요?? 제가 강의 들으면서 개인프로젝트에 적용하고 있어서, 어떤 방식이 좋은지 고민이 돼서 여쭙니다!
