[현장실습 후기] 나의 첫 현장 실습, 첫 웹 개발

개요

[실습 기관명]

주식회사 디에이블

 

[실습 기간]

2022.01.17 - 2022.02.16

 

[실습 목적]

학부 수업에서는 이론적인 CS 지식을 배웠다면, 이러한 내용을 바탕으로 실무적인 경험을 쌓기 위해 참여하였다. 많은 프로젝트를 진행해보았지만, 현업에서의 실제 프로젝트는 어떻게 진행되는지 알고 배우기 위해 참여하였다.

 

[실습 결과]

내가 맡은 임무는 웹 개발 풀 스택이다. 지난 학기 종합설계프로젝트 1 수업에서 진행하였던 작업을 유지 보수하고, 구현하지 못하였던 부분을 마무리하는 것이 목표였다. 프론트엔드 디자인이 전면 수정되어 퍼블리싱 작업을 다시 진행하였고, 실제 기획자님과 소통을 하며 고려해야 할 사항들을 바탕으로 로직들을 수정하였다. 백 엔드에서는 데이터베이스 속도 향상을 위해 고민해보았고, 여러 개의 SQL 문을 하나로 합치는 등에서 속도 및 성능을 향상할 수 있도록 하였다. 더불어 전체적으로 리팩토링 과정을 거치며 코드를 정돈하고 폴더화를 하기 위해 노력하였다. 결과적으로 전체 완성을 100이라고 했을 때 90 정도로 완성하였다.

 

 

