제로초님 영상을 보고 따라하는 도중 Menu의 index.tsx작성 후에 Workspace로 옮겼는데, Module을 찾을 수 없다고 뜨는데, 어디가 잘못 된건지 모르겠습니다... components/Menu/index.tsximport React, { FC } from 'react'; import { CreateMenu } from './style'; const Menu: FC<React.PropsWithChildren<{}>> = ({ children }) => { return ( <CreateMenu> <div>menu</div> {children} </CreateMenu> ); }; export default Menu; Workspace/index.tsximport React, { FC } from 'react'; import { CreateMenu } from './style'; const Menu: FC<React.PropsWithChildren<{}>> = ({ children }) => { return ( <CreateMenu> <div>menu</div> {children} </CreateMenu> ); }; export default Menu; 에러메세지입니다.혹시 몰라서 터미널에 뜬 에러메세지도 첨부하겠습니다

안녕하세요. 이번 강의를 듣고 의문점이 생겼습니다. 출첵앱에서 permission체크를 가장 외곽에 있는 FutureBuilder를 통해서 실시했는데, 그렇게되면, build가 실행될때마다 Geolocator의await Geolocator.isLocationServiceEnabled();await Geolocator.checkPermission(); 두개의 async함수가 엄청난 병목을 만들 것 같은데, initState에서 해결하는게 더 좋은 코드가 아닌지 궁금합니다. 

제로초님, layouts폴더에 App.tsx에서import React from "react"; import loadable from '@loadable/component'; import { Routes, Route, Navigate } from "react-router-dom"; const LogIn = loadable(() => import("@pages/Login")); const SignUp = loadable(() => import('@pages/SignUp')); const Channel = loadable(() => import('@pages/Channel')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/channel" element={<Channel />} /> </Routes> ) } export default App;Route의 4번째줄 path에 /workspace로 하면 로그아웃 할 때 제대로 작동하는데 저렇게 workspace/channel로 코드를 작성하면 로그아웃 할 때, 아래처럼 뜹니다/를 하나만 붙여야 되는건가요?나머지 코드들은 변경하지 않았습니다.Login 폴더 index.tsximport useInput from "@hooks/useInput"; import axios from "axios"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles'; import {Link, Navigate} from 'react-router-dom'; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; const LogIn = () => { const {data, error, mutate} = useSWR('/api/users', fetcher); const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback((e: any) => { e.preventDefault(); setLogInError(false); axios .post( '/api/users/login', {email, password}, {withCredentials: true}, ) .then((response) => { mutate(response.data, false); }) .catch((error) => { setLogInError(error.response?.data?.statusCode === 401); }) }, [email, password, mutate]); if(data === undefined) { return <div>로딩중...</div> } if(data) { return <Navigate to="/workspace/channel" /> } return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} /> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>} </Label> <Button type="submit">로그인</Button> </Form> <LinkContainer> 아직 회원이 아니신가요?&nbsp; <Link to="/signup">회원가입 하러가기</Link> </LinkContainer> </div> ); }; export default LogIn; workspace.tsximport axios from "axios"; import React, { FC, useCallback } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate } from "react-router-dom"; const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data, error, mutate} = useSWR('/api/users', fetcher); const onLogout = useCallback(() => { axios.post('api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); if(data === false) { return <Navigate to="/login" /> } return( <div> <button onClick={onLogout}>로그아웃</button> {children} </div> ) } export default Workspace;swr은 2버전입니다.

제로초님, 전 강의 듣고 할 때만 해도 잘 됐는데 오늘 쉬고 다시 해보니까 이런 오류 메세지가 뜹니다.해결해보려고 해도 잘 안되네요..Cannot read properties of undefined (reading 'data')SignUp 폴더에서 index.tsx에 문제가 있다고 떠서 코드 올립니다import useInput from "@hooks/useInput"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error, Success} from './styles' import axios from "axios"; import {Link} from 'react-router-dom'; // 타입스크립트는 간단하게 말하면 변수, 매개변수, 리턴 값에 타입을 붙여줌 // 변수에는 딱히 타입을 붙여주지 않아도 된다 타입스크립트가 알아서 추론하기 때문에(리턴값도 마찬가지) 그러나 매개변수에는 붙여주어야됨 const SignUp = () => { const [email, onChangeEmail] = useInput('');//useInput은 커스텀 훅 const [nickname, onChangeNickName] = useInput(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const [mismatchError, setMismathError] = useState(false); const [signUpError, setSignUpError] = useState(''); const [signUpSuccess, setSignUpSuccess] = useState(false); const onChangePassword = useCallback((e: any) => { setPassword(e.target.value); setMismathError(e.target.value !== passwordCheck); // 함수 기준으로 외부 변수만 deps에 적어줌 내부 변수는 x }, [passwordCheck]); const onChangePasswordCheck = useCallback((e: any) => { setPasswordCheck(e.target.value); setMismathError(e.target.value !== password) }, [password]); const onSubmit = useCallback( (e: any) => { e.preventDefault(); if (!mismatchError && nickname) { console.log('서버로 회원가입하기'); setSignUpError(''); setSignUpSuccess(false); axios .post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); setSignUpSuccess(true); }) .catch((error) => { console.log(error.response); //여기가 문제가 있다고 뜹니다. setSignUpError(error.response.data); }) .finally(() => {}); } }, [email, nickname, password, passwordCheck, mismatchError], ); return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} /> </div> </Label> <Label id="nickname-label"> <span>닉네임</span> <div> <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickName} /> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> </Label> <Label id="password-check-label"> <span>비밀번호 확인</span> <div> <Input type="password" id="password-check" name="password-check" value={passwordCheck} onChange={onChangePasswordCheck} /> </div> {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>} {!nickname && <Error>닉네임을 입력해주세요.</Error>} {signUpError && <Error>{signUpError}</Error>} {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요?&nbsp; <Link to="/login">로그인 하러가기</Link> </LinkContainer> </div> ); }; export default SignUp; 

