모든지 기록하자!

React Hooks

홍크 — Fri, 23 Jun 2023 19:14:04 +0900

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

리액트의 컴포넌트는 클래스형과 함수형으로 나눠진다.

아래는 이전 게시물의 클래스 컴포넌트를 사용한 예제와 훅스를 사용한 예제이다.

Class component

<html>
<head>
    <meta charset="UTF-8"/>
    <title>구구단</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></div> -->
<script type="text/babel">
  class GuGuDan extends React.Component {
    state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };

    onSubmit = (e) => {
      e.preventDefault();
      if (parseInt(this.state.value) === this.state.first * this.state.second) {
        this.setState((prevState) => {
          return {
            result: '정답: ' + prevState.value,
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
          };
        });
        this.input.focus();
      } else {
        this.setState({
          result: '땡',
          value: '',
        });
        this.input.focus();
      }
    };

    onChange = (e) => {
      this.setState({ value: e.target.value });
    };

    input;

    onRefInput = (c) => { this.input = c; };

    // 컨텐츠
    render() {
      return (
        <React.Fragment>
          <div>{this.state.first} 곱하기 {this.state.second}는?</div>
          <form onSubmit={this.onSubmit}>
            <input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange}/>
            <button>입력!</button>
          </form>
          <div>{this.state.result}</div>
        </React.Fragment>
      );
    }
  }

</script>
<script type="text/babel">
  ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>

Hooks

<html>
<head>
    <meta charset="UTF-8"/>
    <title>구구단</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  const GuGuDan = () => {
    const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
    const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
    const [value, setValue] = React.useState('');
    const [result, setResult] = React.useState('');
    const inputEl = React.useRef(null);

    const onSubmitForm = (e) => {
      e.preventDefault();
      if (parseInt(value) === first * second) {
        setResult('정답');
        setFirst(Math.ceil(Math.random() * 9));
        setSecond(Math.ceil(Math.random() * 9));
        setValue('');
        inputEl.current.focus();
      } else {
        setResult('땡');
        setValue('');
        inputEl.current.focus();
      }
    };
    return (
      <React.Fragment>
        <div>{first} 곱하기 {second}는?</div>
        <form onSubmit={onSubmitForm}>
          <input
            ref={inputEl}
            type="number"
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
          <button>입력!</button>
        </form>
        <div id="result">{result}</div>
      </React.Fragment>
    );
  };

</script>
<script type="text/babel">
  ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>

먼저 위 코드의 ref에 대해 알아보자

ref란 DOM에 직접 접근하기 위해 사용한다.

Html을 작성할 때 <div id="test"> 와 같이 id를 사용한다. 특정한 id에 해당하는 DOM에만 스타일이나 자바스크립트에서 여러가지 작업을 할 수 있다.

이렇게 id를 붙이는 것 처럼 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다.

state 비교

//클래스형
state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };
    
//혹스
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputEl = React.useRef(null);

훅스는 각각 setState 사용할 수 있게 도와준다. (ex - result의 setState는 setResult)

React 구구단 만들기

홍크 — Fri, 23 Jun 2023 19:13:35 +0900

<html>
<head>
    <meta charset="UTF-8"/>
    <title>구구단</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></div> -->
<script type="text/babel">
  class GuGuDan extends React.Component {
    state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };

    onSubmit = (e) => {
      e.preventDefault();
      if (parseInt(this.state.value) === this.state.first * this.state.second) {
        this.setState((prevState) => {
          return {
            result: '정답: ' + prevState.value,
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
          };
        });
        this.input.focus();
      } else {
        this.setState({
          result: '땡',
          value: '',
        });
        this.input.focus();
      }
    };

    onChange = (e) => {
      this.setState({ value: e.target.value });
    };

    // 컨텐츠
    render() {
      return (
        <div>
          <div>{this.state.first} 곱하기 {this.state.second}는?</div>
          <form onSubmit={this.onSubmit}>
            <input type="number" value={this.state.value} onChange={this.onChange}/>
            <button>입력!</button>
          </form>
          <div>{this.state.result}</div>
        </div>
      );
    }
  }

</script>
<script type="text/babel">
  ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>

바뀌는 부분은 아래처럼 state로 등록해준다.

state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };

