eee-IT____에잇

파이어베이스

구글에서 개발한 클라우드 기반의 백엔드 서비스를 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼이다.

웹서비스를 만들면서 반복해서 사용하는 기능들은(유저 인증, API, 데이터베이스) 서비스 주체만 다를 뿐 그 절차와 기능은 비슷하다. 이런 기능들을 정형화해서 서비스로 제공하는 것이 파이어베이스이다.

파이어베이스의 종류

• Realtime Database : 파이어베이스에서 제공하는 데이터베이스 서비스 중 하나로서, 실시간으로 업데이트되는 애플리케이션에 적합한 기능을 제고한다.
• Authentication : 파이어베이스에서 제공하는 사용자 인증 기능으로, 이메일/비밀번호, 구글, 페이스북 다양한 방법으로 사용자 인증을 할 수 있다.
• Cloud Storage : 파이어베이스의 파일 저장소 서비스로서, 이미지, 동영상, 오디오 등 다양한 형식의 파일을 저장할 수 있다.

파이어베이스는 데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등 다양한 종류가 있다.

NameSpace

서버와 클라이언트가 연결되면 실시간 데이터 공유가 가능한데, socket을 그냥 사용하면 모든 데이터가 모든 socket으로 들어가게된다.

하지만 특정 페이지에서 소켓이 보내주는 모든 실시간 데이터를 모두 받을 필요가 없다.

그래서 특정 노드끼리만 연결한 것이 namespace이다. 즉 같은 네임스페이스 소켓 끼리만 통신을한다. 

@WebSocketGateway() //게이트웨이 설정
export class ChatGateway{
    @WebSocketServer() server: Server; // 웹소켓 인스턴스 생성
    
    @SubscribeMessage('message') //해당 이벤트 구독
    handleMessage(socket: Socket, data: any): void {
        this.server.emit('message', `client-${socket.id.substring(0,4)} : ${data}`,);
    }
}

게이트웨이 네임스페이스 설정


@WebSocketGateway({namespace: 'chat'}) //게이트웨이 설정
export class ChatGateway{
    @WebSocketServer() server: Server; // 웹소켓 인스턴스 생성
    
    @SubscribeMessage('message') //해당 이벤트 구독
    handleMessage(socket: Socket, data: any): void {
        this.server.emit('message', `client-${socket.id.substring(0,4)} : ${data}`,);
    }
}

플러터에서 화면 간 이동은 Stack 구조를 이용하고 있다.

화면에 보여주는 페이지는 Stack의 최상단에 있는 페이지가 되고, 현재 화면에서 다른 화면으로 이동할 때는,

Navigator.Push() 메소드를 사용하여 MaterialPageRoute 클래스에 이동하려고 하는 화면 클래스를 파라미터로 전달하여 Stack에 추가한다.

이전 화면 이동을 원하면 Navigator.Pop() 메소드를 사용

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondPage()),
  );
},

#############################

onPressed: () {
	Navigator.pop(context);
},

Routes

각각의 페이지를 분리하여 파일에 저장하고 경로를 설정한 다음 Routes를 이용하여 화면을 이동하는 방법을 알아보자.

main.dart에서 라우팅을 하기 위해선 화면 페이지와 라우트명을 매핑해야 한다.

이번 실습에선 main.dart에서 home_page.dart와 second_page.dart파일을 이용해서 이동을 할 것이다.

initialRoute : 초기화면지정

routes : 화면 페이지와 라우트명 매핑

return MaterialApp(
  title: 'navigation example',
  initialRoute: '/home',
  routes: {
    '/home' : (context) => MyHomePage(),
    '/second_page' : (context) => SecondPage(),
  },
  home: MyHomePage(),
);

TextField

TextField 위젯은 사용자로부터 텍스트를 입력받기 위해 사용하는 위젯으로, 가장 많이 사용하는 위젯.

TextField는 텍스트를 입력할 때마다 데이터가 수정되어 onChanged 이벤트가 발생된다.

이메일 형식의 텍스트 박스

TextField(
    keyboardType: TextInputType.emailAddress,
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Email',
      hintText: 'you@email.com',
      icon: Icon(Icons.mail_outline),
    ),
),

