https://brew.sh 에 접속한다.

Homebrew 설치하기 옆에있는 Copy 아이콘을 클릭하여 선택한다.

터미널을 실행시킨다.

터미널에 해당 커맨드를 붙여넣는다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

계정 비밀번호를 입력한다.

엔터를 클릭하여 진행한다.

끝난뒤에 해당 커맨드를 입력한다.

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/사용자이름/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Homebrew가 설치됐는지 해당 커맨드를 통해서 확인한다.

brew --version

Docker Desktop을 실행한다.

상단의 Search에서 nginx를 검색한뒤에 Pull을 클릭한다.

Images 탭에 들어간 뒤에, Run을 클릭한다.

컨테이너 명을 입력하고, Host port에 80을 입력한뒤에 Run을 클릭한다.

브라우저에서 localhost를 검색하면, 적용이 완료된 걸 볼 수 있다.

본 내용은 DSM7.2 기준으로 작성되었습니다

Docker(Container Manager)에서 PostgreSQL 설치

• Container Manager 실행 후, 레지스트리에서 postgres 검색, 태그 선택에서 latest를 선택 후 적용을 누른다.

• 컨테이너 이름을 적고, 자동 재시작 활성화를 체크한다.

• 포트 설정에 로컬 포트를 적는데 추후에 DBeaver에 적을 포트번호이다. (임의로 5433을 적었다.)

• 환경변수를 2개 추가한 뒤에, POSTGRES_USER와 POSTGRES_PASSWORD를 입력하고, 값을 넣는다.
  임의로 postgres와 mypassword로 각각 값을 지정했다.

• 지정된 값을 보면 다음과 같이 되어 있다.

방화벽 설정

• 만약 방화벽 설정을 해뒀다면 해당 포트를 열어야 한다.

• 보안 → 방화벽 탭의 규칙편집을 눌린다.

• 생성을 눌린 뒤, 방화벽 규칙 편집에서 내장된 응용 프로그램 목록에서 선택의 라디오 버튼을 체크한 뒤, 선택을 눌린다.

• 많은 포트들이 있을 건데, 거기서 Docker 컨테이너명의 포트번호를 확인하고, 체크를 한다.

포트 포워딩

• 공유기를 사용하고 있다면, 포트포워딩을 해줘야 한다.
• 글의 포트명을 기준으로 하면, NAS IP:5433으로 하면 된다.

DB 외부연결 확인

• DB연결을 확인하기 위해서 DBeaver를 사용했다.

• DBeaver에 들어간 뒤에, 플러그 모양을 눌린다.

• PostgreSQL를 선택한다.

• Host에는 외부 IP 주소(도메인을 설정했다면, 도메인주소)를 Port에는 설정한 포트(5433)를, Username과 Password에는 각각 4번에서 추가했던 값들을 넣고, Test Connection...을 눌려서 연결을 확인한다.

• 연결이 완료된 것을 확인할 수 있다.

웹페이지 레이아웃을 짤 때, 상당히 난감한 경우가 많다.

그림으로 그린 것을 디지털로 바꾸는 것이 생각보다 시간도 많이 걸리고, 페이지의 결과물들이 일정하지 않은 경우가 많기 때문이다.

그런 것을 해결해주는 것이 PowerMockup이라는 플러그인이다.

PowerPoint에 PowerMockup을 추가하기 위해서는, https://www.powermockup.com/ 에 들어간다.

사이트에 들어가게 되면, 다음과 같은 화면이 나오게 된다.

여기서 DOWNLOAD TRIAL 버튼을 눌린다.

몇 가지 주의사항이 있는데 다음과 같다.

• 요구사항으로는 윈도우버전 Microsoft PowerPoint 2007, 2010, 2013, 2016, 2019 또는 2021 (Office 365 포함) 이 요구된다.
• 무료버전의 제한은 사용할 수 있는 도형의 개수에 제한이 있고, 도형들을 볼 수 있으나 사용할 수 있는 수가 제한될 수 있다는 것이 있다.

설치를 한 뒤에 설명서는 다음과 같은 설명서가 나오게 되는데 한 번 읽어보면 도움이 된다.