// 컨텐츠
    render() {
      return (
        <div>
          <div>{this.state.first} 곱하기 {this.state.second}는?</div>
          <form onSubmit={this.onSubmit}>
            // 올바른 input
            <input type="number" value={this.state.value} onChange={this.onChange}/>
            
            // 입력 안되는 input창 onChange가 없어 오류발생
            <input type="number" value={this.state.value} />
            // jsx 문법이기 때문에 input 뒤에 /로 닫아주지 않으면 오류가 발생한다.
            <button>입력!</button>
          </form>
          <div>{this.state.result}</div>
        </div>
      );
    }

onChange함수가 없이 입력안됨

input 창에 value를 위에서 state로 지정했기 때문에

onChange 함수가 없다면 입력이 진행되지 않는다.

코드 실행결과

1. 정답

2. 오답

이번 주 리엑트 강의를 들으며..

- Js 기본기가 많이 부족하다

- 강의 듣기전 봐도 모르던 코드를 아주 약간 이해하기 시작

참고

웹 게임을 만들며 배우는 React

https://www.inflearn.com/course/web-game-react/dashboard

React JSX 문법이란?

홍크 — Fri, 23 Jun 2023 19:10:53 +0900

JSX(JavaScript XML)은 Javascrpint에 XML을 추가하여 확장 문법이다.

JSX은 Javascrpint의 공식적인 문법이 아니다.

브라우저에서 실행하기 전 바벨(리액트 라이브러리)을 사용하여 자바스크립트 형태 코드로 변환된다.

// JSX 예시
function App(){
	retrun(
    <h1>테스트</h1>
    );
}

// 위와 같이 작성했을 시, 바벨이 아래와 같이 Javascript로 해석해준다.
function App(){
	return React.createElement("h1", null, "테스트");
}

JSX문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

- Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

// 잘못된 사용 (에러발생)
function App(){
	return (
    	<div>Test1</div>
        <div>Test2</div>
    );
}


// 올바른 사용
function App(){
	return (
    	<div>
    		<div>Test1</div>
        	<div>Test2</div>
        </div>
    );
}

// 올바른 사용2
function App(){
	return (
    	<Fragment>
    		<div>Test1</div>
        	<div>Test2</div>
        </Fragment>
    );
}

// 올바른 사용3
function App(){
	return (
    	<>
    		<div>Test1</div>
        	<div>Test2</div>
        </>
    );
}

2. 반드시 태그는 닫혀야 한다.

- <div>, <p>, <span>, <a> 같이 짝이 있는 태그의 경우 반드시 닫는 태그가 존재해야 한다.

- <img/>, <input/>, <br/> 같은 단독 태그(self-closing tag)의 경우에는 반드시 태그를 닫아줘야 한다.

3. 자바스크립트 표현

JSX내부에서 코드를{ } 로 감싸면 JavaScript 표현식을 사용할 수 있다.

function App() {
	const name = 'My Name';
	return (
		<div>
			<div>Hello</div>
			<div>{name}</div>
		</div>
	);
}

4. JSX 내부에서는 if문을 사용할 수 없다.

- JSX 밖에서 if 문을 사용하거나, { } 안에서 삼항 연산자를 사용한다.

// 외부에서 사용
function App() {
	let desciption = '';
	const test = 'yes';
	if(test === 'yes') {
		desc = <div>Yes 입니다.</div>;
	} else {
		desc = <div>No 입니다.</div>;
	}
	return (
		<>
			{desciption}
		</>
	);
}


// 내부에서 사용
function App() {
	const desciption = 'yes';
	return (
		<>
			<div>
				{desciption === 'yes' ? (
					<div>Yes 입니다.</div>
				) : (
					<div>No 입니다.</div>
				)}
			</div>
		</>
	);
}

5. AND 연산자(&&) 사용

- 특정 조건을 만족할 때만 내용을 보여준다. (조건이 만족하지 않을 경우 아무것도 노출되지 않는다.)

function App() {
	const desciption = 'yes';
	return (
		<>
			<div>
				{desciption === 'yes' && <div>Yes 입니다.</div>}
			</div>
		</>
	);
}

- falsy한 값인 0은 예외적으로 화면에 나타난다.

// 아래 코드는 화면에 '테스트'를 보여주는 것이 아닌 숫자 0을 보여준다.
const number = 0;
return number && <div>테스트<div>

6. OR 연산자(||) 사용

- 리액트 컴포넌트에서는 함수에서 undefined나 null을 반환하면 렌더링을 하려하면 오류가 발생한다. JSX 내부에서 undefined나 null을 렌더링하는 것은 괜찮다.