숫자만 입력 가능한 텍스트 박스

TextField(
    keyboardType: TextInputType.number,
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Number',
      hintText: '12345',
      icon: Icon(Icons.calculate_outlined),
    ),
    maxLength: 8, // 최대 입력 길이
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))], // 정규식 : 숫자 0~9만 가능
),

비밀번호 입력 박스

비밀번호를 입력하기 위한 텍스트는 매우 중요해서 일반적으로 타인이 볼 수 없도록 '*' 로 표시되도록 설정을 한다.

TextField(
    keyboardType: TextInputType.visiblePassword,
    obscureText: true, // 입력 텍스트를 '*'로 표시해준다.
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Password',
      border: OutlineInputBorder(), //입력 칸에 테두리 설정
      icon: Icon(Icons.password),
    ),
    maxLength: 19, // 최대 입력 길이
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))], // 정규식 : 숫자 0~9만 가능
),

채팅을 만들려면 채팅방도 만들어야 하고, 접속한 유저 모두에게 메시지를 발송하는 브로드캐스팅 기능도 필요하고 여러 기능들이 필요하다.

socket.io는 웹소켓을 기반으로 서버와 클라이언트의 양방향 통신을 지원하는 라이브러리이다.

작업 순서

1.  프로젝트 생성 및 패키지 설치
2.  정적 파일 서비스를 위한 main.ts 설정
3.  socket.io 서버 구동을 위한 게이트웨이 만들기
4.  클라이언트 측 코드 작성
5.  테스트

1.패키지 설치하기

@nestjs/websockets : 클라이언트와 서버를 연결하고 양방향 통신 또는 데이터 전송이 가능하게 해주는 패키지

@nestjs/platform-socket.io  : 웹소켓의 성능향상이나, 실시간 데이터 동기화 같은 웹소켓 프로토콜 기반의 프로그램 작성 시 필수인 패키지

2. 정적 파일 서비스 설정

NestJS에서는 정적 파일을 불러오는 기능을 제공한다.

// 반환형을 NestExpressApplication형으로 지정해 정적 메서드를 사용한다.
const app = await NestFactory.create<NestExpressApplication>(AppModule);
// useStaticAssets : 정적 파일의 경로를 지정
app.useStaticAssets(join(__dirname, '..', 'static'));

3. 서버 측 작업을 위한 게이트웨이 만들기

NestJS에서는 웹소켓을 사용한 통신을 받아주는 클래스를 게이트웨이라한다.

게이트웨이를 만드는 방법은 @WebSocketGateway() 데코레이터를 클래스에 붙이면 된다.

@WebSocketServer() : 실제 WebSocket 서버 인스턴스를 참조하게 되서 클라이언트에 메시지 전송, 연결, 관리같은 WebSocket 서버를 제어할 수 있다.

@WebSocketGateway() //게이트웨이 설정
export class ChatGateway{
    @WebSocketServer() server: Server; // 웹소켓 인스턴스 생성
    
    @SubscribeMessage('message') //해당 이벤트 구독
    handleMessage(socket: Socket, data: any): void {
        this.server.emit('message', `client-${socket.id.substring(0,4)} : ${data}`,);
    }
}

3-1. 게이트웨이를 모듈에 등록하기

게이트웨이는 다른 클래스에 주입해서 사용할 수 있는 프로바이더이다.

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService, ChatGateway], // 게이트웨이를 프로바이더로 등록, 게이트웨이는 다른 클래스에 주입해서 사용할 수 있는 프로버이더이다.
})

4. 클라이언트를 위한 index.html 수정

웹소켓은 브라우저가 표준 프로토콜이라서 자체적으로 지원을해서 따로 라이브러리를 사용할 필요가 없다.

반면 socket.io는 브라우저에서 따로 지원을 안해줘서 설정을 해줘야한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Simple Nest Chat</h2>
    <div id="chat"></div>
    <input type="text" id="message" placeholder="메시지를 입력해주세요.">
    <button onclick="sendMessage()">전송</button>
