기본설정 (react,nodejs,aws)

공부겸 개인 블로그를 만들어 보려고 한다

먼저 npx create-react-app 를 입력해 리액트 프로젝트를 만든다.

*npx : 일회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지

*CRA : 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해주는 도구이자 명령어

프로젝트가 만들어 지면 왼쪽 사진과 같이 여러 파일들이 생성된다.

*favicon : 페이지 아이콘 이미지 파일

*index.html : 가상 Dom 이 들어가기 위한 html 파일

*manifest.json : 웹 앱 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역(예: 휴대기기 홈 화면)에 웹 앱이나 사이트를 나타내는 방식을 개발자가 제어하고, 사용자가 시작할 수 있는 항목을 지시하고, 시작 시의 모습을 정의할 수 있는 JSON 파일

*robots.txt : 검색로봇에게 사이트를 수집할 수 있도록 허용하거나 제한하는 국제 권고안

*reportWebVitals.js : 리액트의 성능을 측정하기 위한 것 (나중에 알아보자)

*setupTests.js : 모르겠다

*package-lock.json : node-module 구조나 package.json 이 수정되고 생성될 때 당시 의존성에 대한 정확한 정보를 품고 자동으로 생성됨

맘에 안드는 것들을 정리했다.

App.js 파일을 간단하게 수정하고 npm start 명령어로 실행하니 잘 작동한다

기본세팅이 완료되었다.

이제는 프론트 틀을 구현해 봐야겠다.

React로 블로그 만들기 19. 글쓰기 기능

블로그 만들기 (리액트) React로 블로그 만들기 19. 글쓰기 기능 SeJun3278 ・ URL 복사 본문 기타 기능 공유하기 신고하기 이번에 구현할 기능은 글쓰기 입니다. ​ 네이버 블로그만 해도 사진이나 동영상 및 파일 기능을 제공하는데 기타적인 기능은 순차적으로 구현할 계획이며 ​ 단순하게 글과 내용의 데이터를 DB 로 저장하는 단계까지만 구현해보겠습니다. ​ ​ 19-1. 기초 (레이아웃) 셋팅 ​ 리액트의 특성상 하나의 페이지에서 필요한 데이터만 받아오는 구성인만큼 효율적인 레이아웃 구성이 중요합니다. ​ 현재까지 구성된 레이아웃은 아래와 같습니다. 19-1-1. 현재까지의 레이아웃 구성 상황 ​ 로그인 기능이 구현되어 있는 header.js 을 App.js 에서 로 호출하고 있는 상태입니다. ​ App.js 는 최상위에서 렌더링 되기 때문에 App.js 에서 직접적으로 호출되는 모든 Component 는 하단부터 호출되는 Component 에 호출됩니다. ​ ​ 저는 아래에

Component 를 생성한 뒤 글쓰기 기능을 추가하겠습니다. ​ ‘src/page’ 디렉토리 안으로 ‘main.js’ 을 생성 후 아래의 코드를 추가합니다. /* src/page/main.js */ import React, { Component } from ‘react’; class main extends Component { constructor(props) { super(props) } render() { return (

This is Main layout

); } } export default main; 19-1-2. src/page/main.js 파일 생성 ​ 다음으로 같은 디렉토리 (src/page) 안에 index.js 파일을 생성한 후, 아래 코드를 추가합니다. /* src/page/index.js */ export { default as Main } from ‘./main’; 19-1-3. main.js 을 외부에서 사용할 수 있게 하는 코드 추가 ​ 이제 외부에서 main.js 파일을 불러올 수 있습니다. ‘src/App.js’ 파일에서 아래의 코드들을 추가해줍니다. /* src/App.js */ import { Main } from ‘./page/index.js’ // … render 부분

19-1-4. Main Component 를 호출 ​ Component 밑으로

Component 를 호출하는 코드인데 ​ 19-1-5. Main Component 가 추가된 레이아웃 구성 ​ 위와 같이 맨 상단에는 , 그 밑으로

Component 로 구성되는 레이아웃이 됩니다. ​ 저장 후, 페이지를 실행하면 19-1-6. head 와 main 위와 같이 주황색 부분은 head 부분, 파란색 부분은 ​main 부분으로 레이아웃이 나뉘어진 걸 확인할 수 있습니다. ​ main 부분을 좀 더 나눠보겠습니다. ‘src/page/main.js’을 다음과 같이 수정합니다. /* src/page/main.js */

Left Side

This is Main layout

Right Side

