STUDY (287) 썸네일형 리스트형 React | onSubmit event (input값 접근하기) 이전 글(React | onClick event (+ 컴포넌트 이벤트))에서 이어집니다. 새로운 선수를 입력받아 state를 변경하는 이벤트를 구현해보자 우선 Create라는 이름의 새로운 컴포넌트를 생성해주었다. 그리고 export를 통해 컴포넌트를 사용할 수 있도록 한다. import React, { Component } from 'react'; class Create extends Component { render() { return( 선수 추가 ); } } export default Create; export된 Create컴포넌트를 App.js에 추가한다. import Create from './components/Create'; class App extends Component { constru.. Node.js | Passport.js (passport-local) + MySQL Node.js 인증 미들웨어인 Passport.js는 Node.js의 프레임워크인 express를 기반으로 합니다. express관련 이전 글을 참고하세요! 2019/12/18 - [STUDY/Node.js] - Node.js | Express 사용하기 (기본 Routing) 2019/12/23 - [STUDY/Node.js] - Node.js | Express application generator Passport.js Simple, unobtrusive authentication for Node.js www.passportjs.org 1. 설치 npm을 이용하여 passport.js를 사용하기 위해 passport를 설치하고, $ npm install passport ID(username)와 비밀번호.. Node.js | Session 알아보기(express-session) 1. 설치 express-session이라는 미들웨어를 설치해줍니다. express-session은 Node.js의 프레임워크인 Express를 사용할 때 세션을 관리할 수 있도록 하는 미들웨어임 $ npm install express-session 2. 사용준비 sercret: 반드시 필요한 옵션으로 세션을 암호화하여 저장함 resave: 세션이 변경되지 않아도 계속 저장됨(덮어쓰기) 기본 값은 true이지만 false로 사용할 것을 권장하고있음 saveUninitialized: 세션을 초기값이 지정되지 않은 상태에서도 미리 만들어 저장함 세 옵션은 기본적으로 요구되는 옵션으로, 특별한 경우가 아니라면 기본적으로 세 옵션을 모두 사용하면 된다. var session = require('express-s.. Node.js | 쿠키(cookie) 알아보기 (쿠키를 이용한 ID저장하기) 1. cookie-parser 설치 만약 express generator를 이용했다면 기본적으로 설치되어 있으니 생략 가능하다. $ npm install cookie-parser 설치한 cookie-parser를 사용하기 위한 준비 var express = require('express') var cookieParser = require('cookie-parser') var app = express() app.use(cookieParser()) 2. cookie 생성 쿠키를 생성하는 코드는 다음과 같다. request가 아닌 response! res.cookie('cookieName', 'cookieValue') +) 생성된 쿠키확인 req.cookies +) Session cookie / Permane.. React | onClick event (+ 컴포넌트 이벤트) 태그 클릭 시 값을 받아와 이미지 파일 경로를 변경해 사진이 변경되도록 하는 이벤트 처리 Blahblah라는 컴포넌트를 잠시 주석처리(import도 주석처리)한 후, Blahblah컴포넌트 안에 있던 태그를 직접 적음 선수 이름을 클릭하면 value라는 어트리뷰트에 담긴 값을 받아와 file이라는 state값을 변경해 이미지 파일이 변경되도록 함 this.state와 this.setState함수의 차이점 this.state는 constructor함수 안에서 사용되어야 하며, 생성자의 역할을 함 this.setState는 생성자에서 설정한 state값을 변경할 때 사용 bind함수 안에 this라는 인자값을 전달함으로써 this를 onClick이벤트 함수 안에서 사용할 수 있게 됨 쉽게말해 bind함수의 .. React | State 사용하기 (+ 리스트와 key) State 값 설정(초기화) State값의 초기값을 설정할 때는 constructor를 이용해야 하며, 이 부분에서 props의 값도 전달받는다! ※ 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 함 +) 리스트와 key 여러 엘리먼트를 전달 할 때는 배열 형식으로 엘리먼트 모음을 만든다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다. +) 참고한 공식문서 State.. React | 컴포넌트(Component)와 Props 알아보기 컴포넌트(Component) 선언 방법 함수로 정의 function Welcome(props) { return Hello, {props.name}; } Class로 정의 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } Class로 정의할 경우 React.Component를 상속받아야 하며, render() 메서드를 반드시! 사용하여야 함 컴포넌트(Component) 선언하기 ※ 컴포넌트 명은 반드시 첫 글자가 대문자가 되어야 함 소문자로 시작할 경우 DOM으로 인식 export default 컴포넌트명; 을 통해 해당 컴포넌트를 내보낸다. (다른 곳에서 import를 통해 사용할 수 있도록) 내가.. React | Create React App을 이용해 React 시작하기 Create React App · Set up a modern web app by running one command.Set up a modern web app by running one command.create-react-app.dev 1. npm(혹은 npx)을 이용하여 Create React App 설치 npx를 이용하면 앱을 일회성으로 설치하고 실행한 뒤 자동으로 지워지므로 항상 최신버전으로 사용할 수 있다고 함 2. 폴더 생성 후 앱을 이용하여 개발환경 구축 create-react-app react-sample로 해도 됨! 3. 샘플 실행하기 터미널 혹은 command를 이용$ npm start * index.html, index.js, package.json파일을 제외한 나머지 파일들은 수정.. 이전 1 ··· 31 32 33 34 35 36 다음