</body>
<!-- jquery 로드 -->
<script src="https://code.jquery.com/jquery-3.6.1.slim.js">
</script>
<!-- socket.io 인스턴스 생성 -->
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
    const socket = io('http://localhost:3000');
    // 전송 버튼을 클릭 시 입력된 글을 message 이벤트로 보냄
    function sendMessage(){
        const message = $('#message').val();
        socket.emit('message', message);
    }
    socket.on('connect', () =>{
        console.log('connected');
    });
    socket.on('message', (message) =>{
        $('#chat').append(`<div>${message}</div>`);
    });
</script>
</html>

socket.on('이벤트', '받은 데이터') : emit()에서 발생된 이벤트리스너로 데이터를 받는다

socket.emit('이벤트', '넘겨줄 데이터') : 서버에서 해당 이벤트를 발생시켜 클라이언트 쪽의 해당 이벤트 리스너에게 데이터를 넘겨준다.

웹소켓 소개

사용자가 직접 화면을 갱신하지 않아도 자동으로 화면을 갱신하는 애플리케이션이 있다.

주식이나 채팅 애플리케이션이 대표적이다. 이러한 일을 하려면 서버에 주기적으로 요청을 보내서 받아오거나 서버에서 데이터를 보내주어야한다.

웹은 HTTP 프로토콜 위에서 동작하고 있기 때문에 요청을 보내야지만 서버가 응답을 주게 된다.

즉 양방향 통신을 지원하지 않는다.

웹소켓(WebSocket)

웹소켓(ws)은 하나의 TCP 컨넥션으로 서버와 클라이언트 간에 양방향 통신을 할 수 있게 만든 프로토콜이다.

웹소켓은 양방향 통신을 지원하므로 브라우저 상에서 리프레시 없이 실시간성을 요구하는 애플리케이션을 구현한다.

웹소켓의 특징은 크게 두 가지이다.

1. 양방향 통신

양방향 통신은 데이터를 동시에 처리한다는 뜻이며 클라이언트와 서버가 원하는 때 데이터를 주고받을 수 있다는 의미.

통상적인 HTTP 통신은 클라이언트가 요청하는 때만 서버가 응답하는 단방향 통신이였다.

2. 실시간 네트워킹을 구현하는 것이 용이하다.

웹 환경에서 연속된 데이터를 빠르게 노출하고 싶을 때, 예를 들어 채팅이나 주식 앱에 적합.

또한 브로드캐스팅을 지원하므로 여러 클라이언트와 빠르게 데이터를 교환할 수 있어 편리하다.

※브로드캐스팅 : 데이터를 전송할 때 여러 단말장치 대해 동일한 정보나 메시지를 일제히 전송하는 기술.

웹소켓의 동작 방법

웹소켓 프로토콜은 크게 핸드 쉐이크와 데이터 전송으로 나눌 수 있다.

핸드 쉐이크 : 통신을 하는 웹서버와 브라우저가 암호화 통신을 시작할 수 있도록 신분을 확인하고, 필요한 정보를 클라이언트와 서버가 주고 받거니하는 과정이 악수와 비슷해서 붙혀진 이름이다.

※ SSL : TCP/UDP같은 일반적인 통신에 안전한 계층을 추가하는 방식

SSL에 탑재된 기술 : 통신 대상을 확인하는 신분 확인, 하나의 키로 암호화/복호화를 수행하는 대칭키 암호화 방식 등

1. 먼저 클라이언트가 서버에 접속해 말을 걸면서 몇가지 정보를 제공한다.

• 브라우저가 사용하는 SSL혹은TLS 버전 정보
• 브라우저가 지원하는 암호화 방식
• 브라우저가 임의로 생성한 난수

2. 서버도 인사에 응답하고, 다음 정보를 클라이언트에게 제공한다.

• 서버의 공개키가 담긴 SSL 인증서
• 서버가 임의로 생성한 난수

3. 브라우저는 서버가 제공한 SSL인증서가 믿을만한지 확인

• CA공개키를 가지고 암호화된 SSL인증서를 복호화해서 확인

4. 브라우저의 난수 값과 서버에서 받은 난수 값을 이영해 premaster secret 값을 생성

5. 서버는 사이트의 비밀키로 받은 premaster secret 값을 복호화 한다.