19-1-7. main Component 나누기 ​ 추가 후, 동일한 디렉토리에 ‘main.css’ 파일을 생성하고 아래의 코드를 추가합니다. /* src/page/main.css */ .Mains { display: grid; grid-template-columns: 19% 62% 19%; } #Mains-left { border-right: solid 1px #aabbaa; } #Mains-right { border-left: solid 1px #aabbaa; } 19-1-8. style 적용파일 추가하기 ​ 다시 ‘main.js’ 로 돌아와 방금 추가한 스타일 파일을 불러옵니다. /* src/page/main.js */ import ‘./main.css’; 19-1-9. main.js 스타일 파일 적용하기 ​ 적용 후, 페이지를 확인합니다. 19-1-10. Main의 레이아웃 분리 ​ 다음과 같이 Main Component 안에 다시 3개로 나눠진 레이아웃 구성을 확인할 수 있습니다. ​ Left Side 와 Right Side 는 추후에 카테고리 및 기타사항을 표시하는 Component 로 수정할 예정입니다. ​ ​ 이제 Main Component 에 router Component 를 새로 추가해줍니다. ​ 제가 추가할 router 는 기본 페이지로 작동할 ​Home Component 와 글쓰기 페이지로 작동할 Write Component 입니다. ​ ‘src/page’ 디렉토리 안에 home.js 와 write.js 파일을 생성하고 아래의 코드들을 추가해줍니다. /* src/page/home.js */ import React, { Component } from ‘react’; class home extends Component { constructor(props) { super(props) } render() { return (

This is Home

); } } export default home; /* src/page/write.js */ import React, { Component } from ‘react’; class write extends Component { constructor(props) { super(props) } render() { return (

This is Write Page

); } } export default write; ​ 작성이 귀찮으시다면 아래의 파일을 다운로드 후, ‘src/page’ 디렉토리에 압축을 해제해주세요. 첨부파일 page .zip 파일 다운로드 ​ 19-1-11. home, write Component 생성 ​ 파일 생성 후, ‘src/page/index.js’ 에 해당 파일들을 출력하는 코드를 추가합니다. export { default as Home } from ‘./home’; export { default as Write } from ‘./write’; 19-1-12. index.js 에 Home, Write Component 추가 ​ 다시 ​’src/main.js’​ 로 돌아와 아래의 코드들을 새로 추가합니다. /* src/main.js */ import { Route, Link, Switch } from ‘react-router-dom’; import { Home, Write } from ‘./index.js’; // …. render 부분 19-1-13. Route 추가 ​ 마지막으로 ‘src/inc/header.js’ 에 글쓰기 버튼을 추가합니다. /* src/inc/header.js */ {this.state.login ?

포스트 작성

: null } 19-1-14. 글쓰기 버튼 추가 ​ 삼항연산자를 사용해 현재 사용자가 로그인한 상태라면 글쓰기 버튼을 노출하고 비로그인 상태라면 숨겨둡니다. ​ 글쓰기 버튼을 클릭하면 ‘/wrtie’ 경로로 이동하여 Main 부분에서 Write Component 를 실행합니다. ​ 저장 후, 페이지를 실행합니다. ​ 위의 테스트 영상과 같이 사용자가 로그인을 하면 ‘포스트 작성’ 버튼이 생성되며 ​ 해당 버튼을 클릭했을 때 경로가 ‘/write’ 로 변경​되면서 Write Component 를 불러옵니다. ​ 다시 ‘/’ 경로로 이동하면 기본 페이지인 Home Component 를 불러오고 있습니다. ​ 이러한 경우처럼, 하나의 Component 안에서 또 여러개의 Component 를 삽입할 수 있고 레이아웃을 분할하여 필요한 데이터만 불러올 수도 있습니다. ​ ​ 19-2. 글쓰기 구현 ​ 이제 글쓰기 기능을 구현하기 위한 초기셋팅을 마쳤으니 본격적으로 글쓰기 기능을 구현해보도록 하겠습니다. ​ ​ 1. 글쓰기 폼 구현하기 ​ 기능 구현 전에 글쓰기 구현에 필요한 폼부터 구현해보겠습니다. (이 작업에는 CSS 및 HTML 에 대한 정보도 포함되어 있습니다.) ​ 일단 글쓰기의 제일 중요한 부분인 ‘제목’과 ‘내용’ 부분을 먼저 추가해줍니다. ‘src/page/write.js’ 에 아래의 코드를 추가합니다. /* src/page/write.js */

제목

내용

