미리보기
기본 정보
안녕하세요. 신입 프론트 엔드 개발자 송지현입니다. 누구나 사용하는 웹 사이트를 직접 만들 수 있다는 것에 매력을 느껴 개발자를 지망하게 되었습니다. 급변하는 개발 생태계에 발맞추어 새로운 것을 학습하고, 사용하는 것을 즐깁니다. 누구나 사용하기 편안한 웹 사이트를 만들고자 노력합니다.
기술 스택
JavaScript, TypeScript, React, Next.js, HTML/CSS, react-query, Git, Notion
프로젝트
PETPITAL-v2
rodls
2024.08. ~ 진행 중
PETPITAL-v2
동물 병원 리뷰 및 정보 공유 웹 애플리케이션을 리팩토링하는 프로젝트. 기술 스택의 변경으로 더 좋은 성능을 만들고자 합니다.
Next-Auth와 Prisma 그리고 MongoDB를 활용한, DB의 일원화 및 UX 개선
팀 구성: 개인 프로젝트
기술 스택: Typescript, Next.js, Next-Auth, Prisma
맡은 역할: 전체적인 프로젝트 리팩토링 및 UX를 고려한 기능 추가.
기술 스택 선정 이유:
Firebase Authentication ⇒ Next-Auth(Auth.js)로 변경
기존에 사용했던 Firebase의 Authentication 기능은 한국에서 자주 사용되는 OAuth(e.g. 네이버, 카카오)를 제공하지 않았습니다. 또한 프로젝트의 DB로 JSON server를 사용했기 때문에 한 프로젝트에서 2개의 DB가 사용되어 데이터를 제어할 때 2개의 DB에 각각 접근해야 했기에 성능 면에서도 좋지 않았습니다. 그렇기에 Next-Auth를 사용하여 마이그레이션을 해 한국에서 자주 사용되는 OAuth를 사용하기로 결정했습니다.JSON server ⇒ MongoDB/Prisma로 변경
기존 프로젝트에서는 사용자의 정보는 Firebase에, 그 외의 정보는 JSON server에 저장되었습니다. DB가 여러 개 사용되면 두 DB에 모두 접근하기 위해 추가적인 비용이 들고, 관리 면에서도 좋지 않습니다. 따라서 Next-Auth와 연동이 용이하고, 비교적 많은 백엔드 지식을 요구하지 않는 Prisma를 사용하여 유저 정보와 그 외의 프로젝트에서 관리되는 모든 정보를 MongoDB에 저장하는 방식으로 마이그레이션을 결정했습니다.
Connect four
개인
2024.06. ~ 2024.08.
Connect Four 게임 웹 애플리케이션
Connect Four 게임 웹 애플리케이션
방향 벡터 기법을 활용한 효율적인 게임 로직 구현 및 테스트 기반 개발
팀 구성: 개인 프로젝트
기술 스택: Typescript, Vite, Vitest, JSON schema
맡은 역할: 게임 로직 작성 및 테스트 코드 작성
트러블 슈팅:
SVG 사용 시 중첩 현상
문제 상황: 플레이 시, SVG가 생각한 대로 나오지 않고, 게임을 진행할 때마다 예상치 못하게 변하는 에러가 발생했습니다.해결 방법: 이는 제공받은 SVG가 고유한 id가 아닌 중복된 id를 가지고 있어 발생한 에러였습니다. 따라서 SVG가 각기 다른 id를 가질 수 있도록 하여 에러를 해결했습니다.
비효율적인 승리 체크 로직
문제 상황: 게임의 승리 체크 로직이 모든 방향으로for
문을 반복하면서 4개가 이어졌는가를 체크하는 로직이었습니다. 따라서, 복잡하고 반복적인 부분이 많은 비효율적인 코드였습니다.
해결 방법: 완전 탐색 알고리즘 중, 2차원 배열에서 사용되고, 가장 적절하게 제가 원하는 것을 검사할 수 있는방향 벡터
기법을 적용하여 코드의 중복을 제거하고 가독성 좋은 코드로 리팩토링했습니다.
이전 코드 ⇒ 리팩토링 후 코드
BOOK BANK
개인
2023.05. ~ 2023.05.
BOOK BANK
Kakao REST API를 이용한 독서 기록 웹 애플리케이션. 독서 기록을 카카오톡으로 공유하고, 월 별, 년도별 기록을 차트로 확인할 수 있습니다.
차트 라이브러리를 활용하여 사용자의 독서 기록을 시각화한 독서 기록 웹 애플리케이션
팀 구성: 개인 프로젝트
기술 스택: Typescript, Next.js, Firebase, Apex Charts
맡은 역할: 도서 리뷰 작성, 독서 기록 시각화, 카카오톡 공유 기능
트러블 슈팅:
Next.js 12에서 Next.js 13 App route 방식으로 마이그레이션
스켈레톤 UI를 적용하여 UX 개선
데이터를 서버로부터 받아와 랜더링하는 방식이기 때문에, 이미지와 컴포넌트를 랜더링하는 중에 딜레이가 생겨 UI가 깨지는 현상이 발생했습니다. 따라서 이미지의 경우, Next.js Image에서 제공하는placeholder
기능으로, 다른 컴포넌트들은스켈레톤 UI 라이브러리
를 사용하여 UI를 개선했습니다.
PETPITAL
팀 프로젝트
2023.02. ~ 2023.03.
PETPITAL
동물 병원 리뷰 및 정보 공유 웹 애플리케이션. 동물 병원에 대한 리뷰를 작성하고, 반려 동물에 대한 질의를 할 수 있습니다.
REST API를 활용하여, 다양한 형태로 데이터를 통합 및 활용
팀 구성: 프론트 엔드 개발자 4명, 디자이너 1명
기술 스택: Typescript, Next.js, Firebase, Kakao REST API
맡은 역할: 팀장으로서 프로젝트 리딩 및 디자이너와 디자인 조율
메인 페이지, Q&A 페이지 기능, 지도 페이지 및 마이 페이지 리팩토링
트러블 슈팅:
메인 페이지의 최근 검색한 병원의 이미지가 제대로 랜더링되지 않는 현상.
문제 상황: 메인 화면의 병원 이미지가 제대로 랜더링 되지 않고, 동일한 이미지가 반복되어 적용되는 에러가 발생했습니다.
해결 방법: 병원 이미지 검색을 제대로 끝마치지 않고, 랜더링을 바로 진행하여 에러가 발생한다는 것을 파악하여, 필요한 특정 작업이 모두 끝마친 다음 실행하기 위하여Promise.all
을 사용하여 리팩토링을 진행했습니다.
이전 코드 ⇒ 리팩토링 후 코드지도가 제대로 랜더링되지 않고, 중복되어 출력되는 현상.
문제 상황: 기존 코드가 자바스크립트로 작성되었고, 리액트에서 DOM을 직접 조작하는 방식으로 작성되어 있었습니다. 이는 모든 함수가순수 함수
일 것이라고 가정하는 리액트의 원칙에 위배되는 코드였습니다.
해결 방법: 기존의 자바스크립트 기반 라이브러리 대신, 리액트 라이브러리를 사용하여 강제로 랜더링을 하는 코드를 제거하고, DOM 대신Virtual DOM
을 조작하는 방식으로 리팩토링을 진행하여 코드 길이도 1/10으로 줄였습니다.
이전 코드 ⇒ 리팩토링 후 코드
배운 점
프로젝트가 진행되던 내내 예상치 못한 일들이 많이 벌어졌던 만큼, 위기 상황에 대처하는 법을 배웠습니다. 또한 프로젝트를 이끌고 디자이너 팀원과 디자인과 기능을 조율하면서 비 개발 직군과 어떻게 소통해야 하는가에 대해 생각해 보는 계기가 되었습니다.
포트폴리오
자기소개
성격의 장단점
소통 능력
저는 개발자에게 가장 중요한 자질은, 소통 능력과 꾸준한 학습이라고 생각합니다. 특히, 다양한 직군의 사람들과 원활하게 소통할 수 있는 능력이 개발자가 가져야 하는 핵심 능력 중 하나라고 생각합니다.
부트 캠프의 마지막 프로젝트에서는 새롭게 합류한 비 개발 직군인 디자이너와 협업하여 프로젝트를 진행해야 했습니다. 이전까지는 같은 프론트 엔드 개발자와만 소통하며 프로젝트를 진행했기에, 의견 조율에서 큰 어려움이 없었으나, 기술적 배경이 부족한 디자이너 팀원과의 의견 조율에서는 약간의 어려움이 있었습니다.
저는 프로젝트의 팀장으로서 팀을 대표하여 디자이너와의 소통과 의견 조율을 맡았기에, 디자이너 팀원에게 사용되는 API의 기술적인 제약, 팀원의 구현 가능도를 설명해 드리고 유사한 기능 혹은 대안을 제시하며 조율을 하여 프로젝트가 성공적으로 끝마칠 수 있도록 했습니다.
그 결과, 최대한 디자이너 팀원이 제작한 디자인을 따르되, 다른 프론트 엔드 개발자 팀원들도 각자의 기술적인 도전을 할 수 있었고, 기간 내에 목표로 했던 MVP도 달성할 수 있었습니다.
처음으로 비 개발 직군과 소통을 해보는 경험을 통하여, 어떻게 하면 관련 지식이 부족한 분들과 효과적으로 소통하여 프로젝트를 성공적으로 해낼 수 있을까, 를 고민하게 되는 계기가 되었습니다. "안된다", 라고만 말하는 개발자가 아니라 비 개발 직군도 이해할 수 있도록 제대로 설명하고 소통하는 개발자가 되고자 합니다.
팀원과의 소통
저는 원래 소극적인 성격이기 때문에, 필요하지 않다면 대화를 먼저 나누지 않는 편이었습니다. 주어진 역할을 끝마치면 되지 않나, 라고 생각했습니다. 이러한 생각은 팀원으로서 프로젝트에 참여할 때도 마찬가지였습니다. 그러나 우연한 기회로 팀장으로서 프로젝트를 리드하면서 제가 생각했던 방식으로는 팀 프로젝트가 성공적으로 해내는 데에는 한계가 있다는 것을 느끼게 되었습니다.
예상보다 구현이 어렵거나, 개인적인 사정으로 프로젝트에서 하차하게 되는 등, 예기치 못한 사건들이 발생할 수 있는 것이 프로젝트입니다. 그러나 이러한 문제 사항들을 팀원들과 공유하지 않는다면, 어떤 프로젝트도 성공적으로 해낼 수 없습니다.
팀 프로젝트에서 팀장을 맡아본 경험을 계기로 더더욱 소프트 스킬, 소통의 중요성을 깨닫게 되었습니다.
이후, 저는 다시 한 번 팀장을 맡게 되었는데, 매일 부트 캠프가 시작하기 전과 후에, 짧은 팀 미팅을 진행하여 프로젝트 진행사항을 공유하고, 어려움을 겪는 팀원이 있다면 다른 팀원들과 도움을 주거나, 맡은 역할을 재분배하는 등의 조치로 조율할 수 있도록 했습니다.
꾸준한 학습
프론트 엔드는 기술 트렌드가 빠르게 변화하는 업종 중 하나입니다. 몇 개월 간격으로 라이브러리가 새로운 버전으로 업데이트가 되거나, 새롭게 떠올랐다가도 순식간에 사라지기도 합니다. 때문에, SNS에서 유명 개발자를 팔로우하거나, 유튜브에서 개발 유튜버들을 구독하여 최신 기술 동향에 뒤처지지 않도록 함과 동시에, 이를 개인 프로젝트에 사용하고 있습니다.
개인 프로젝트를 진행할 때는, 이전에 사용해 보지 않았던 라이브러리나 기술을 최소 1개는 선택하여 프로젝트를 진행하고 있습니다.
또한, 비전공자로서 부족한 CS 지식을 보완하기 위해 정보처리산업기사 자격증 공부를 시작했습니다. 현재 필기시험에 합격하여 실기 시험을 준비 중입니다. 현재, Next Auth, Prisma등의 기술을 활용하여 프로젝트를 진행 중이며, 코드를 작성하는 데에서 그치지 않고, GitHub Action, ChatGPT 등을 활용하는 등의, 개발 환경 구축에 대해서도 학습을 하고 있습니다.
이러한 소통 능력과 꾸준한 학습이야말로, 프론트 엔드 개발자에게 없어서는 안 되는 요구사항 구현 가능이라는 자질을 가지게 되는 첫걸음이라고 생각합니다.
프로젝트 경험
기억에 남는 프로젝트
저는 의견 조율에서 최종 프로젝트로 동물 병원과 반려동물 정보 공유 사이트인 PETPITAL 프로젝트를 진행했습니다. 이 프로젝트는 의견 조율에서 개발자 4명과 디자이너 1명으로 구성된 팀으로, 저는 팀장으로서 프로젝트 리딩과 디자이너와의 의견 조율에서 담당했습니다.
프로젝트에서 메인 페이지와 Q&A 페이지를 맡아 개발을 진행했습니다. 사용했던 카카오 REST API는, 제공되는 정보에 한계가 있었기 때문에, 메인 페이지에서 보이는 최근 검색한 병원과 유사한 병원을 띄워 주는 부분에서 어려움을 겪었습니다. 최근 검색한 키워드를 기반으로, 병원을 검색한 후 해당 데이터를 기반으로 관련 이미지를 받아옴과 동시에 DB에서는 해당 병원 리뷰에서 진료비 항목을 가져와, 통합하여 렌더링해야 했습니다. 첫 구현 시에는 모든 병원을 검색하기를 기다리지 않고 바로바로 이미지와 병원비를 가져오는 방식으로 구현되어, 병원과 해당 병원의 진료비 및 이미지를 정확히 불러오지 못하는 문제가 발생했습니다.
이를 Promise.all을 사용하여 병원 검색이 확실히 완료된 후에 동기적으로 이미지와 진료비 데이터를 가져올 수 있도록 코드를 리팩토링하여 병원 정보가 정확하게 렌더링 되도록 문제를 해결할 수 있었습니다.
프로젝트 중 있었던 어려움
프로젝트 막바지에, 팀원 2명이 개인 사정으로 프로젝트에 잠시 빠지게 되는 일이 있었습니다. 하지만, 그분들이 맡은 부분에 아직 구현이 끝나지 않은 부분이나 제대로 동작하지 않는 부분이 있어 그분들을 대신하여 다른 팀원 한 명과 제대로 구현되지 못한 부분들을 리팩토링 및 구현을 해야 했습니다.
팀원 한 분이 작성하셨던 지도 페이지는, 리액트 기반 프로젝트임에도 바닐라 자바스크립트로 작성되었고, DOM을 직접 조작하여 렌더링하는 방식으로 작성되었습니다. 이는 리액트의 기본 원칙인 DOM을 직접 조작하지 않는 원칙에도 위배가 되는 코드였습니다. 그리하여 지도와 상호작용 시, 새로운 지도가 렌더링 되면서 프로젝트 자체의 속도도 느려졌고, 예상치 못한 동작을 하게 되었습니다.
이전에 작성한 제가 작성했던 코드를 리팩토링한 경험은 있었지만, 다른 사람이 작성한 복잡한 코드를 리팩토링하는 경험은 처음이었습니다. 지도 페이지에서는 특정 요소 상호작용 시마다 발생하는 불필요한 리 렌더링 문제가 있었고, 해당 로직은 500줄이 넘는 길고 복잡한 코드로 구성되어 있었습니다. 프로젝트의 마지막 주였기에 에러를 개별적으로 수정하는 것보다 처음부터 재작성하는 것이 더 효율적이라고 판단했습니다.
그리하여 500줄에 달하는 코드를 50줄로 줄이고, 불필요한 리 렌더링 문제를 해결했습니다. 또한, 마이 페이지에서의 느린 프로필 사진 변경 로직도 수정했습니다. 최종적으로 1주일이라는 시간이 지체되었고, 두 팀원이 결원하는 일이 있었지만, 프로젝트 최종 발표일까지 목표했던 MVP를 달성할 수 있었습니다. 이를 통하여 예상치 못한 상황에 대처하는 법을 배울 수 있었던 것 같습니다.
프로젝트 이후
이때 프로젝트에서의 아쉬움을 기반으로, 현재 해당 프로젝트를 개인 프로젝트로서 리팩토링 중에 있습니다. 기존 프로젝트는 Firebase authentication과 JSON server를 사용했습니다. 그리하여 한 프로젝트에서 사용자 정보는 Firebase에, 기타 프로젝트 정보는 JSON Server에 저장되어, 데이터의 일관성을 유지하기 어려워졌으며, 관리 비용 또한 증가했습니다. 그리하여 이 기능을 Next-Auth와 MongoDB를 사용하는 방식으로 바꾸었으며, 원래 넣고 싶었으나 미처 구현하지 못했던 Q&A, 리뷰 검색 및 필터링, 적응형 디자인을 구현하고자 하고 있습니다. 이뿐만 아니라 개발 프로세스에서 GitHub Action으로 CI 자동화와 ChatGPT를 활용한 코드 리뷰 및 개선을 통하여 코드 품질 또한 향상하려고 시도하고 있습니다.
개발자를 선택한 이유
학생 때, 개발과 관련된 수업을 들은 적이 있습니다. 마크업 작성과 명령어를 사용해 데이터를 DB에 넣어보는 CRUD 작업, 등의 기초적인 수업이었지만, 짧은 코드만으로 매일 사용하는 웹 페이지를 만들 수 있다는 점에 매력을 느꼈습니다.
이후, 취업을 준비하던 중, 인터넷에서 몇몇 강의를 들어보았습니다. 간단한 프로젝트를 진행하면서, 누구나 사용하는 사이트를 개발할 수 있는 이 분야에 더욱 매력을 느끼게 되었습니다. 인터넷 강의를 들으며 공부하던 중, 보다 체계적으로 공부하고, 같이 개발자를 지망하는 사람들과 소통하고 정보를 나누고 싶다는 생각에 부트 캠프에 참여하게 되었습니다. 캠프에서 제한된 시간 내에 MVP를 달성하고, 사용해 보지 않았던 기술을 배우며 개발 실력 적인 면에서도, 협업 능력 면에서도 성장을 했다고 생각합니다.
개발자를 지망하는 사람으로서 제 최종 목표는, 모든 사람이 편리하게 사용할 수 있는 웹 사이트
를 만드는 것입니다. 어느 사람이 사용하더라도 같은 경험을 할 수 있는 웹 사이트를 만드는 개발자가 되고 싶습니다.
교육
스파르타코딩클럽 내일배움캠프
사설 교육 | 리액트 트랙
2022.07. ~ 2023.03. | 졸업