react (24) 썸네일형 리스트형 [react] 리액트가 무엇일까(컴포넌트,게임엔진,npm,웹팩) 리액트를 이용해서 프로젝트를 만들고 있다 사용하면서도 자세하게 알려고 한적이 있던가 알아보자 리액트는 프론트엔드 프레임워크 중 하나다 현재 많이 쓰이는 프레임워크가 리액트(react), 앵귤러(angular), 뷰제이에스(vue.js) 등이 있다 앵귤러는 화면 출력, 형상 관리, 배포하여 완성형 프레임워크를 지향한다 뷰제이에스는 가장 나중에 나왔고 다른 프레임워크 장점은 유지하고 단점은 보완하였다 이중 가장 많이 사용하는게 리액트다 페이스북도 리액트로 개발 되었다 리액트개발자 찾는 기업이 많다고 한다 좀 이득이다 컴포넌트(component) 가장 큰 특징은 "화면 출력에 특화된 프레임워크"이다 컴포넌트는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성한다 컴포넌트를 만드는 과정은 레고 .. [프로젝트]채팅앱기본 React에서 Socket.io를 사용해보자(node.js) 채팅 앱 같이 실시간 연결 되어 소통이 일어 날 수 있게 해야한다 친구 영빈이가 가르쳐 줬다 복습 해보자 react 프레임워크에서 서버는 node.js 언어를 사용했다 우선 사용 할 모듈을 설치해 주자 npm install socket.io npm install socket.io-client 서버 사용 하기 위해 npm install body-parser npm install cors npm install express express, cors, bodyParser 모듈도 받아줬다 준비가 됐다 '클라이언트페이지1' 과 '클라이언트페이지2', 그리고 '서버페이지' 세개의 .js 파일을 만들 거다, 클라이언트는 라우터로 나눠주었다 "socket.emit 데이터 줄때" "socket.on 데이터 받을때" "s.. [react] Lifecycle이란 (Mount,PropsUpdate,StateUpdate..) 생명주기 이다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다 한 번에 이해 할 수있는 그림이다 Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 한다 ① 컴포넌트가 시작되면 context, defaultProps, state를 저장한다 ② componentWillMount 메소드를 호출한다 ③ render로 컴포넌트를 DOM에 부착한다 ④ Mount가 완료된 후 componentDidMount가 호출된다 주의: componentWillMount 에서는 Mount중 이기 때문에 pops나 state를 바꾸면 안된다 그리고 아직 render하지 않았기 때문에 DOM에도 접근 할 수 없다 componentDidMount 에서는 DOM에 접근할 수 있다 때문에 주로 AJA.. [프로젝트] props를 사용해서 컴포넌트를 껐다 키자(react) 요새 회원가입 페이지를 만들고 있다.정말 심플하고 트랜디하게 잘만들었다 그치만 회원가입완료가 떴는데 입력하던 폼은 안사라지고 그대로 있다 props로 임마를 사라지게 해보자 !!!! 나의 js파일 구조는 signup_button 컴포넌트 ↓ 하위 signup_page 컴포넌트 버튼(signup_button)을 누르면 Dialog 팝업의(signup_page)가 뜨는 구조다 import React from 'react'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import.. [프로젝트] nodemailer 사용해서 인증번호 확인 해보자 ① (react) 회원가입을 할 때 이메일을 보낸 후 인증번호를 확인 할 때가 있다 감사하게도 구글에서 nodemailer API를 지원해준다. 빨리 해보자!!! 만들고 있는 회원가입 form 이다 '전송'버튼을 누르면 클라이언트에게 텍스트가 전송 되게 해볼 것이다 우선 구글 아이디에 설정이 몇 개 필요하다 https://accounts.google.com/DisplayUnlockCaptcha 요기로 가서 허용 해주자 https://accounts.google.com/DisplayUnlockCaptcha 요기도 방문해 주자 '계속'클릭 이메일을 보낼 계정 세팅은 끝났다 nodemailer를 사용할 모듈이 필요하다 npm install nodemailer --save 설치 해주자 버튼 누르고 서버에게 요청 할 클라이언트.j.. [프로젝트] id 중복확인 기능을 만들자 !!! ② (react) 앞서 말했던 server.js 와 index.js 파일을 만들어 보자 !! 우선 소스 경로는 이렇게 만들었다. 이유는 친구들이 이렇게 하길래 따라했다 참고로 src 폴더 바깥이다 const express = require('express'); //익스프레스 모듈 가져오기 const app = express(); const cors = require('cors'); //cors를 사용하고 싶다 const bodyParser = require('body-parser'); //body-parser을 사용하고 싶다 const port =3001; //서버포트는 3001번 포트 const route = require('./routes/index'); //router가 있는 곳이다 만들 index.js다 app.u.. [프로젝트] id 중복확인 기능을 만들자 !!! ① (react) react framework + 노드 express + mysql 디비를 이용해서 태그에 입력 값을 서버로 보내고 데이터베이스에서 동일한 id 찾은 뒤 사용 가능한지 여부를 가르쳐주는 기능을 구현해보자 걍 아이디 중복확인 기능이다 express는 react와 mysql을 연결해주는 웹 서버 프레임워크다 react환경에서 사용하려면 사용할 모듈을 받아 주어야한다. 어우 좀 많다 npm install mysql// mysql 모듈 npm install express // express 모듈 npm install cors // cors 모듈 npm install body-parser // body-parser 모듈 세 개의 파일을 맨들어 사용할 건데 미리 알고 가자 Signup_page.js server.js.. [HTML] 띄어쓰기 하는 방법 텍스트 내 띄어쓰기를 해보자 난 코드를 이렇게 썼는데 출력물은 요렇게 붙여서 나온다 아 띄어쓰기 하고싶다!!!!! 그럴땐 를 중간에 끼워보자 와우!!!!! 된다!!! 이전 1 2 3 다음