19-2-1. 제목과 내용 추가 ​ 적용 후, 페이지를 실행합니다. 19-2-2. 제목, 내용 적용 ​ 해당 결과는 어떠한 스타일도 적용되지 않게 작성된 순수한 HTML 코드입니다. ​ 저는 좀 더 보기 좋게 전체적인 부분과 제목 부분에 스타일을 적용해보도록 하겠습니다. ​ 일단 ‘src/page/main.css’ 파일에 아래의 스타일들을 추가합니다. /* src/page/main.css */ .Write { padding: 20px; padding-left: 30px; } .Write div { margin-top: 30px; margin-left: 50px; } #title_txt { width: 91%; padding-bottom: 30px; border: none; font-size: 22px; border-bottom: solid 1px #ababab; font-weight: bold; } #title_txt:focus { outline : none; } 19-2-3. css 스타일 추가 추가한 스타일은 다시 ‘src/page/write.js’ 에서 ​ 제목과 내용을 감싸는

태그와 제목의 태그에 각각 적용해줍니다. 19-2-4. style 적용 ​ 추가로 앞서 미리 적용했던 ‘제목’ 부분을 제거합니다. input 의 ‘placeholder’ 속성을 추가하면, input 에 입력된 값이 없을 경우 속성으로 설정된 문구가 대신 출력됩니다. ​ 저장 후 페이지를 실행합니다. 19-2-5. 제목 부분 변경 확인 ​ 위와 같이 단순한 네모 형태의 input 이 아니라 좀 더 디자인 있는 제목 형태를 구성할 수 있습니다. ​ 다음으로는 내용 부분에 대한 style 을 추가합니다. /* src/page/main.css */ #content_txt { width: 91%; resize: none; border: none; height: 500px } #content_txt:focus { outline : none; } 19-2-6. 내용 style 추가 ​ 그 다음 ‘src/page/write.js’ 의 내용 부분을 다음과 같이 수정해줍니다. /* src/page/write.js */ 19-2-7. 내용 태그 수정 ​ 수정 후, 페이지를 오픈해서 아래와 같이 잘 나오는지 확인합니다. 19-2-8. 제목 및 내용 테스트 ​ 제목하고 내용을 입력하는 입력창 구현은 끝냈으니 이제 등록 버튼을 구현합니다. ​ ‘src/page’ 디렉토리 안에 ‘right’ 디렉토리를 새로 생성한 뒤, ‘index.js’ 와 ‘right_write.js’ 파일을 생성합니다. ​ ‘right_write.js’ 파일에 다음의 코드를 추가합니다. /* src/page/right/right_write.js */ import React, { Component } from ‘react’; import ‘../main.css’; class right_write extends Component { constructor(props) { super(props) } render() { return (

