상상력 코딩

CSR(Client Side Rendering)
동작 방식
1. User Request Website
2. CDN이 HHML 파일과 JS를 연결한다
3. Browser는 HTML과 JS를 download 받는다
4. Browser Javascripts downloads
5. JS executed APIs data User can sees placeholders
6. Server Response with API data
7. API data interactive page

SSR(Server Side Rendering)
동작 방식
1. User Request Website
2. Server Ready to Render HTML files
3. Browser quickly render HTML site isn't interactive
4. Browswer downloads Javascript
5. user can view content and interactions can be recorded
6. Browser executes JS Framework
7. recordewd interactions execute and page is now interactive

CSR vs SSR
1. 웹페이지 로딩 시간
CSR은 모든 문서 파일을 받아 처음 로딩 속도가 느리지만 새로고침이 발생하지 않아 서버 트래픽을 감소 시키는 효과가 있고
SSR은 첫 페이지 로딩 속도가 CSR보다 랜더링이 빠르고 검색엔진최적화(SEO)가 가능하지만 초기 로딩 이후에 페이지 이동 속도가 다소 느리다

CDN(Content Delivery Network): 콘텐츠 전송 네트워크로 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 네트워크로 CDN은 사용자가 웹에 접근할 때 해당 사이트와 거리가 멀 경우 웹 이미지 및 파일을 로드하는데 오랜 시간이 걸리기 때문에 지리적으로 가까운 CDN 서버에 저장하여 사용한다.(저장방식 Points of Presence로 지역별로 자체 캐싱 서버를 가지고 사용자에게 콘텐츠를 제공한다)

RMS(Recipe Management System): Operator(장비)에 맞는 Recipe를 만들기 위한 system

EQP: 설비

Lot: 작업 기준으로 wafer 25장이 들어있다.(wafer 묶음)

wafer: 반도체를 만다는데 기본이 되는 요소로 규소(Si)로 만들 제품

RDL(Recipe Data Library): EQP Type 마다 다른 SECS/GEM Meggage를 RMS Common Format으로 Decoding/Encoding 한다.

Process Capability Analysis(공정능력분석): 공정능력비율 Cp(Process Capability)가 LSL과 USL 사이에 있을 때 Cp-Cpk의잠재력 비율에 따라 불량률을 추측할 수 있다.

USL(Upper SPEC Limit)/LSL(Lower SPEC Limit)

EAP(Equipment Automation Process): 장비 제어 어플리케이션

MES(Manufacturing Excution System): 생산 관리 시스템

EQ: 반도체 설비 장치

SECS(Semiconductor Equiment Communications Standard)

- SECS-I + HSMS + SECS-II를 합쳐 부른다.

- SEMI 사에서 지정한 통신 표준 규약으로서 생산 설비 장비와 호스트 간의 통신을 위해 만든 통신 규약으로 생산 설비와 MES간의 원활한 데이터 교류 기반으로 자동화

SECS-I: RS-232를 개입시켜 통신을 수신하는 방법으로 전송시에는 블록 단위로 전송되며

EQN(블록 전송 요청) -> EOT(전송 승인 응답) -> ACK or NAK (수신 성공/실패)

HSMS(High Speed SECS Message Service): 이더넷 기반의 사양 제공

SECS-II: 데이터를 RS-232C와 이더넷을 통해 전송

GEM(Generic Equipment Model): 장비 동작 및 제어를 위한 통신 모델으로 TCP/IP RS-232 기반 프로토콜을 사용하여 GEM 지원 호스트와 통신

SPEC(Standard Perfomance Evaluation Corporation): 컴퓨터를 위한 표준화된 성능 밴치마크를 생산, 수립, 유지, 보증하기 위한 미국의 비영리 단체

EES(Equipment Engineering System): 설비데이터를 수집하고 활용할 수 있는 모든 데이터를 이용하여 설비 효율을 높이고 제품의 품질을 향상시키기 위한 시스템

FDC(Fault Detection and Classification): 실시간 장비 자원 관리 및 상태 검사로 설비의 오작동을 실시간 감시하기 위해 설비의 센서값을 실시간으로 수집 및 계산 이상 발생 판단 및 불량을 분석

APC(Advanced Process Control): 대응 파라미터에 따른 프로세스 최적화로 진행될 LOT에 대해 최적의 공정 조건 값을 자동 계산해 공정 조건 실시간 제어

SOC(System on a Chip): 완전 구동이 가능한 제품이 하나의 칩에 담은 기술집약적 반도체

ECD(Electron Capture Detector): 전자 포착 검출기로 Ni에서 방사된 B입자와 운반기체가 충돌하면 다량의 전자가 발생되며 할로겐족 원소가 존재하면 전자들이 포획되어 전류량이 변화되는 원리

