React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js
-
#1-7 회원가입 state와 custom hookReact로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 5. 19:49
- signup.js import React, { useState } from "react"; import AppLayout from "../components/AppLayout"; import Head from "next/head"; import { Form, Input, Checkbox, Button } from "antd"; const Signup = () => { const [id, setId] = useState(""); const [nick, setNick] = useState(""); const [password, setPassword] = useState(""); const [passwordCheck, setPasswordCheck] = useState(""); const [term, se..
-
#1-6 회원가입 폼 만들기React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 4. 15:51
- signup.js - 리액트 훅을 사용해서 이벤트 처리 - 강사님인 '제로초'님은 리액트에서 폼 만드는게 가장 지루한 일이라고 하셨는데, 왜 그런지 이유를 알것같았다. import React, { useState } from "react"; import AppLayout from "../components/AppLayout"; import Head from "next/head"; import { Form, Input, Checkbox, Button } from "antd"; const Signup = () => { const [id, setId] = useState(""); const [nick, setNick] = useState(""); const [password, setPassword] = u..
-
#1-5 기본 페이지틀 만들기React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 4. 15:31
- front폴더-> pages폴더-> profile.js import React from "react"; import AppLayout from "../components/AppLayout"; import Head from "next/head"; const Profile = () => { return ( 내 프로필; ); }; export default Profile; - front폴더-> pages폴더-> signup.js import React from "react"; import AppLayout from "../components/AppLayout"; import Head from "next/head"; const Signup = () => { return ( 회원가입; ); }; export ..
-
#1-4 Ant design 적용React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 4. 15:11
엔트디자인 Ant Design - A UI Design Language and React UI library AntV Simple, professional, with unlimited possibilities for data visualization solutions Learn more ant.design *실무에서는 그대로 잘 안쓰임(디자인을 커스터마이징해서 쓰임) *코드가 다 리액트라 바로 갖다붙임 - npm i antd ( cd front 후 설치 ★) 레이아웃작업 - front폴더-> components폴더-> AppLaout.js import React, { children } from "react"; import { Menu, Input } from "antd"; const AppLayout ..
-
#1-3 Next 라우팅 시스템React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 4. 14:07
- 리액트는 raect-router로 페이지를 왔다갔다 하지만 Next는 자체 라우터가 있어서 간단하게 사용가능 - npm i -g next ( cd front로 front폴더로 이동해서 설치할 것★ ) - package.json 설정 ( cd front로 front폴더로 이동해서 설치할 것★ ) "scripts": { "dev": "next", // 개발시 next 콘솔에 치면 자동으로 next 개발모드가 되고 "build": "next build", "start": "next start" // npm start하면 자동으로 배포모드 }, - npm run dev 로 로컬호스트 열음 - ! import 지워도됨 - next가 알아서 처리해주기 때문 - 그러나 강의에서는 우리가 설정해준 .eslintrc..
-
#1 프로젝트 구조React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 4. 01:13
프로젝트 구조 - 폴더를 프론트와 백엔드로 나눔 - cd front , npm init - npm i react react-dom next , npm i -D nodemon webpack , npm i -D eslint (협업 작업시 코드스타일 규칙을 정할수있음★) - front -> .eslintrc파일 생성 { "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", // import, export등등 "ecmaFeatures": { "jsx": true } // jsx문법 허용 }, "env": { "browser": true, "node": true // react는 브라우저와 node위에서 돌아가기때문에 true }, "extends": ..