Jay

profile에서 컴포넌트가 몇개 들어갈지 생각하고 넣어주자. header같은 props도 미리 넣어주자. 더미데이터도 만들어주고 // profile.js import React from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; import NicknameEditForm from '../components/NicknameEditForm'; import FollowList from '../components/FollowList'; const Profile = () => { const followerList = [{ nickname: 'jay' }, { nickname: '바보' }, { ni..

target blank 할 때 noreferrer과 noopener을 붙어줘야 하는데 어떠한 역할인지는 감이 안온다. href를 통해 새창을 열었을 때 어떤 창에서 부터 넘어왔는지 정보가 전송된다고 한다. referrer이 이전페이지를 뜻하고 opener은 누가 나를 열었는지를 뜻한다. 다른페이지에서 새창을 열었을 건데 referrer과 openenr이라는 정보 2개가 생기는데 그 둘을 없애주는 것이 noreferrer과 noopener이다. referrer과 openner을 이용해서 보안에 위협되는 행동을 할 수 있다고 하는데 새창에 대한 정보를 noreferrer과 noopener를 통해서 없애준다. 그냥 a태그에서 href를 쓸때 꼭 붙여주자. // AppLayout.js https://www.in..

버튼에다가 htmlType submit을 붙어줘야 form이 submit이 되는데 submit이 되면 onFinish이 호출이 된다. onFinish는 자동으로 e.preventDefault()가 적용이 되어있다. 그래서 antd에서는 e.preventDefault()를 쓰면 안된다. // LoginForm.js 로그인 // antd에서 사용 x const onSubmitForm = () => { e.preventDefault(); } return ( ) const onSubmitForm = useCallback(() => { console.log(id, password); }, [id, password]); LoginForm.js에서 setIsLoggedIn이 있는데 이것을 AppLayout.js에서 ..

비밀번호와 로그인이 너무 붙어있다. 여유롭게 스타일 해주자. 여기서 주의할 점,, style에다가 {} 객체를 집어넣으면 안된다. LoginForm이 리렌더링 될 때마다 아래 LoginForm함수가 통째로 실행이 되는데 객체끼리 비교하면 false가 나온다. // LoginForm.js const LoginForm = () => { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []) const onChangePassword = useCallback((e) => { setPassword(e.t..

이제 로그인 창을 만들어 보자. 로그인을 했을 때는 사용자페이지로 넘어가는 작업이다. 서버가 없는데 로그인을 할 수가 없으니까 더미데이터를 쓰도록 한다. 가짜 데이터를 만들자. 상태를 저장할 수 있는 state를 사용한다. 로그인이 되어 있으면 사용자 프로필을 보여주고 로그인이 되어있지 않으면 로그인 폼을 보여주게 하자. import React, { useState } from 'react'; import PropTypes from 'prop-types'; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); return( 노드버드 프로필 회원가입 {isLoggedIn ? : } component..

검색창을 하나 만들어주자. 검색창은 antd 여기서 한번 찾아보자. 그냥 버튼과 파란색 버튼이 머가 다른지 확인 하기위해 show code로 코드를 비교해서 파란색 검색창을 넣어준다.(enterbutton 추가) import React from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input } from 'antd'; const AppLayout = ({ children }) => { return( 노드버드 프로필 회원가입 ) } AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayo..

antd 사용방법중에 리액트와 연결하는 방법을 알아보자. (참고) Next는 기본적으로 webpack이 들어있는데 webpack이 css를 보는 순간 style 태그로 바꿔서 html에다가 넣어준다. webpack은 이미지 이러한 것들도 따로 처리를 해서 넣어준다. 여러가지 파일들을 확장자 상관없이(loader 필요) 합쳐준다. 모든 페이지에 antd를 쓰기 때문에 pages폴더안에 _app.js를 만들어서 여기안에 넣어준다. 여기서 페이지들의 공통적인 것들을 처리해 준다. props(여기서는 Component)가 있으면 propType를 통해서 점검을 해준다. 서비스의 안정성을 높이기 위해서 이다. // _app.js import React from 'react'; import Head from 'ne..

ant design과 styled-components를 써서 프론트 화면을 구성해보자. ant design react vue angular 다 호환이 가능하다. 이걸 쓰면 버튼 아이콘들을 가져다가 쓰기만 하면된다. 그리고 react에 css를 입힐 때 여러가지 방법이 있는데 css를 순수하게 쓰는거, css가 비효율적이니까 SCSS나 SASS LESS등 이러한 CSS 전처리기를 써서 하거나 react같이 컴포넌트 식으로 개발하는 곳에선 styled-components를 쓴다. 아예 컴포넌트 자체에 css를 미리 입혀서 컴포넌트로 만드는 것이다. styled-components를 하게되면 emotion도 할 수 있을거다.(emotion은 SSR할 때 편리하다.) npm trends에서 두 사이트를 비교를 ..

page별로 전환할 수 있는 링크를 만들어보자. Next는 자체적인 router가 있다. 하이퍼레퍼런스(href)로 주소를 붙여주고 a태그를 넣어준다. 주의할 점은 a에다가 href를 적는 것이 아니라 Link 컴포넌트에다가 href를 적어준다. 주의하자. // AppLayout.js import Link from 'next/link'; import React from 'react'; import PropTypes from 'prop-types'; const AppLayout = ({ children }) => { return ( 노드버드 프로필 회원가입 {children} ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; exp..

pages폴더안에서 profile페이지, signup페이지도 만들자(profile.js , signup.js) // profile.js import React from 'react'; const Profile = () => { return 내 프로필 }; export default Profile; // signup.js import React from 'react'; const Signup = () => { return 회원가입 페이지 }; export default Signup; 만약 next가 인식을 잘못한다면 ctrl로 서버끄고 다시 npm run dev를 해준다. http://localhost:3060/profile 또는 http://localhost:3060/signup을 해주면 알아서 페이지가..