공군 병사 통합 홈페이지

계기

친구들과 휴가를 맞추고, 부대사람들과 휴가일정을 공유하는데 불편함이 있어 휴가관리를 할 수 있고, 배달음식을 같이 시키거나 다양한 부대 이야기를 할 수 있는 게시판을 만들면 좋겠다 싶어서 만들어보았다.

기간 (공부 + 제작) :  '23. 11. 09. ~ '24. 01. 01.

스택

js(jquery), html, css, flask, aws rds(mysql)

기능

초기의 계획은 다음과 같았다.

• 개인 캘린더로 휴가 관리 및 성과제 외박 주기 관리
• 친구들끼리 캘린더 공유
• 친구들끼리 캘린더 함께 작성
• 각 부대끼리의 게시판
• 학습, 질문 게시판등 유용한 게시판

웹을 모르는 처음에는 얼마 안걸릴줄 알았으나, 공부하기 위해 만든 웹페이지의 제작기간이 너무 길어지게 되었다. 다음 웹 페이지를 만들기 위해 어쩔 수 없이 핵심기능인 캘린더 기능을 빼기로 했다. 

따라서, 공군 병사 통합 홈페이지의 기능은 다음과 같다.

 

· 각 부대끼리 게시판

    · 게시물 좋아요 기능

    · 댓글 기능

        ·댓글 수정, 신고

        · 대댓글 기능

    · 게시물 북마크 기능

    · 게시판 즐겨찾기 기능

    · 페이징

· 친구 관리

    · 친구 요청, 요청 수락, 삭제

    · 친구 찾기

· 개인 페이지

    · 내가 쓴 글, 내가 저장한 글, 친구

 

또한, 모든 페이지를 반응형으로 제작했다.

배운점

웹을 만들 때 왜 여러 명이 파트를 나누고 만드는지 알게 되었다. 

생각보다 반복된 작업을 하며 시간을 매우 많이 보낸다는 것을 알게 되었다. css를 연습 겸 어떤 라이브러리도 안 쓰고 제작했는데, 이 부분 때문에 더 그렇다고 생각했던 것 같다. 예를 들면 버튼기능을 추가하는데 아무리 함수를 만들어 놓고 디자인을 정해놔도 특정 용도에서 다르게 기능을 하도록 하는 구간에서 그렇다고 느끼기도 했고, html에서 공통된 부분을 짜는데 더욱 시간이 많이 들었다. jinja2를 이용해 반복되는 부분을 최대한 줄이려고 노력했지만 반복되는 부분에서 시간을 허비하는 것이 느껴졌다.

또한 입력을 받는 곳이 상당히 귀찮다고 느껴졌다. mysql injection도 신경 써야 하고, 특수문자도 신경써야하고, 아이디나 비밀번호 같은 부분이라면 길이나 들어가야 하는 문자, 게시판이라면 엔터등을 db에 저장할 때 변환하고 저장하고 게시판에 다시 불러와 보여줄 때는 다시 엔터로 보일 수 있게 변환해야 하는 부분, 프런트에서 온 정보들이 맞는지 다시 서버에서 확인하는 과정 등등 신경 써야 할 부분들이 매우 많았다.

비슷한 맥락으로 프런트가 보안에 많이 취약하다는 점도 알았다. 일례로 로그인 버튼을 만들 때 특정 조건이 완성이 안되면 비활성화하도록 css에서 disable 속성을 줬다. 그러나 브라우저의 개발자 모드에서 너무나 손쉽게 disable 속성을 취소할 수 있어서, db에 위험한 요소나 에러를 일으킬 수 있는 요소마저도 손쉽게 전달할 수 있다는 점을 알았다. 그뿐만 아니라 프런트의 모든 정보는 다 조작될 위험이 있으므로 서버에서의 이중 확인 필수임을 알았다. 

그리고 요즘은 모바일 중심으로 웹을 쓰는 만큼 데스크톱용 웹을 만들고 모바일에 맞게 반응형을 만드는 것이 아닌, 모바일 중심으로 개발하고 데스크톱에 맞게 반응형을 주는 것이 더효과적일 것이라는 생각이 들었다.

배우고 싶은 점

db에 암호가 그대로 저장되는 것을 보고 보안에 매우 취약하다는 점을 알았다. 따라서 암호화 복호화 과정을 공부할 필요성이 있을 것 같다. 또한 전반적인 보안을 신경 쓰기 위해서 OAth 2.0도 배워야겠다.

또한 프런트의 반복적인 작업을 하며 웹 프레임 워크의 필요성을 절실히 느꼈다. 또한 html을 좀 더 효과적으로 다룰 필요를 느꼈다. 따라서 react 등 프레임 워크를 공부해 봐야겠다.

그리고 js는 너무 자유로워서 오류의 위험도 있고, 여러 명이 개발하게 된다면 불편한 점이 있을 것 같다. 따라서 typescript도 배워보고 싶다.