Dev Study #1

 

BackEnd

---

Web Server 와 WAS 의 차이점

Web Server => 소프트웨어 + 하드웨어

• 1) 정적인 컨텐츠 제공하며 WAS 를 거치지 않고 바로 자원을 제공한다.
• 2) 웹 브라우저 클라이언트로부터 http 요청(Request) 을 받아 WAS 에 보내고 WAS 가 처리한 결과를 클라이언트에게 전달 (Response)
• Apache Server, NginX 등 

 

WAS (Web Application Server) => Web Server + Web Container (소프트웨어 엔진)

• 1) 동적인 컨텐츠 제공을 위해 만들어진 Application Server
• 2) JSP, Servlet 구동 환경을 제공한다.
• 3) Web Server 기능을 구조적으로 분리하여 처리하고자 하는 목적
• ex) 분산 트랜잭션, 메시징, 쓰레드 처리, DB 조회, 비즈니스 로직 처리 등

 

 

메시지 큐

프로세스 간에 데이터를 교환할 때 사용하는 통신 방법

 

 

Kafka vs RabbitMQ

• RabbitMQ
  • 메시지 브로커 방식 (소비자 중심 설계), 동기/비동기식 처리
  • 메시지 브로커 : 시스템이 정보를 통신하고 교환할 수 있도록 하는 소프트웨어 모듈
  • 구성의 자유도, 성숙도, 신속한 요청 및 응답이 필요한 서버에 적절, 백그라운드 작업(장기 실행 작업)

• Kafka
  
  • 데이터 분산 처리 가능한 플랫폼
  • pub/sub 방식 (생산자 중심 설계), 구독 방식의 비동기식 구성
  • 대용량 데이터 처리, 부하 분산과 고성능, 실시간 처리

 

 

MariaDB MaxScale

• 데이터베이스 클러스터의 확장성, 가용성 및 보안을 쉽게 관리할 수 있다.
• 수평 확장 배치에서 보안, 확장성 및 고가용성을 관리하는 차세대 데이터베이스 프록시
• SQL 주입 및 DDOS 같은 보안 공격 방지

 

 

문서 중앙화란?

문서 중앙화 = 가상화 = ECM = 망분리

사내 모든 문서를 한 곳(서버)에 모아서 관리하는 것, 버전 관리부터 문서의 생성 - 수정 - 삭제 전 과정을 관리할 수 있다.

 

DLP (Data Loss Prevention)

• 문서 보안을 위한 기술
• 데이터 손실 차단
• 사내 중요 데이터의 유출을 차단

DRM (Digital Right Management)

• 문서 보안을 위한 기술
• 데이터 암호화를 통해 문서의 권한(저작권) 관리

 

 

 

FrontEnd

---

React JSX 란?

• 브라우저에서 실행되기 전에 번들링되는 과정에서 babel 을 사용하여 일반 자바스크립트 형태의 코드로 변환한다.
• 자바스크립트에서 HTML 작성하듯이 비슷하게 할 수 있다.
• react 의 virtual dom 은 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부가 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있음 -> 컴포넌트에 여러 요소가 있을 경우 반드시 하나의 요소가 감싸는 형태여야 한다.

 

function App(){
	return(
    	<div>
    		<h1>테스트1</h1>
    		<h2>테스트2</h2>
        </div>    
    )
}

 

 

React HOC (Higher-Order Component, 고차 컴포넌트) 란?

• 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와서 새 컴포넌트를 반환하는 함수
• render 안에서 사용하면 안된다.
• ref 는 전달되지 않는다.

 

App.js

import './App.js';
import SecondComponent from './Component/SecondComponent';

function App() {
	return(
    	<div>
        	<h1 classname="App-header">
            HOC 테스트
            <SecondComponent name="whatishoc"></SecondComponent>
            </h1>
        </div>
    )
}

export default App;

 

• 화면에 "HOC 테스트" 텍스트 그림
• SecondComponent 호출됨 (파라미터: whatishoc)

 

 

SecondComponent.js

import React, { Component } from 'react';
import ThirdComponent from './ThirdComponent';

class SecondComponent extends Component {
	render(){
    	console.log('2. Second render');
        return(
        	<div>props.name : {this.props.name}</div>
        )
    }
}

export default ThirdComponent(SecondComponent, 'Test');

 

• FirstComponent 에서 SecondComponent 가 호출되었으나 ThirdComponent 가 export 되기 때문에 SecondComponent 에서 render 함수는 실행되지 않음
• 파라미터로 SecondComponent 자체와 'Test' 라는 텍스트 전달
• SecondComponent 의 this.props.name 은 App.js 에서 전달한 whatishoc 임

 

 

ThirdComponent.js

import React from 'react';
export default function ThirdComponent(DrawComponent, DrawContent){
	return class ExportComponent extends React.Component {
    	componentDidMount(){
        	console.log(`3. ThirdComponent : ${DrawContent}`);
        }
        render(){
        	console.log('1. First Component');
            return(
            	<DrawComponent {...this.props}></DrawComponent>
            )
        }
    }
}

 

• ThirdComponent 내 render 함수 안에서 콘솔에 1. First Component 먼저 출력
• 파라미터로 받은 DrawComponent (=SecondComponent) 를 그림
• 콘솔에 2. Second render 출력 -> 화면에 props.name : whatishoc 그림
• 컴포넌트가 첫 렌더링 된 이후 호출되는 함수인 componentDidMount 실행 -> 콘솔에 3. ThirdComponent : Test 출력

 

 

 

mount _ 컴포넌트의 인스턴스가 생성되어 DOM 에 삽입되는 단계

• constructor : 컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드가 호출됨
• render : 화면에 표현될 JSX 를 반환하고 화면에 그림
• componentDidMount : 컴포넌트가 화면에 모두 그려진 후 호출됨, 엔드포인트에서 클라이언트로 데이터를 불러올 때 API 호출하기 좋은 위치

 

 

React.lazy 란?

• 컴포넌트를 렌더링 하는 시점에 비동기적으로 로딩할 수 있게 해주는 util 함수 (동적 import 가능)
• 해당 파일이 마운트될 때 임포트를 하는 것이 아닌 어떤 시점에서 (ex. 클릭이벤트) 로딩 되도록 한다. 퍼포먼스 면에서 좋음. (router 에서 사용하는 것이 가장 좋음)

// Hello.js
export default function Hello() {
	return <div>Hello</div>
}


// App.js

const hello = React.lazy(() => import("./Hello"));

const App = () => {
	return(
    	<div>
        	<Suspense fallback={<div>로딩 중입니다.</div>}>
             <!--fallback 은 로딩이 끝나지 않았을 때 보여줄 UI -->
            	{visible && <hello />}
            </Suspense>
        </div>
    )
}

export default App;

 

 

Suspense

• 리액트 내장 컴포넌트, 코드 분할된 컴포넌트를 로딩하도록 할 수 있고, 로딩이 끝나지 않았을 때 보여줄 UI 를 설정할 수 있다.
• Suspense 의 fallback 은 로딩이 끝나지 않았을 때 보여줄 UI 이다.

 

 

Git

---

Git 에서 --recursive 옵션의 의미

• 하위 서브 모듈까지 모두 clone 한다.
• 서브 모듈이라고 하면, 기존 저장소 하위에 다른 저장소가 존재하는 것이다.