Lecture (86) 썸네일형 리스트형 WebPack 에서 babel사용 설정 2021.07.05 - [Lecture] - WebPack 설정 및 실행 위 글처럼 webpack을 처음 세팅했을때는 babel을 사용할 수 없다. babel을 사용하기 위해선 초기설정을 좀 더 해야하는데 1. npm install -D @babel/core => 바벨의 기본적인 내용을 담고있는 말그대로 babel의 core 2. npm install -D @babel/preset-env => 브라우저에 맞게 최신문법을 옛날 문법으로 세팅해줄 수 있는 라이브러리 3. npm install -D @babel/preset-react 4. npm install -D babel-loader => babel과 webpack을 연결해주는 라이브러리 이렇게 4가지를 다운 받고 webpack.config.js 파일로 .. WebPack 설정 및 실행 webpack은 node js환경에서 돌아간다. 1. npm init 2. npm install react 3. npm install react-dom 4. npm install -D webpack 5. npm install -D webpack-cli 이렇게 기본 다운 받기 webpack.config.js 라는 이름의 파일 생성 후 const path = require('path') module.exports = { name:'heini', mode:'development', // 배포할때 : production devtool:'eval', // 배포용: hidden-source-map //webpack이 입력받을 내용들 entry:{ app:['./index.jsx'] }, //내보낼 내용들 .. 경로.. React 함수 이전까지는 class로 화면표출및 동작을 보여줬는데 function을 사용하는 방법도 있다. id와 password 텍스트박스가 있고 그 둘에 들어간 값이 "admin"인채로 로그인 버튼을 누르면 로그인 완료 텍스트가 뜨고 admin이 아니면 아무것도 안뜨게 하는 코드를 클래스로 먼저 만들면 class App extends React.Component { state = { userid: '', userpw: '', isLogin: false } handleChange = e=>{ this.setState({[e.target.name]:e.target.value}) } handleSubmit = e=>{ e.preventDefault() if(this.state.userid === "admin"&&this.. React 기본 사용 일단 react 를 사용하기 위해서 이 두가지 스크립트를 사용해준다. 기본 html세팅을 아래와 같이 잡아준다. 이제 javascript 안에 react를 render하는 제일 기본 함수를 사용해보자. ReactDOM.render() 여기서 ReactDOM의 인자값을 두개 1. 넣을 내용 2. 넣을 위치이다. 두 인자값을 사용하는 기본 예시를 들어보자. ReactDOM.render( React.createElement('button',null,'버튼'), document.querySelector('#root') ) 여기서 첫번째 인자값인 createElement는 html 코드로 보자면 버튼과 같은 내용이다. 그리고 두번째 인자값으로 넣을 위치를 정해준다. 하지만 여기서 첫번째 인자값으로 createEl.. Promise 객체 이해하기 이렇게 생긴 코드에서 텍스트 'take me out'을 빼야함 function please() { return new Promise((resolve, reject) => { resolve(takeMeOut()); }) } function takeMeOut(){ const pr = new Promise((resolve, reject) => { resolve('take me out'); }); const obj = { text: function(){ return pr; } }; return obj; }; 두가지 방식으로 꺼낼 수 있다. A - then사용 1. please함수안에 takeMeOut 함수를 뺀다. let result = please() .then(function(data){console.log.. Cookie 이해하기 쿠키를 res.cookie('token','aaa') 이런식으로 서버에서 설정해서 보낼 수 있음. res.cookie()는 응답메세지에서 header부분에 쿠키를 생성해서 보내겠다는 의미다. console창에 document.cookie했을때 나오지 않도록 option값을 {httpOnly:true,secure:true,} 이런 식으로 넣어줘도 된다. 쿠키에 정보를 한번 넣게 되면 storage에 정보가 저장되서 어떤 걸 요청할 때마다 storage로부터 값을 가지고 와서 요청한다. 그래서 서버가 옮겨져도 계속 쿠키값이 남을 수 있는것. TOKEN 암호화 token이 생성되는 순서 1. client가 server에게 ID 와 PW를 보낸다.(요청) 2. server가 ID,PW를 DB에서 조회 후 결과가 맞으면 token을 생성함. (암호화를 거쳐서 생성함) 3. server가 생성한 token을 client에게 보내줌(응답) 4. client가 token을 cookie에 저장한다.(대부분) 5. 4번까지 완료한 후 client는 매 요청마다 token을 보낸다. 토큰을 생성할땐 데이터 암호화를 거치는데 그때 crypto라는 라이브러리를 사용한다. 각각 객체에 담긴 값들이 있다고 가정하자 let header = { 'alg': 'HS2560', 'typ': 'JWT' } let payload = { "sub": "1234567890", "name": "H.. 비동기 통신 로딩 처리 비동기 처리를 하는데 기다리는 시간동안 로딩이 돌아가게 만들고 싶으면 이미지를 넣고 display : none으로 준다음 버튼을 눌렀을때 display : block으로 바꿔준다. 그리고 텍스트가 특정 div에 채워질때(비동기 처리가 완료될때) 다시 display:none으로 바꿔주면 된다. 1. 이미지 삽입 + display:none처리 2. onclick이벤트 발생시 display:block처리 3. 비동기 처리 완료되었을때 display : none으로 다시 되돌려 놓음. 결과를 확인하기 위해 setTimeout을 사용해서 텀을 줘봤다. 버튼을 누른뒤 3초뒤에 결과가 나오도록 설정후 버튼을 누르면 결과값 : 3초후엔 원래 나와야할 결과 값이 나오게 된다. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
