미리보기

본인의 질문을 링크를 통해 공유하고 익명으로 답장을 받을 수 있음

사용기술: React TanStack Query Next.js Typescript TailwindCSS

UI/UX 개선 및 주요 기능 개발

• 프로젝트 2차 리팩토링 단계에서 프론트엔드 개발자로 합류

• 사용자 편의성을 고려하여 UI/UX 개선, 주요 기능 개발을 완료

• 반응형 디자인을 적용하여 다양한 디바이스 환경에서도 최적화된 사용자 경험 제공

프론트엔드 팀 문화 구축

• 코드 리뷰 프로세스를 정립

• 효율적인 협업을 위해 프론트엔드 팀원들과의 코드 리뷰와 지속적인 피드백을 통해 개발 품질 향상

반응형 디자인 적용 및 사용자 경험 향상

• Tailwind CSS를 활용하여 반응형 디자인을 적용

• 사용자 경험을 모바일, 태블릿, 데스크탑 환경에 맞게 최적화하여 UI 일관성을 강화

컴포넌트 재사용성을 고려한 코드 리팩토링

• 코드 유지보수성을 향상시키고 프로젝트 규모 확장 시 재사용 가능한 컴포넌트 설계

• 공통적으로 사용되거나 반복되는 코드를 컴포넌트화하여 재사용성을 높임

트러블슈팅(Trouble Shooting)

Safari에서 가상 키보드 활성화 문제 해결

아이폰 Safari에서 입력 폼 사용 시 가상 키보드가 정상적으로 활성화되지 않는 문제를 발견했습니다.

CSS 처리 방식의 차이가 원인임을 파악하고, TailwindCSS에 커스텀 유틸리티 클래스를 추가해 문제를 해결했습니다.

이를 통해 Safari 환경에서도 안정적인 UX를 제공할 수 있었습니다.

FSD 패턴을 활용한 파일 구조 정리

지난 1차 프로젝트에서 FSD를 도입하려다가 실패했던 흔적이 남아있어서 폴더구조가 난잡했습니다.

이를 FSD(Feature-Sliced Design) 패턴으로 재정리하여 코드 가독성과 유지보수성을 향상시켰습니다.

기능별로 파일을 분리하고 팀원들과 구조를 공유함으로써 협업 효율을 크게 높였습니다.

모두 익명으로 이루어지며 질문을 랜덤의 상대에게 전하고 답장을 받을 수 있음

사용기술: React TanStack Query Next.js Typescript MongoDB Material-UI Firebase

서비스 기획 및 요구사항 정의

• 프로젝트 전반 기획 및 요구사항 정의

• UI/UX 설계를 통해 사용자 친화적인 인터페이스 디자인

• 고민 작성부터 답변 수신까지의 주요 기능 흐름을 정의하여 프로젝트 구조 확립

프론트엔드와 백엔드 풀스택 개발

• 사용자 작성 고민을 저장하고 랜덤 매칭 로직을 구현하여 고민을 익명으로 전달

사용자 인증 및 로그인 시스템 구현

• 회원가입 및 로그인 기능 개발

• GitHub OAuth 로그인 기능을 추가하여 소셜 로그인 지원

• JWT(JSON Web Token) 기반 사용자 인증 시스템을 개발하여 보안 강화

Next.js 풀스택 개발 (Frontend & Backend)

• Next.js API 라우트를 활용하여 서버리스 백엔드 기능 구현

프론트엔드 개발 (React & Next.js)

• Tailwind CSS를 활용하여 UI 스타일링

트러블슈팅(Trouble Shooting)

랜덤 매칭 구현 중 반복된 DB 설계 변경 경험
랜덤 매칭 기능 구현 과정에서 초기 DB 설계가 익명성과 상태 관리를 충분히 지원하지 못해 여러 차례 수정이 필요했습니다.

문제를 해결하기 위해 질문, 답변, 매칭 상태를 개별적으로 관리하는 데이터 스키마를 재설계하고, MongoDB의 참조 방식을 활용해 효율성을 높였습니다.

이를 통해 랜덤 매칭 프로세스를 안정화하고, 사용자 경험을 개선할 수 있었습니다.

기업들이 Kubernetes 클러스터를 신속하게 배포하고 관리할 수 있는 KaaS(클러스터 서비스형 플랫폼)

사용기술: React Next.js Typescript TanStack Query Zustand styled-components Material-UI Java Spring Boot Go

MSW(Mock Service Worker) 도입 및 프론트엔드 선도개발 프로세스 구축

• MSW를 활용하여 백엔드 개발 이전에 프론트엔드 개발 및 테스트가 가능하도록 환경을 구성

• API 목킹을 통해 실시간 데이터 연동 없이도 프론트엔드 기능을 개발, 검증하여 개발 프로세스의 병렬성을 확보

