STUDY/React (52) 썸네일형 리스트형 React | socket.io를 활용한 채팅 (+ Node.js, redux) 아직 완성은 아니지만 정리하기 위해 작성해봅니다. +) 참고 [Node.js] 웹 소켓으로 실시간 랜덤 채팅 구현 중 메시지 중복 버그 해결과정 (WebSocket Random Chat - clients rendering duplicate message) 정말 오랜만에 블로그 글을 작성하는 것 같다. 바닐라코딩에서 서버쪽 공부를 시작하면서 할 것도 엄청 많고 과제에 허덕이다보니 도저히 블로그 글을 쓸 여유가 안생겼었다. 이번에 웹소켓을 이용해서 랜덤 채팅.. im-developer.tistory.com 0. create-react-app을 이용해 기본 뼈대 만들기 2020/01/02 - [STUDY/React.js] - React | Create React App을 이용해 React 시작하기 그 후, s.. 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.. 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.. 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.. 이전 1 ··· 3 4 5 6 7 다음