설치가 잘 되었다면 오른쪽에 아래 사진과 같은 것이 띄워져있을 것이다.

FREE TRIAL VERSION이라 비활성화 된 것들이 많지만, 이런식으로 활용이 가능하며, 주황색 Download More Shapes.. 라는 버튼을 클릭하게 되면, 다양한 Shapes들을 다운받을 수 있는 창이 나오게 된다.

앱 개발자(Android & iOS)를 위한 Shapes 들이 있다.

그리고 그런 앱 개발자들이 사용자들의 이용을 도와줄 수 있는 Shapes들도 존재한다.

또한 웹 개발자들이 주로 쓰는 라이브러리인 Bootstrap의 Shapes들도 존재하며, 일반적인 틀이 없는 Shapes도 존재한다.

그리고 다양한 icons도 존재한다.

예를 들어서, 하나 만들게 된다면, 옆에 있는 원하는 아이콘들을 더블클릭하면

다음과 같이 프레젠테이션에 나오게 된다.

기본 템플릿으로 내가 엄청 간단하게 만들어 본 것이다.

상당히 완성도가 높은 플러그인이라 생각이 된다.

디자인패턴의 정의

프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나로, 소프트웨어 개발과정에서 발견된 노하우를 축적하여 이름을 붙여 이후에 재사용하기 좋은 형태로 특정 규약을 묶어서 정리한 것이다.

디자인패턴을 사용하는 이유

• 요구사항은 수시로 변경 → 요구사항 변경에 대한 소스코드 변경을 최소화
• 여러 사람이 같이 하는 팀 프로젝트 진행 시 → 범용적인 코딩 스타일을 적용
• 상황에 따라 인수인계 하는 경우도 발생 → 객관적인 코드를 사용

프레임워크의 정의

비기능적(Non-Functional) 요구사항(성능, 보안, 확장성, 안정성 등)을 만족하는 구조와 구현된 기능을 안정적으로 실행하도록 제어해주는 잘 만들어진 구조의 라이브러리 덩어리

프레임워크는 애플리케이션들의 최소한의 공통점을 찾아 하부 구조를 제공함으로써 개발자들로 하여금 시스템의 하부 구조를 구현하는데 들어가는 노력을 절감하게 해줌

프레임워크를 사용하는 이유

• 비기능적인 요소들을 초기 개발 단계마다 구현해야 하는 불합리함을 극복해줌
• 기능적인(Functional) 요구사항에 집중할 수 있도록 해준다.
• 디자인 패턴과 마찬가지로 반복적으로 발견되는 문제를 해결하기 위한 특화된 Soultion을 제공함 (ex. 한글 깨짐 → 인코딩 기능 사용)

디자인패턴과 프레임워크의 관련성

디자인 패턴은 프레임워크의 핵심적인 특징이고, 프레임워크를 사용하고있는 애플리케이션에 그 패턴이 적용된다는 특징을 가지고 있다. 하지만 프레임워크는 디자인패턴이 아니다.

• 디자인 패턴은 애플리케이션을 설계할 때 필요한 구조적인 가이드라인이 되어 줄 수 는 있지만, 구체적으로 구현된 기반코드를 제공하지 않는다.
• 프레임워크는 디자인 패턴과 함께 패턴이 적용된 기반 클래스 라이브러리를 제공해서 프레임워크를 사용하는 구조적인 틀과 구현코드를 함께 제공한다.

개발자는 프레임워크의 기반코드를 확장하여 사용하면서, 자연스럽게 그 프레임워크에서 사용된패턴(디자인패턴)을 적용할 수 있게 된다.

JSON

JavaScript Object Notation (JSON)은 JavaScript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이며, 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다. (서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우)

JSON 이란?

• JavaScript 객체 문법을 따르는 문자 기반의 데이터 포맷
• 하지만, JavaScript 가 아니더라도, JSON 을 읽고 쓸 수 있는 기능이 다수의 프로그래밍 환경에서 제공됨
• 문자열 형태로 존재함 → 네트워크를 통해 전송할 때 아주 유용
• 데이터에 억세스 하기 위해서는 네이티브 JSON 개체로 변환될 필요가 있음 (하지만, JavaScript 는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원함)
• 개별 JSON 객체를 .json 확장자를 가진 단순 텍스트 파일에 저장할 수 있음. (MIME 타입은 application/json 이다.)

MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 매커니즘이다.

문자열에서 네이티브 객체로 변환하는 것을 파싱(Parsing)이라고 한다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 한다.

JSON 의 구조

JSON 안에는 JavaScript 객체 리터럴 문법과 마찬가지로 JavaScript 의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다.

{
  "name" : "kwah",
  "favoriteSportsTeam" : "Real Madrid CF",
  "favoritePlayers" : [
    {
      "playerName" : "Vinicious Jr.",
      "division" : "La Liga Santander",
      "clubName" : "Real Madrid CF",
      "backNumber" : "20",
      "position" : "FW",
      "nationality" : "Brazil"
    },
    {
      "playerName" : "Sergio Ramos",
      "division" : "LIGUE 1 Uber Eats",
      "clubName" : "Paris Saint-Germain FC",
      "backNumber" : "4",
      "position" : "CB",
      "nationality" : "Spain"
    },
    {
      "playerName" : "Luka Modrić",
      "division" : "La Liga Santander",
      "clubName" : "Real Madrid CF",
      "backNumber" : "10",
      "position" : "MF",
      "nationality" : "Croatia"
    },
    {
      "playerName" : "Toni Kroos",
      "division" : "La Liga Santander",
      "clubName" : "Real Madrid CF",
      "backNumber" : "8",
      "position" : "MF",
      "nationality" : "Germany"
    }
  ]
}

이 객체를 JavaScript 프로그램에서 로드하고, football 이라는 이름의 변수에 파싱하면 dot / bracket notation 을 통해서 객체 내의 데이터에 접근할 수 있게 된다.

football.favoriteSportsTeam
football['active']

하위 계층의 데이터에 접근시에는, 간단하게 프로퍼티 이름과 배열 인덱스의 체인을 통해서 접근할 수 있다. 예를 들어, football 의 2번째 favoritePlayers 에 접근하려면 다음과 같이 하면 된다.

football['favoritePlayers'][1]

1. 변수 이름을 지정한다.
2. 변수 내의 프로퍼티에 접근하려면 ["해당 프로퍼티"] 를 입력한다.
3. 만약 해당 프로퍼티가 객체로 구성된 배열이면, 뒤에 [1] 을 입력한다. (인덱스이기 때문에 2가 아닌 1이다.)

HTTP

1. 프로토콜(protocol) 이란?

서로 간의 통신을 위한 약속, 규칙을 의미한다.
주고 받을 데이터에 대한 형식을 정의하는 것이다.

2. HTTP(Hyper Text Transfer Protocol) 란?

HTTP는 텍스트 기반 프로토콜이다.

HTTP의 특징

• 단순하고 읽기 쉽다. (Human Readable)
• 상태를 유지하지 않는다. (stateless - 클라이언트 정보를 저장하지 않는다. → 보안하기 위해서 쿠키와 세션을 사용)
• 확장 가능하다. (커스텀 헤더 추가 가능)

3. HTTP 메시지

편지와 비슷하다고 생각하면 된다.
편지처럼 Header와 Body로 구성되어 있다.
요청 편지를 보내고, 응답 편지를 보내는 것과 비슷하다고 생각하면 된다.
브라우저로 URL을 입력 후 전송하면, 요청 메시지를 만들어 전송하는 것이라고 생각하면 된다.

[요청 메시지]

GET /ch2/hello HTTP/1.1

Host : 111.22.33.44:8080
Connection: keep
alive
Cache
Control: max age=0
Accept
Encoding: gzip , br

[응답 메시지]

HTTP/1.1 200 OK

Content
Length : 44
Content
Type : text/html
Date : Sat, 20 Oct 2021 19:03:38 GMT
<html>
<head></head>
<body>Hello</body>
</html>

4. HTTP 메시지 - 응답 메시지

HTTP 응답 메시지 형식(format)이다.
상태라인과 헤더는 붙여서 쓰지만, 바디와는 빈 줄을 통해서 구분을 짓는다.
아래와 같은 형식으로 응답을 줘야 클라이언트가 응답을 이해할 수 있다는 뜻이다.