• 방서선 동위원소 Ni -> B 입자 생성
• B입자 + Carrier Gas -> 낮은 에너지를 갖는 다량의 Secondary Electrons 생성 Electrical Current 생성
• CX + e-     ->     CX-    +    Energy   -> 전자포착 화합물에 의하여 감소된 전자의 흐름이 측정

1.도구에서 Help -> Install New Software 클

2.https://download.eclipse.org/releases 선택

3.Web, XML, Java EE and OSGI Enterprise Development 에서 

JST Server Adapters

JST Server Adapters Extensions 

2개 설치 하고 재접속 알람이 뜨면 apache tomcat server 문제 해결

기존 로컬 pc에서 React 프로젝트를 npm start 로 localhost로 접근이 가능한데

외부 pc에서도 접근이 가능 하도록 AWS EC2를 사용하여 배포해 보겠다.

1.AWS에 접근을 해 인스턴스 시작 버튼을 클릭하여 EC2 인스턴스를 만들어 준다.

2. 이름 및 Amazon Machine 이름을 Ubuntu로 선택해 주고 

3.인스턴스 유형을 자신에게 맞는 사양을 선택해 준다.

4.키 페어는 새 키페어 생성 버튼을 클릭 후 키페어를 RSA, .pem으로 설정하면 fileName.pem으로 다운로드 받을 수 있다.

5.네트워크 설정

6.스토리지 구성 후 인스턴스 시작 버튼으로 인스턴스를 생성해 주면 된다.

7.생성된 인스턴스 정보에서 퍼블릭 IPv4주소 를 복사 후 우측 상단의 연결을 클릭 해 준다.

8.연결을 하면 아래와 같은 화면이 나타나는 못습을 볼 수 있을 것이다.

9. git clone 저장소ssh주소 를 입력해 프로젝트를 위의 ubuntu에 다운받아 

프로젝트 이름 으로 접근을 한다

ex) git clone https://github.com/youngw77/kalos.git

클론이 완료되면 cd kalos로 해당 프로젝트를 들어가 ls 명령어로 파일을 확인하면 된다.

이후 ubuntu에 노드를 설치해 보자

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt-get install nodejs

정상적으로 설치가 완료 됐으면 node -v 와 npm -v 로 버전을 확일할 수 있다.

10.웹서버 nodejs Express 설치하기

root 위치 kalos에서 server.js 파일을 만들어 줘 server.js를 실행시켜 웹서버를 동작할 예정이다.

명령어 vi server.js 를 입력하게 되면 server.js 파일이 만들어 진다.

아래의 명령어를 입력 후 키보드 Esc 버튼 -> :wq -> Enter 를 누르게되면 server.js파일안에 저장이 된다.

const http = require("http");
const express = require("express");
const path = require("path");

const app = express();

const port = 8000;

app.get("/ping", (req, res) => {
    res.send("pong");
});

app.use(express.static(path.join(__dirname, "build")));

app.get("/*", (req, res) => {
res.set({
    "Cache-Control": "no-cache, no-store, must-revalidate",
    Pragma: "no-cache",
    Date: Date.now()
});
res.sendFile(path.join(__dirname, "build", "index.html"));
});

http.createServer(app).listen(port, () => {
  console.log(`app listening at ${port}`);
});

생성이 완료되면 ls 명령어로 server.js가 추가로 생성된 모습을 볼 수 있다.

11.node server.js로 웹서버를 실행하고 인스턴스 정보에서 퍼블릭 IPv4:8000 를 입력하면 해당 프로젝트가 실행 된 모습을 볼 수 있다.

AWS EC2 배포가 정상적으로 된 모습을 확인 할 수 있다.

Axios
1.Third Party package로 설치가 쉽다(npm install axios or jdk)
2.대부분의 브라우저를 지원한다.
3.자동 JSon 데이터 변환 지원
4.XSRF Protetion 보안 기능 제공
5.비동기 Http 통신 및 Promise 객체로 return 해준다.

Fetch
1.ES6 JavaScript 내장함수 여서 따로 설치 x
2.Chrome 42, Edge 14, Firefox 39, Opera 29, Safari 10.1에 대해 지원한다
3.Json 데이터 핸들링을 위해서는 Fetch Interface의 json()을 이용하는 로직을 추가하여 사용 가능
4.보안 기능 따로 제공 x
5.network error response timeout 없음

REST API(Representational State Transfer API)
구성- 자원(URL), 행위(Http Method), 표현
URL 정보의 자원을 표현
자원에 대한 행위는 Http Method(GET, POST, PUT, DELETE)로 표현
주의점 URL 마지막 문자로 /를 포함하지 않는다, 확장자 파일 URL 포함시키지 않는다
Http 응답 상태 코드
200: 클라이언트의 요청을 정상 수행
201: 클라이언트가 어떠한 리소스 생성을 요청하며 성공적으로 생성

