강의 시간 1분대에서 /api/users/:userId/posts 에서 userId앞에 :를 넣는 것이 일반적인 약속이나 특정한 이유때문에 넣는 것인지 알고 싶습니다. 그리고 search기능을 제공하는 웹사이트에서 검색결과 주소에 물을표를 넣는 이유도 그냥 일반적인 약속 같은 것인지 같이 궁금합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.주소 따라 들어가면 왜 이렇게 되는지 잘 모르겠어요... ㅠㅠ

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다. $ npm installnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: react-scripts@5.0.1npm ERR! Found: typescript@5.3.3npm ERR! node_modules/typescriptnpm ERR! typescript@"^5.3.3" from the root projectnpm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3npm ERR! node_modules/fork-ts-checker-webpack-pluginnpm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1npm ERR! node_modules/react-dev-utilsnpm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR! 1 more (tsutils)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: typescript@4.9.5npm ERR! node_modules/typescriptnpm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR!npm ERR! For a full report see:npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-03-02T03_03_34_358Z-eresolve-report.txt  관련한 안내 좀 부탁합니다.

vite 로 작성한 경우를 마이그레이션 하는데요.강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다.Require stack:\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\next.jsvite\node_modules\next\dist\server\lib\start-server.jspackage.json 은 아래와 같아요.{ "name": "next-migration-02-vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start" }, "dependencies": { "next": "^14.1.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/node": "20.11.24", "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", "vite": "^5.1.4" } } 관련해서 안내좀 부탁드립니다.좋은 주말 되세요~

prefetch를 꼭 써야하는 건가요?써야할 때와 안써도 될 때가 있는건가요??

안녕하세요 선생님 react context를 이해하려고 시도하는 중입니다.const countContext = MyReact.createContext({ count: 0, setCount: () => {}, }); class CountProvider extends React.Component { constructor(props) { console.log("CountProvider construtor"); super(props); this.state = { count: 0, }; } render() { const value = { count: this.state.count, setCount: (nextValue) => this.setState({ count: nextValue }), }; return ( <countContext.Provider value={value}> {this.props.children} </countContext.Provider> ); } } const Count = () => { return ( <countContext.Consumer> {(value) => { console.log("CountComponent", value); return <div>{value.count}</div>; }} </countContext.Consumer> ); }; const PlusButton = () => { return ( <countContext.Consumer> {(value) => { console.log("PlustButtonComponent", value); return ( <button onClick={() => value.setCount(value.count + 1)}> + 카운트 올리기 </button> ); }} </countContext.Consumer> ); }; export default () => ( <CountProvider> <Count /> <PlusButton /> </CountProvider> );Count , Plus Button component return 문에 각각console.log("CountComponent", value); console.log("PlustButtonComponent", value);로그를 남겨봤습니다.사진에 표시 된 것 처럼 로그가 각 Component마다 2번씩 찍히는데 그 이유를 알 수 있을까요...?로그의 value 값이 다른게 힌트 같은데 해석을 하지 못하겠습니다.

