묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리덕스(Redux)
기존 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다
안녕하세요 소플님, 강의 정말 잘 보고 있습니다!항상 이해하기 쉽게 질 높은 강의를 제공해주셔서 감사드립니다.아래와 같은 점이 궁금해 질문을 드립니다. 제목에서처럼 브라우저에서 제공하는 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다. 브라우저 Storage API를 사용하는 것과 비교해 어떤 이점을 갖고 있는지 여쭤보고 싶습니다.브라우저 Storage API를 react에서 사용했을 때 react에서 제공하는 기능을 사용할 수 없게 되는 제약 같은 것이 있는지 궁금합니다. 만약 그렇다면 가상 DOM환경과 관련이 있는지도 궁금합니다. 예를 들어 localStorage에 저장되어 있는 데이터를 useMemo로 의존성을 갖게 하여 데이터를 관리할 수 있는지와 같은 것입니다. React를 배운지 얼마 안되어서, React에 대해 잘 파악하지 못하고 하는 질문일 수도 있는 점 양해를 구하고 싶습니다 ㅜㅜ,, 감사합니다!
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
테스트 실행 중 에러가 납니다.
vitest 를 통해 실행하면 계속 위와 같은 에러가 나는데, 어떤 이유일까요? 커멘드라인을 이용해서 npm run test 를 입력하면 그 때는 테스트가 잘 이뤄집니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
질문있습니다
0-4장고 개발환경설정 하고있습니다 선생님 코드 복사해서 extensions.json 과 settings.json붙여넣기햇는데도 확장추천목록에 안떠서 그냥 일일히 다운받아서 했습니다그 이후 구동파일생성에서런 앤 디버그 안누르고 create a launce.json file을 눌렀는데선생님 화면처럼 django가 아예 안뜨는데 어디가 문제인지알수있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새로운 강의버전은 언제 나오나요 ?
새소식에 올라온 솔로트립을 기반으로 한 새로운 강의는 언제쯤 올라오나요?
-
해결됨만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
github 404 뜹니다~
공유해주신 리포지토리 404 뜹니다. private 인거 같네요 ^^
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
어.. 기초 질문있습니다
00-03 코너에서 21분에서 깃 파일에 캐쉬가 좀있엇는데 제가 모르고 그냥 다 커밋시켰거든요 혹시 이거 다시 돌아가서 git rm로 제거를 하려고하는데 어떤 명령어를 통해 뒤돌아가기 하고 삭제하는지 알수있을까요? 구글링 검색하니 너무 많은정보가 나와 함부러 사용하기가 두렵습니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 강의 Express 프레임워크 사용하기 를 듣고 있는데요
이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다.생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Slider은(는) JSX 구성요소로 사용할 수 없습니다. 오류가 발생해요ㅠㅠ
이 문제가 해결이 안돼서 진도를 못나가고 있습니다ㅜㅜ구글링하니 버전이 달라서 그렇다고 해서 package.json파일도 삭제하고 다시 설치하고 이것저것 다 해봤는데도 도저히 해결이 안되네요.. 살려주세요ㅠㅠㅠ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
powershell 말고 gitbash로 진행해도 상관없나요?
파워쉘을 써본적이 없어서 미숙한데 진행이 파워쉘로 되는것 같아서 질문드립니다
-
미해결처음 만난 리액트(React)
props에 대해 궁금한 점이 있습니다.
우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다.root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> );근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어props.nameprops.ageprops.universityprops.profilePhotoprops.gradeetc...이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다.function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); }그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요?function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); }또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }
-
미해결Next + React Query로 SNS 서비스 만들기
혹시 suspense를 아직 적용하지 않은 상태여도 useSuspenseQuery를 적용해도 되나요
영상 마지막에서 말하는 것처럼 웬만한 경우에 추천된다면, suspense를 아직 적용하지 않은 상태에서도 useQuery 대신에 useSuspenseQuery를 써도 동작하는데 문제 없는 건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
js 문법과 관련해서 응용방안에 대해 문의드립니다.
useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]);여기서 !isFetching && hasNextPage && fetchNextPage();이 부분은 셋 모두가 truthy일때(앞의 두개의 boolean은 true이고 마지막의 함수는 return값이 존재할 때) 마지막 함수의 return값이 호출되는 구조인 것으로 이해되는데,그렇다면 함수를 두개를 묶고서, 예를 들면boolean&&함수1()&&함수2() boolean을 &&으로 묶어도 해당 boolean이 true이면 두개의 함수가 차례대로 실행되는건가요?예시에서, 함수1과 함수2의 return값이 존재한다고 하면 함수1, 함수2 순서로 차례대로 실행되게 할 수 있겠네요? 그리고 한쪽의 함수라도 return값이 null이나 undefined되는 경우라면 두개의 함수결과가 모두 안나오게 만들고요.제가 생각한 응용방식이 맞을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
회원가입-status 201 Ok- 리다이렉트 안되는 현상
일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4크롬브라우저로 보고있습니다.DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다.그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다.package.json 버전정보:클라이언트에서 리턴받은 값:서버에서 나오는 console:무엇이 문제일까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
개념이 잘서지 않아서, ssr/csr관련 seo 문제
어떤 답변중 csr로 해도 metadata 설정으로 seo 가 가능하다 본듯합니다. ssr이 seo에 유리하다하여 ssr방식으로 해보려 한 이유도 일부있는데 csr로도 충분히 커버가 가능한것인지요?선생님의 의견여쭙고 싶습니다. 감사합니다!
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
영상대로 하면 에러가 발생합니다.
13:33 부분 출력 결과입니다. File "c:\workspace\mydjango02\main02.py", line 13 cursor.execute(sql, __parameters: [param, param]) ^SyntaxError: invalid syntax다음과 같이 수정하니 됩니다.cursor.execute(sql, [param, param]) 참조하세요.
-
미해결처음 만난 리액트(React)
리액트 연동 오류
안녕하세요. 실습 따라하는데 리액트 연동이 안된건지 버튼이 페이지에 안뜨는데 코드를 비교해도 뭐가 문제인지 모르겠어요
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 훅 테스트 질문이 있습니다!
예제에서 말씀해주신것처럼,result.current.setState() 를 호출해서 act() 를 통해 업데이트 된 상태를 검증하는 방법을 말씀해주셨는데요. 훅 내부 이펙트에서 상태를 업데이트하는 로직을 검증하려면 어떤 식으로 검증해야할까요? export const useDarkMode = (defaultTheme = THEME["LIGHT"]) => { const [theme, setTheme] = useState(defaultTheme); const changeTheme = (type: keyof typeof THEME) => { setTheme(THEME[type]); }; useLayoutEffect(() => { const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); const changeListener = ({ matches }: MediaQueryListEvent) => { setTheme(THEME[matches ? "DARK" : "LIGHT"]); }; mediaQueryList.addEventListener("change", changeListener); return () => { mediaQueryList.removeEventListener("change", changeListener); }; }, []); return { theme, changeTheme, }; }; 위 useDarkMode() 훅 내부 useLayoutEffect() 에서window.matchMedia 의 change 이벤트를 감지하면, setTheme() 하도록 설계되어 있는데요. window.matchMedia 함수의 matches 결과를 true 로 모킹하고,window.matchMedia.dispatchEvent('change') 를 일으켜 검증을 시도해보았는데요.생각처럼 검증이 되지 않는 것 같습니다.ㅠ 혹시 이렇게 검증을 시도하는 것이 맞는지. 검증하는게 맞는지. 여쭤봐도 될까요? 감사합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
generic type과 관련하여 문의드립니다.
useQuery사용할 때 <> 속에 넣는 generic type이 <쿼리함수로 나오는 값, 오류시 나오는 값, 최종 결과, 키로 넣는 값>의 타입이라는 것을 강의 및 검색을 통해서 인지하였습니다.그런데 공식문서 검색을 해보니 이런 설명을 안해주는거 같더라고요.https://tanstack.com/query/latest/docs/framework/react/reference/useQueryhttps://tanstack.com/query/latest/docs/framework/react/typescript혹시 타입스크립트에서 generic type에 어떤것을 넣어야 하는지 모르는 경우에는 어떻게 찾는게 일반적인 방법인가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
실제 현업에서 특정 페이지 진입 시, replace 또는 redirect 만 시키는 경우가 있을까요?
로그인 모달에서 발생하는 문제 해결하기(router.replace) 위 강의 시청 중 질문드립니다.실제로 위와 같이 login 페이지에서 어떠한 주요 로직 실행없이다른 페이지(i/flow/login)로 replace 또는 redirect만 시키는 경우가 있을까요?실제로 이런 동작이 필요한 경우가 있다면 어떤 경우에 필요하게 될 지 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
js 문법 관련하여 질문드립니다.
제가 아직 타입스크립트 문법에 익숙하지 않아서 강의 5분 36초 쯤에 나오는 부분이 제대로 이해하고 있는게 맞는지 문의 드립니다.지금 const {data : IPost[] | undefined}의 data와const { data : Session | null}의 data가 겹쳐서 후자를const { data: session Session | null} 으로 수정하였는데, 이 경우엔 앞의 const {data : IPost[] | undefined} 의 데이터는 IPost[] | undefined 둘 중 하나의 타입을 가지는 value가 되고const { data: session : Session | null} 에서 data는 key가 되고 session이 Session | null둘 중 하나의 타입을 가지는 value가 입력되는 것이지요? 그러면 data. 라고 적으면, key로 사용된 data는 인식이 안되고 value로 사용된 data가 인식이 되어서 IPost[] 배열의 데이터를 가져오는 것이 되나요?