Jay

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을 해주면 알아서 페이지가..

리액트라면 프론트 서버 갔다가 html과 js를 데이터 없이 받아온다. 데이터 없이 로딩창이 생기고 로딩하는 동안 백앤드 서버에서 데이터를 받아오게 되는데, 서버 사이드 렌더링(SSR)을 쓰게되면 브라우저를 통해서 첫 방문을 하는 페이지만 브라우저 - 프론트 서버 - 백앤드 서버 - 데이터베이스 - 백앤드 서버 - 프론트 서버 - 브라우저 과정을 거쳐서 받아온다. 그리고 첫 방문후에 다른 페이지에 들어갈 때는 백앤드 서버를 통해서 데이터만 받아오게 된다. 여기서 Next.js가 해주는 것은 클릭할 만한 링크같은 것들이 있으면 Code Spliting된 것을 미리 받아온다거나 이러한 꼼수(?)같은 것을 Next가 해줘서 편리하다. Free fetching이라고 하는데 블로그라는 페이지에 들어가면 SSR을 ..

Next.js 가 해주는 가장 큰 장점중에 하나가 SSR인 걸 명심하자(Server Side Rendering) Front와 Server에서 돌아가는 주체들을 일단 알아보자. SSR 방식(전통적인 웹사이트) 예를 들어 브라우저에서 프론트 서버로 tistory 블로그를 요청했다 그러면 프론트 서버에서 백엔드 서버로는 블로그의 게시글들을 요청한다. 백엔드 서버는 데이터 베이스에다가 실제 게시글 데이터를 요청한다. 그걸 받아서 백엔드 서버는 프론트 서버로 보내주고 프론트 서버에서 데이터와 html을 합쳐서 브라우저로 보내준다. (왕복 과정을 잘 익혀두자.) CSR 방식 리액트같은 SPA(Single Page Application) 경우 즉 리액트에서 페이지가 넘어가는 과정은 눈속임이라고 생각하면 된다. 페이지..

아래 문구를 리액트 반복문으로 써보자. 사과 - 맛있다 바나나 - 맛있다 포도 - 맛있다 귤 - 맛있다 복숭아 - 맛있다 메론 - 맛있다 수박 - 맛있다 2차원 배열로 일단 만들어보자. {[['사과', '맛있다'], ['바나나', '맛있다'], ['포도', '맛있다'], ['귤', '맛있다'], ['복숭아', '맛있다'], ['메론', '맛있다'], ['수박', '맛있다'], ].map((v) => { return ( {v[0]} - {v[1]} ); })} {/* 사과 - 맛있다 바나나 - 맛있다 포도 - 맛있다 귤 - 맛있다 복숭아 - 맛있다 메론 - 맛있다 수박 - 맛있다 */} ); } } 객체로 하는거도 위 방법과 유사하다. {[ { fruit: '사과', taste: '맛있다'}, { frui..

require은 node의 모듈 시스템이다. const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root'); const NumberBaseball = require('./WordRelay'); const Hot = hot(NumberBaseball); ReactDom.render(, document.querySelector('#root')); 즉 파일에서 module.exports에 numberbaseball class를 넣어주면 그거를 다른 파일에서 require해서 불러올 수가 있다. class NumberBaseball { } 부분이 module.e..

기존 코드를 hooks로 전환 해보자. state와 ref 부분을 바꿔준다. // 기존 WordRelay.jsx const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word: '짜장면', value: '', result: '', }; onSubmitForm = (e) => { e.preventDefault(); if (this.state.word[this.state.word.length - 1] === this.state.value[0]) { this.setState({ result: '딩동댕', word: this.state.value, value: '', }); ..

핫 리로딩 하는 두 패키지를 설치해준다. npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 개발용 서버도 필요하니까 설치해준다. npm i -D webpack-dev-server 그리고 package.json파일에서 dev 부분을 webpack serve --env development로 바꿔준다. (기존 명령어는 webpack-dev-server --hot라고 쓰인다.) "scripts": { "dev": "webpack serve --env development" }, webpack.config.js에서 코드를 추가해준다. 플러그인이 장착이 되고 빌드할 때마다 plugin이 실행된다. babel loader에 plugin을 넣어준다. babel..

lecture폴더에 있는 WordRelay.jsx를 아래와 같이 틀을 잡아주고 시작한다. const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word: '제로초', value: '', result: '', }; render() { return ( {this.state.word} ); } } module.exports = WordRelay; // wordrelay.jsx const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word:..