HTTP/1.1 200 OK

Content
Length : 44
Content
Type : text/html
Date : Sat, 20 Oct 2021 19:03:38 GMT

year=2021&month=10&day=1

5. HTTP 메시지 -요청 메시지

[GET 방식]

Server의 Resource를 얻어올려고 하는 것이다.
Read를 위한 것이기에 Body가 없다.
data를 보낼 것이 있으면, 요청라인에 쿼리스트링으로 data를 보낼 수 있다.

GET/getYoil?year=2021&month=10&day=1 HTTP/1.1

Host: 111.22.33.44:8080
User
Agent: Mozilla/5.0 (Windows NT 10.0)
Accept : text/html
Connection: keep
alive

[POST 방식]

서버에 전송할 data를 Body에 담고 있다.
Body에 내용들이 들어간다.
Write를 하기 위한 것이라 생각하면 된다.
글쓰기, 로그인, 회원가입, 파일 첨부 등이 있다.

POST/getYoil HTTP/1.1

Host: 111.22.33.44:8080
User
Agent: Mozilla/5.0 (Windows NT 10.0)
Accept : text/html
Connection: keep
alive

year=2021&month=10&day=1

6. HTTP 메서드 - GET, POST

7. 텍스트 파일과 바이너리 파일

바이너리 파일 : 숫자와 문자가 저장되어 있는 파일, 데이터를 있는 그대로 읽고 쓴다.
텍스트 파일 : 문자만 저장되어 있는 파일, 숫자를 문자로 변환 후 쓴다.

8. MIME(Multipurpose Internet Mail Extensions)

텍스트 기반 프로토콜에 바이너리 데이터 전송하기 위해 고안되었음

HTTP의 Content Type 헤더에 사용, 데이터의 타입을 명시한다.
더 많이 있지만 기본적으로 몇 개만 적어있다.

[RequestHeader.java]

package com.fastcampus.ch2;

import java.util.Enumeration;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class RequestHeader {
    @RequestMapping("/requestHeader")
    public void main(HttpServletRequest request) {

        Enumeration<String> e = request.getHeaderNames();

        while (e.hasMoreElements()) {
            String name = e.nextElement();
            System.out.println(name + ":" + request.getHeader(name));
        }
    }
}

[출력결과]

INFO : com.fastcampus.ch2.HomeController - Welcome home! The client locale is ko_KR.
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/ch2/RequestHeader] in DispatcherServlet with name 'appServlet'
host:localhost:8080
connection:keep-alive
sec-ch-ua:"Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"
sec-ch-ua-mobile:?0
sec-ch-ua-platform:"Windows"
upgrade-insecure-requests:1
user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
sec-fetch-site:none
sec-fetch-mode:navigate
sec-fetch-user:?1
sec-fetch-dest:document
accept-encoding:gzip, deflate, br
accept-language:ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

[RequestMessage.java]

package com.fastcampus.ch2;

import java.io.IOException;
import java.io.InputStream;
import java.util.Enumeration;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class RequestMessage {
    @RequestMapping("/requestMessage")
    public void main(HttpServletRequest request) throws Exception {

        // 1. request line
        String requestLine = request.getMethod();       // GET 또는 POST
        requestLine += " " + request.getRequestURI();   // /ch2/requestMessage

        String queryString = request.getQueryString();  // year=2021&month=10&day=1
        requestLine += queryString == null ? "" : "?"+queryString;  
        requestLine += " " + request.getProtocol();     // HTTP/1.1
        System.out.println(requestLine);        


        // 2. request headers
        Enumeration<String> e = request.getHeaderNames();

        while (e.hasMoreElements()) {
            String name = e.nextElement();
            System.out.println(name + ":" + request.getHeader(name));
        }

        // 3. request body - POST일 때만 해당, GET은 body가 없음(CONTENT_LENGTH=0)
        final int CONTENT_LENGTH = request.getContentLength();
//        System.out.println("content length="+CONTENT_LENGTH);

        if(CONTENT_LENGTH > 0) { // body가 있을 때
            byte[] content = new byte[CONTENT_LENGTH];

            InputStream in = request.getInputStream();
            in.read(content, 0, CONTENT_LENGTH);

            System.out.println(); // empty line
            System.out.println(new String(content, "utf-8")); // year=2021&month=10&day=1
        }  // if
    } // main
}

