프론트엔드 신입 개발자

김내현

안녕하세요. 스스로 코드 리뷰하며 성장하는 프론트엔드 개발자 김내현입니다. 
어질러진 화면이나 비효율적인 코드가 눈에 잘 들어오는 성격 덕분에, 꼼꼼하고 세심한 UI 구현과 리팩토링에 강점을 가지고 있습니다. 실패에 대한 두려움은 오히려 저를 더 철저하게 준비하고 고민하게 만듭니다. 실수를 줄이기 위한 습관이 저를 더 나은 개발자로 이끌고 있다고 믿습니다.

성실함

책임감

꼼꼼함

적응력

참을성

Github

Velog

누구나 쉽게 데이트·모임 코스를 기획하고 공유할 수 있는 커뮤니티 기반 플랫폼사용자가 장소를 찾아 코스를 만들고 타인과 코스나 장소에 대한 생각을 서로 공유할 수 있는 커뮤니티 기반 서비스사용기술: REACT, TYPESCRIPT, TAILWIND CSS, REACT QUERY, AXIOS, ZUSTAND 팀 구성FE 5명 BE 0명 (프로그래머스에 제공한 api 사용) 구현 기능 및 기술 이슈 해결 경험회원 가입<ul><li>회원가입 데이터 입력 과정에서 예상치 못한 에러가 빈번하게 발생 ⇒ 에러 핸들링 및 유효성 검사를 통해 데이터 일관성 유지 및 사용자 경험 향상</li></ul>로그인<ul><li>프로그래머스에서 제공하는 로그인 API는 refreshToken 없이 accessToken만 발급하며, 토큰 자체에는 명시적인 유효기간이 없음</li><li>기술적으로는 세션 만료 등의 문제가 발생하지 않았으나, 보안과 사용자 경험 측면을 고려해 자체적으로 토큰 만료를 가정한 UX 대응 로직 구현⇒ 쿠키를 직접 설정하여 accessToken의 유효기간을 1시간으로 제한사용자 로그인 시, 토큰을 쿠키에 1시간짜리 만료로 저장- 이후 setTimeout을 활용하여 1분 간격으로 현재 시각과 쿠키 만료 시간을 비교- 토큰 만료가 5분 이내로 다가오면 사용자에게 모달 팝업을 띄워 안내연장하기 버튼 클릭 시 쿠키 만료 시간을 다시 1시간 뒤로 갱신닫기 버튼을 클릭하거나 모달을 어떠한 동작 없이 5분이상 가만히 놔두면 accessToken 제거 + 로그인 페이지로 리다이렉트</li></ul>map 기능<ul><li>지도에서 검색을 사용하여 나온 검색결과를 클릭해 해당 검색결과의 정보를 하나 이상 저장해 코스로 사용</li></ul><ul><li>Kakao Map API를 MapDisplay라는 컴포넌트에 도입하는 과정에서, 지도 위에 또 다른 지도가 겹쳐서 생성되는 현상이 발생</li><li>사용자가 마우스 스크롤로 지도를 확대/축소할 때마다,기존 지도가 유지되지 않고 새로운 지도 인스턴스가 계속 생성되어 겹쳐 보이는 문제</li><li>이는 MapDisplay가 리렌더링될 때마다 new kakao.maps.Map()이 실행되면서 생긴 문제⇒ useRef를 활용하여 이미 맵이 생성된 경우에는 다시 생성하지 않도록 제어</li></ul><h6>cl/cd</h6><ul><li>Netlify를 이용한 프론트엔드 자동 배포</li><li>GitHub와 연동하여 main 브랜치에 push 시 자동으로 배포</li></ul>

Plaist

문제를 제작하고 관리할 수 있는 문제은행 플랫폼사용자가 문제를 문제집에 보관하고, 시험장에서 친구들과 함께 시험을 보고 결과를 확인할 수 있는 커뮤니티 기반 서비스사용기술: VUE, JAVASCRIPT, TAILWIND CSS, SUPABASE, PRIME VUE팀 구성 FE 5명 BE 0명 (SUPABASE 사용)구현 기능 및 기술 이슈 해결 경험문제집 상세 페이지<ul><li>문제집 내 문제 리스트 확인, 북마크/좋아요 기능, 문제집 수정·삭제 및 댓글 기능 구현 → 프론트엔드에서 복잡한 상태 관리 없이 깔끔하게 동작할 수 있도록 구성</li></ul>API 설계 및 Supabase 활용<ul><li>Supabase의 테이블 구조를 직접 설계하고, ERD를 기반으로 데이터 흐름 구조화 → 다양한 관계형 데이터를 효율적으로 불러오기 위해 RPC(Remote Procedure Call) 함수 도입 → 팀원들이 복잡한 쿼리를 직접 작성하지 않고도 쉽게 데이터 활용 가능하도록 API 추상화</li></ul>

Pulgo

