"초보" 개발자의 1인 프로젝트 회고록

김태경·2021년 12월 31일

사이드 프로젝트 채팅사이트 초보 개발자 커뮤니티 회고록

회고록

목록 보기

1/1

왜 1인 프로젝트?

저는 아직 제대로 된 프로젝트 경험이 없는 초보 개발자입니다. 웹 백엔드 공부를 시작한 지 반년이 막 넘었고, 4학년을 앞둔 대학생입니다.

협업이 해보고 싶었지만.. 초보 백엔드 개발자가 팀을 구한다는 건 너무 어려웠기 때문에

"에라 모르겠다.. 내가 그냥 다 하자"라는 무식한 용기를 가지고 1인 프로젝트를 진행하게 되었습니다. 🤯

1. 소개

Devinner는 초보 개발자들을 위한 커뮤니티 사이트입니다. 초보라 함은 이제 막 웹 개발을 접해서 이것저것 해보지만 감이 잘 잡히지 않는 사람들을 말합니다. 초보 개발자분들에게 유용한 기능을 제공하기 위해서 많이 고민했던 것 같습니다.

Devinner 바로가기

현재 Devinner의 서버 구조

첫 경험이기 때문에 배포에 의미를 두었고 아직은 단순한 구조입니다.

Nginx를 사용한 이유

Nginx를 사용한 이유는 서버의 보안성을 향상시키고 나중에 WAS를 늘릴 경우 로드 밸런싱을 사용해 보기 위해서 사용하게 되었습니다. 또한 Certbot을 이용해서 SSL을 쉽게, 무료로 적용할 수 있어 굉장히 편리했습니다. 보안성이 조금이라도 향상될 수 있는 이유는 Nginx가 리버스 프록시 역할을 해서 클라이언트는 Nginx 뒤에 있는 내부 서버의 존재를 알 수 없기 때문입니다. 추가적으로 보안성을 향상시키기 위해 다양한 보안 모듈을 사용해 볼 계획입니다.

다음 목표

Github action을 사용해서 CI/CD를 구축하기
Nginx로 보안성 향상시키기

메인 페이지 📜

개발자 게시판이 있고 오른쪽에는 채팅방이 있습니다. 게시글 작성/조회/추천/삭제가 가능합니다. 게시글 작성에는 SummerNote 라이브러리를 적용했고 이미지 업로드를 위해 Multer를 사용했습니다. 또한 게시글 성격에 맞는 탭 설정이 가능합니다. 추후에 사용량이 많아지면.. 게시판을 더 세부적으로 분리할 생각입니다.

채팅 📳

로그인 후 채팅방에 채팅하는 모습입니다. 채팅은 Socket.io로 구현하였고 웹소켓을 사용하기 위해서 nginx를 설정하는 것이 조금 어려웠습니다. 또한 helmet의 content security policy를 사용하는데 이때 웹 소켓 출저를 허용하는 등의 추가적인 설정이 필요했습니다.

핸드폰으로 접속할 경우 채팅방 화면만 보이도록 디자인했습니다. 아직 핸드폰으로는 채팅 기능만 사용할 수 있습니다. 테블릿의 경우 pc처럼 이용이 가능합니다.

자신의 프로젝트 소개하기 ✨

Devinner는 자신이 Github에 등록한 프로젝트를 소개할 수 있습니다. Devinner 사이트에 Github 아이디를 등록한 경우에만 이용할 수 있고, 유효한 Github repository인지 확인 후 프로젝트의 제목, 소개 글, 대표 이미지를 등록해서 소개할 수 있습니다. 많은 분들이 자신의 프로젝트를 소개해 주시면 너무 좋을 것 같네요.

Github 아이디는 회원가입 시 또는 마이페이지에서 등록 가능합니다. 또한 마이페이지에서 Github 아이디 변경도 가능합니다. 물론 남의 Github 아이디를 등록하면 안되겠죠?

게시판의 글쓴이를 클릭하면 글쓴이의 깃허브 프로필과 글쓴이가 Devinner에 등록한 프로젝트 목록을 볼 수 있습니다. Devinner는 반 익명 사이트라고 볼 수 있을 것 같습니다.

