신효근 | 따듯한 개발자

📝 블로그 : DeepDive

📚 Github : Shinhyogeun

📕 학력사항 : 인하대학교 | 통계학과 | 2016.03 ~ 2022.02 (졸업예정)

🔫 병력사항 : 육군 병장 만기 전역

⚒️ Skills.

분야	기술
웹 일반	JavaScript
프론트엔드	React, Redux
백엔드	Node.js, Express
기타	Git, Jest

 안녕하세요. **기록**과 **도전**을 좋아하는 개발자 신효근입니다. 저는 매일의 흔적을 기록하는 것을 중요하다고 생각해 '매일 커밋 운동'을 1년 반 넘게 이어오고 있고 매일의 느낀 점과 배운 점을 TIL 형식으로 블로그에 매일 기록하고 있습니다. 

 또한 새로 알게 되는 것들을 팀원들과 공유하고 실제 도입해 보는 것을 정말 좋아합니다. 요즘에는 함수형 프로그래밍과 테스트 작성에 관심을 가지고 있어서 프로젝트에도 부분적으로 도입해본 경험이 있고 계속해서 열심히 성장 중입니다.

🔎 Project.

Duxcord (Github 링크 / 배포링크)

Untitled

프로젝트 기간

1. 1. ~ 2021. 12. 3.

기술 스택

client : React, redux, SWR, styled-components
server : Node.js, express, MySQL, TypeORM
기타 : Jest, socket.io, WebRTC

역할

client : 로그인, 로그아웃, 회원 접속 관리 / 스레드, 좋아요 기능 / Web RTC 관련 다양한 기능 구현, 유닛 테스트 작성

server : API작성, 유닛테스트 작성

프로젝트 설명

디스코드, 줌, 슬랙과 같은 협업 도구 프로그램
WebRTC, Socket.io를 이용한 실시간 통신 기능 구현
매일 스크럼과 회고를 진행, 팀 내외부로 코드리뷰 진행
함수형 프로그래밍을 이용한 비동기 제어 로직 작성
대략 120개의 프론트엔드와 백엔드 유닛 테스트 코드 작성
팀 내에서 스터디와 개발일지를 토대로 기술공유 세션 진행

문제 해결 사례

함수형 프로그래밍 부분적 도입 무한 스크롤을 구현함에 있어서 새로운 채팅을 불러오고 난 뒤 스크롤의 높이를 조정해서 마치 이어서 보이는 것처럼 구현해야 했습니다. 하지만 채팅에는 이미지도 포함될 수 있어서 높이가 가변적이었습니다. 따라서 모든 이미지가 로드된 시점에서 채팅의 높이를 계산하는 로직을 작성해야 했습니다. 이 과정에서는Promise를 연속적으로 사용하게 되었고 또한 NodeList를 대상으로는 map 등의 함수들을 사용할 수 없어서 for 문을 사용해야 했고 들여 쓰기가 깊어지고 가독성이 너무 떨어지게 되었습니다. 그래서 iterable 속성을 이용한 다양한 함수형 프로그래밍 관련 함수를 만들어 보다 직관적으로 읽을 수 있도록 리팩토링하였습니다.
Presigned-URL을 이용한 이미지 업로드

서버의 부하를 줄이기 위해서 클라이언트에서 바로 Ncloud의 오브젝트 스토리지로 이미지를 업로드하려는 생각을 했습니다. 그 과정은 잘 이루어졌지만 이럴 경우 프론트엔드쪽에 자격 증명을 위한 API 키가 필요해 API 키가 노출된다는 심각한 문제가 있었습니다. 이를 Presigned-URL을 통해서 해결할 수 있다는 것을 알게 되어 바로 도입하였습니다. 물론 이 과정에서 몇 번의 시행착오가 있었습니다.

Presigned-URL을 적용할 경우 aws-sdk를 이용해서 s3 객체를 생성할 때 정확한 서명 버전을 명시해야 한다는 것을 Presigned-URL을 적용하기 전과 후의 요청 헤더를 분석한 결과 알 수 있었습니다. 이에 따라서 클라이언트에서 이미지를 올릴 때 서버에 Presigned-URL을 오브젝트 스토리지 쪽에 요청하도록 하여 서버에서 Presigned-URL를 얻어서 다시 클라이언트에 넘겨주어 그 URL로 이미지를 올리도록 하여서 API 키가 노출되는 상황을 막으면서 효율적으로 이미지를 업로드할 수 있도록 하였습니다.

My Playlist (Github 링크 / 배포링크)