1주차 과제 | 웹서버의 이해 및 로그인 페이지 구현

1. 복습 (웹 서버 이해)

2. 간이 로그인 페이지 만들기 (DB연결 x)

(admin / admin1234) 라고 입력했을 때 로그인을 시켜주는 페이지를 만들어보기.

3. 로그인 페이지 이쁘게 만들기. 

 

 

  1번에서 복습이라는 간단한 단어로 정리하셨지만...ㅋㅋㅋㅋ 웹개발이 본업이라 그나마 첫수업이 어렵지 않았지만 양이 꽤 방대했다. 단순히 여러 설명들보다는 방법적으로 어떻게 웹서버를 열지 스트레이트로 진행한거라 많은 부분들이 생략된 것 같지만.. 여긴 모의해킹에 포커스를 둔 곳이기 때문에 이해가 간다. 그 부분들 하나하나 배우려면 웹개발하러가야지..ㅎㅎ 

 

간단하게 이번 과제는 이렇게 정리해볼 수 있겠다.

 

1. 서버 오픈

- vmware, virtualbox 등을 알려주셨지만 설치해보니 arm을 지원하지 않거나 유료거나.. 하는 이유로 더 찾기보다는 서버의 종류가 중요하다고 느껴지지는 않아서 놀고있는 데스크탑에 ubuntu 설치 후 ssh로 터널링해서 접속, 구현한 소스를 github를 통해 가져왔다.

 

2. 백엔드

- 예시에서는 php 로 진행했으나 굳이 다 할줄 아는 상황에서 php라는 고대유물을 알려고 하기보다 추후 포폴에도 사용할 수 있도록 내가 할 수 있는 스택으로 진행했다. 일단 node.js 로 서버를 구축, 모의해킹 수업 관련된 내용 진행되는 동안에는 orm없이 순수 mysql로 진행하려 한다. 혹시 기능이 많이 추가될 것 같으면 재빠르게 nest로 마이그레이션하려 한다..ㅎㅎ

개발환경에서는 터널링이 필요하여 해당 내용을 추가해서 진행했다. 

export async function dbLoader(): Promise<void> {
  try {
    connectionCount++;
    console.log("db refresh Count: ", connectionCount);
    if (process.env.NODE_ENV === "development") {
      sshClient
        .on("ready", () => {
          sshClient.forwardOut(
            forwardConfig.srcHost,
            forwardConfig.srcPort,
            forwardConfig.dstHost,
            forwardConfig.dstPort,
            (err, stream) => {
              if (err) throw err;
              const updatedDbServer = {
                ...dbServer,
                stream,
              };
              mysqlPool = mysql.createPool(updatedDbServer);
              console.log("MySQL Pool initialized.");
            }
          );
        })
        .connect(tunnelConfig);
    } else {
      mysqlPool = mysql.createPool(dbServer);
      console.log("MySQL Pool initialized.");
    }
  } catch (error) {
    console.error("Unable to initialize database:", error);
    throw error;
  }
}

로그인 부분은 다음과 같이 정리했다.

- 이메일 / 패스워드 입력

- dto에서 유효성검증

- 이메일로 User데이터 조회

- 패스워드 bcrypt 복호화, 조회한 user.password와 비교 후 에러처리

- access / refresh 토큰 반환 및 body에 user.name 전달

 

패스워드 복호화 로직을 구현해놔서 오히려 db에 임의로 패스워드를 넣을 수 없다보니 테스트는 어렵지만, 오는 주에 틈틈히 회원가입 기능 간단히 만들어서 배포해두려한다. 

 

3. 프론트엔드 

로그인 페이지 이쁘게 만들기...는 쉽지 않고 ㅎㅎ 그냥 간단하게만 구성했다. jquery로 진행하려다 이전에 만들어둔 리액트 보일러플레이트가 있어서 바로 가져왔다.

- 이메일 / 패스워드 입력 필드

- 패스워드 옆에 아이콘 클릭시 패스워드 노출 기능

- 에러메세지 노출 필드

- 로그인, 회원가입 버튼

이정도만 구성해뒀고, 회원가입은 버튼만 만들어뒀다.  서버쪽 로직 구현한 후 회원가입 모달 열어서 입력 후 요청하도록 진행하려 한다.