실습 후기

 한 달 동안의 현장 실습 수시제가 마무리되었다. 한 달이라는 시간이 이렇게 빨리 지나갈지 몰라서 아쉬운 감정과 후련한 마음이 교차한다. 한편, 이번에 진행하던 프로젝트는 지난 학기 종합설계프로젝트 1에서 진행하였던 것의 연장선이었다. 학기 중이라 다른 수업과 병행하며 진행하는 것이 힘들었고 결과물도 만족하지 못한 결과물이어서 아쉬움이 남아있었다. 그러다가 수업과 연계하여 현장 실습을 진행할 기회가 생겼고 같이 프로젝트를 진행했던 팀 동료 3명과 함께 현장 실습을 진행하게 되었다. 수업 때와 비교를 해보자면, 짧은 기간이라도 단기간에 집중하여 시간 투자하니 작업 성과도 훨씬 좋게 나왔다. 전체 완성율를 100 이라고 하면 90 정도의 결과물을 만들어 냈다고 생각한다.

 

 첫 출근날 담당 사수님과 첫 회의를 가졌을 때, 관리자 페이지 디자인이 전면 개편되었다는 것을 알게 되었다. 이미 만들어 두었던 관리자 페이지를 모두 엎고 새로 만들어야 한다는 과정이 아찔했지만, 프론트엔드 특성상 디자인이 수정될 때마다 다시 만들어야 한다는 것이 어쩔 수 없는 과정이었다. 따라서 먼저 디자인 개편된 부분의 퍼블리싱 작업을 하여야 했다. 다른 개발자 한 명이 퍼블리싱을 담당하고 있었기 때문에 그분이 전체적인 작업을 진행하였고 나는 내가 맡은 임무의 백엔드 로직을 작성하면서 퍼블리싱 작업도 같이 진행하기로 하였다. 내가 이번에 집중적으로 개발을 맡은 기능은 크게 케어 코칭을 받는 회원들이 사진, 파일 업로드하는 기능, 주간 코칭 작성하는 기능, 월간 코칭 작성하는 기능, 회원들의 데이터를 한눈에 볼 수 있는 기능, 데이터베이스의 primary key를 암호화하여 프론트단에 전송하는 기능이었다. 첫날부터 차근차근 진행하였고 월간 코칭을 제외하고는 모두 완성하였다.

 

 사진, 파일 업로드 하는 기능을 구현하기에 앞서 사수님이 Multer라는 라이브러리를 사용해야 한다고 지도해주셨다. 사실 이 방법을 몰랐다면 엄청나게 고생을 하였을 텐데 이러한 부분에서 사수님의 지도를 받으니 매우 좋았다. 여기서 사수도 굉장히 중요하다는 것을 느꼈다. Multer 라이브러리를 이용하여 최대 7개의 파일을 최대 30Mbytes 크기로 전송해야 했다. 프론트에서 전송할 때 form 태그 안에 enctype="multipart/form-data" 라는 속성을 반드시 작성해야 했다. 먼저 프론트에서 전송하였을 때 서버에서 해당 파일들을 받을 수 있는지 테스트를 진행하였는데 생각대로 잘 흘러가지 않았다. 열심히 검색해보며 작업을 하였지만 쉽지 않았다. 다른 사람들이 구현해 두었던 것을 그대로 활용하려고 했었어 잘되지 않았는데, 결론적으로 Multer 공식 사이트에서 정확한 사용법을 보고 나서 해결할 수 있었다. 여기서 공식 문서의 중요성을 매우 느낄 수 있었다. 물론 다른 사람들의 코드를 참고하는 것도 중요하겠지만, 공식 문서를 보고 먼저 해결해보고 참조해야겠다고 다짐했다. 또한 파일 업로드가 잘 되는지 테스트를 매번 사이트에서 직접 해볼 수는 없었다. 좋은 방법이 없을까 고민하다가 ‘Postman’이라는 프로그램을 알게 되었다. 사실 실제 현업에서는 프론트와 백 부서가 나뉘어있기 때문에 프론트가 완성되지 않은 상태에서 로직 테스트를 진행하기 어렵다. 이럴 때 유용한 프로그램이 바로 Postman이다. 이것을 이용해 임시로 post 요청을 서버에 날려보고 결과물을 받아봄으로써 수월하게 작업을 진행할 수 있었다. 또 추가로 작업한 내용은 파일이 업로드되는 경로와 이름이다. 처음에는 /uploads 라는 폴더 하나에 모든 사진 파일을 추가하였지만, 사수님이 날짜별로 /2022/01/01과 같이 해당 폴더에 나누어 담았으면 좋을 것 같다고 말씀해주셨다. 따라서 fs 모듈과 Date를 이용하여 경로를 저장하도록 구현에 성공하였다. 파일의 이름 같은 경우는 같은 파일 이름이 존재할 수 있기 때문에 이름 앞에 Date의 ms 단위의 숫자를 붙여 중복되는 이름이 없도록 작업하였다. Multer 사용법을 명확하게 알게 되었고 큰 경험치가 되었다.

 

 주간 코칭 작성하는 부분과 월간 코칭 작성하는 부분에서는 백엔드 로직도 중요했지만 프론트엔드 로직이 매우 중요하였다. 왜냐하면 회원들의 데이터를 이용하여 동적으로 변화하는 그래프를 완성해야 했기 때문이다. 사실 그래프를 표현하는 다양한 라이브러리가 존재하지만, 사수님은 그러한 라이브러리를 사용하기보다 직접 div 태그와 CSS를 이용하여 완성해보기를 권유하셨고 그렇게 구현하였다. 매우 힘들었다. 그래프를 표현하는 작업에서 시간 소요를 많이 하였다. 어떠한 방향으로 하라는 지도는 있었지만 실제로 구현하는 작업에서 너무 헷갈려 애를 먹었다. 나는 노트를 열고 해야 할 일에 대해 필기를 차분히 해보았다. 필기하면서 생각을 정리하고 태그들의 구조화를 생각하니 해결할 수 있었다. 머리가 복잡할 때는 손으로 적어보며 익히는 것이 도움 된다는 것을 느낄 수 있었다. 결론적으로 그래프 표현을 완벽하게 구현하였고 팀 동료들의 칭찬 덕분에 뿌듯함을 느꼈다. 한편 월간 코칭은 현장 실습 마지막 날 하루 동안 구현하느라 다 구현하지는 못하였지만, 주석으로 다음 진행하는 사람이 어떠한 방향으로 구현하면 될지 작성해두었다.

 

 데이터베이스의 암호화는 어떠한 말이냐면, 데이터의 한 row를 삭제하는 과정에서 input hidden 태그에 해당 데이터의 primary key가 함께 들어있는데 이것이 노출되면 위험하다고 사수님께서 말씀해 주셨다. aes-128-cbc 암호화 알고리즘을 이용하여 백엔드에서 암호화된 번호를 보내고 복호화를 통해 작업하는 형식으로 진행하였다. 암호화 로직에 관한 정확한 공부를 진행하지는 않았지만, 보안 이슈를 위해 primary key와 같은 중요한 정보들은 반드시 암호화 로직을 적용해야 한다는 것을 알게 되었다.

 

 회원들의 데이터를 한눈에 볼 수 있는 기능에서는 데이터베이스 SQL문의 중요도를 느낄 수 있었다. 회원들의 코칭 데이터가 엄청나게 많은 양은 아니지만, 수면시간 계산과 더불어 테이블 두 개를 합치고 여러 개의 컬럼들의 합계를 내야 하는 작업이었기 때문에 raw 데이터를 프론트로 보내고 거기서 계산하게 되면 성능 이슈가 존재했다. 이러한 처리를 프론트에 맡기는 것이 좋지 않은 방향인 것을 인지하고 DB 자체에서 어떻게 처리해주면 좋을지 고민하였다. 결론적으로 하나의 SELECT문 안에 다른 테이블 조회와 더불어 계산 기능까지 할 수 있다는 사실을 깨닫게 되고 공부를 열심히 해야겠다고 느꼈다.

 

 현장 실습은 나에게 정말 큰 영향을 주었다. 특히 작업을 하면서 기획자님과 디자이너님과 소통을 많이 하였는데 개발자가 아닌 분과 소통을 할 때 어려운 부분이 없지 않아 있었다. 그러한 과정들을 소통하는 과정 통해 내 입장과 상대방의 입장을 어떻게 타협할지, 의견을 나누고 어떻게 잘 설명하고 대답할 수 있는지와 같은 경험치를 쌓을 수 있었다. 또한, 내가 웹 개발에 흥미가 생겼고 프론트보다는 백에 흥미가 있다는 것을 깨닫게 되어 매우 감사하다. 이러한 경험을 잘 기억하고 정리하여 앞으로의 삶에 선한 영향력이 되었으면 좋겠다.