대외활동 확인 🦸‍♂️

대외활동 페이지에서는 여러 가지 대외활동 목록을 확인할 수 있습니다. 몇몇 꼭 활동해 보고 싶은 동아리?가 보이네요 ㅎㅎ

로드맵 확인 🚗

첫 웹 개발을 시작했을 때 무엇을 공부해야 할지 몰라서 로드맵을 자주 찾아봤던 기억이 났었습니다. 다른 분들이 잘 정리해둔 로드맵을 링크시켜 두었습니다.

2. 개발과정

노션 적극 활용

저는 다음과 같이 스토리보드를 만들어서 프로젝트의 진행 상황을 관리하고 계획했습니다. 내가 무엇을 했는지 기록하고 찾아볼 수 있어서 굉장히 편리했고 팀 단위로 작업할 때도 유용하게 사용할 수 있겠다고 느꼈습니다.

그려보기

디자인의 '디' 자도 모르는 저에게 제일 좋은 방법이었습니다. 프론트엔드 개발자, 디자이너 분들 존경합니다.

3. 아쉬운 점

프로젝트의 수평적 폴더 구조

프로젝트가 기능별로 구분되지 않고 굉장히 난잡하게 구성되었습니다. 프로젝트가 진행되면서 방향성이 많이 바뀌고 계획에 없던 작은 기능들이 추가되어서 그랬던 것 같습니다. 유지 보수와 확장성을 위해서 조금씩 개선해나갈 생각입니다. 그리고 Express는 정해져있는 틀과 룰이 없다 보니 스스로 그것들을 정해나가는 것이 어려웠던 것 같습니다.
Restful API

이응준 개발자님의 "그런 REST API로 괜찮은가" 강연을 듣고 REST API를 만드는 것이 얼마나 어려운 것인가를 알게 되었습니다.
그래서 저는 최대한 Restful 한 API를 만들고자 했고 자원을 중심으로 API를 설계할 수 있도록 노력했습니다. 하지만 많이 부족하다고 생각하고, 앞으로도 많은 공부가 필요할 것 같습니다.
유효성 검사

유효성 검사를 제대로 하지 않아서 많은 버그를 만났습니다. 정말 깜짝 놀랐던 기억이.. 지금은 sanitize-html을 사용해서 스크립트 주입을 막고 있습니다. 또한 숫자인지 문자열인지 검사하는 과정도 필요하다는 것을 깨닫게 되었습니다.

(게시글을 클릭하면 네이버로 이동하는 스크립트 공격💩)

테스트 코드의 부재
테스트 코드를 왜 사용하는지 알게 되었습니다. 매번 직접 써보면서 테스트하다 보니 시간, 노력이 배로 들어가는 것을 느꼈습니다. CI/CD를 구축하면서 테스트 코드를 작성해 보겠습니다.

4. 배운 점

리펙토링은 계속되어야 한다.
프론트엔드, 백엔드 개발의 협업이 이루어지는 전체적인 그림을 알게되었다.
효율적인 API 구조는 효율적인 프로젝트 구조의 바탕이 되는 것 같다.
유효성 검사는 정말 너무 중요하다.
작은 개발 단위라도 항상 설계가 우선되고 개발이 진행되어야 한다.

5. dev info

1. 제작 기간

약 4개월

2. 기술

개발 - Express, javascript, HTML, CSS, MySQL
프로젝트 관리 - Notion
CI/CD (예정) - Github, Github action
배포 - AWS 프리티어

참고) Devinner 사이트는 초보 개발자 사정상 언제든 중지? 될 수 있습니다. 하지만 약 1년 간 열심히 운영해 볼 생각입니다.

지금까지 초보 개발자의 첫 프로젝트 회고록이었습니다. 다음에는 더 발전된 모습으로 돌아오겠습니다. 읽어주셔서 감사합니다.

이 회고록은 작성자가 글 재주가 없어, edie_ko님의 회고록을 참고하여 작성했습니다. edie_ko님 감사합니다.
https://velog.io/@edie_ko/opn-launch-review