STUDY (287) 썸네일형 리스트형 React | 이미지 업로드 후 미리보기 (on Change / image preview) 1. constructor(생성자)를 이용해 state 생성 file은 input type='file'에 들어온 파일 값을 넣고, URL은 이미지 미리보기(preview)를 보여주기 위한 값입니다. URL은 img태그의 src값에 들어감 constructor(props) { super(props); this.state = { file : '', previewURL : '' } } 2. 파일 첨부를 위한 input 태그 생성 onChange함수는 input태그에 입력된 값이 변경될 때 마다 실행되는 함수로, handleFileOnChange라는 메서드가 호출되도록 해주었습니다. 3. onChange에서 호출 될 함수 작성하기(handleFileOnChange) 파일을 한 개만 입력받는 경우이기 때문에 fi.. React | Node.js연동 파일 업로드 (+ multer) 이전글 Node.js | multer를 이용한 파일 업로드 (input type='file')을 읽고오세요! 1. form 태그 작성 2. handleSubmit메서드 작성 파일이 없는 일반 form태그였다면 json형식으로 만들었겠지만, 파일이 있다면 FormData로 만들어줘야 합니다. formData로 만들어줘야 multer에서 인식하는 것 같음! handleSubmit = (event) => { event.preventDefault(); const formData = new FormData(); formData.append('email',event.target.email.value); formData.append('pwd', event.target.pwd.value); formData.append.. Node.js | multer를 이용한 파일 업로드 (input type='file') Node.js - React 연동 파일업로드(multer사용)관련 게시글 : React | Node.js연동 파일 업로드 (+ multer) 1. multer 미들웨어 설치 multer는 multipart/form-data를 사용할 때 파일업로드를 편리하게 할 수 있도록 도와주는 Node.js 미들웨어입니다. multipart/form-data를 사용하지 않는 경우에는 multer를 이용할 수 없습니다. $ npm install --save multer 2. multer 사용준비 dest는 파일이 업로드 될 경로입니다. 자신의 프로젝트 폴더 안에 uploads라는 폴더를 생성하거나 혹은 경로 값을 변경해주시면 됩니다. var multer = require('multer') var upload = mult.. Node.js | Passport.js (passport-facebook) 생략된 부분이 많습니다. passport를 전혀 모른다면 이전 글(passport-local)을 꼭 보고오세요. 1. passport-facebook 설치 $ npm install passport-facebook 2. 사용을 위한 준비 미들웨어를 불러옵니다. 만약 다른 전략들과 함께 사용한다면 passport따로 strategy따로 선언해주세요. var passport = require('passport') , FacebookStrategy = require('passport-facebook').Strategy; 이제 https://developers.facebook.com/ 에서 API를 사용하기위한 인증 키를 발급받습니다. 그리고 발급받은 앱 ID와 시크릿 코드를 적용합니다. callbackURL은 .. React | LifeCycle API (생명주기 메서드) LifeCycle API(생명주기 메서드)는 컴포넌트가 생성 혹은 수정, 삭제될 때 실행되는 API로 크게 세 가지로 나눠집니다. Mounting : 컴포넌트가 생성될 때 발생 Updating : 컴포넌트가 수정될 때 발생 Unmounting : 컴포넌트가 사라질 때 발생 1. Mounting과 관련한 생명주기 메서드 constructor constructor(props){ super(props); //state값 지정 //setState사용불가 this.state = { counter: 0 }; //메서드에 바인딩 할 수 있음 //화살표함수를 쓴다면 생략가능 this.handleClick = this.handleClick.bind(this); } 컴포넌트의 생성자로 컴포넌트가 마운팅 되기 전에 실행됩니.. React | Node.js를 backend로 사용하는 Passport-local 로그인! React와 Node.js연동은 이전글을 참고하세요 Passport.js는 Node.js의 프레임워크인 Express를 기반으로하는 인증 모듈로, 기본 설치 및 사용방법과 Node.js + Express + MySQL + Passport-local 로그인은 아래 링크를 참고하세요. 2020/01/10 - [STUDY/Node.js] - Node.js | Passport.js (passport-local) + MySQL 1. 입력받은 ID와 비밀번호 값 상위 컴포넌트로 전달 (Login → App) onSubmit메서드를 이용하여 input태그에 입력받은 값을 App컴포넌트로 보낸다. class Login extends Component { submitHandler = (event) => { event.p.. React | Node.js와 React 연동하기 (+ CORS 에러 해결하기) React를 frontend로, Node.js(+ Express)를 backend로 사용하기! 1. Create-React-App사용하여 리액트에 필요한 기본 뼈대 구축하기 이전에 create-react-app을 설치한 적이 없다면 npm을 이용하여 설치 후, $ npm install create-react-app create-react-app을 이용하여 프로젝트 폴더를 생성합니다. $ create-react-app 프로젝트명(폴더명) 2. Node.js 서버 생성하기 위에서 create-react-app을 사용해 생성한 프로젝트 내부에 새로운 폴더를 생성하여 Node.js를 사용할 서버를 생성합니다. 이 폴더 내에서 route들도 관리하게 됨 Express를 이용하여 서버를 생성합니다. Express를.. React | update 구현하기 / onChange 리액트에서 업데이트 기능을 구현해보자... value에 수정하고싶은 데이터를 가져오는 것 까지는 성공을 했는데 수정이 안 됨 그리고 콘솔창에는 이런 경고가 떠있다. value를 이용해 수정할 값을 넣어놓은 경우 onChange이벤트 함수가 없으면 무조건 readOnly처리가 된다. 그래서 수정이 안 되는 것이었음 수정하도록 할거면 onChange함수를, 그냥 값만 가져오는 거면 readOnly옵션을 꼭 주어야 한다. onChange함수 사용하여 수정내용이 input태그에 반영되도록 하기 1. 수정할 내용(props)을 state로 지정 수정할 내용을 props에 담아올텐데, props는 readOnly의 속성을 가졌기 때문에 수정이 불가하다. (onChange함수를 쓰는 이유이기도 함) 그래서 props.. 이전 1 ··· 30 31 32 33 34 35 36 다음
