묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
라우팅에서 언더바(_) 폴더를 사용했을때 어떤 이점이 있나요?
안녕하세요, 강의 잘 듣고 있습니다!강의를 듣다보니 하나 의문점이 들어 질문드립니다.app 폴더 하위에서 "page.tsx"로 만들면 nextjs에서 자동으로 라우팅하여 경로로 인식한다고 설명해주셨는데요. 강의를 듣다보니 언더바를 붙인 폴더 경로는 라우팅에 포함되지 않는다고 이야기를 하시더라구요. 파일명을 page로 만들지 않으면 라우팅에 포함되지 않는데, 언더바 폴더를 사용하는 이유가 있는지 궁금합니다. 공식 문서에서는 명시적인 구분/이름 충돌 방지등 이점 설명이 있지만, 크게 와닿지 않아서 질문드려요!
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
router-view에 대해...
부모 컴포넌트<templete> <router-view/></templete> 하위 컴포넌트 <templete> <sub-content :props="props"/> <router-view :props="props"/></templete>하위 컴포넌트에서 <sub-content/> 컴포넌트를 제외한 부분은라우팅에 따라 다르게 보여져야 할 것 같아서, 부모에도 <router-view/> 태그를 사용했고 하위 컴포넌트에도 <router-view/> 태그를 사용했는데요, 이렇게 구조를 짜니까 sub-content에는 props가 넘어가는데 하위 컴포넌트의 <router-view/>로 보내는props가 증발해버리더군요. 이럴 경우에는 아무리 <sub-content/>가 하위 페이지마다 반복해서 들어간다 할지라도 하위에서 <router-view>를 쓰지 않고,하위 컴포넌트에 일일이 <sub-content/>가 들어있는 컴포넌트를 따로 만들어야 되는건지... 궁금합니다. 아무래도 부모에 정의된 router-view 와하위에 정의된 router-view를 구분하지 못하고 props가 무시되는 거 아닐까 싶은데... 맞나요?
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
then(()=> next()) 와 then(next())
route에서 .then(() => next()) 이렇게 적게 되면 화면이 이동할 때 깜박이는 현상이 있습니다. git 코드를 받아보니 .then(next()) 라고 변경되어 있는걸 확인했습니다. 실제 강의에서는 then( () => next() ) 이렇게 진행을 하셨는데, 이렇게 할 경우 list 라는 변수를 공유하고 있기 때문에 데이터를 갱신 한 뒤에, next가 호출이 되서 이전 화면에서 데이터가 바뀐 데이터로 변경된 뒤에 transition 효과로 사라지기 때문에, 같은 데이터가 사라지고 (새로운 화면으로 이동하고) 다시 생겨서 마치 깜박이는 것처럼 보이게 되는데 그래서 .then(next())로 변경하신 걸까요 ? 이 경우는 프로미스 실행 전에 수행이 되니까 실제로는 store에서 dispath 하기 전에 next를 불러준 것과 같은 효과 맞을까요 ? 답변 부탁드립니다. 미리 감사 드립니다
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
route라는 단어, 루트가 아니라 라우트 아닌가요!?
넵
-
미해결Slack 클론 코딩[실시간 채팅 with React]
라우트 파라미터와 useParams관련 질문드립니다.
const { workspace } = useParams<{ workspace: string }>(); console.log('workspace param name1 : ', workspace); workspace의 값이 계속 undefiend로 출력되고 있습니다. 현재 URL주소는 다음과 같습니다. http://localhost:3090/workspace/sleact/channel/일반 /App/index.tsx 파일에서도 /workspace/:workspace 로 해놓은 상황입니다. import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); // 코드 스플리팅 const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); const App = () => { return ( <Switch> <Redirect exact path="/" to="/login" /> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> <Route path="/workspace/:workspcae" component={Workspace}/> </Switch> ); }; export default App; 의심가는 부분들은 어느정도 다 봤다고 생각하는데요. params가 undefined된 값을 출력하네요. import { Redirect } from 'react-router'; import { Link,Switch, Route, useParams } from 'react-router-dom'; 혹시 import가 문제가 있나 싶어서 useParams를 react-router와 react-router-dom 각각 불러왔는데도 마찬가지입니다.