안녕하세요 지금 캘린더 강의 데이터베이스 생성하기 부분 듣고 있습니다.database 폴더 생성하고 drifr_database.dart 파일 생성해서 코드 작성하는 부분인데, getapplicationdocumentsdirectory()를 입력할때 자동완성이 안뜨더라고요. 대소문자 구분 안하는걸로 설정해놔서 대문자 없어도 떠야하는데 말이에요.   그리고 강의에는 저 메서드있는 패키지 import 하기가 옵션으로 뜨던데 저는 그런것도 아예 없고요. 그래서 직접 import 써넣었어요.  그리고 그 다음에 nativedatabase 적었을때도 마찬가지로 자동완성 안뜨고 패키지 import 옵션도 안뜨더라고요. 근데 여기서 문제가, getapplicationdocumentsdirectory는 강의에서 어떤 패키지가 import 되는지 보여서 그냥 그대로 써넣었는데, nativedatabase는 그게 아예 보이지도 않아서 구글링하며 찾느라 좀 헤맸습니다.  자동완성도 안뜨고 import 옵션도 안뜨는건 도대체 왜 그런가요? 어디서 고칠 수 있는 건가요? 너무 불편해요 ㅜㅜ   

https://github.com/ZeroCho/sleact에서 code로 가서 zip파일을 다운 받았습니다.이후 git clone https://github.com/zerocho/sleact 명령어를 입력한 후, back 폴더에서 npm i까지 마쳤는데, 저는 강의 내용과 다르게 config 폴더가 비어 있습니다.어떤 부분에서 잘못 따라 하였는이해를 못해서 깃 관련 구글링을 해보다가 결국 질문 드립니다.

container에 color를 넣어주지 않았기 때문입니다.아래 글을 확인해 보세요.https://dmsvk01.tistory.com/187 