- JSX 내부에서 undefined나 null을 렌더링하면 아무것도 보여주지 않는다.

- OR 연산자는 특정 값이 undefined나 null일 경우 보여주고 싶은 문구가 있을 때 주로 사용한다.

// undefined 렌터링 시 오류발생
function App(){
	const name = 'undefined';
	return name;
}

// OR 연산자 사용
function App() {
  const name = undefined;
  return name || "값이 undefined";  
}

// JSX 내부에서 undefined, null 허용
function App() {
  const name = undefined;
  return (
  	<div>{name}</div>
  );
}

6. JSX 스타일링

- 카멜 표기법으로 작성해야 한다. ex) background-color -> backgroundcolor

function App() {
	const style = {
		backgroundColor: 'blue',
		fontSize: '12px'
	}
	return (
		<div style={style}>테스트</div>
	);
}

JSX은 XSS 공격을 방어한다.

- 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 Escape 처리하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있다.

참고

https://goddaehee.tistory.com/296

https://velog.io/@gyumin_2/React-JSX%EB%9E%80%EC%A0%95%EC%9D%98-%EC%9E%A5%EC%A0%90-%EB%AC%B8%EB%B2%95-%ED%8A%B9%EC%A7%95-%EB%93%B1

https://chanhuiseok.github.io/posts/react-3/

[Network] PORT

홍크 — Tue, 11 Jan 2022 22:11:40 +0900

IP만으로 한 번에 둘 이상 연결해야 한다면 어느 프로세스에서 처리할지 구분할 방법이 필요하다.

이 전 게시물에서 봤던 TCP/IP 패킷 정보에는 PORT 정보도 포함하고 있다.

IP는 컴퓨터를 찾을 때 필요한 주소를 , Port는 같은 IP 내에서 프로세스를 구분 할 때 사용한다.

김영한 강사님의 이해하기 쉬운 비유는 IP가 아파트면 PORT는 그 아파트에 몇동 몇호인지 구분하는 것이다.

포트 번호는 크게 세 종류로 구분된다.

0번 ~ 1023번: 잘 알려진 포트로 사용하지 않는 것이 좋다. (well-known port)

1024번 ~ 49151번: 등록된 포트 (registered port)

49152번 ~ 65535번: 동적 포트 (dynamic port)

잘 알려진 포트번호의 예시

20 : FTP(data)
21 : FTP(제어)
22 : SSH
23 : 텔넷
53 : DNS
80 : 월드 와이드 웹 HTTP
119 : NNTP
443 : TLS/SSL 방식의 HTTP

참고 - 김영한 모든 개발자를 위한 HTTP 웹 기본 지식 강의

https://ko.wikipedia.org/wiki/포트(컴퓨터_네트워킹)

[Spring] Spring 과 Spring Boot 의 차이점은?

홍크 — Sat, 1 Jan 2022 01:58:12 +0900

Spring Framework

스프링 프레임 워크는 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공한다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크의 기반 기술로 쓰이고 있다.

Spring의 특징

1. IoC (Invertion of Control: 제어 역행)

2. DI(Dependency Injection: 의존성 주입)
3. AOP(Aspect-Oriented Programming: 관점 지향 프로그래밍)

1 - IoC (Invertion of Control: 제어 역행) 란?

메소드나 객체의 호출 작업을 개발자가 결정하는 것이 아니라 외부에서 결정되는 것을 말한다.

일반적으로 자바 프로그램은 main 메소드에서 시작해서 개발자가 미리 정한 순서를 따라 객체가 생성되고 실행된다. 서블릿을 개발해서 서버에 배포할 수는 있지만 배포하고 나서는 개발자가 직접 제어할 수 있는 방법은 없다. 대신 서블릿에 대한 제어 권한을 가진 컨테이너 가 적절한 시점에서 서블릿 클래스의 객체를 만들고 그 안에 메소드를 호출한다.

조립된 코드의 최종 호출은 개발자에 의해서 제어되는 것이 아니라 프레임워크의 내부에서 결정된 대로 이뤄지게 되는데 이러한 현상을 제어 역행 이라고 한다.

2 - DI(Dependency Injection: 의존성 주입) 란?

객체 사이에 필요한 의존 관계에 대해서 스프링 컨테이너가 자동으로 연결해 주는 것을 말한다.

스프링 컨테이너는 DI를 이용하여 빈(Bean) 객체를 관리하며 스프링 컨테이너에 클래스를 등록하면 스프링이 클래스의 인스턴스를 관리해 준다.

