융융이'Blog

언제 함수형 컴포넌트를 사용해야 할까? 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적습니다. 리액트 v16이상에서는 함수형 컴포넌트 성능이 클래스형 컴포넌트보다 조금 더 빠릅니다. 그래서 state나 라이프사이클 API를 꼭 써야 할 때만 클래스형태로 변환하여 컴포넌트를 작성하면 됩니다. import React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; import React from 'react'; const Hello = ({name}) =>{ return (..

리액트의 라이플 사이클은 총 세가지 마운드, 업데이트, 언마운트 입니다. 라이플 사이클에서 주로 사용되는 함수들 render()함수 이 메서드는 컴포넌트 모양새를 정의합니다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환합니다. 이 메서드 안에서 절대로 state를 변형해서는 안되며, 웹브라우저에 접근해서도 안됩니다. DOM 정보를 가져오거나 변환를 줄 때느 componentDidMount에서 처리 해야합니다. constructor 메서드 constructor(props){...} 이것은 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행됩니다. 이 메서드에서는 초기 state를 정할 수 있습니다. ##componentDidMount메서드 이..

import React, {Component} from 'react'; class IterationSample extends Component{ render(){ const names = ['123', '345','567'] const nameList = names.map( (name, index) => ({name}) ) return ( {nameList} ) } } export default IterationSample; react에서는 배열을 나열할 때는 반드시 고유key를 정해줘야한다. 보통 key 값으로 index를 자주 사용한다.

REACT에서 지원하는 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Image Wheel Animation Media Transition import React, {Component} from 'react'; class EventPractice extends Component { state = { message: "" } constructor(props){ super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } //값이 변화할 때 handleChange(e)..

구조가 MVC, MVW등인 프레임워크와 달리, 오직 V만 신경 쓰는 라이브러리입니다. DOM이란? Document Object Model의 약어입니다. 객체로 문서 구조를 표현하는 방법은 XML이나 HTML로 작성합니다. Virtual Dom 데이터를 업데이트하면 전체 UI를 Virtual Dom에 리렌더링합니다. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다. 바뀐 부분만 실제 DOM에 적용합니다.

app.js ... //CORS const cors = require('cors'); let corsOptions = { origin: 'http://localhost:3000', optionsSuccessStatus:200 } ... app.use(cors(corsOptions)); ... CORS란? Cross Origin Resource Sharing 의 줄임말로 cross-site http Request를 가능하게 하는 표준 규약이다. 짧게 설명하자면 API 호출하고자 하는 서버의 도메인이 Client의 서버 도메인과 다를 경우에 CORS를 이용하여 가능하게 설정해주는 것을 말합니다. Prefilight Request 브라우저는 실제 요청을 전송하기 전에 options..

var express = require('express'); var path = require('path'); //cookieParser: 요청된 쿠키를 쉽게 추출할 수 있도록 도와주는 미들웨어 입니다. var cookieParser = require('cookie-parser'); // Morgan : 로그 기록을 남기는모듈 var morgan = require('morgan'); //connect-flash : 일회성 메시지들을 웹 브라우저에 나타낼때 사용하는 모듈 var flash = require('connect-flash'); //passport 모듈 const passport = require('passport&#3..

Sequelize는 nodejs에서 데이터베이스를 ORM으로 바꿔주는 모듈이다. 만약 데이터베이스를 mySQL이나 postgres를 사용한다면 유용하게 데이터베이스를 구축하고 raw쿼리를 사용하지 않고 쉽게 쿼리문을 작성할 수 있게 한다. 세팅 console창 npm i sequelize mysql2 npm i -g sequelize-cli sequelize init 위에 같은 콘솔을 입력하면 config/config.json 파일이 생기고 각종 sequelize 관련된 폴더들이 생성될 겉이다. config/config.json { "development": { "username": "root", "password": PASSWORD, "database": DATABASE_NAME, "host": "12..