• 프론트엔드와 백엔드 간의 의존도를 줄여 일정 지연 위험을 최소화하고 전체 프로젝트 일정 관리에 기여

Java와 Spring Boot를 활용한 백엔드 개발

• Java와 Spring Boot를 사용하여 RESTful API를 설계 및 구현

Go 기반 API 설계 및 데이터 관리

• 데이터 관리의 일관성을 위해 CRUD 작업을 표준화하고 템플릿화 하기 위한 코드를 작성

트러블슈팅(Trouble Shooting)

쿠버네티스 이해도 차이로 인한 포지션 간 충돌 해결

프로젝트 초기에 팀 내 포지션 간 쿠버네티스(Kubernetes)에 대한 이해도가 달라 협업 과정에서 충돌이 발생했습니다.

이를 해결하기 위해 주 1회 온보딩 세션을 기획하고, 쿠버네티스의 핵심 개념 및 실무 활용 사례를 공유하는 시간을 가졌습니다.

온보딩 세션을 통해 팀원들의 이해도를 높이고 협업 효율성을 개선한 결과, 의견 충돌이 줄어들었고 프로젝트 진행 속도가 빨라졌습니다.

또한, 이 과정에서 서로의 역할과 책임을 명확히 정의하여 팀워크를 강화할 수 있었습니다.

한국지능정보사회진흥원(NIA)의 지원 아래 다양한 국내 기업들과 협력하여 개방형 클라우드 플랫폼

사용기술: ShellScript AWS Azure GCP Python

보안 점검 자동화 스크립트 개발

• ShellScript를 활용하여 보안 점검 프로세스를 자동화함으로써 반복 작업을 줄임

• 기존 텍스트 파일로 제공되던 점검 결과를 Excel 보고서로 자동 변환하여 데이터 관리 및 분석 효율성을 향상

• 이를 통해 팀원들의 수작업 부담을 경감하고 보고서 작성 시간을 단축

클라우드 보안 점검 및 취약점 분석

• AWS, Azure, GCP, OpenStack 등 다양한 클라우드 환경에서 정기적으로 보안 점검을 수행

• KISA에서 제공하는 자동화 스크립트를 활용하여 CCE(Common Configuration Enumeration) 점검을 수행하고, 보안 설정의 표준 준수 여부를 검토

• Rapid7을 이용해 CVE(Common Vulnerabilities and Exposures) 점검을 진행하여 잠재적인 보안 취약점을 식별

플랫폼 호환성 및 확장성 테스트 리드

• 개방형 클라우드 플랫폼과의 호환성 및 확장성 인증을 원하는 위해 외부 협력사와의 컨택. 인증을 받고자 하는 회사와의 초기 논의를 주도하여 협력의 기틀을 마련

네트워크 환경 구축 및 시스템 통합 지원

• 협력사의 클라우드 네트워크 환경 구축을 지원하고, 시스템 통합 작업을 수행하여 안정적인 운영 환경을 제공

• Kubernetes 기반 플랫폼 개발을 하였습니다.

• 초기에는 풀스택 개발자로 백엔드와 프론트엔드를 모두 담당했으며, 프로젝트 진행 중 프론트엔드 전문성 강화 필요에 따라 포지션을 프론트엔드 개발자로 변경하였습니다.

• 개방형 클라우드 플랫폼 보안 점검 및 취약점을 분석하였습니다.

• 보안 자동화 스크립트를 개발하였습니다.

• 클라우드 네트워크 환경 구축 및 시스템 통합 지원을 하였습니다.

13주간 토이 프로젝트를 출시하고 운영합니다.

• 1~3주차: 기획 및 설계

• 4~9주차: 개발

• 10~12주차: 출시, 운영

• 13주차: 발표회

• 개발 직군 뿐만아니라 PM, 디자이너 등 다양한 직군의 참가자가 참여하는 풀스택 프로젝트로

저는 토이스토리를 통해 아래와 같은 것들을 얻었습니다.

• 다양한 파트와의 협업 경험 향상

• 운영에 대한 경험

  • 운영 전 베타 테스트를 통해 사용자가 쉽게 인지하는 기능과 그렇지 못한 기능을 구별하여 개선점을 도출

현직 주니어 프론트엔드 개발자를 대상으로 10주 간 성장을 위한 집약적인 커리큘럼을 제공합니다.

• 1~3주차 : JavaScript & React Deep Dive

• 4~6주차 : 클린 코드 (함수형 프로그래밍, 순수 함수, FSD 등)

• 7~8주차 : 테스트 코드

• 9~10주차 : 성능 최적화

• 매주 국내 탑 티어 시니어 프론트엔드 개발자들과의 그룹 멘토링

• 비슷한 연차의 동료 개발자들과의 네트워킹

저는 항해를 통해 아래와 같은 것들을 얻었습니다.

• 언어에 대한 깊이 있는 이해

• 클린코드 및 테스트 코드에 대한 학습