스프링 컨테이너에 빈(Bean)을 등록하고 설정하는 방법은 두 가지가 있다.

1. XML 설정을 통한 DI

2. 어노테이션(Annotations)을 이용한 DI

Spring Boot

스프링 프레임워크는 기능이 많은만큼 환경설정이 복잡한 편이다. 이 것에 어려움을 느끼는 사용자들을 위해 나온 것이 스프링 부트다. 부트는 스프링 프레임워크를 사용하기 위한 설정의 많은 부분을 자동화해준다. 스프링 부트 starter 디펜던시만 추가해주면 바로 API를 정의하고 내장된 톰켓이나 제티로 웹 어플리케이션 서버를 실행할 수 있다.

차이점?

1 - Embed Tomcat을 사용하기 때문에 따로 톰켓을 설치하거나 매번 버전 관리를 하지 않아도 된다.

2 - starter를 통한 dependency 자동화

Spring framework에서는 각각의 dependency들의 호환되는 버전을 일일이 맞추어 주어야 했고, 하나의 버전을 올리고자 하면 다른 dependeny에 까지 영향을 미쳐 version관리에 어려움이 많았다. 하지만 starter가 대부분의 dependency를 관리해주기 때문에 번거로움이 적어졌다.

3 - XML 설정을 하지 않아도 된다.

4 - jar file을 이용해 자바 옵션만으로 손쉽게 배포가 가능하다.

[Network] TCP , UDP

홍크 — Thu, 30 Dec 2021 23:51:53 +0900

IP의 단점인 비연결성과 비신뢰성 등을 해결하기 위해 TCP를 사용한다.

Hello world라는 메시지를 전송하면 SOKET 라이브러리를 이용해 OS계층으로 전달, OS계층에서는 메시지 데이터에 TCP 정보를 포함시키고 TCP정보를 포함하는 IP 패킷을 생성한다. IP 패킷은 네트워크 인터페이스를 통해 전송한다.

TCP의 특징

전송 제어 프로토콜 (Transmission Control Protocol)

TCP는 웹 브라우저들이 월드 와이드 웹(www)에서 서버에 연결할 때 사용되며, 이메일 전송이나 파일 전송에도 사용된다. 신뢰할 수 있는 프로토콜로 현재는 대부분 TCP를 사용한다.

1. 연결지향 - TCP 3way handshake(가상연결)

TCP 프로토콜의 작동은 크게 세 가지 흐름으로 구분하며 연결 생성 -> 자료 전송 -> 연결 종료이다.

신뢰성 있는 연결이 생성돼야 하며, 그 후 자료를 전송하고, 마지막으로 연결을 종료하면서 할당된 자원을 반납한다.

연결을 생성하기 위해 TCP 3way handshake를 사용 하며 SYN , SYN+ACK , ACK로 3번 데이터를 주고받아 연결 확인 후 데이터를 전송한다. TCP 3way handshake는 물리적인 연결이 아니라 논리적 연결이다.(가상연결)

2. 데이터 전달 보증

클라이언트에서 서버에 데이터를 전송하면 서버에서는 데이터를 받았다면 클라이언트로 응답을 해준다.

3. 순서 보장

TCP는 IP와는 다르게 전송 제어 정보 , 순서 정보 등을 포함하고 있기 때문에 순서가 보장된다.

TCP/IP패킷에 포함된 정보는 위에 사진과 같다.

TCP는 데이터 스트림으로부터 데이터를 받아들여 이것을 청크 단위로 분할한 뒤 TCP 헤더를 덧붙여 TCP 세그먼트를 생성한다. TCP 세그먼트는 IP 데이터그램에 캡슐화되어 상대방과 주고받게 된다.

UDP의 특징

사용자 데이터그램 프로토콜(User Datagram Protocol)

UDP의 전송 방식은 너무 단순해서 서비스의 신뢰성이 낮고, 데이터그램 도착 순서가 바뀌거나, 중복되거나, 통보 없이 누락시키기도 한다. UDP는 일반적으로 오류의 검사와 수정이 필요 없는 애플리케이션에서 수행할 것으로 가정한다. UDP를 사용하는 네트워크 애플리케이션에는 DNS, IPTV, 음성 인터넷 프로토콜 (VoIP), 등등 그리고 많은 온라인 게임 등이 있다.

TCP와 UDP 비교

