[리액트]nodebird

pages폴더 안에 profile.js / signup.js 파일을 만들어준다.profile.jssignup.jsnext에서는 별도의 설치 없이 페이지라우팅이 가능하다.components 폴더를 만들어준다. (파일들을 컴포넌트화해준다.- 분리)prop-types 설치A

package.json 생성된다.설치 중 에러 발생npm ERR! A complete log of this run can be found in:해결방법아래 명령어를 차례대로 입력해준다.next9 설치됐습니다.

react에서는 링크 이동할때 react-router를 쓰지만,next에서는 자체적인 라우트가 있다.AppLayout.js\-D 를 붙이면, 개발용으로만 붙이는 것이다.package.jsn 설치되었다고 나온다..eslintrc 파일을 만들어준다.(확장자는 없다).esl

package.json 에 설치가 된다.https://ant.design/components/menu 사이트에서 코드를 가져다 쓰면된다.AppLayout.js공식문서에서 코드를 보면 되기때문에 코드를 외우지 않아도된다.

페이지않에 공통되는 부분을 처리 할 수 있습니다. pages폴더안에 _app.js 파일 생성. antd.css 공통으로 쓰여짐으로, 각 파일에서 import 하는 게 아니라. 하나의 파일안에서만 import하면된다. app.js 가 index,profile,sign

AppLayout.jsAppLayout.jsRow(가로줄), Col(세로줄)24등분 한다는걸로 생각하면된다.(md 768px)gutter - 컬럼 사이의 간격 (padding값이 들어가져있다.)모바일에서는 100%로로 보여지던것이 브라우저를 늘리면 md 사이즈에 맞게

서버가 없는데 로그인폼을 만드려면, 더미 데이터를 만들어준다.useState를 사용하여, 로그인된 상태라면, 프로필 화면을 보여주고로그인된 상태가 아니라면, 로그인폼으로 보여준다.AppLayout.jsfalse 상태임으로, 로그인폼을 보여준다.컴포넌트에 props로 넘

간격을 인라인으로 넣었는데, 이렇게 작성하면 안된다.

form을 쓸때 e.preventDefault() 기본적으로 넣어주는데,next에서는 쓰지 않는다.(이미 그 기능이 들어가져 있다.)LoginForm.jsAppLayout.jsid, password를 입력해주면, setIsLoggedIn true 값으로 변경되어, 내프

ss

중복되는 요소들이 많을때 커스텀 훅을 만들어준다반복문, 함수, 조건문 안에서는 쓸 수 없다.hooks폴더 생성, useInput.js를 만들어준다.useInput.js중복되는 부분을 넣는다.

상태관리를 도와주는 라이브러리기본적으로 react에서는 자식컴포넌트 간의 직접적인 데이터 전달은 불가능하다. 데이터를 상위에서 하위로 보내주어야한다(트리구조)이렇게 되면 데이터를 보내줄때 수만은 props를 거쳐야함으로, 상태관리가 매우 복잡해진다.이렇때 Redux를

ㅁㄴㅇ

reducers 폴더를 생성하고, index.js파일을 만들어준다.index.jsconfigureStore.jsreducer import 시켜준다기본설정