class _BottomSlider extends StatelessWidget { final Duration currentPosition; final ValueChanged<double> onBottomSliderChanged; final VideoPlayerController? videoPlayerController;위의 형태로 videoController를 직접 넘겨줘도 정상작동하는 것을 확인했습니다.만약 _BottomSlider에서 기능이 추가되어 videoController에 많은 접근이 필요해지면 일일히 넘겨주느라 복잡해질 것 같은데통째로 넘겨주지 않는 것은 상태변화를 추적하기 원활하게 하기 위함인가요??

안녕하세요! 새해 복 많이 받으시기 바랍니다. state를 변경하는 코드를 래핑하지 않고 그냥 실행 후 setState를 실행해도 build가 호출되면서 정상적으로 작동하는 것을 확인했습니다.setState로 래핑하는 이유는 그냥 가독성을 위함 일까요??

tsconfig.json(ts -> js)로 바꿔주고,그 후에 webpack.config.ts가 js,css,html들을 하나로 번들링해주는 순서가 맞나요??$webpack 실행하면 웹팩 프로그램이 그냥 알아서 tsconfig.json이 있으면 먼저 적용한후 webpack.config.ts를 적용하는건가요?

floating button을 눌렀을때modalbottomsheet가 builder를 통해 scheduleBottomSheet라는 "stateless"위젯을 반환합니다.바텀시트에서 textfield를 눌러 키보드가 나오는 경우 final 변수인 bottomInset이 0에서 키보드 높이값으로 변하여 padding이 적용됩니다.혹시 stateless위젯은 setstate를 사용하지 못할뿐 내부 시스템적으로 바뀌는 값에 대해서는 state처럼 값 변경이 발생하는 것인가요?아니라면 modalbottomsheet의 builder가 바텀시트를 리랜더링하는 것인가요?

안녕하세요. 강의 잘 듣고 있습니다! dispose되어서 State 객체가 사라지면 그 member인 timer도 GC에 의해 함께 메모리 해제 되는 것이 아닌지 궁금합니다.혹시 timer를 관리하는 또 다른 객체가 포인팅하고 있어서 그런건가요?

안녕하세요 강사님,강의 중 채널 생성과정에서 오류가 있어 문의를 남깁니다.먼저, 채널 데이터를 가져오지 못해 다른 문의를 찾아보니 seed 설정을 해주지 않은거 같아 npx sequelize db:create 진행하였고, 이어서npx sequelize db:seed:all 과정을 진행했습니다npx sequelize db:seed:all 을 진행하니 Validation error가 발생했습니다.다른 문의를 보니 db에 sleact table이 생성되지 않아 발생하는 문의글이 많아서 db 사진 올려드릴게요추가적으로, back 파일에서 npm run dev를 실행하면 db 연결까지 잘 됩니다.도대체 어디가 잘 못 된 건지 감이 오지 않습니다..감사합니다.

제로초님, 코드는 정확히 따라 한 거 같은데, 무엇이 문제인지 판단이 안되네요...리액트 v18, 타입스크립트 v18, axios는 1.2.3 입니다. webpackimport path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from "webpack"; import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'sleact', mode: isDevelopment ? 'development' : 'production', devtool: !isDevelopment ? 'hidden-source-map' : 'eval', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), }, }, entry: { app: './client', }, module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['IE 10'] }, debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], env: { development: { plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')], }, production: { plugins: ['@emotion'] } }, }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, // eslint: { // files: "./src/**/*", // }, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, // react router port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/': { target: 'http://localhost:3095', changeOrigin: true, }, }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); } if (!isDevelopment && config.plugins) { } export default config; index.tsximport useInput from "@hooks/useInput"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles' import axios from "axios"; const SignUp = () => { const [email, onChangeEmail] = useInput('');//useInput은 커스텀 훅 const [nickname, onChangeNickName] = useInput(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const [mismatchError, setMismathError] = useState(false); const onChangePassword = useCallback((e: any) => { setPassword(e.target.value); setMismathError(e.target.value !== passwordCheck); // 함수 기준으로 외부 변수만 deps에 적어줌 내부 변수는 x }, [passwordCheck]); const onChangePasswordCheck = useCallback((e: any) => { setPasswordCheck(e.target.value); setMismathError(e.target.value !== password) }, [password]); const onSubmit = useCallback((e: React.FormEvent) => { e.preventDefault(); if(!mismatchError && nickname){ console.log('서버로 회원가입하기'); axios.post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); })//요청이 성공하면 실행 .catch((error) => { console.log(error.response); })//요청이 실패하면 실행 .finally(() => {});//성공하든 실패하든 실행시키고 싶은 것 } console.log(email, nickname, password, passwordCheck) }, [email, nickname, password, passwordCheck, mismatchError]); return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} /> </div> </Label> <Label id="nickname-label"> <span>닉네임</span> <div> <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickName} /> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> </Label> <Label id="password-check-label"> <span>비밀번호 확인</span> <div> <Input type="password" id="password-check" name="password-check" value={passwordCheck} onChange={onChangePasswordCheck} /> </div> {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>} {!nickname && <Error>닉네임을 입력해주세요.</Error>} {/* {signUpError && <Error>{signUpError}</Error>} */} {/* {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} */} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요?&nbsp; <a href="/login">로그인 하러가기</a> </LinkContainer> </div> ); }; export default SignUp;이렇게 따라 한 후에 회원 가입 누르면 아래 같은 화면이 뜹니다.