TCP는 데이터를 주고받을 양단간에 먼저 연결을 설정하고 설정된 연결을 통해 양방향으로 데이터를 전송하지만, UDP는 연결을 설정하지 않고 수신자가 데이터를 받을 준비를 확인하는 단계를 거치지 않고 단방향으로 정보를 전송한다.

신뢰성 - TCP는 메시지 수신을 확인하지만 UDP는 수신자가 메시지를 수신했는지 확인할 수 없다.
순서 정렬 - TCP에서는 메시지가 보내진 순서를 보장하기 위해 재조립하지만 UDP는 메시지 도착 순서를 예측할 수 없다.
부하 - TCP보다 UDP속도가 일반적으로 빠르고 오버헤드가 적다.

다음 게시물에서는 PORT와 DNS에 대해 알아보기로 하자.

참고 -

김영한 모든 개발자를 위한 HTTP 웹 기본 지식 강의
https://ko.wikipedia.org/wiki/전송_제어_프로토콜
https://ko.wikipedia.org/wiki/사용자_데이터그램_프로토콜

[Network] 인터넷 프로토콜(IP, Internet Protocol)

홍크 — Sun, 26 Dec 2021 15:04:40 +0900

웹 개발 공부를 시작하고 속성으로 빠른 시일 내에 공부하다 보니 이해되지 않는 부분들이 많아

HTTP의 동작 원리나 구조, 흐름 같은 원리에 중점을 두고 순차적으로 공부해 보려고 한다.

모든 것이 HTTP 기반 위에서 동작한다.

HTML, 이미지 , 영상 , 파일뿐만 아니라 앱과 서버가 통신할 때도 서버와 서버가 통신할 때도 HTTP 프로토콜 위에서 데이터를 주고받는다.

인터넷 프로토콜(IP) 역할

지정한 IP 주소에 데이터 전달
패킷(Packet)이라는 통신 단위로 데이터 전달

IP 프로토콜의 한계

1. 비연결성

- 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송한다.

2. 비신뢰성

- 비신뢰성은 흐름에 관여하지 않기 때문에 보낸 정보가 제대로 갔는지 보장하지 않는다는 뜻이다. 예를 들어 전송 과정에서 패킷이 손상될 수도 있다. 같은 호스트에서 전송한 패킷의 순서가 뒤죽박죽이 될 수도 있고, 같은 패킷이 두 번 전송될 수도 있으며, 아예 패킷이 사라질 수도 있다.

패킷 전송과 정확한 순서를 보장하려면 TCP 프로토콜과 같은 IP의 상위 프로토콜을 이용해야 한다.

TCP, UDP에 대한 내용은 다음 게시물에 설명

참고

https://ko.wikipedia.org/wiki/인터넷_프로토콜
김영한 모든 개발자를 위한 HTTP 웹 기본 지식 강의

[Network] 아파치 설정파일 분석 - httpd.conf , httpd-vhost.conf

홍크 — Mon, 20 Dec 2021 21:07:43 +0900

1. virtual hosts 주석 해제

- 가상 호스트를 사용하기 위해 주석 해제한다.

가상호스트란?

기본적으로 웹서버에 존재하는 주 호스트 도메인을 등록하여 사용하고 있지만 추가적으로 한 서버에 여러 도메인을 등록하여 사용한다는 의미이다.

가상 호스트 서버를 이용하여 제한된 공간 안에서 여러 개의 홈페이지를 제공해주는 서비스가(웹, 메일 등) 호스팅 서버스이다.

2. ErrorLog 변경

ErrorLog “|/apps/apache/bin/rotatelogs /apps/apache/logs/error_log.%Y%m%d 86400”

- 에러 로그가 저장되는 경로를 지정한다

로그를 분할해서 남길경우에는 아파치에서 제공하는 rotatelogs를 사용한다. 파일명에 연월일시 분초를 작성하여 파일이 생성된 시간 기록, 86400은 로그파일을 새로 생성할 시간(초단위) 한국 시간으로 맞추려면 +540을 하면 된다. GMT 시간과 한국시간은 9시간이 차이 나기 때문

3. CustumLog common 변경

ErrorLog “|/apps/apache/bin/rotatelogs /apps/apache/logs/access_log.%Y%m%d 86400” common env=!dontlog

- 커스텀 로그가 저장되는 경로를 지정한다.

로그 형식 이름은 "LogFormat"으로 정의된 어떤 로그를 기록할 것에 대한 정의를 지정한 것이다. "LogFormat"의 맨 뒤에 작성되어 있는 문장이 포맷명이 된다.