포스트 등록

); } } export default right_write; 19-2-9. right_write Component 생성 ​ 다음으로, ‘src/page/main.css’ 에 등록 버튼에 대한 스타일 적용을 추가해줍니다. /* src/page/main.css */ #post_submit { text-align: center; margin-top: 30px; } #post_submit button { width: 120px; padding: 5px; border-radius: 5px; border: solid 1px #ababab; cursor: pointer; background-color: white; } 19-2-10. 등록 버튼에 대한 스타일 추가 ​ 적용된 right_write.js 를 외부에서 접근할 수 있도록 ‘src/page/right/index.js’ 에 아래의 코드를 추가해줍니다. /* src/page/right/index.js */ export { default as Right_Write } from ‘./right_write’; 19-2-11. right_write.js 출력 ​ 다음으로 ‘src/page/main.js’ 에서 해당 등록 버튼을 ‘/write’ 경로로 접근했을 때 노출될 수 있도록 route 태그로 감싸줍니다. /* src/page/main.js */ import { Right_Write } from ‘./right/index.js’; // ….. ​ Route 의 경로를 ‘/write’ 로 설정하면 글쓰기 버튼을 클릭했을 때, Right_Write Component 도 함께 적용됩니다. ​ 저장 후, 페이지를 실행합니다. 19-2-12. 글쓰기 등록 폼 구현 ​ 위의 사진과 동일하게 포스트 등록 버튼을 구현되는 걸 확인할 수 있습니다. ​ 여기까지가 글쓰기 기능에 대한 폼 완성입니다. ​ ​ 2. 글쓰기 기능 구현 ​ 구현된 폼에 따라서 입력된 값을 DB 에 저장하는 과정까지 구현해보도록 하겠습니다. ​ 먼저 ‘src/page/write.js’ 에서 제목을 입력하는 input 태그에는 ‘title’ name 값을 내용을 입력하는 textarea 태그에는 ‘contents’ name 값을 설정합니다. 19-3-1. name 값 지정하기 ​ 다음으로 ‘src/page/right/right_write.js’ 에 ‘_submitBoard’ 이름의 함수를 생성합니다. 19-3-2. _submitBoard 함수 생성 ​ 해당 함수는 제목과 내용에 입력된 문자열을 변수로 입력한 후 서버로 전송시켜 DB에 저장하게 하는 함수로 사용됩니다. ​ 클라이언트로부터 데이터를 받을 서버를 설정합니다. ‘server/route.js’ 와 ‘server/controller.js’ 에 각각의 코드를 추가해줍니다. /* server/route.js */ router.post(‘/add/board’, controller.add.board); /////////////////////////// /* server/controller.js */ add : { board : (req, res) => { console.log(req.body); } } 19-3-3. route 와 controller 설정하기 ​ 다시 클라이언트로 돌아가겠습니다. ‘src/page/right/right_write.js’ 파일의 ‘_sumblitBoard’ 함수에 서버로 접근할 수 있는 axios 를 새로 추가합니다. /* src/page/right/right_write.js */ // axios 가 호출되지 않으면 아래의 코드를 상단에 추가해주세요. import axios from ‘axios’; // const res = await axios(‘/add/board’, { method : ‘POST’, data : data, headers: new Headers() }) 19-3-4. 서버로 접근하는 axios 추가하기 ​ 여기까지 진행이 됐다면, 저장 후 서버로 데이터를 전달하는지에 대한 테스트를 진행합니다. ​ 아래와 같이 제목과 내용을 입력한 후, ‘포스트 등록’ 버튼을 클릭해 Node 에 ‘title’ 값과 ‘contents’ 값이 전달되는지 확인합니다. ​ 19-3-5. 서버로 전송되는 데이터 확인 위와 같이 터미널의 Node 에 해당 title 과 contents 가 출력되면 서버로 데이터가 전달된 걸 확인할 수 있습니다. ​ 이제 전달받은 데이터를 DB 로 저장하기 위해 ‘board’ 테이블을 새로 생성합니다. ​ ‘server/models’ 디렉토리에 ‘board.js’ 파일을 생성하고 아래의 코드를 추가합니다. /* server/models/board.js */ module.exports = (sequelize, DataTypes) => { return sequelize.define( ‘board’, { board_id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true, allowNull : false, }, title : { type: DataTypes.STRING(50), allowNull : false }, contents: { type: DataTypes.TEXT, allowNull : false }, date: { type: DataTypes.DATE, allowNull : false }, }, { charset: ‘utf8’, collate: ‘utf8_general_ci’, timestamps: false, } )}; 19-3-6. board 테이블 생성 ​ 파일 생성 후, 동일한 디렉토리 안에 있는 ‘index.js’ 파일에 board 테이블을 적용하는 코드를 추가합니다. /* server/models/index.js */ db.Board = require(‘./board’)(sequelize, Sequelize); 19-3-7. board 테이블 적용 ​ 코드를 적용하고 저장한 뒤, 테이블이 제대로 생성되었는지 확인합니다. 19-3-8. 테이블 확인 ​ 테이블 생성 후, ‘server/controller.js’ 에 controller 와 model 을 연결하는 코드를 추가하고 ‘server/model.js’ 에 DB에 데이터를 추가하는 코드를 새로 추가합니다. /* server/controller.js */ const body = req.body; model.add.board(body, result => { if(result) { res.send(true); } }) ///////////////////// /* server/model.js */ // 상단 (3~8)번 줄에 Board 를 호출하는지 확인하세요. // 없다면 Board를 새로 추가해주세요. const { Admin, Board, Sequelize: { Op } } = require(‘./models’); sequelize.query(‘SET NAMES utf8;’); ///////// add : { board : (body, callback) => { Board.create({ title : body.title, contents : body.contents, date : new Date(86400000) }) .then(data => { callback(true) }) .catch(err => { throw err; }) } } 19-3-9. Controller.js 와 Model.js ​ Sequelize 의 Create 메소드를 이용해 대괄호 안으로 들어오는 객체들의 데이터를 DB에 저장합니다. ​ 마지막으로 클라이언트에서 글 저장에 대한 알림으로 마무리를 합니다. ​ ‘src/page/right/right_write.js’ 의 ‘_submitBoard’ 함수에 해당 코드를 추가해줍니다. /* src/page/right/right_write.js */ if(res.data) { alert(‘글 등록이 완료되었습니다.’); return window.location.replace(‘/’) } 19-3-10. 글 등록에 대한 알림 코드 추가 ​ 글 등록에 대한 알림과 동시에 페이지 경로를 기본 페이지(/) 로 돌아가는 코드입니다. ​ 여기까지 적용이 됐다면 마지막으로 테스트를 진행합니다. ​ ​ 19-3. 최종 테스트 ​ 19-3-11. 글쓰기 최종 테스트 ​ 위와 같이 제목과 내용에 입력한 데이터가 DB 에 들어간 것까지 정상적으로 작동이 된 걸 확인할 수 있습니다. ​ ​ 여기까지 글쓰기 기능 구현에 대해서 알아보았고 다음에는 저장된 글 데이터를 이용해서 게시판 형태로 보여질 수 있게 구현해보겠습니다. ​ ​ 혹 틀린 정보 또는 모자란 정보가 있거나 따라하는 과정에서 오류 발생 또는 안되는 부분이 있다면 댓글이나 쪽지를 남겨주세요! 인쇄

