new01260170
@new01260170
Reviews Written
-
Average Rating
-
Posts
Q&A
Unhandled Runtime Error
์ ์ฃ์กํฉ๋๋ค ์ ๊ฐ ๋ญ ๋นผ๋จน์์๋ค์ ์ ๋์๋ฉ๋๋ค ใ ใ
- 0
- 5
- 582
Q&A
Unhandled Runtime Error
์ ์คํ๊ฐ ์์๋ค์ LggedIn ๊ทผ๋ฐ ๊ทธ๊ฑฐ ์คํ ์์ ํด๋ ๋๊ฐ์ ์๋ฌ๊ฐ ๋๋ค์ ใ ใ
- 0
- 5
- 582
Q&A
Unhandled Runtime Error
์ ๋ค ์๊ฒ ์ต๋๋ค. AppLayout ์ฝ๋ ์ ๋๋ค. import { useState } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import { Input, Menu, Row, Col } from 'antd'; import UserProfile from '../components/UserProfile'; import LoginForm from '../components/LoginForm'; import styled from 'styled-components'; const SearchInput = styled(Input.Search)` vertical-align: middle `; const AppLayout = ({ children }) => { // ToDo const [isLoggedIn, setIsLoggedIn] = useState(false); return ( div> Menu mode="horizontal"> Menu.Item key="home"> Link href="/">a>ํa>Link> Menu.Item> Menu.Item key="profile"> Link href="/profile">a>ํ๋กํa>Link> Menu.Item> Menu.Item key="search"> SearchInput enterButton /> Menu.Item> Menu.Item key="signup"> Link href="/signup">a>ํ์๊ฐ์ a>Link> Menu.Item> Menu> {/* column ์ฌ์ด ๊ฐ๊ฒฉ: gutter */} Row gutter={8}> Col xs={24} md={6}> {isLoggedIn ? UserProfile setIsLoggedIn={setIsLoggedIn} /> : LoginForm setIsLoggedIn={setIsLoggedIn} /> } Col> Col xs={24} md={12}> ๊ฐ์ด๋ฐ ๋ฉ๋ด Col> Col xs={24} md={6}> ์ค๋ฅธ์ชฝ ๋ฉ๋ด Col> Row> {children} div> ) } // children ๊ฐ์ด ์๋์ง ์ฒดํฌํ๊ธฐ ์ํ ์ฉ๋ AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;
- 0
- 5
- 582
Q&A
Unhandled Runtime Error
์คํ๋ ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋์๋ฌธ์๊น์ง ๊ฐ์ด ํด์ ํ์ธํด ๋ดค์ด์.๋ก๊ทธ์ธ ํผ ์ฝ๋ ๋ถ์ฌ๋ฃ๊ธฐ ํด์ ๋๋ฆฝ๋๋ค. import { useState, useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; const ButtonWrapper = styled.div` margin-top: 10px; `; const FormWrapper = styled(Form)` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); const style = useMemo(() => ({ marginTop: 10}), []) const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, [id, password]); return ( FormWrapper onFinish={onSubmitForm}> div> label htmlFor="user-id">์์ด๋label> br /> Input name="user-id" value={id} onChange={onChangeId} required /> div> div> label htmlFor="user-password">๋น๋ฐ๋ฒํธlabel> br /> Input name="user-password" value={password} onChange={onChangePassword} required /> div> ButtonWrapper style={style}> Button type="primary" htmlType="submit" loading={false}>๋ก๊ทธ์ธButton> Link href="/signup">a>Button>ํ์๊ฐ์ Button>a>Link> ButtonWrapper> FormWrapper> ); } LoginForm.propTypes = { setIsLoggedIn: PropTypes.node.isRequired, }; export default LoginForm;
- 0
- 5
- 582
Q&A
์ ๊ฐ latest next js ๋ฒ์ 11์์ ํ๊ณ ์๋๋ฐ PropTypes๋ฅผ ์ฐพ์ง ๋ชปํ๋ค๊ณ ๋์์
์ ์ ๊ฐ ์ด ๋ถ๋ถ์ ๋์ณค๋ค์ ๊ฐ์ฌํฉ๋๋ค~!
- 0
- 2
- 281