이 설정은 로그 파일명은 “access.log”이고 로그 포맷은 “common”으로 되어 있다.

env=!dontlog -> dontlog가 아닐 때 로그를 기록한다.

#gif,bmp,jpg,ico,js,css,png 로그에서 제외

SetEnvIfNoCase Request_URI "\.(gif)|(jpg)|(png)|(css)|(js)|(ico)|(eot)$" dontlog

4. ServerName 주석 처리 해제

- 일반적으로 IP 주소에 대해 할당된 도메인명이지만, 따로 이름을 할당하고 그것을 공식 도메인명으로 원하는 경우에 사용한다. "ServerName"가 지정되어 있지 않은 경우는 Apache에 할당된 IP 주소를 역으로 도메인명을 가져온다.

ServerName [스키마://]도메인명|IP 주소[:포트 번호]

ex) www.exampl.com:80 -> 포트 번호는 생략할 수 있지만 생략된 경우는 http 포트 번호를 사용한다. 포트 번호도 지정하는 것을 추천한다고 한다.

5. Directory 변경

<Directory> ~ </Directory> 지시자는 지정한 디렉터리 이하의 모든 웹문서들에 대하여 어떤 서비스와 기능을 허용/거부할 것인지를 설정하는 매우 중요한 지시자이다.

<Directory> 지시자의 설정은 개인에 따라 다르니 각자 목적에 맞게 설정해야 한다.

Options

- 지정한 디렉토리 이하에 모든 파일과 디렉토리들에 적용할 접근제어를 설정한다. 디렉토리를 보여줄 것인가? CGI를 허용할 것인가? SSI를 허용할 것인가? 등의 설정을 여기서 하게 된다.

FollowSymlinks

- 심볼의 링크를 허용한다. 이 옵션을 지정하면 웹브라우저에서 링크 파일의 경로까지도 확인할 수 있게 된다. 보안상 이 값은 설정하지 않는 것이 좋다.

AllowOverride

어떻게 접근을 허락할 것인가에 대한 설정

None

AccessFileName에 지정된 파일을 엑세스 인증 파일로 인식하지 않는다. AccessFileName의 값이 대부분 .htaccess 이므로 이를 무시하게 된다는 의미가 된다. 이 파일을 무시하기 때문에 새로운 접근 인증 방식을 Override하지 않는다. 대부분이 보안이나 중요한 디렉토리에서 사용할 수 있는 것으로 아주 제한적인 접근만을 허용하고자 할 때에 사용하는 값이다.

All

이전의 인증방식에 대하여 새로운 접근 인증방식을 우선 적용하도록 Override를 허용한다.

Order deny, allow

allow 설정을 먼저 확인하고 그다음 deny 설정을 확인한다. 뒤에 것이 우선한다는 뜻

6. apache mod_jk 모듈 설정

아파치와 톰캣의 연동 원리는?

아파치와 톰캣이 연동하기 위해선 AJP를 통해 서로 통신을 하여야 한다.

AJP란 아파치가 웹서버와 외부 서비스(톰캣 등)와 연동하기 위해 정한 규약(프로토콜)이다.

아파치는 이를 사용하여 80 포트로 들어오는 요청은 자신이 받고, 이 요청 중 서블릿을 필요로 하는 요청은 톰캣에 접속하여 처리한다.

1) 아파치 웹서버의 httpd.conf 에 톰캣 연동을 위한 설정을 추가하고 톰캣에서 처리할 요청을 지정

2) 사용자의 브라우저는 아파치 웹서버(보통 80 포트)에 접속해 요청

3) 아파치 웹서버는 사용자의 요청이 톰캣에서 처리하도록 지정된 요청인지 확인. 요청을 톰캣에서 처리해야 하는 경우 아파치 웹서버는 톰캣의 AJP포트(보통 8009 포트)에 접속해 요청을 전달

4) 톰캣은 아파치 웹서버로부터 요청을 받아 처리한 후, 처리 결과를 아파치 웹서버에 되돌려줌

5) 아파치 웹서버는 톰캣으로부터 받은 처리 결과를 사용자에게 전송

LoadModule jk_module modules/mod_jk.so(모듈 load )

JkWorkersFile /apps/apache/conf/workers.properties (mod_jk를 위한 tomcat 프로퍼티)

JkLogLevel error (로그 레벨 설정)

