전체 글
-
#2-1 _app.js로 레이아웃 분리하기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 6. 17:45
useCallback 은 useMemo와 상당히 비슷한 함수입니다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데요, 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있습니다. 우리가 방금 구현한 Average 컴포넌트를 보면, onChange 와 onInsert 라는 함수를 선언해주었습니다. 이렇게 선언을 하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이 새로 생성됩니다. 대부분의 경우에는 이러한 방식이 문제가 되지 않지만, 컴포넌트의 렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진다면 이 부분을 최적화 해주시는 것이 좋습니다. Hoock => import React, { useState, useCallback } from "react"; const..
-
#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": ..
-
191223_TILTIL(Today I learned) 2019. 12. 23. 23:25
오늘 한 일 호흡을 다듬었다. 어제 강의시청중에 멘탈이 나간 부분을 다시금봤다. 여전히 이해하는게 어렵지만.. 그래도 어제보단 나았다. 맨땅에 헤딩 해보라고 하면 당연히 못하겠지만, 그래도 나중에 깃헙에 올린 내 코드를보면서 사용할 수는 있겠다 싶었다.. 리액트 토이프로젝트가 아직도 안끝났다.. 여전히 앞전에 작성한 코드를 안보면 구현에 어려움이 있는건 똑같다. 또, 나는 정말 디자인적으로 욕심이 엄청난거같다.. 하지만 그 생각을 실체화 시킬 힘이 딸린다는게 흠이지만..