스케줄을 작성했는데 필터링 된 데이터에 아무값도 안들어갈까요..?

FAILURE: Build failed with an exception.* What went wrong:The supplied javaHome seems to be invalid. I cannot find the java executable. Tried location: C:\Program Files\Android\Android Studio\jre\bin\java.exe* Try:> Run with --stacktrace option to get the stack trace.> Run with --info or --debug option to get more log output.> Run with --scan to get full insights.* Get more help at https://help.gradle.orgException: Gradle task assembleDebug failed with exit code 1

안녕하세요 코팩 강사님!

환경설정 세팅 중 flutter doctor 실행했을 때, "Unable to find bundled Java version." 이 에러가 뜨네요 ㅠㅠ 구글링 해봐도 mac 사용자 해결방법만 나오지 window 사용자 해결방법은 따로 나오지 않네요 ㅠㅠ 도와주세요~

(사진)

안녕하세요, 코드팩토리 덕분에 코딩의 재미를 다시 느끼고 있는 사람입니다. 동영상 플레이어를 다 만들고나서 문득 '유튜브처럼 스크린이 애니메이션으로 부드럽게 렌더링되면 더 보기 좋겠다' 라는 생각이 들어서 아래와 같이 간단하게 코드를 추가해서 작성했습니다.실생활에서 자주쓰는 앱과 비슷하게 동작하도록 위젯트리를 구성하면 코딩의 재미가 한층 더 높아질 것 같아서 의견남겨봅니다 ㅎㅎAspectRatio( aspectRatio: _controller.value.aspectRatio, child: Stack(children: [ VideoPlayer(_controller), AnimatedOpacity( opacity: isShown ? 1.0 : 0.0, duration: const Duration(milliseconds: 300), child: Column( children: [ _NewVideoButton( onPressed: widget.onGalleryClicked, ), _VideoControlScreen( onForwardPressed: onForwardPressed, onPlayPressed: onPlayPressed, onRewindPressed: onRewindPressed, isPlaying: _controller.value.isPlaying, ), _VideoSlider( currentPosition: currentPosition, maxPosition: _controller.value.duration, onSliderChanged: (val) { _controller.seekTo(Duration(seconds: val.toInt())); }) ], ), ) ]),