JkLogStampFormat "[%a %b %d %H %M %S %Y]“ (로그 포맷에 사용할 시간 형식 지정)

ExpiresActive On (ExpiresByType과 ExpiresDefault 지시어로 지정한 규칙에 따라 서비스하려는 문서에 이 헤더들을 생성한다.)

사용자 PC에서 이미지가 캐쉬된다. 이미지가 많은 사이트에서 아주 효과적으로 사용 가능하며 이미지가 자주 바뀌는 사이트에선 비추천이다.

ExpiresByType image/gif "access plus 1 weeks“ (1주 후에 다시 받아온다)

ExpiresByType image/jpeg "access plus 1 weeks“

ExpiresByType image/png "access plus 1 weeks“

ExpiresByType text/css "access plus 1 weeks“

ExpiresByType text/javascript "access plus 1 weeks“

ExpiresByType application/javascript "access plus 1 weeks“

ExpiresByType text/html "now plus 0 minutes

Tomcat과의 연동 시에 Tomcat과 같은 DocRoot를 사용할 경우 Apache단에서 설정으로 WEB-INF, META-INF 로의 접근을 막아야 한다.

SetHandler WEB-INF

Order deny,allow

Deny from all

</Location>

SetHandler META-INF

Order deny,allow

Deny from all

</Location>

에러 페이지 지정 - 보통 기본 보안점검 사항에 들어가는 디렉터리 리스팅, 불필요한 페이지 및 에러 페이지를 통해 서버 정보 및 중요 정보가 노출되는지 점검

ErrorDocument 403 /error/e_403.jsp

ErrorDocument 404 /error/e_404.jsp

ErrorDocument 405 /error/e_405.jsp

ErrorDocument 500 /error/e_500.jsp

TRACE method는 잠재적으로 cross-site tracing, basic 인증 암호 가로채기 등에 악용 가능

TraceEnable Off

Dynamic Shared Object (DSO) Support

DSO 방식으로 컴파일된 Apache의 모듈을 적재. 모듈의 위치는 /etc/httpd/modules이며 이는 usr/lib64/httpd/modules의 심볼릭 링크이다.

LoadModule authn_file_module modules/mod_authn_file.so

. . .

등등

7. httpd-vhost.conf 설정

VirtualHost *:80 -> 가상 호스트 구역을 설정하여 사용한다. 가상 호스트의 첫 번째 구역은 클라이언트가 요청한 ServerName(도메인)을 찾지 못하였을 경우에 보여지게 될 부분을 설정하게 된다.

ServerAdmin : 해당 가상호스트의 관리자 이메일 주소

DocumentRoot : 해당 가상 호스트의 홈페이지 디렉토리 위치

ServerName : 해당 가상호스트의 도메인명

ServerAlias : 가상 호스트 설정에 별칭으로 등록한다.

ErrorLog : 해당 가상 호스트의 웹 에러로그 파일 위치

CustomLog : 해당 가상호스트의 웹 로그파일 위치

ProxyPreserveHost on : HTTP 요청 헤더의 Host: 부분을 유지하는 옵션

ProxyPass : 서버가 적절한 문서를 가져오도록 설정

ReversPassReverse : 외부에서 접속했을 때 내부 서버나 다른 곳으로 연결해 주는 방법

DirectoryIndex : 클라이언트의 요청이 있을 때, 파일명을 지정하지 않고 디렉토리만 지정될 경우가 있다. 파일명이 생략된 경우에 어떤 파일을 반환할까를 DirectoryIndex로 지정한다.

Alias : 별칭을 만드는 지시자이고 Alias 별칭명 실제명과 같은 방식으로 만들게 된다. 별칭명뒤에 /를 포함하면 아파치 서버는 URL에도 /이 있어야 처리할 수 있다.

JkMount : 확장자 jsp, json, xml, do를 가진 경로는 woker tomcat으로 연결하는 구문

8. workers.properties 설정

worker 이름 : 뒷단의 tomcat 서버를 구분할 수 있는 이름이어야 한다. 나중에 로드밸런싱을 할 때에 tomcat에도 적용되는 이름이기 때문에 설정 중요

worker port : 뒷단 tomcat 서버의 AJP 포트

worker lbfactor : 부하분산을 위한 설정으로 뒷단 tomcat 서버들에 연결 무게를 설정해준다.

참고 - https://webdir.tistory.com/178

[Network] Virtual Host(가상 호스트)란?

홍크 — Mon, 20 Dec 2021 20:50:36 +0900

