이번 시간에는 GitHub에 있는 코드를 EC2에서 그대로 사용하고 싶을 경우에 보면 되겠다 1. GitHub 준비 일단 GitHub에 소스코드가 있어야 한다. Aws-Test app back-end test WebContent src ..... pom.xml front-end blog public src .... package.json 프로젝트 구조는 위와 같다 2. EC2에 Git Install 그다음은 EC2에 접속하도록 한다. sudo yum install git -y 위의 코드를 입력하면 Git을 install 할 수 있다 git version Compelte! 를 확인한 다음 위의 코드를 입력해서 잘 Install 되었는지랑 Version도 확인한다 이렇게 결과가 나왔다면 잘된 것이다 3. g..
이번 시간에는 프론트단（React.js, Vue.js, Angular.js）을 돌릴 수 있는 Node.js 설치와 그다음 React App을 구동해 보겠다 일단 EC2 인스턴스에 Terminal로 접속하도록 하자 혹시 인스턴스가 없는 경우 아래 링크 클릭 https://initstory.tistory.com/89?category=1029330 인스턴스가 있는데, 중지를 한 경우 아래의 링크의 2번까지!! https://initstory.tistory.com/90?category=1029330 1. Node.js Install curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash 위의 코드를 복사한 다음 넣고 ente..
이 포스팅은 3편이상 정도로 만들예정이고 내가 삽질을 하면서 Tomcat Server와 Node.js Server을 구축하는 포스팅이다. tomcat 에는 Spirng Node.js 에는 React를 올릴 것이다 AWS（Amazon Web Service）는 아주 유명하고 유명한 Cloud 여러 회사들이 자사에 서버를 놔두면 너무 비싸고, 감당이 안 되는 경우가 많았기 때문에 Computer를 빌려서 Server를 구축해서 사용하는 회사가 많다 그리고 현재 일할 때 AWS로 배포하는 개발자도 많다. 하지만 난이도가 약간 높아서 벽을 느낄 수가 있지만, 우리의 Google과 AWS Documentation을 보면서 해결해 보자 1. EC2를 사용할 재료 준비 1-1. AWS 아이디 AWS 아이디가 없다면 아..
이번 시간에는 Node.js기반의 Ajax 통신의 꽃 Axios를 배워보겠다 Node.js기반으로 움직이는 것들은 대부분 사용 가능하다고 생각한다 1. Axios Install 하기 npm install axios 2. Axios Import App.js에서 아래의 코드를 입력한다 import axios from 'axios' 3. 데이터 준비 아래의 링크에서, 간단하게 받아올 데이터를 준비한다 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB As of D..
이번에는 Redux라는 것을 공부한다 React에서 꼭 필요한 거라고 보면 된다 Redux란, 데이터를 전달할 때, 하나하나 거쳐가지 않고 한 번에 전달하기 위해서 사용하는 것이다. 상태를 관리할 때, 다른컴포넌트를 전달할 때, props로 전달해야 했는데, 한 번에 전달할 수 있는 별도의 store라는 저장소에 저장해서 사용할 수 있다 예를 들면, 공공기관에 전화했는데, 〇〇부서로 전화 해보시겠어요? 그 〇〇부서 전화하면 또 부서에서 〇〇부서로 전화해 보세요 라고 하면 깊은 빡침이 생길 것이다. Redux를 쓰게 한다면 그런 뻉뺑이 없이 바로 전화통화가 가능하게 하는 좋은 일이 생긴다고 한다 1. Redux 설치 npm install react-redux 2. 실험대상인 component를 생성한다 T..
드디어 라우팅이라는 것을 공부한다 앙귤러. js나 Vue.js에도 라우터가 있는데, 리엑트도 있을 거라 생각하고 많이 사용할 것 같기때문에 꼭 공부해야지라고 생각했다 리엑트 라우터란, 리엑트는 컴포넌트 기반이라서, 싱글 뭐시기ㅣ 페이지라 해서 페이지를 하나만 써야 하고, 새로고침이 되어선 안된다고 하더라, 그래서 링크를 클릭했을 때 바꿔 치겠끔 해주는 것을 한다 일단 시작하자 1. 라우터 설치 npm install react-router-dom 2. 실습 재료 만들기 (컴포넌트 만들기) 이렇게 page1.js 와 page 2.js를 만들어 준다 (앞글자는 대문자로 하자..) Page1.js const Page1 = () => { return( Page1 입니다 ); } export default Page..
이번 시간에는 useEffect를 사용해 보겠다 useEffect란? 최초 실행을 할때와 내가 원하는 시점에 실행되게끔 하는 함수이다 이렇게 말하면 모를 것 같으니 실습 바로 들어간다 1. Improt 하고. 함수 작성법 import './App.css'; import {useEffect, useState} from 'react' function App() { useEffect(() => { }); return ( ); } export default App; 일단 react에 있는 useEffect를 Import 해주고 그 밑에 다가 useEffect함수를 작성한다 2. 실습 재료 작성 useState에다가 숫자 아무거나 넣어서 하나 작성하고 useEffect에는 set함수를 통해 값을 넣어준다 그다음은..
이번 시간에는 useRef를 사용할 것이다 useRef는 참조한 DOM객체를 뜻한다 일단 뭔 말인지 모를 것이니, 바로 실습 들어간다 사용방법은 useRef를 Import 한 뒤에 아래를 추가한다. 밑에 화면을 참조하도록 하자 const myRef = useRef(); 그리고 테스트를 해보기 위해서 TextBox 2개랑 Button 하나만 추가해 보자 그다음은 myRef를 어디 어떻게 쓰는지 보여주도록 하겠다 당신이 원하는 DOM에다가 속성 ref를 추가하고 값을 저렇게 넣어주면 된다 그다음 함수 ( clickEvent )를 만들어 볼까? const clickEvent = () => { console.log(myRef.current); } 함수를 추가하고 console.log로 한번 내용을 보도록 하자 ..
