개키우는개발자 : )

흩어져 있는 state 들을 하나로 모아서 컴포넌트 마다 필요한 state를 던저 주면 프로그램 개발과 관리에 효율이 좋습니다. state 들을 중앙에서 관리해주는 리덕스 라이브러리를 간단하게 소개 합니다.. { isLoggedIn : false, // 로그인 여부 -> A,C user : {}, // 로그인한 사용자 -> b,c mainPosts: [], //메인 게시글들 -> c ... } -> store 하나의 state 를 A에 보낼수도 있고 C 에도 보낼수 있습니다. Redux 는 state 의 역할을 합니다. 그래서 Redux를 쓰면 React의 state를 쓰지 않아도 됩니다. 하지만 대부분 두가지를 같이 씁니다. Redux의 state는 복잡할때 사용을 하고 React의 state는 간단할..

컴포넌트를 분리하면 여러가지 장점이있다. 캡슐화 , 확장성 , 결합성 , 재사용성 , 가독성 등등.. 여러가지 장점이 있기때문에 컴포넌트를 분리를 해줍니다. 반복문 , 조건문 , 폼 안의 엘리먼트 들을 분리해주었습니다. components 폴더 안에 js 파일을 생성합니다. NicknameEditForm.js import React from 'react'; import { Form, Button ,Input} from 'antd'; const NicknameEditForm = () => { return ( 수정 ); } export default NicknameEditForm; PostCard.js import React from 'react'; import {Button, Card , Icon , Av..

프로필 화면을 만들어 보겠습니다. profile.js import React from 'react'; import { Form, Button , List , Input, Card , Icon} from 'antd'; const Profile = () =>{ return ( 수정 ( )} /> ( )} /> ); }; export default Profile; 배열안에 jsx를 쓸땐 key 가 꼭 필요합니다. 파일들 안에 if문 또는 반복문 사이의 코드들은 나중에 최적화를 위해 모두 컴포넌트화 시키겠습니다. 출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw ZeroCho TV 조현영(zerocho)의 JS 프로그래밍 강좌 시간 나는대로 저녁 10..