실시간 뉴스 수집과 구조화된 팀 토론, 그리고 참관이 가능한 커뮤니티 플랫폼국내외 주요 뉴스를 자동으로 수집하여, 사용자에게 항상 최신 뉴스를 제공합니다. 사용자는 뉴스 기사에 대해 북마크나 '좋아요' 의사표시를 할 수 있을 뿐만 아니라, 1대1 또는 3대3 형식의 구조화된 팀 토론에 참여할 수 있습니다.토론은 주제별로 구성되며, 발언 시간, 순서, 팀 구성이 명확히 정해진 형식 있는 디베이트 방식으로 진행됩니다. 또한, 토론을 직접 참여하지 않더라도 다른 사용자들은 참관 모드를 통해 실시간으로 토론을 시청하고, 의견을 남기거나 투표를 통해 참여할 수 있습니다.이 플랫폼은 단순한 정보 소비를 넘어, 비판적 사고와 다양한 시각의 교류를 촉진하는 뉴스 기반 커뮤니티 서비스입니다.사용기술: REACT, TYPESCRIPT, TAILWIND CSS, REACT QUERY, AXIOS, ZUSTAND 팀 구성 FE 3명 BE 5명구현 기능 및 기술 이슈 해결 경험메인 페이지 구성<ul><li>최신 인기 뉴스 10개와 인기 토론 10개를 탭 형식으로 표시</li></ul>관리자 페이지 구현<ul><li>신고당한 유저를 신고한 사유와 함께 확인하고 조치할 수 있는 관리자 도구 제공</li></ul>마이페이지 기능<ul><li>팔로잉/팔로우 유저 목록 확인 및 프로필 편집 기능</li><li>페이지네이션 기능을 도입하여 목록 성능 개선 및 다른 팀원들과 공통 컴포넌트로 재사용</li></ul>랜딩 페이지<ul><li>로그인 전 사용자에게 서비스의 주요 기능 소개</li></ul>뉴스 페이지 필터링<ul><li>지역(국내/대륙별) 및 검색어 기반 필터 기능 구현</li></ul>실시간 알림 기능 구현<ul><li>실시간 알림 기능이 웹소켓 기반으로 구현되어야 했으나, 당시 백엔드 구조 상 다른 페이지에서도 웹소켓을 사용 중이었고 충돌 우려 존재</li><li>→ 임시 방안으로 Firebase Cloud Messaging 도입해 알림 기능 우회 구현</li><li>→ 이후 고도화 작업 시 WebSocket 구조를 재정비하여 실시간 알림 기능 통합</li></ul>좋아요 / 북마크 API 오류 대응<ul><li>백엔드 API에서 좋아요/북마크 기능이 서로 반대로 동작하는 문제 발생</li><li>→ 적극적으로 BE와 소통하며 테스트 및 디버깅 과정을 반복하여 문제 해결</li></ul>

Earth Talk

영화와 TV 프로그램을 중심으로 한 커뮤니티 기반 콘텐츠 탐색 및 토론 플랫폼사용자는 영화나 TV 프로그램을 검색하고, 각 콘텐츠에 대한 정보를 확인할 수 있으며, 좋아하는 콘텐츠를 스크랩에 담아두고, 다른 사용자들과 감상평을 리뷰로 공유하거나 토론을 열어 다양한 의견을 나눌 수 있는 커뮤니티 기능을 제공합니다.사용기술: REACT, TYPESCRIPT, TAILWIND CSS, REACT QUERY, AXIOS, ZUSTAND팀 구성 FE 4명 BE 0명 (SUPABASE 사용)구현 기능 및 기술 이슈 해결 경험메인 콘텐츠의 섹션 구현<ul><li>인기 급상승, 신규 업데이트, 공개 예정 콘텐츠를 tmdb API를 사용하여 각각 20개씩 표시 → 각 섹션에 ‘더보기’ 버튼을 통해 관련 상세 페이지로 연결되도록 라우팅 및 UI 구성</li></ul>상세 페이지 구성<ul><li>인기 급상승 상세 페이지→ 오늘과 이번주로 필터링 가능</li><li>신규 업데이트 상세 페이지 → 장르로 필터링 가능</li><li>공개 예정 상세 페이지→ 콘텐츠의 상세 정보를 보여주는 페이지 구현 (트레일러, 줄거리, 출연진, 지원가능 OTT, 장르 등 시각적 구성 포함)</li></ul>알림 시스템 구현 (Trigger + Realtime)<ul><li>댓글 및 토론 활동에 대한 실시간 알림 기능 구현 → 내가 작성한 댓글이 있는 컨텐츠에 댓글이 달리거나, 내가 만든/참여한 토론에 새로운 글이 등록될 경우 알림이 실시간으로 도착하도록 Supabase Trigger 함수 활용 → 실시간 알림 데이터는 구독을 통해 클라이언트에서 자동 수신</li><li>알림 트리거 함수 설계 및 구현 댓글이 추가될 때 자동으로 알림을 생성하는 PostgreSQL 트리거 함수 작성고려했던 시나리오<ul><li>토론 작성자 본인에게 댓글 알림을 보냄 (단, 자기 댓글은 제외)</li><li>이미 해당 토론에 댓글을 단 다른 사용자들에게도 알림을 보냄</li><li>알림 중복 방지를 위해 현재 댓글 작성자와 토론 작성자는 제외</li></ul></li><li>주요 이슈 및 해결 과정<ul><li>PostgreSQL 트리거에서 <code>NEW</code> 값을 이용한 데이터 추적이 처음이라 문법과 흐름을 이해하는 데 시간이 걸림</li><li>기존 댓글 작성자 중 알림을 보낼 대상 필터링 시, <code>DISTINCT</code>, <code>EXISTS</code>, <code>!=</code> 조건을 조합하여 쿼리 최적화</li><li>Supabase에서 트리거 디버깅이 어렵기 때문에, 여러 테스트 케이스를 테이블에 수동 삽입하면서 로직 확인</li><li>중복 알림을 방지하고, 모든 조건이 충족될 때만 삽입되도록 조건을 꼼꼼하게 설계</li></ul>→ 결과적으로 댓글/토론 활동에 대한 알림을 자동 생성하고, 실시간으로 사용자에게 전달되는 흐름 완성</li></ul>API 설계 및 Supabase 활용 Supabase의 테이블 및 관계형 구조 직접 설계 → ERD 기반으로 댓글/토론/알림 데이터 흐름 구조화하여 효율적인 데이터 연동 및 UI 구성