400: 클라이언트의 요청이 부적절한 경우
401: 클라이언트가 인증되지 않은 상태에서 보호된 리소스를 요청했을 떄
403,404: 유저 인증상태와 관계 없이 응답하고 싶지 않은 리소스를 클라이언트가 요청했을 때
405: 클라이언트가 요청한 리소스에서는 사용 불가능한 Method를 이용했을 경우

301: 클라이언트가 요청한 리소스에 대해 URL이 변경 되었을 떄
500: 서버에 문제가 있을 경우

reference: https://meetup.nhncloud.com/posts/92

EcmaScript6에서

arrow function을 사용하면

this 값이 상위 스코프를 나타낸다.

arrow function ex)

let sum = function(a, b) {
return a + b;
}
----------------------------------------
let sum = (a, b) => {
return a + b;
}
----------------------------------------
let sum  = (a, b) => a+b;

1. 다른 vue 컴포넌트의 함수값을 받을 때

ref를 사용할 페이지 A 받아올 페이지 B라고 하면 
A페이지에서 B의 component를 사용할 때 ref로 B의 함수 값을 받아온다
<B ref="C"></B>       // 선언할 때 ref
methods:{
 clickEvnent(){
let data = this.$refs.C.getData(); // getData()는 B페이지의 함수이다. ref값 받아 올 때는 $refs
 },
}

B페이지
methods:{
getData(){
return this.datas; //data에서 선언한 datas 를 반환해 준다.
 },
}

2. 다른 vue 컴포넌트에서 변수값을 받을 때

ref 사용할 페이지 A 받아올 페이지 B라고 하면 
A페이지에서 B의 component를 사용할 때 ref로 B의 변수 값 C를 받아온다
<B ref="C"></B>    // 선언 ref
methods:{
 clickEvnent(){
let data = this.$refs.C.Data; // Data는 B페이지의 변수이다.   받아올 때는 $refs
 },
}

B페이지
export default{
data: 'message',
...
}

이전 글 https://les-fourmis.tistory.com/62

proxy 방식으로 Spring Boot와 Vue를 연동해 주겠다.

Spring Boot: localhost:8080             //   \app> ./gradlew bootRun 으로 Spring Boot 실행

Vue: localhost:8800                 //   \frontend> npm run serve -- --port 8800 으로 vue 프로젝트를 시작해주면 된다.

각각의 localhost주소를 위와 같이 세팅해주고

frontend는 axios 연결 내용을 UploadService로 빼서 정리해 주었고 

StoreList에서 Spring Boot 데이터를 가져오기 위해 UploadService.js의 getList를 import 해주고 

button이 클릭 되었을 때 console.log 값으로 Spring GetMapping("/")  부분의 Home 화면 출력이 나타나는 모습을 볼 수 있을 것이다.

Spring  화면

Vue 화면     Spring 데이터 호출 버튼 클릭 시 Spring에서 Home 화면 이라는 데이터를 가져오는 모습을 볼 수 있다.

깃 허브 코드

https://github.com/youngw77/Yangjae-eat-list

springboot 셋팅

1. 구글에 spring initializr 을 검색하고 사이트로 이동한다.

2. 아래의 그림과 같이 셋팅을 해주고 generate를 클릭하면 압축 파일로 app 폴더가 생성된다.

3. 압축된 app 파일을 풀고 프로젝트를 생성해 줄 폴더에 app 파일을 넣어준다.

4. app/src/main/java/com/folder/app 위치에 controller폴더와 그 아래 DataController.java를 만들어주고 localhost8080에 연결 됐을 때 'Home 화면'이 출력 되도록 설정해주고 app/src/main/resources/application.properties에 그림과 같이 db 정보를 설정해주고 terminal에 app 디렉토리로 이동 후 ./gradlew bootRun을 실행하면 spring boot가 정상적으로 동작하는 모습을 확인 할 수 있다.

Vue 셋팅

1.app 상위 폴더 위치 terminal에서 vue create {projectName} 을 입력후 자신에 맞는 세팅으로 사용할 vue 버전 및 설정에 맞게 project를 생성하면된다.

2.cd frontend -> npm run serve를 하면 local:http://localhost:8081/ 으로 이동하면 처음 vue 페이지 화면을 볼수 있을 것이다.

이렇게 SpringBoot와 Vue 프로젝트 생성에 대해 해보았고

다음 글에서 axios를 통해 SpringBoot와 Vue를 연동해서 사용해 보겠다.

https://les-fourmis.tistory.com/63