[실행결과]

GET /ch2/requestMessage HTTP/1.1
host:localhost:8080
connection:keep-alive
cache-control:max-age=0
sec-ch-ua:"Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"
sec-ch-ua-mobile:?0
sec-ch-ua-platform:"Windows"
upgrade-insecure-requests:1
user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
sec-fetch-site:none
sec-fetch-mode:navigate
sec-fetch-user:?1
sec-fetch-dest:document
accept-encoding:gzip, deflate, br
accept-language:ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

9. Base64

base64는 64진법이라는 뜻이다. (2진법은 base2, 10진법은 base10, 16진법은 base16)
바이너리 데이터를 텍스트 데이터로 변환할 때 사용한다.
64진법은 '0'

' 9','A'

'Z', a'~'z 모두 64 개 (6 bit)의 문자로 구성

[Base64 색인표]

참고 : Wikipedia

HTTP 요청과 응답

1. HttpServletRequest

브라우저를 통해서 URL로 요청을 하면 서버에 있는 톰캣이 객체에 저장한다.
메서드의 매개변수로 저장한다.
HttpServletRequest를 통해서 request로 받아들인다.
원하는 정보를 매개변수(HttpServletRequest)를 통해서 얻을 수 있다.

2. HttpServletRequest의 메소드

[YoilTeller.java]

package com.fastcampus.ch2;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Calendar;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

// 날짜 연월일을 입력하면, 날짜를 말해주는 프로그램
@Controller // Controller 를 통해서, 로컬프로그램을 원격프로그램으로 변경
public class YoilTeller { 
    // public static void main(String[] args) {
        @RequestMapping("/getYoil")
        public void main(HttpServletRequest request, HttpServletResponse response) throws IOException{
        // 1. 입력
        String year = request.getParameter("year");
        String month = request.getParameter("month");
        String day = request.getParameter("day");

        // 2. 작업
        int yyyy = Integer.parseInt(year);
        int mm = Integer.parseInt(month);
        int dd = Integer.parseInt(day);

        Calendar cal = Calendar.getInstance();
        cal.set(yyyy, mm - 1, dd);

        int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK); // 1 = 일, 2 = 월 ...
        char yoil = "일월화수목금토".charAt(dayOfWeek);

        // 3. 출력
        response.setContentType("text/html"); // response 객체 형식을 적어야한다. 즉, 출력할 내용의 타입을 적어야한다.
        response.setCharacterEncoding("UTF-8"); // 텍스트도 인코딩을 해야지 한글이 깨지지 않는다.
        PrintWriter out = response.getWriter(); // response객체에서 브라우져로의 출력 스트림을 얻는다.
        out.println(year + "년" + month + "월" + day + "일은 "); 
        // 원래 제대로 하려면 HTML 형식을 갖춰서 해야한다.
        out.println(yoil + "요일입니다.");
    }
}

getQueryString()

문자열은 전부 스트링이다.
값을 전달할 때 사용한다.
쿼리스트링의 값을 읽으려면, getParameter() 메소드를 써야한다.

?year=2021&month=10&day=1 // 이 값을 기준
// getParameter - 제일 많이 쓰인다.
String year = request.getParameter("year"); // 2021
String month = request.getParameter("month"); // 10
String day = request.getParameter("day"); // 1

Enumeration enum = request.getParameterNames(); // 이름만 갖고 오는 것 (year, month, day)
// Enumeration(Old Version)은 Iterator(New Version)와 같은 것이다.
Map paramMap = request.getParameterMap(); // Map 형태로 가져오는 것 (표 형태랑 비슷하다고 생각하면 된다.)

[위의 것을 Map 형태로 받았을 때]

getQueryString() 메소드를 사용할 때, name들이 같을 때

getParameterValues를 사용한다.

String[] yearArr = request.getParameterValues("year")

[getParameterValues 사용 시]

yearArr 참조변수로 Str[]을 다룰 수 있다.