• 서버는 premaster secret 값을 master key로 저정해 session key를 만들고 이 키를 이용해 데이터의 암호화/복호화를 진행한다.

6. SSL handshake를 종료하고, HTTPS 통신을 시작

• 브러우저와 서버는 SSL handshake를 정상적으로 완료하고, 웹상에서 데이터를 세션키를 통해 암호화/복호화하면서 HTTPS통해 주고 받는다.

flex : 각 컨테이너마다 확장되는 비율을 다르게 지정한다. flex에 정의된 비율에 따라 컨테이너가 늘어난다.

Expanded(
  flex: 1,
  child: Container(
    margin: EdgeInsets.only(),
    width: 80,
    height: 80,
    color: Colors.cyan[600],
  ),
),
Expanded(
  flex: 2,
  child: Container(
    width: 80,
    height: 80,
    color: Colors.orange[600],
  ),
),
Expanded(
  flex: 3,
  child: Container(
    width: 80,
    height: 80,
    color: Colors.red[600],
  ),
),

Stack : 위젯을 수평 또는 수직 방향으로 쌓아 배치하는 위젯, 하위 위젯들은 작성된 순서대로 가장 아래부터 쌓여 배치, 가장 먼저 수행되는 위젯이 가장 아래에 위치한다.

Expanded(
  flex: 1,
  child: Container(
    margin: EdgeInsets.only(),
    width: 500,
    height: 500,
    color: Colors.cyan[600],
  ),
),
Expanded(
  flex: 2,
  child: Container(
    width: 300,
    height: 300,
    color: Colors.orange[600],
  ),
),
Expanded(
  flex: 3,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red[600],
  ),
),

align : 하위 위젯의 위치를 지정한다.

Container(
  width: 600,
  height: 500,
  color: Colors.white,
    child: const Align(
      alignment: Alignment.topRight,
      child: FlutterLogo(
        size: 60,
      ),
  ),
)

SizedBox : 너비또는 높이를 가진 빈 상자 위젯

Container(
  width: 200,
  height: 200,
  color: Colors.blue[600]
),
SizedBox(height: 30.0,),
Container(
    width: 200,
    height: 200,
    color: Colors.red
),
SizedBox(height: 10.0,),
Container(
    width: 200,
    height: 200,
    color: Colors.green,
),

Column : 세로 방향으로 위젯들을 배치하는 위젯, children 속성을 가지며, 이 속성을 통해 하위 위젯들을 나열할 수 있다.

Row : Row 위젯은 가로 방향으로 배치하는 위젯

MainAxis 와 crossAxis : mainAxis는 Row 또는 Column을 정렬하는 주축을 의미하고 crossAxis는 주축과 반대 방향으로 위젯들을 맞춤정렬하는 축.

• center : 수평(수직)으로 가운데 정렬
• start : 수평(수직)으로 시작되는 왼쪽으로 정렬
• end : 수평(수직)으로 시작되는 오른쪽 끝부터 정렬
• spaceEvenly :수평(수직)으로 하위 위젯들 사이의 여백을 균등하게 배분하여 정렬
• spaceAround : 수평(수직)으로 하위 위젯 주변의 여백을 동일하게 정렬
• spaceBetween : 수평(수직)으로 양 끝에 하위 위젯을 배치하고 사이에 있는 하위 위젯의 여백을 균등하게 배분하여 정렬
• stretch : 수평(수직) 기준으로 하위 위젯을 늘력 확장.

1. center

mainAxisAlignment: MainAxisAlignment.center,

2. start

mainAxisAlignment: MainAxisAlignment.start,

3. end

mainAxisAlignment: MainAxisAlignment.end,

4. spaceEvenly

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

5. spaceAround

mainAxisAlignment: MainAxisAlignment.spaceAround,

6. spaceBetween

mainAxisAlignment: MainAxisAlignment.space.Between,

7. stretch

mainAxisAlignment: MainAxisAlignment.stretch,

Expanded : Row 또는 Column의 하위 위젯간에 남는 공간을 위젯을 늘려서 채울 수 있도록 하는 위젯.

즉 주축 방향으로 늘려서 비어있는 공간을 채운다.