리액트로 나만의 블로그 만들기(MERN Stack) – 인프런

중급자를 위해 준비한

[웹 개발, 풀스택] 강의입니다.

풀스택으로 나만의 블로그를 만들어 보아요~~!

✍️

이런 걸

배워요! Mongo DB Express React NodeJS Redux, Redux-Saga JWT Web Token Infinite Scroll(Intersection Observer) CKEditor5 CSS(BootStrap4) Https(GreenLock Express)

자바스크립트 하나로 풀스택 개발 OK!

나만의 블로그를 직접 만들어보세요.

주제 소개 📝

백엔드(서버)와 프론트(웹 화면)을 한 사람이 모두 만들 수 있는 기술을 풀스택(Full Stack)이라 합니다. 풀스택 기술은 다양하게 구현할 수 있지만, 우리는 자바스크립트를 이용하여 백엔드(NodeJS, Express, MongoDB)와 프론트(React, Redux, Redux-Saga, Bootstrap, Ckeditor5 등)을 만들어 볼 것입니다.

※ 해당 강의는 Node 12 LTS 또는 Node 14 LTS 버전을 사용하실 것을 권합니다(Node 15 비권장)

왜 배워야 하는지 ✒️

여러분, 자바스크립트로 하나로 모든 걸 만들 수 있다면 믿어지세요? @.@

자바스크립트 풀스택 개발자가 되면 여러분의 모든 아이디어는 바로 현실이 되며, 수익창출로 이어집니다.

덤으로!!!

프론트엔드 개발 라이브러리인 React를 배우면 React로 모바일 앱(안드로이드, 아이폰)을 만드는 React Native까지 쉽게 접근할 수 있다는 사실!!!

여러분의 머리속 아이디어는 더 이상 단순한 상상이 아닙니다.

지금 당장!!! 현실세계에 여러분들의 생각의 나래를 펼치세요.

코딩은 나의 상상을 현실화 시켜주는 도구 입니다~~~ *^^*

이 강의에서 배우는 것들 ✏️

Infinite Scroll

Category Search

CKEditor5

Comment

이밖에 MongoDB, Express, React, Node JS(이상 MERN Stack), Redux, Redux-Saga, JWT Web Token, Bootstrap4를 배우게 됩니다.

강의 특징 💡

웹 개발자는 기본적으로 자신의 지식과 기술을 저장해 놓을 블로그가 필요합니다.

하지만… 웹개발하신다면서… 아직 나의 기술로 만든 블로그가 없다고요? 그러면 한번 따라서 만들어보세요.

이 강의는 HTML, CSS 등 막 입문하신 분들을 대상으로 만들어져, 비교적 상세히 개념들을 설명하고 있습니다.

이 강의는 교육을 위한 사이트를 만드는 것이 아니라, 현재 제가 실제 운영하고 있는

