본문 바로가기

World Wide Web/PRWS.kr

20201023

2020년 상반기 동안 많은 변화를 거쳐왔었다. 이 동안의 주요 변경 사항들을 정리해 보았다.

 

1. 자동 자가진단 사이트

https://cov.prws.kr/

 

사실 이건 코로나19로 인해 일시적으로 나온 서비스이다. 사이트에서 DB에 정보를 등록하고, Crontab을 이용하여 자동으로 스크립트를 실행하는 방식을 사용했다.

 

https://github.com/rmagur1203/self-diagnosis

 

rmagur1203/self-diagnosis

(교육부 자가진단)자가진단 관련 라이브러리. Contribute to rmagur1203/self-diagnosis development by creating an account on GitHub.

github.com

여기서 소스를 차용하였다.

 

원래 Javascript 프로그램으로 만들어진 것을 웹으로 사용할 방법을 생각해 내느라 시간이 좀 걸렸다. 특히 ES6 문법이 아니었기에 <script> 태그 상에서는 실행되지 않았다.

 

Node.js를 통해서는 정상적으로 실행이 되었다. 따라서 웹 페이지에서 DB에 데이터를 등록하고, 그 데이터를 가져와 쓰면 어떨까? 라는 생각을 하게 된 것이다.

 

물론 여기에는 약간의 수정이 필요했다. 스크립트 파일 내에 다음과 같이 DB 연결 구문을 추가했었다.

const sql = require('mysql');

var cn = sql.createConnection({
    host: '',
    user: '',
    password: '',
    database: ''
});

cn.connect();
const work = cn.query('SELECT * FROM `테이블` WHERE `이름` IS NOT NULL AND `지역`=\'지역이름\'', 
    function(err, rows, fields){
    if (err) {
        console.log(err);
    } else {
        for(var i=0; i<rows.length; i++){
            // console.log(rows[i].이름);
            code = rows[i].학교;
            hksengn = rows[i].이름;
            hsbirth = rows[i].생일;
            AutoCheck(code, hksengn, hsbirth).catch;
            // AutoCheck()는 파일에 원래 있던 함수
        }
    }
});
cn.end();

지역을 구분하는 이유는 후술.

 

DB에 연결해서 특정 지역의 학생 데이터를 불러와 자가진단을 실행하는 과정을 반복하도록 하였다.

이후 웹에 학생정보 등록 창을 만들었고 Crontab 설정을 통해 매일 아침 7시 무렵에 자동으로 저 JS 파일을 실행하도록 해 놓았다.

 

처음에는 지역을 구분하지 않았었는데, 서울시 학생을 goehcs.eduro.go.kr에 연결해서 확인하는 것이 불가능해 경기도 학생 외에는 자가진단이 실행되지 않는 등의 문제가 생기자 지역별로 파일을 모두 분리해 놓았다. 

 

2. 웹 메일 설치

https://mail.prws.kr/

PRWS에 Roundcube를 재설치했다. 그간 Roundcube가 설치되어 있었을 때에는, 일부 UI가 작동하지 않는 문제가 있었다. 이는 Roundcube의 확장 플러그인 때문이었는데, 자세한 사항은 추후 포스팅을 통해 따로 정리할 예정이다.

 

플러그인 일부를 비활성화한 다음 들어가 보니 메일이 정상적으로 발송되는 것을 볼 수 있었다.

 

3. User-Agent 표시

IP 표시 기능도 맨 하단으로 옮겨 전체 페이지에서 확인할 수 있도록 했다. 또한 여기에 새로 추가된 것이 바로 User-Agent 표시 기능이다. 이는 일부 페이지에서 스크립트 미작동과 관련한 문제로 구버전 브라우저를 차단한 것 때문이다.

 

4. 페이지 구조 통합

학교급식, 회원가입 등의 기능은 원래 입력 페이지와 처리 페이지가 분리된 상태였다. 하지만 이는 비효율적이라고 판단하여 구조 통합을 진행하였는데, 이 과정에서 /auth/ 디렉토리 하위의 구조가 바뀌었다.

<기존>

로그인:/auth/login/index.php, login_ok.php

가입:/auth/member/member.php, member_ok.php

메일 발송 페이지:/auth/member/sendmail.php

비밀번호 리셋:/auth/member/findpw.php. editpw.php

아이디 찾기:/auth/member/findid.php

학교급식:/school/index.php, /school/meal/index.php

등등...

 

<현재>

로그인:/auth/login/

가입:/auth/register/

비밀번호 리셋:/auth/resetpw/

아이디 찾기:/auth/findid/

학교급식:/school/meal/

등등...

 

조금 더 구조가 간단해진 것 같다.

 

5. CSP 도입

개인적으로 가장 까다로웠던 부분 중 하나이다.

일단 unsafe-inline을 허용하는 것은 CSP가 없는 상태와 별반 다를 바가 없으므로, 인라인 스크립트는 nonce를 활용하기로 결정하였다.

 

기존하던 <script> 전체에 nonce 속성을 적용하고, style 속성으로 되어 있던 것들은 id 속성을 설정한 다음 <style nonce=...> 와 같이 수정하였다.

 

그리고 Integrity라는 것도 같이 도입하기로 결정한 탓에 외부 스크립트는 <script src="" integrity="sha384-..."> 와 같이 작성하였다.

 

 

반 년 동안 한 일 치고는 상당히 자잘한 것들이어서 존재감은 크지 않을 것이다...

'World Wide Web > PRWS.kr' 카테고리의 다른 글

20201023  (0) 2020.10.23
자체메일서버의 구축과 활용  (0) 2020.07.20
20200229  (0) 2020.05.27
20191112  (0) 2020.05.27
20190901  (0) 2020.05.27
20190503  (0) 2020.05.27