코드코코

//라우터 관련 라이브러리 설치 yarn add react-router-dom //BrowserRouter 불러오기 import { BrowserRouter } from 'react-router-dom'; //index.js ReactDOM.render( //BrowserRouter컴포넌트로 묶어주기 , document.getElementById('root') ); Route: 특정 주소에 컴포넌트 연결하기 Link: 누르면 다른 주소로 이동시키기 - 리액트 라우터를 사용할 때 a태그 사용금지 - a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오는 것이다. a 태그의 속성때문에 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게된다. - ..

프로퍼티(Props) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용. - 속성(attribute) 형태로 전달. - 이 때, 프로퍼티 값은 수정할 수 없다. - 자바스크립트의 자료형을 모두 사용할 수 있음. - import PropTypes from "prop-types"; >prop-types라이브러리를 PropTypes 이름으로 임포트 함. props.children : 컴포넌트 태그그 사이에 넣은 값을 조회

JSX(JavaScript XML) - 자바스크립트에 XML을 추가한 확장형 문법 - 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리 - HTML이 아니라 XML의 마크업 규칙을 따른다. - 리액트 엔진을 통해 JSX파일이 기존 자바스크립트로 해석됨.(선언형 화면 기술) JSX가 javaScript로 제대로 변환되기 위해서 지켜주어야 하는 규칙 - 꼭 닫혀야 하는 태그(Self Closing 태그) - 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 함. >> >> (Fragment) : 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다. - JSX 안에 자바스크립트 변수를 보여줘야 할 때에는 { }으로 감싸서 보여줍니다. - style 과 className >> 인라인..

*웹소켓 : 실시간 양방향 통신지원 1. soket.io -soket.io모듈의 메서드 -on: 소켓 이벤드 연결 -emit: 소켓 이벤트를 발생 2. 소켓통신종류 -public : 자신을 포함한 모든 클라이언트에 데이터를 전달 -broadcast:자신을 제외한 모든 클라이언트에 데이터를 전달 -private : 특정 클라이언트에 데이터를 전달 ----------------------------------------------------------------------------------------------------------------------------------- 1. npm i socket.io@1 설치 - socket.io로 설치 안한 이유는 1.7.4 버전을 사용하기 위해서 - 호환성에..

1. app.js - req.params.id : req 객체에 'parameter'라는 프로퍼티가 'id'라는 프로퍼티로 접근하여 요청한다. - 작성 중간중간 에러가 있는지 확인 하면서 진행하는 데, 에러의 80%는 오타이거나 대소문자 구분이다. - ejs 템플릿을 사용, ejs 템플릿의 반복문을 사용하여 데이터를 가져온 것은 아님. - node.js 교과서 와는 다른 방식으로 진행 const express = require('express'); const ejs = require('ejs'); const mySql = require('mysql2'); const bodyParser = require('body-parser'); const fs = require('fs'); const client = ..