본문 바로가기

분류 전체보기

 (163)
웹 배포 Amazon ec2 Ec2 인스턴스 생성 Ami에서 ubuntu선택 인스턴트 유형도 ubuntu 선택 보안 그룹 구성에서 http https 유형 추가 시작하기 >> 새 키 페어 생성 // 이름 >> 키 페어 다운로드 다운로드한 키 페어 배포할 파일에 값 넣어주기 : gitignore로 깃에 올라가지 않게 해야함 인스턴스 체크 후 연결페이지 들어가서 ssh 클라이언트 들어가서 맨 마지막줄 복사 터미널에서 pem 파일 있는 폴더로 접근 후 sudo ssh명령어 복붙 순서대로 Sudo apt-get update Sudo apt-get install -y build-essential Sudo apt-get install curl Curl -sL http://deb.nodesource.com/setup_14.x..
WebPack 확장자 처리 webpack에서 파일을 불러올때 확장자가 없으면 오류가 난다. 예를들어 loginBox라는 jsx 파일이 있고 그 파일을 불러오고자 한다. import LoginBox from './loginBox' 하지만 이렇게 확장자 없이 불러오면 오류가 나서 import LoginBox from './loginBox.jsx' 이렇게 확장자 표시를 해줘야한다. 이때 확장자 표시가 없이 파일을 불러오기 위해서 webpack에서 처리를 해줄 수 있다. webpack.config.js 파일에 이 구문만 추가해주면 첫번째 처럼 확장자가 적혀있지 않더라도 오류 없이 처리가 가능하다. resolve:{ extensions:['.js','.jsx'] },
WebPack import 사용 본래 node js에서 특정 라이브러리나 파일을 불러올때 require를 사용한다. 예를 들어 const React = require('react'); const {Component} = React; 이런 식이다. 하지만 webpack을 사용할때는 이런 부분이 import 로도 처리가 가능하다. import React,{Component} from 'react' 이렇게 import로 처리한 애들은 babel에서 한번 더 처리가 되고 require는 nodejs에서 처리가 된다.
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..

티스토리툴바