프로젝트 주제는 개발 동아리 DND에서 투표를 통해 결정되었습니다. 최근 댄스와 댄서 팀에 대한 관심이 높아지고 있으며, K-POP 역시 댄스 중심의 음악으로 발전하고 있습니다. 팀원들과 함께 프로젝트 기획을 위해 사전 인터뷰를 진행하고 디자이너의 기획안을 검토하면서, 댄서들의 독특한 문화를 이해할 수 있었습니다. 이를 바탕으로, 댄서들을 위한 플랫폼이 필요하다고 확신하게 되어 프로젝트에 참여하게 되었습니다.
프로젝트의 목표는 댄서들의 공연 및 교류 문화를 존중하면서 플랫폼에서도 해당 문화를 자연스럽게 적용할 수 있도록 하는 것입니다. 웹 플랫폼이라는 접근성 높은 장점을 활용하여, 댄서들뿐만 아니라 댄스 초심자들까지 댄서들의 문화를 즐길 수 있도록 만들고자 하였습니다.
What I do
개발팀의 데일리 스크럼 도입과 요구 사항 요청 방식 정의
이 일을 한 이유
대부분의 팀원이 협업이 처음이었기 때문에, 각 포지션에서 서로의 역할에 대한 이해가 부족했습니다. 이로 인해 개발팀 간에 필요한 소통이 원활하지 않아 미스커뮤니케이션이 빈번했습니다. 또한, 서로가 진행 중인 태스크를 구체적으로 알 수 없었기 때문에 프로젝트 전체의 진행 방향을 잘 이해할 수 없었습니다.
문제를 해결한 과정
미스커뮤니케이션으로 인한 부정적인 감정을 해소하기 위해, 백엔드 개발자들과 프론트엔드 개발자의 역할에 대해 상호 설명하는 시간을 가졌습니다.
서로의 태스크에 대한 이해를 높이기 위해 데일리 스크럼을 도입하였고, 스크럼에서는 Slack의 비동기 소통을 활용하여 개발자들이 자신의 태스크에 대해 자세히 설명하는 문화를 도입했습니다.
API 요구 사항에 대한 미스커뮤니케이션을 줄이기 위해 메시지 전송 시 구체적인 형식(인삿말- API 요구사항 요약-필요한 데이터 요약-JSON 형태 예시)을 정의하였습니다.
성과
프로젝트의 소통 문제가 점차 개선되어 팀원들끼리의 미스커뮤니케이션을 줄일 수 있었습니다. 또한 프로젝트의 큰 그림을 이해할 수 있게 되어 백엔드와 프론트엔드 간에 알맞은 태스크를 구현하는 일정을 짤 수 있었고, 결과적으로 프로젝트가 완성 단계에 도달할 수 있었습니다.
배운 점
프론트엔드 개발자의 역할에 대해 한 번 더 생각할 수 있었습니다. 프론트엔드 개발자는 개발자임과 동시에 애플리케이션의 첫 번째 사용자이기 때문에 디자이너와 UI/UX 수정사항을 논의하고, API 명세나 수정사항 그리고 필요한 API를 적극적으로 요구해야 한다는 사실을 다시 인지하였습니다.
개발적인 부분뿐만 아니라 비개발적인 부분 역시 프로젝트의 성공 여부에 큰 영향을 미칠 수 있다는 것을 배웠습니다. 또한 프로젝트의 완성을 위해서 서로 간에 반드시 타협해야 할 부분이 있으며, 이러한 타협이 최신 기술을 적용하는 것보다 중요하다는 것을 깨달을 수 있었습니다.
이전의 프로젝트와는 달리 인증 로직을 구현하면서 클라이언트에서 로그인 API를 호출하면, 백엔드는 HTTP 요청값의 set-cookie 헤더를 통해 클라이언트에 직접 쿠키를 설정하는 방식을 사용하였습니다. 이러한 방식을 통하여 쿠키에 담긴 토큰을 활용한 인증을 구현할 때, 개발환경에서 원활한 로그인 기능 테스트를 위해서 환경 설정이 필요하였습니다.
백엔드에서 프론트엔드의 개발 환경에 쿠키를 직접 설정하기 위해서는 secure 쿠키 사용이 강제되어 있으므로 프론트엔드의 개발 환경을 https 로 설정하는 작업이 필요했습니다.
구현 방법
로컬 개발 환경을 https로 설정하기 위하여 mkcert 라이브러리를 사용하여 로컬 인증서를 발급하고, Next.js의 Custom Server를 통하여 해당 인증서를 사용하는 https 서버를 띄웠습니다.
mkcert로 설정한 인증서 정보를 다른 프론트엔드 개발자도 활용할 수 있게 하기 위해서 쉘 스크립트를 작성하여 해당 작업을 자동화하였습니다.
백엔드가 클라이언트의 요청에 자격 증명을 확인하여 쿠키와 인증 헤더를 읽을 수 있도록 axios 요청 설정에 withCredentials=true를 설정하였습니다.
성과
로컬 환경에서도 https를 사용할 수 있게 되어, 로컬 환경에서의 인증 관련 테스트를 할 수 있게 되었습니다.
쉘 스크립트를 통하여 인증서를 발급 받는 과정을 자동화함으로써 다른 개발자 분이 터미널에 실행문만을 입력하고도 https를 사용할 수 있게 되어 개발 생산성을 크게 향상시킬 수 있었습니다.
배운 점
서로의 통신 개발 환경을 구성하는 내용을 학습하면서 간단하게나마 백엔드에서의 설정에 대해서도 공부할 수 있었고,CORS에 대한 이해를 더욱 더 명확하게 할 수 있었습니다.
간단한 HTTPS 설정이였지만 직접 커스텀 서버를 설정하고 커스텀 서버를 설정하는 과정을 자동화함으로써 개발에 있어서 자동화와 DX가 얼마나 중요한지 몸소 느낄 수 있었습니다.
최근 문화생활에 관심이 생겨 미술 전시회를 방문하려 했지만, 대부분의 정보가 주위 사람들의 입소문이나 SNS 공유를 통해 얻어질 수 있었습니다. 이에 기존의 입소문 중심의 흥미유발 방식을 유지하면서도 미술 전시회에 대한 정보를 개방적으로 제공할 수 있는 서비스가 필요하다고 생각하였습니다. art.zip 프로젝트는 공공 API를 활용하여 전시회에 대한 객관적인 정보를 제공하며, 방문자들의 후기를 개방적으로 공유할 수 있는 네트워킹 기능을 통해 다양한 관점에서의 정보를 제공하는 것을 목표로 개발하였습니다.
What I do
Next.js의 SSR 환경에서의 인증 로직 구현 및 전역 유저 상태 관리 구현
이 일을 한 이유
프로젝트에 Next.js를 도입하였으나, 기존의 인증 방식의 경우, 클라이언트 기준의 인증 로직을 활용하였기 때문에 getServerSideProps와 같은 서버 사이드 데이터 패칭 함수를 사용하였을 때 HTTP 요청에 토큰 정보를 함께 보낼 수 없었습니다.
새로고침과 같이 앱이 처음 구동되는 시점에 클라이언트 쿠키를 읽어올 수 없어서 로그인이 풀리는 현상이 있었습니다.
구현 방법
클라이언트에서 쿠키를 설정하면 이후의 HTTP 요청에 자동으로 쿠키가 포함된다는 특성과 Next.js의 애플리케이션은 최초의 서버 데이터 패칭은 app.tsx에서 일어난다는 점을 기반으로, app.tsx의 getInitialProps의 요청 헤더 객체를 활용하여 객체에 들어있는 쿠키값을 통해 전역 유저 상태 로직을 구현하였습니다.
성과
인증 로직이 제대로 작동하지 않아서 임시로 CSR 을 사용하던 페이지들에 대하여 SSR 을 사용할 수 있게 되어, 7개의 페이지 중 5개의 페이지의 Data Fetching 로직을 SSR로 마이그레이션 하였습니다.
LightHouse로 측정한 전체 페이지 SEO 점수의 평균 점수가 68.3점에서 98.3점으로 약 43.92% 증가 하였습니다.
배운 점
Next.js의 초기 데이터 패칭을 다뤄보면서 Next.js 애플리케이션이 어떻게 작동하는 지 배울 수 있었습니다.
최근 프론트엔드의 기술적인 트랜드 중 하나인 서버 환경에서의 데이터 패칭을 다루기 위하여 HTTP에 대한 이해가 반드시 필요함을 배웠습니다. 특히 쿠키를 활용해 HTTP의 stateless한 특성에서 영속성을 유지하는 방법을 배울 수 있었습니다.
데브코스의 중간 프로젝트에서는 주어진 API를 활용하여 요구사항을 만족하는 자유 주제의 웹 애플리케이션을 개발하는 것이 목표였습니다. 팀원들과 함께 API와 요구 사항을 분석한 결과, 회원 가입, 글 작성, 댓글 작성 등 사용자 간 소통을 중심으로 한 기능이 포함된 서비스를 제공하는 것이 가장 적절하다고 결론지었습니다. 팀원들은 모두 독서에 대한 관심이 높았고, 독서 경험을 공유하는 과정에서 책의 인상 깊은 ‘문구’에 대한 이야기가 자주 나왔습니다. 이를 바탕으로, 도서 ‘문구’를 기반으로 사용자 간 소통이 가능한 웹 플랫폼 개발을 목표로 프로젝트를 수행하게 되었습니다.
What I do
재사용성과 확장성을 고려한 UI 공통 컴포넌트 개발
이 일을 한 이유
데브코스의 중간 프로젝트인만큼 최대한 지금까지 배운 내용을 활용하여 외부 라이브러리 사용을 최소하고 직접 컴포넌트를 설계하기로 하였습니다.
구현
Button, Image, Avatar 등의 컴포넌트를 재사용과 확장성을 고려하여 최대한 순수한 상태의 컴포넌트를 구현하였습니다.
팀원들 모두가 사용할 컴포넌트이므로 팀원들 모두 코드리뷰의 강도를 높혀서 참여하였고, 팀원들의 코드 리뷰를 받아들이며
성과 및 배운 점
이전 프로젝트(DuckEggs)에 비해 컴포넌트 재사용으로 인한 코드 중복을 줄일 수 있었습니다.
프론트엔드 직무의 기본이자 가장 중요한 역량이 중 하나인 기본 컴포넌트 설계 방식에 대해 배울 수 있었습니다.
Context API와 useReducer를 이용한 전역 상태 관리 로직 구현
이 일을 한 이유
프로젝트의 컴포넌트들이 전반적으로 유저의 상태에 대한 로직을 포함하고 있음을 분석한 후, 이 상태를 전역 상태로 구현하여 컴포넌트 간의 상태 공유를 용이하게 하고자 하였습니다.
프로젝트의 규모가 작고, 전역적으로 관리할 데이터가 유저 데이터뿐이었기 때문에, React의 기본 내장 기능을 사용하여 상태를 간결하게 관리하고자 하였습니다.
구현
전역적으로 관리해야 할 유저의 state를 가진 userContext를 구현하였습니다.
전역 상태 관리 로직을 작성하였고, 한 context에 다양한 state를 관리해야 했기 때문에 useReducer를 사용한 상태 관리 로직을 통해 코드를 간결하게 작성하였습니다.
성과 및 배운점
외부 라이브러리 사용없이 React에서 제공하는 기본 hook과 api를 사용하여 상태관리를 구현함으로써 애플리케이션의 기본적인 전역 상태 관리 흐름에 대해서 이해할 수 있게 되었습니다.
이 프로젝트는 더 크고 넓어진 정보의 바다의 속에서 혼란스러워하는 소비자에게 제품 선택에 대한 기준을 제공하고, 이 기준에 자연어 처리와 인공지능을 접목시켜 소비자들이 제품을 선택하기 위해 가장 자주 접하는 사용자 리뷰를 수치화하고 시각화하는 웹 플랫폼 서비스를 제공함을 목표로 합니다. 이 프로젝트는 부산대학교 제 4회 창의 융합 해커톤 대회에 참가한 프로젝트이며 장려상을 수상하였습니다.
What I do
프로젝트 팀장 역할
프로젝트 팀장을 맡아 각 직무의 역할을 파악하고 프로젝트의 진행 상황을 관리하였습니다.
학교 커뮤니티에서 처음 만난 사람들간에 원할한 소통을 위하여 노션과 슬랙을 이용한 비동기 소통을 도입하였습니다.
배운 점
프로젝트 진행 상황을 관리함으로써 다양한 직군의 역할을 파악할 수 있었고 이를 통하여 하나의 애플리케이션이 만들어지는 전반적인 과정을 배울 수 있었습니다.
성과
모든 사람이 협업에 처음임에도 불구하고, 대회 기간 내에 프로젝트 완성을 성공하였으며 장려상을 수상하는 성과를 보였습니다.
Google Chart 와 D3 Wordcloud를 이용한 자연어 분석 결과 시각화
각 데이터의 특성을 통하여 어떤 방식으로 사용자에게 보여줘야 사용자가 잘 이해할 수 있을지에 대해 고민하면서 UX에 대해서 고민해볼 수 있었습니다
자연어 분석 결과의 키워드와 키워드 빈도수를 D3 WordCloud를 이용하여 시각화 하였고, 그 외 수치적인 부분은 Google Chart의 막대그래프와 원 그래프를 이용하여 상황에 따라 적절한 시각화 방식을 제공하였습니다.
💡 Tech Stack
JavaScript, React, Styled Component
Blog
allsilver.dev
개인 블로그 구축 및 관리를 위해 Gatsby-starter-bee 템플릿을 사용하였습니다.
도메인을 직접 구입하고 연결하여 블로그의 URL을 allsilver.dev로 설정하였습니다.
기본 템플릿에 필요한 기능을 추가 구현하여 블로그를 개선하였습니다. 구현한 기능으로는 Tag, Status, Thumbnail 등이 있습니다.
블로그에 다양한 주제를 다루고 있으며, 회고, 프로젝트 경험, 기술적인 내용 정리, 외부 발표나 아티클 스크랩 및 감상 등을 공유하고 있습니다.