59 |
60 |
61 | ### 2. 사용 기술 선정
62 | 모바일 환경으로 접속하는 사용자가 많을 것으로 예상되므로 가볍고, 빠른 응답 및 처리 속도를 최우선으로 하여 팀원관 대화를 통해 사용 기술을 선정하였다:
63 |
64 | 1. MariaDB(DBMS): 안정성과 확장성이 입증[[참고 1](#-참고문헌)]되어 선정함
65 | 2. Next.JS(프론트엔드 프레임워크): 빠른 응답속도와 뷰 전환[[참고 2](#-참고문헌)]을 기대하여 선정함
66 | 3. TypeScript(프로그래밍 언어): 빠른 개발과 높은 수준의 오류 검출[[참고 3](#-참고문헌)]이 가능하다는 점을 들어 선정함
67 | 4. Node.JS(백엔드 프레임워크): Next.JS와 구글 스프레드 시트 API간의 빠른 상호작용[[참고 4](#-참고문헌)]이 가능해 선정함
68 |
69 | ### 3. 데이터베이스 설계
70 | 차후 데이터베이스를 확장할 것을 고려하며 확장성을 중점으로 데이터베이스를 설계하였다. 다음은 이 프로젝트에서 사용한 데이터베이스의 테이블 정보를 서술한다.
71 |
72 | 먼저 사용자의 정보 및 비밀번호 저장을 담당하는 테이블이다.
73 |
74 | #### 1) "user" 테이블
75 | 사용자의 정보 및 비밀번호 저장을 담당하는 테이블이다.
76 |
77 | | 필드 | 자료형 | 설명 | 속성 |
78 | |:----:|:------:|:----:|:-----|
79 | | id | 가변형 문자열 | 학생 구분 ID (학번으로 구성됨) | PK(기본키), NN(null불가) |
80 | | grade/class/num | 32비트 정수 | 학년 반 번호 | NN |
81 | | roomno | 32비트 정수 | 호실 번호 (ex: 302) | NN |
82 | | nickname | 고정형 문자열 | 학생 실명 | NN |
83 | | passwd | 고정형 문자열 | salt값+비밀번호를 sha256한 값 | NN |
84 | | salt | 고정형 문자열 | 무작위 8자 유니코드 문자 | NN |
85 | | student | 8비트 정수 | 학생-담임선생님 구분 | (0: 선생님, 1: 학생) | NN, 기본값: 1 |
86 |
87 | 비밀번호를 안전히 보관하기 위해 salt를 생성하여 혹시나 사용자가 드러나기 쉬운 비밀번호로 설정하더라도 유출이 쉽지 않게[[참고 5](#-참고문헌)]끔 설계하였다.
88 |
89 | 다음은 출사 정보를 저장하는 테이블이다.
90 |
91 | #### 2) "outgo" 테이블
92 | 출사 정보를 저장하는 테이블이다.
93 |
94 | | 필드 | 자료형 | 설명 | 속성 |
95 | |:----:|:------:|:----:|:----:|
96 | | id | 가변형 문자열 |학생 구분 ID (학번으로 구성됨) |PK(기본키), NN(null불가) |
97 | |reason |긴 문자열 |출사 사유 |NN |
98 | |destination |긴 문자열 |출사 행선지 |NN |
99 | |startdate |가변형 문자열 |출사 시작일 (YYMMDDhhmm) |NN |
100 | |enddate |가변형 문자열 |귀사일 (YYMMDDhhmm) |NN |
101 | |outgodate |8비트 정수 |출사일 구분 |(0: 금요일 저녁, |1: 토요일 오후 1시) |NN, 기본값: 1 |
102 | |created_at |Unix타임스탬프 |출사 신청일 |NN, 기본값: 현재시간 |
103 |
104 | 출사와 관련된 여러 정보를 저장하여 쉽게 구분할 수 있도록 설계하였다.
105 |
106 | ### 4. 보안 설계
107 | 많은 개인정보를 다루는 프로젝트이므로 보안에 특히 신경을 썼다.
108 |
109 | 다음은 팀원 간 회의를 통해 결정된 보안 설계이다:
110 |
111 | 1) 서버와의 모든 통신은 신뢰할 수 있는 CA 기관[[참고 6](#-참고문헌)]에서 발급한 SSL 위에서 진행되어야 한다.
112 | 2) 비밀번호와 관련된 모든 연산은 SALT값과 함깨 보안 해시 알고리즘을 사용하여 단방향 암호화한다.
113 | 3) 암호학적으로 안전한[[참고 7](#-참고문헌)] 난수 생성기[[참고 8](#-참고문헌)]를 사용하여 SALT 값을 생성하여 유추할 수 없도록 한다.
114 |
115 | 
116 | ▲ 암호 알고리즘 시각화
117 |
118 | ### 5. 기능 구현
119 | 하교 이후 기숙사 자율시간을 활용하여 계획한 기능들을 구현하였다.
120 |
121 | 개발 과정에서 사용한 기술들을 나열하였다:
122 |
123 | 1) 마이크로소프트사에서 개발한 “Visual Studio Code”에서 지원하는 “Live Share”[참고9] 기능을 사용하여 팀원들과 쉽고 빠르게 동시 작업하여 작업의 능률을 증가시켰다.
124 | 2) “React”의 “Component”[[참고 10](#-참고문헌)]방식을 활용해 스타일이나 구성 요소들을 재활용하는 등 속도 개선을 위하여 노력하였다.
125 | 3) “Tailwind.css”의 “PostCSS”[[참고 11](#-참고문헌)]기능을 활용해 같은 디자인이지만 불필요한 스타일링을 제거하여 웹 페이지의 용량을 줄였다.
126 | 4) SSR(서버 측 렌더링)과 SSG(정적 사이트 생성기)[[참고 12](#-참고문헌)]를 적절히 사용해 사용자 성능과 무관한 빠른 처리 속도를 구현하였다.
127 |
128 | ### 6. 진행형 웹 애플리케이션(PWA) 구현
129 | 
130 |
131 | 사용자 대부분이 모바일 환경임을 고려해서 PWA로 바탕화면 아이콘을 통해 지연 없이 쉽고 간단하게 웹 사이트를 이용할 수 있도록 하였다.
132 |
133 | 모바일 환경에 최적화된 PWA를 제작하기 위해 구글에서 제공하는 <PWA Checklist>를 만족하도록 구현하였다.[[참고 13](#-참고문헌)]
134 |
135 | ### 7. 웹 서버 구축
136 | 교내에 컴퓨팅 자원이 많지 않아 Amazon에서 제공하는 AWS를 이용하여 클라우드 컴퓨팅을 통해 웹 서버를 구축하였다.[[참고 14](#-참고문헌)]
137 |
138 | 최소한의 요금으로 최대한의 요청을 수행할 수 있도록 NGINX와 PM2와 같은 소프트웨어를 활용하며 구축하였다.[[참고 15](#-참고문헌)]
139 |
140 | ## Ⅳ. 프로젝트 결과
141 | 다음은 사용자에게 보이는 화면(View) 목록이다. 모바일 친화적인 디자인과 직관적인 UI로 구성하였다. 또한 PWA구현으로 모바일 사용자에게 빠른 응답이 가능하다.
142 |
143 | | | | |
144 | |-|-|-|
145 | | 