메인 화면 에 작성 글 영역 꾸며주기 index.js import React from 'react'; import { Form , Input , Button, Card , Icon , Avatar} from 'antd'; const dummy = { isLoggedIn : true, imagePaths: [], mainPosts : [{ User : { id : 1, nickname : "Dogveloper", }, content : "첫번째 게시글", img : 'https://source.unsplash.com/random', }], } const Home = () =>{ return ( {dummy.isLoggedIn && 이미지 업로드 짹짹 {dummy.imagePaths.map((v,i) =>{..

로그인 폼 만들기 dummy 데이터의 isLoggedIn : true 이면 로그인 상태 false 이면 로그아웃 상태를 삼항 연산자로 비교를 하였습니다. import React from 'react'; import Link from 'next/link'; import {Menu, Input , Button, Row , Col , Card , Avatar , Form} from 'antd'; import PropTypes from 'prop-types'; const dummy = { nickname : 'Dogveloper', Post : [], Followings : [], Followers : [], isLoggedIn : true, }; const AppLayout = ({children}) =>{ ..

antd 를 사용하여 화면의 디자인을 구성합니다. https://ant.design/components/grid/ Ant Design - A UI Design Language Use row-flex define flex layout, its child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node layout mode. ant.design antd는 반응형 을 기본적으로 제공합니다. 가로 너비 기준 xs : 모바일 sm : 태플릿 md : 노트북 lg : 데스크탑 각각 px이 정해져있습니다. 로그인 했을때 어떻게 보여지는지 dummy..

React 에서 제공해주는 기능중 prop 검증 기능이있다 부모에서 자식에게 물려주는 값(prop)을 검증해준다. npm i prop-types https://www.npmjs.com/package/prop-types prop-types Runtime type checking for React props and similar objects. www.npmjs.com prop 이 있는곳에 propTypes 설정 AppLayout.js import React from 'react'; import Link from 'next/link'; import {Menu, Input , Button} from 'antd'; import PropTypes from 'prop-types'; const AppLayout = ..

중복되는 레이아웃 들을 분리하는 작업. index.js , profile.js signup.js 의 모든 파일에 같은 코드가 중복이 되는 영역이 있다. Head영역과 AppLayout 영역이 중복이 된다. 그렇기 때문에 저 부분을 분리 해준다. 레이아웃을 위한 파일을 Next 가 지정해 놓았다 pages 폴더 안에 _app.js 라고 파일을 생성한다. 모든 js 파일이 _app.js를 부모 컴포넌트로 인식한다. _app.js 작성 import React from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; const NodeBird = ({ Component }) => { return ( );..

signup.js 에 회원가입 폼을 만들겠습니다. 회원가입 폼의 기능엔 비밀번호와 비밀번호 체크의 검증 함수 체크박스를 체크 유무 검증 기능, 그리고 일반적으로 함수를 만드는 것과 Coustom Hook, Hook들과 일반 함수, 값을 조합해서 새로운 Hook을 만드는 법을 확인해보겠습니다. 일반 함수 방법 Coustom Hook 방법은 난이도가 있는 방법입니다. 그럴땐 일반적으로 사용하셔도 전혀 상관없습니다. import React, {useState} from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; import { Form , Input , Checkbox , Button} from ..

기존에 만들었던 user폴더 , about.js 는 삭제해 줍니다. 그리고 새로 profile.js , signup.js 파일을 만들어 줍니다. AppLayout.js import React from 'react'; import Link from 'next/link'; import {Menu, Input , Button} from 'antd'; const AppLayout = ({children}) =>{ return ( 노드버드 프로필 회원가입 {children} ); }; export default AppLayout; index.js import React from 'react'; import Link from 'next/link'; import Head from 'next/head'; import ..

기본적인 디자인을 적용하기 위해 Ant Design을 사용합니다. https://ant.design/ Ant Design - A UI Design Language ant.design 터미널에서 npm i antd 로 설치합니다. 중복되는 레이아웃을 쉽게 관리하기위해 components 폴더와 그 하위에 AppLayout.js 파일을 만듭니다. pages 는 next 기본 설정이기때문에 꼭 pages라고 만들어야 하지만 components는 자유롭게 원하는 폴더명으로 만들어도 상관없습니다. AppLayout.js 를 작성합니다. key 는 반복문 역할을 하기 때문에 key 값을 꼭 넣어주어야 합니다. {children} 은 props 입니다. children을 사용하기 위해 index.js 에 import..

front 폴더 안에 pages 폴더 생성 pages 폴더 안에 index.js 파일을 생성 합니다. index.js 를 작성합니다. 제로초님 강좌에선 hooks 문법을 주로 사용하십니다. import React from 'react'; const Home = () =>{ return ( Hello, Next! ); }; export default Home; index.js 실행시키기 위해선 pakage.json 의 설정을 변경해 주어야 합니다. next가 자동으로 설정후 서버를 실행합니다. // 수정전 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test":..

Project Folder 만들기 React-NordBird 프로젝트 폴더 생성 후 그 하위에 각각의 front 폴더 , back 폴더 각각 생성 에디터에서 터미널을 켭니다. 터미널에서 front 폴더로 이동합니다. 그 이후에 npm init을 선언해줍니다. npm init 은 노드 프로젝트를 만들겠다는 선언 합니다. next나 react는 노드가 필수입니다. 노드는 서버가 아니라 자바스크립트 실행기입니다. 그렇기 때문에 노드도 꼭 같이 배워줘야 합니다. npm init을 이용하여 package.json 정보를 입력합니다. 직접 package.json 파일을 생성해서 만들어도 가능하지만 좀 더 편하게 만들 수 있도록 도와주는 게 npm init입니다. 정보를 입력 후 엔터를 치면 다음으로 넘어갑니다. 3..

- 에디터 Visual Studio Code - 프런트 서버 React, Next Redux Redux-saga Styled Components - 백앤드 서버 Express Database(MySQL) ORM (시퀄라이즈) 패스포트 multer(S3) Socket.IO 이미지 압축(람다) 프런트 서버와 백앤드 서버의 분리 이유 -장점 서로의 역할이 다르기 때문에 내가 사용하는 웹 서비스 요청이 프런트 서버의 요청이 많아질 경우 프런트 서버를 늘리면 되고, 데이터 처리가 많은 서비스 일 경우 백앤드 서버를 늘려주면 된다. 이러한 방법을 스케일링이라고 합니다. -단점 CORS 이슈 복잡도가 증가합니다. 서로 주소가 달라 데이터를 주고받기가 어려우며 보안적인 문제도 있습니다. 그렇기 때문에 이 부분의 처리하..