가상 호스트란?

기본적으로 웹서버에 존재하는 주 호스트 도메인을 등록하여 사용하고 있지만 추가적으로 한 서버에 여러 도메인을 등록하여 사용한다는 의미이다. 가상 호스트 서버를 이용하여 제한된 공간 안에서 여러 개의 홈페이지를 제공해주는 서비스가(웹, 메일 등) 호스팅 서버스이다.

Apache에서는 두 가지 방식을 제공한다.

1. Name-based Virtual Host

Name-based 방식의 가상 호스트는 같은 IP 주소를 가지고 여러 개의 호스트명을 가진다.(가장 보편적인 방법)

2. IP-based Virtual Host

IP Address 기반의 가상 호스트라고 하며, 각 웹 사이트마다 다른 IP Address 또는 Port를 가지는 방식이다.

IP Adress를 다르게 하는 방법도 있지만 동일한 IP Address를 주고 Port를 다르게 하는 방법도 있다.

- IP Address를 다르게 하는 방법

가상 호스트 각각에 하나씩의 IP Address를 할당하여 운용 웹 호스팅 초창기에 사용된 방법이다.

Name-based virtual host 보다 안정적이고, 더 효율적이며, 관리하기도 쉽다. 이 방식으로 하면 각각의 웹사이트를 하나의 물리적인 서버에서 별도 관리할 수도 있다.

- Port를 다르게 하는 방법

동일한 호스트에 포트만 다르게 지정하여 운용 80번이 주 호스트이고, 8080, 8081, 8082와 같이 순서대로 포트를 지정하여 가상 호스트를 할당한다.

참고 - https://blog.embian.com/46

https://seokbeomkim.github.io/posts/vhost-host-header/

Apache와 Tomcat이란?

홍크 — Tue, 14 Dec 2021 22:15:51 +0900

프로젝트를 진행하면서 Spring에서 Tomcat으로만 진행했던 터라 Apache Server와 Tomcat에 차이점에 대해 알지 못했고 현재 둘 다 사용 중이라 이참에 블로그 글을 쓰면서 알아보려고 한다.

Apache란?

흔히 아파치라고 부르는 것은 오픈 소스 소프트웨어 그룹인 아파치 재단에서 만든 웹서버(Apache HTTP Server)를 지칭하고 정적인 데이터(html, css, image 등등)를 처리 해 준다.

웹서버는 클라이언트가 GET, POST, DELETE 등의 메소드를 이용해 요청하면 그에 대한 결과를 돌려주는 기능을 한다.

사용자가 요청한 것들 중 웹서버 자체적으로 처리할 수 없는 것들을 톰캣과 같은 컨테이너에게 넘겨 처리결과를 받아와서 클라이언트에게 넘겨주는 역할도 수행한다.

Tomcat이란?

톰캣은 동적인 데이터를 처리하는 웹서버이다. 동적인 처리를 담당하는 서버를 WAS(Web Application Server)라고 하며 웹서버와 웹 컨테이너의 결합으로 다양한 기능을 컨테이너에 구현하여 규모가 크고 엔터프라이즈 환경에 필요한 트랜잭션, 보안, 트래픽 관리, DB커넥션 풀, 비즈니스 로직 수행 등등 다양한 역할을 수행할 수 있는 서버이다.

Was의 구성

사용자 요청(브라우저) -> 웹서버 -> WAS -> 웹서버 -> 사용자 응답 메세지(브라우저)

아파치 톰캣으로 부르는 이유는 기본적으로 아파치와 톰캣의 기능은 나누어져 있지만

톰캣 안에 있는 컨테이너를 통해 일부 아파치의 기능을 포함하기 때문에 보통 아파치 톰캣으로 합쳐 부른다.

Apache와 Tomcat의 차이점

WAS(톰캣)만 쓰지 않고 아파치를 쓰는 이유는 목적이 다르기 때문이다.

웹서버는 정적인 데이터를 처리하는 서버이며, 이미지나 단순한 html을 처리하는 서버라면 웹서버가 적당하며 빠르고 안정적이다. WAS는 동적인 데이터를 처리하는 서버로 DB와 연결되어 데이터를 주고받거나 프로그램으로 데이터 조작이 필요한 경우 WAS를 활용한다. 아파치(80 포트) , 톰캣 (8080 포트)

출처 - https://limmmee.tistory.com/4

https://ithub.tistory.com/101

https://velog.io/@kdhyo/Apache-Tomcat