react-query ssr 설정하기인데 어느 부분이 ssr 설정인지 잘모르겠습니다 어느부분인가요??export async function getPostRecommends({ pageParam }: Props) { const res = await fetch( `http://localhost:9090/api/postRecommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, } ); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }

조금 있다가 잘 짜는법에 대해 설명한다 하였는데, 제가 놓친것인지 다음강의에 나오는 내용인지 못들은 기분입니다. 일단 다음 강의 보다가 까먹고 놓치지 않기 위해 문의합니다. 우선 앞에 ""으로 표기한것은 함수 이름 설정하듯이 자기가 의도한대로 넣을 수 있고 몇개를 입력하든 상관 없는 것인가요?params 같은 경우는 마지막에 한번만 객체나 특정 타입 형식으로 넣을 수 있는 것인가요?추가적으로 export default function SearchResult({searchParams}:Props){ ... 에서searchParams가 객체로 한번 더 묶여서 정의되어 들어가는 이유는 그냥 편의상 그런 것일까요?type SearchParams= { q: .....} 로 정의하고 export default function SearchResult(searchParams:SearchParams){ ... 같은 식으로 넣어도 문제 없이 진행할 수 있는지, 아니면 {}객체로 한번 더 묶는 이유가 있는 것인지 궁금합니다. 

강의이기 때문에 react-queary, zustand, context.API 세가지를 보여주지만 실제로는 하나만 쓰면 된다하여서 처음 강의에 나오던 context.API로만으로 코드를 짜려고 다른 것들은 대충 넘겨 들었는데요.어느정도 코드 짜보다가 react-query 부분을 다시 듣고나서보니 react-query는 또 느낌이 다른것 같네요.그런데 혹시 서버액션 쪽에서 첫번째 동작 이후에 쓰로틀이 들어가게 코드를 짜두면 context내의 서버 데이터 갱신할 때도 react-queary의 stale 같은 기능을 만들 수 있는 거겠죠? 해당 기능은 그렇게 구현한다고 하여도, 지금 앞뒤로 강의 다시 들어보니 캐싱 관리같은건 또 다른 차원이거 같아서 결국에 react-queary를 병행해야만 하는건가 싶네요.다른 질문 답변을 보니 강사님도 react-queary는 데이터 패칭용으로 다른 상태관리 라이브러리와 병행해서 쓰시는것 같고요.

빌드 폴더가 아닌 오리지널 폴더로 npm start로 확인했을 때에는 알맞게 사진이 불러와집니다. 하지만 빌드 후에 serve 명령으로 실행했을 때에 Diary.js , Edit.js에서 사진을 제대로 불러오고 있지 않습니다.  제가 콘솔로 확인했을 때에 이미지의 상대 주소는 잘 찍히고 있는 것 같은데, 어디에서 빌드 후에 문제가 생기는 건지 잘 모르겠습니다. 깃허브 주소 남깁니다.https://github.com/yminjuu/Emotion-Diary

Entity.ts에 추가한 toJSON() { return instanceToPlain(this); }이 코드가 들어가면 404에러가 뜹니다. 저 코드를 빼면 돌아가긴 합니다만 이미지(아바타)가 안보이고요.. 그리고 이런 에러가 나서 구글링 한 후 config를 이렇게 바꿨는데, 이게 문제인가.. 싶기도 하고요.. 너무 궁금한데 제발 꼭 좀 아시는 분 답변 부탁드려요

const textField = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textField).toHaveClass('my-class');이부분에서 className이란 내부 props, state 값을 검증하는 게 아닌가 싶어서 질문을 드렸습니다. 물론, className에 따라 변경되는 DOM을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!

LocalStorage 사용 강의의 16분 50초 부근 "삭제하기" 버튼 관련 질문입니다.처음에 혼자 구현을 하려고 할 때 originData.id 대신 id를 onRemove에 파라미터로 전달했을 때 작동이 안됐는데 originData.id로 해야 삭제되더라고요. 콘솔로 찍었을 때 둘 다 일기 데이터의 id로 같은 걸 가리키는 것으로 나오는데 제가 잘못 알고 있는 부분이 있을까요? 안되는 이유가 무엇인가요? const handleDelete = () => { if (window.confirm("정말 삭제하시겠습니까?")) { console.log(id); console.log(originData.id); onRemove(originData.id); navigate("/", { replace: true }); } }; 

promise chain 적용하여 코드를 변경했습니다. 참고하시면 좋을 거 같아요! // index.jsapp.post('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, { token: "" }) .then(() => { return res.status(200).json({ logoutSuccess: true }); }) .catch((err) => { return res.status(400).json({ logoutSuccess: false, message: err.message }); }) })// auth.jsfunction auth(req, res, next) { // 쿠키에서 토큰 가져오기 const token = req.cookies.x_auth; console.log("token is ", token); // 토큰 복호화 및 유저 검색 User.findByToken(token) .then((user) => { if (!user) { throw new Error("유효하지 않은 토큰입니다."); } // 토큰과 유저정보를 다음 단계로 전달함. req.token = token; req.user = user; return next(); }) .catch((err) => { return res.status(401).json({ isAuth: false, message: err.message }); }) }// User.jsuserSchema.statics.findByToken = function(token) { const user = this; return util.promisify(jwt.verify)(token, 'secretToken') .then((decoded) => { console.log(decoded); return user.findOne({ "_id": decoded, "token": token }); }) .catch((err) => { console.log(err); throw new Error("유효하지 않은 토큰입니다."); }); }

이제는 promise chain이나 async await 문으로 콜백함수를 처리해야 하는 것으로 보입니다. 다음과 같이 코드를 수정해서 돌아가는 것을 확인했으니 활용하시면 좋을 것 같아요! // index.jsapp.post('/login', (req, res) => { // 이메일이 DB에 있는지 확인 User.findOne({ email: req.body.email }) .then (async (user) => { if (!user) { throw new Error("제공된 이메일에 해당하는 유저가 없습니다.") } // 비밀번호가 일치하는지 확인 const isMatch = await user.comparePassword(req.body.password); return { isMatch, user }; }) .then(({ isMatch, user }) => { console.log(isMatch); if (!isMatch) { throw new Error("비밀번호가 틀렸습니다.") } // 로그인 완료 return user.generateToken(); }) .then ((user) => { // 토큰 저장 (쿠키, localstorage ...) return res.cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }) .catch ((err) => { console.log(err); return res.status(400).json({ loginSuccess: false, message: err.message }); }) }); // User.jsuserSchema.pre('save', function( next ) { // 비밀번호 암호화 const user = this; if(user.isModified('password')) { bcrypt.genSalt(10, function(err, salt) { if (err) { return next(err); } bcrypt.hash(user.password, salt, function(err, hash) { if (err) { return next(err); } user.password = hash; return next(); }); }); } else { return next(); } }); userSchema.methods.comparePassword = function(plainPassword) { // 암호화된 비밀번호와 같은지 체크 const user = this; return bcrypt.compare(plainPassword, this.password) } userSchema.methods.generateToken = function() { // jwt 생성 user = this; const token = jwt.sign(user._id.toJSON(), 'secretToken'); user.token = token; return user.save(); }

안녕하세요 선생님강좌를 듣다가 궁금한게 생겨서 질문드립니다. 사진을 첨부했는데요,사진처럼 현재 작성하지도 않은 타입을 회색글씨로 미리 보여주는? 라이브러리 같은데 이름을 알고싶습니다.수업 내용에 관한 질문이 아니라 죄송합니다. 

안녕하세요 !강의를 보다가 궁금한 부분이 생겨서 질문 드립니다 ! 상위 QueryProvider를 만들 때 ReactQueryStreamedHydration로 미리 감싸면 강의에서 소개 해준 dehydrate(queryClient)로 감싸는 작업을 하지 않아도 되나요? <QueryClientProvider client={client}> <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration> </QueryClientProvider> dehydrate와 HydrateBoundary가 정확히 어떤 역활을 하는지 궁금합니다 const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <MoreListView keyword={keyword} /> </HydrationBoundary> ); prefetchInfiniteQuery의 queryFn과 useInfiniteQuery의 queryFn은 똑같이 작성해야 하나요??만약 이렇게 하면 안된다면 전달하고자 하는 매개변수를 client component에서 전달하고자 할 때 어떻게 해야할 지 고민이 됩니다. (전달하는 상태 값은 useContext로 만든 상태 값입니다..)// prefetch 부분 const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryFn: fetchMoreList, });// client component 부분 useInfiniteQuery<Dummy[], Object, InfiniteData<Dummy[]>, [_1: string, _2: string], number>({ queryFn: ({ pageParam, queryKey }) => fetchMoreList({ pageParam, queryKey, sort }), });

style 폴더를 따로 만들어서 관리해도 되나요?

안녕하세요src>app>not-found.tsx에 만들었는데, 잘못된주소로 갈 경우 커스터한 NotFound가 렌더링되지않는 문제가 있습니다..혹시 따로 경로설정을 해야하는것일까요?? 

안녕하세요 선생님 Ref를 알아보는 과정에서import React from "react"; import CartPage from "./pages/CartPage"; import OrderPage from "./pages/OrderPage"; import ProductPage from "./pages/ProductPage"; const App = () => ( <> {/* <ProductPage /> */} {/* <OrderPage /> */} <CartPage /> </> ); // export default App; class MyComponent extends React.Component { divRef = React.createRef(); render() { return ( <div ref={this.divRef}> </div> ) } componentDidMount() { console.log(this.divRef) } } export default MyComponent 이렇게 MyComponent가 export 되었길레import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import MyComponent from "./App"; const { worker } = require("../../shared/mocks/browser"); worker.start({ onUnhandledRequest: "bypass", }); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); // root.render(<MyComponent />);main.js에서 root.render를 변경해야될줄 알았는데 변경을 하지 않아도 정상동작을 하는데 이것은 왜 그런것인가요?