블로그(https://www.ssaple.net/)를 그대로 만들어 보는 것이기에 실제 활용가치가 높습니다.

여러분만의 블로그를 만들고 지금부터 키워나가 보세요~~~

(깃허브 : https://github.com/sideproject0214/blog)

섹션마다 간단한 소개 📖

< 총 63개 강의, 815분 >

Section 1 (강의 1개, 4분)

*인트로: 기본 MERN 스택에 관한 개요와 앞으로 배울 기술 소개

Section 2 (강의 12개, 126분)

*Express(백엔드), Router, MongoDB 등 기본 서버작업

Section 3 (강의 47개, 653분)

*React, Redux 등을 활요한 프론트엔드 작업과 이에 맞춘 백엔드 작업

Section 4 (강의 3개, 32분)

*AWS Deploy 작업

Bonus (강의 1개, 15분)

*Https(GreenLock Express)

여기서 다루는 툴 🧰

MongoDB, Express, React, NodeJS, Redux, Redux-Saga, JWT Web Token, Infinite Scroll(Intersection Observer), CKEditor5, BootStrap4

*컴퓨터 사양: 리눅스, 맥, 윈도우

예상 질문 Q&A 🙋🏻‍♂️

Q. 비전공자도 들을 수 있나요?

A. 네 당연합니다. 왜냐하면 제가 비전공자로 여러분들처럼 인터넷으로 독학하였습니다. 다만 처음 입문하시는 분이라면, 리액트 자습서(https://ko.reactjs.org/tutorial/tutorial.html#completing-the-game)를 보시고 오시는 것을 추천드립니다.

Q. 리액트는 어렵나요?

A. 리액트 자체는 어렵지 않습니다. 다만, 문제는 리덕스인데, 리덕스부터 난이도가 급상승하기에 리액트가 어렵다는 편견도 존재하는 것은 사실입니다. 리덕스 없이 만들수도 있으나 사이트 규모가 커질수록 상태관리에 어려움이 발생하므로 거의 필수(?)적으로 Redux, Mobx등을 사용하게 됩니다.

이 단계만 넘기면 자유자재로 사이트를 만들수 있으니 포기하지 않으시면 좋겠습니다. *^^*

Q. MERN Stack은 무엇인가요?

A. 자바스크립트 언어 한개로 MongoDB, Express, React, NodeJS(MERN) 을 사용하여 서버(백엔드), 웹(프론트)를 모두 만드는 기술을 의미합니다.

Q. 이 강의만의 특별한 장점이 있을까요?

A. 저도 여러분처럼 인프런 등 인터넷으로 독학을 하였기에, 기존 강의에서 느낀 아쉬운 점을 보완하여 입문하시는 여러분의 입장에서 강의를 진행하였습니다.

지식공유자가 알려주는

강의 수강 꿀팁!

React를 사용하여 개인 블로그 만들기

react

axios: 비동기 요청

react-router-dom: 전방 루트

redux: 전체 응용 데이터 관리

redux-thunk:redux의 중간부품으로 비동기적인 액션을 처리하는 데 많이 사용

styled-components: CSS in JS의 일종으로 JS에 원생 CSS를 쓸 수 있다

koa

[x] 블로그 첫 페이지 목록 전시

[x] 블로그 콘텐츠markdown

[x] 블로그 내용의 디렉터리

[x] 블로그의 분류와 라벨

[x]귀환

[x] 응답식

[x] 관련 페이지(현재 이력서 제출, 본인 대학 3학년, 실습 중…)

[] 분류 페이지

[] 탭 페이지

[] markdown 코드 강조

[] 미화 페이지의 양식

state

state

state

부모 구성 요소가 손자 구성 요소나 후대 구성 요소에 데이터를 전달하려면 모든 중간 구성 요소의 도움을 받아야 한다. 그렇지 않으면 React의 context API 로 전체 구성 요소에서 데이터를 전달해야 한다.

서브어셈블리의 데이터는 상위 어셈블리나 상위 어셈블리에 전달되지 않습니다.

응용된 데이터 저장소가 너무 분산되어 있다.

store

store

action

store

store

Context API

const mapStateToProps = state => ({ blogCount : state.profile.blogCount, tagCount : state.profile.tagCount, categoryCount : state.profile.categoryCount }) const mapDispatchToProps = dispatch => bindActionCreators( { requestGetProfileInfo }, dispatch ) export default connect(mapStateToProps, mapDispatchToProps)(ProfileCard)

ProfileCard

store

profile

blogCount

tagCount

categoryCount

requestGetProfileInfo

requestGetProfileInfo

store

connect

shouldcomponentupdate

const divStyle = { color : ‘blue’ , backgroundImage : ‘url(‘ + imgUrl + ‘)’ , }; function HelloWorldComponent ( ) { return < div style = {divStyle} > Hello World! div > ; }

*, * ::before , * ::after { box-sizing : border-box; } body { margin : 0 0 100px ; padding-top : 50px ; } a { text-decoration : none; cursor : pointer; }

import ‘./reboot.css’

명칭이 충돌하기 쉽다

구성 요소의 독립성이 떨어진다

주문형 로드 불가

const Title = styled.h1 ` font-size: 1.5em; text-align: center; color: palevioletred; ` ; const Wrapper = styled.section ` padding: 4em; background: papayawhip; ` ; render( < Wrapper > < Title > Hello World, this is my first styled component! Title > Wrapper > );

styled-components

styled-components

이 내용에 흥미가 있습니까? 현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다: [ sql ] 백틱(`)과 홑따옴표(‘) DBeaver로 sql문 연습하는 과정에서 계속 오류가 발생해서 검색하는 과정에서 원하던 대답을 찾게되었다…ㅠ 대략 예시를 위와 같이 간단하게 만들어보았다. select구문에서의 where구문에서의 DBeaver… 텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오. CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

프로젝트 주소:github.com/zaleGZL/zal…만약 당신이 프로젝트가 괜찮다고 생각한다면 오른쪽 상단’star’를 클릭하여 지지해 주셔서 대단히 감사합니다!(≧▽≦)/~온라인 주소:guozeling.cn/blogs전언예전에 저는 Hexo+next로 블로그를 만들었지만 최근에 React를 배운 후에 구성 요소화 개발 사상에 깊이 빠져들었습니다. 마침 겨울방학에 시간이 생겨서 React로 블로그를 만들었습니다.React는 실제적으로 MVC의 시각층에 대응할 뿐이다. 완전한 응용을 구축하려면 React만으로는 부족하다. 우리는 데이터를 관리하는 Redux, 전방 루트를 실현하는 React-router 등 다른 라이브러리나 프레임워크가 필요하다.기술 창고프런트엔드주석: 블로그 전단 페이지는 다른 React 기반 CSS 프레임워크를 사용하지 않았고 주로 자신이 CSS를 쓰는 능력을 강화하고자 한다.백엔드블로그의 백엔드는 Node를 사용합니다.js가 개발한 것은 koa를 바탕으로 Restful API 구조를 이용하여 이루어진 것으로 전후단의 분리를 완벽하게 실현했다. 후단은 데이터 제공만 책임지고 루트의 이동, 데이터 렌더링은 모두 전단에서 이루어진다.프로젝트 주소:github.com/zaleGZL/zal…실현 가능한 기능TODO블로그 미리 보기첫 페이지블로그 상세 정보 페이지프로젝트 요약이어서 나는 내가 블로그 프로젝트를 할 때의 체험과 깨달음을 대체적으로 소개한다.React는 하나의 뷰 레이어에 불과합니다.React를 사용한 후에 저는 React 자체가 하는 일이 매우 간단하다는 것을 알게 되었습니다. 이것은 단지 하나의 시각층의 구조일 뿐입니다. 이것은 JSX 문법으로 HTML을 쓸 수 있고 구성 요소를 바탕으로 하는 개발 방식이 매우 참신하여 구성 요소가 높은 복용성을 가지도록 합니다.여러 사람이 협동하여 응용을 구축할 때 우리 모두는 하나의 작은 구성 요소만 책임질 수 있다. 이 동시에 우리는 구성 요소와 구성 요소의 결합성을 최대한 낮추고 구성 요소의 내중성을 증대시켜야 한다. 최종적으로 이 구성 요소들은 하나의 대형 응용을 구축할 수 있다.프런트엔드 라우팅전단의 발전이 매우 빠르고 항상 새로운 것이 나타난다. 예전에express를 이용하여 백엔드 응용 프로그램을 구축했다. 그때 나는 백엔드 루트가 있다는 것을 알았다. 즉, 요청한 URL 경로로 서로 다른 내용을 되돌려주고 서로 다른 페이지를 되돌려주는 것이다.내가 처음 앞의 경로를 들었을 때, 나는 처음에 그것이 새로운 물건이라고 생각했는데, 사실은 그렇지 않았다. 그것은 단지 뒷부분의 그 방법을 옮겨왔을 뿐이었다.페이지의 URL이 새로 고쳐질 때 이 URL 요청을 하지 않고 서로 다른 URL에 따라 다른 구성 요소를 렌더링할 수 있도록 프런트에서 루트를 구현했습니다.위의 코드는 바로 제 블로그에서 가장 윗부분의 루트 구성 요소를 응용하는 부분 코드입니다. 여기는react-router를 사용하고 서로 다른 루트에 따라 서로 다른 구성 요소를 렌더링합니다.응용 데이터 관리 방법React의는 사실 응용 데이터를 저장하고 서브 구성 요소에 전달할 수 있는 것이다. 소형 응용 프로그램을 구축할 때는 확실히 충분하지만 대형 응용 프로그램을 구축할 때 응용 데이터를 어떻게 관리하는지 잘 고려해야 한다.다음과 같은 문제점이 있습니다.Redux의 등장은 상기 문제를 해결했다. Redux에는 유일한 전역만 존재하고 전체 응용 프로그램의 데이터는 여기에 저장된다. 모든 구성 요소는에서 자신의 구성 요소에 필요한 데이터를 얻을 수 있고 발송을 통해 변경할 수 있다의 변경으로 해당 구성 요소가 업데이트된다.구성 요소도 업데이트된 데이터를 받을 수 있습니다.사실 Redux는로 이루어진 것이고,코드를 보면에서대상의와 하나함수를 얻었는데는 사실 바꾸는 데 쓰인다함수는react-redux의 한 방법으로react와redux를 연결하는 데 사용되며, 이 함수를 호출하면 실제적으로 고급 구성 요소를 되돌려주고 내부는 많은 성능 최적화를 했다(주로함수에 있다).CSS전단이 발전한 초기에 모두들 내용과 양식의 분리를 제창했다. 사실은 HTML과 CSS를 분리해서 쓰고 HTML에서 CSS 자원을 인용하는 것이다.그러나 전단이 발전함에 따라 부품화 개발이 점점 인정받는 것은 하나의 추세인 것 같다.그러나 전통적인 내용과 양식의 분리와는 어긋난다.구성 요소화 개발 방식에서 우리는 구성 요소의 내집성을 제창하고 이 구성 요소와 관련된 HTML, CSS, 자바스크립트를 함께 쓴다. 내가 보기에 이것은 구성 요소화 개발에 가장 적합한 문법이다.React에서 CSS를 쓰는 것은 사실 여러 가지 선택이 있다. 각각의 장점이 있겠지. 무와 채소는 각자 좋아하는 것이 있잖아. 하지만 내 눈앞에 보이는 것은 스타일드-components라는 라이브러리야. 그것도 CSS in JS의 일종이야.어셈블리의 내부 스타일이것은 사실 HTML에서 내연 스타일을 쓸 때와 같다. 만약 구성 요소가 몇 가지 스타일만 수정하면 충분히 이 문법을 사용할 수 있지만, 많은 스타일을 쓰려면 사실 적합하지 않다고 생각한다.외부 스타일reboot.cssindex.js페이지를 불러올 때, 바깥 스타일시트에서 찾을 수 있습니다.그러나 이렇게 쓰면 많은 문제가 존재한다.CSS in JS저는 개인적으로 스타일드-components를 좋아해요. 먼저 공식적인 예를 봅시다.의 핵심 사상은 양식과 상응하는 구성 요소를 연결하여 CSS 양식 내용을 계산하여 내용 해시 값을 생성하고 이 값을 이 구성 요소className의 값으로 삼는 것이다. 이로써 명칭 충돌 문제를 완벽하게 해결했다.물론의 강점은 여기에 그치지 않고 CSS 규칙의 계승, 확장, 부모 구성 요소에 따라 전달되는props 동적 계산 양식 등을 실현할 수 있다.CSS in JS는 새로운 선택인 것 같습니다. 저는 개인적으로 이런 문법을 매우 좋아합니다.

React로 블로그 만들기 #3

React로 블로그 만들기 #3

– Router 설정(2) –

1. src/Components 파일 생성

– About.js : 소개 페이지

– Board.js : 다른 사람들이 쓴 글을 볼 수 있는 게시판

– MyBoard.js : 내 글보기

– MyPage.js : 내 정보 관리

– Login.js : 로그인 페이지

2. src/Routes/index.js

– 위에서 만든 컴포넌트 추가

export { default as Home } from ‘../Components/Home’ ; export { default as Login } from ‘../Components/Login’ ; export { default as About } from ‘../Components/About’ ; export { default as Board } from ‘../Components/Board’ ; export { default as MyBoard } from ‘../Components/MyBoard’ ; export { default as MyPage } from ‘../Components/MyPage’ ;

3. src/Routes/Router.js

– 각 경로에 컴포넌트 설정

import React from ‘react’ ; import { Switch , Route } from ‘react-router-dom’ ; import { Home , About , Login , Board , MyBoard , MyPage } from ‘./index’ ;

const Router = () => ( < Switch > < Route exact path = "/" component = { Home } /> < Route path = "/about" component = { About } /> < Route path = "/login" component = { Login } /> < Route path = "/board" component = { Board } /> < Route path = "/myboard" component = { MyBoard } /> < Route path = "/mypage" component = { MyPage } /> );

export default Router ;

4. src/Layout/Navigation.js

– 기존 메뉴를 소개, 게시판, 내 글보기, 마이페이지로 수정

– Link 객체를 통해 다른 라우트 경로로 이동할 수 있음

– 각 메뉴에 라우터에서 설정한 경로로 설정

import React , { Component } from ‘react’ ; import styled from ‘styled-components’ ; import { Link } from ‘react-router-dom’ ;

class Navigation extends Component { render () { return ( < Nav > < NavList > < NavItem >< Link to = '/about' > 소개 < NavItem >< Link to = '/board' > 게시판 < NavItem >< Link to = '/myboard' > 내 글보기 < NavItem >< Link to = '/mypage' > 마이페이지 ); } }

5. 결과 확인

– 각 메뉴마다 하이퍼링크가 걸려있는 것을 볼 수 있다.

– css를 통해 밑줄이나 색 변경 등을 할 수 있다. (나중에 적용)

1) 소개

2) 게시판

[MernStack] Blog 만들기 10. Front작업, React 설치