smpark's portfolio
우리는 홀로 빛나면서
동시에 다 같이 빛난다
About me
메인 업무 경험
스타트업 메인 수익 서비스(BO & FO)의 설계, 개발, 배포, 운영 경험이 있습니다. 이를 통해 서비스의 전체 생명주기를 이해하고 관리할 수 있습니다.
웹 최적화
FCP, LCP, CLS, TTI, TBT, SEO 등 사용자 경험을 중심으로 핵심 성능 지표를 개선하고 검색 엔진을 최적화 합니다.
웹 보안
XSS, CSRF, DoS, CORS, CSP, OAuth2.0 등 주요 보안 위협을 고려하여 안전한 웹 애플리케이션 개발에 주력합니다.
백엔드 이해
NodeJS, Express, Koa를 활용한 개발 경험을 바탕으로 백엔드 환경을 이해하고, 백엔드 개발자와 원활한 협업이 가능합니다.
아키텍처 및 설계
Clean Architecture, MVC, Flux 등의 아키텍처 패턴과 FSD(Feature Sliced Design)와 같은 프로젝트 구조화 적용 경험을 바탕으로 확장 가능하고 유지보수가 용이한 코드베이스를 구축합니다.
성격 및 업무 스타일
내성적, 현실적, 관계지향적 or 목표지향적, 계획적
복잡한 기술 개념을 직군 누구나 쉽게 이해할 수 있도록 설명하기 위해 노력합니다.
솔직함과 배려심을 바탕으로 원팀이 되기 위해 노력하고 기술 공유에 적극적입니다.
다양한 접근 방식을 시도하며, 팀과 현재 상황을 공유하여 효과적이고 투명한 문제 해결 과정을 추구합니다.
Skills
Tech Stack
선호 기술
사용 기술
Languages
TypeScript
JavaScript
Java
Databases
MongoDB
FireBase
MySQL
Backend
Node.js
Express
Koa
Frontend
React
Next.js
Zustand
React Query
Redux
JQuery
Styling
Tailwind CSS
PostCSS
Styled Components
CSS3
HTML5
Pug
Tools
Nx Monorepo
Yarn berry
NPM
Git
Docker
GitHub Actions
Webpack
Jira
Bitbucket
Code Quality & Testing
ESLint
Prettier
Jest
Cypress
Architecture & Methodology
Clean Architecture
Feature Slice Design
My work
Core Work Experience & Projects
📱
DualTalk 3.0
업무 경험
사용자가 직접 챗봇을 설계/디자인/관리/배포 할 수 있는 React SPA 올인원 반응형 플랫폼(BO & FO) 개발완료
기간
:2022.03 - 2023.02
역할
:Frontend Developer
팀 구성
:Frontend: (1+1)명
Backend: (2+2)명
AI 연구원: 1명
디자이너: 1명
기획자(PL): 1명
DevOps: 1명
QA: 2명
주요 기술 포인트
:- 초기 기획 참여 및 SPA 아키텍처 설계, Page Base의 UI, State, Service(Logic) 등 모듈 분리
- Zustand, ReactQuery 도입을 통한 상태관리 분리
- Webpack5 도입을 통한 빌드 시간 단축 및 코드 스플리팅, 이미지, 리액트 랜더링 등 최적화
- 사내 최고 매출 서비스 유지, 유지보수 비용 & 관리 인원 50% 이상 감축
기술 스택
:React
TypeScript
Zustand
ReactQuery
PostCSS
Webpack5
Babel
Docker
Jira
BitBucket
ESLint
Prettier
Jest
📈
산업연구원(kiet)
업무 경험
AI 분석을 통한 뉴스 동향 정보 데이터 시각화 SPA 프로젝트
기간
:2021.08 - 2023.02
역할
:Frontend Developer
팀 구성
:Frontend: 1명
Backend: 1명
AI 연구원: 1명
기획자(PM)
주요 업무 스타일
:- 1차 사업 이후 프론트엔드 인계, 기존 개발 컨벤션 유지하며 2차, 3차 프로젝트 완성
- 업무미팅 적극 참여, 요구 기능사항 리스트업 후 공유
- 업무미팅 시작 전 업데이트 된 리스트업 및 현황 팀원 공유
- 미팅 시 클라이언트에게 중간 시연 및 새로운 피드백 리스트업 작성, 공유 반복
- 프로젝트 문서 작성 후 제공 및 이례적 3차, 4차까지 계약 연장
기술 스택
:React
Redux
TypeScript
D3js
Docker
ESLint
Prettier
🔐
OAuth2.0
프로젝트
Access & Refresh Token을 발급 하는 OAuth2.0 인증 제공 SSR 프로젝트로 Clean Architecture를 도입하여 리팩토링
기간 (리펙토링)
:2024.03 - 2024.05
역할
:Full Stack Developer
팀 구성
:Full Stack: 1명
주요 기술 포인트
:- XSS, CSRF, DoS, CORS, CSP, OAuth2.0 등 다양한 보안 기술 적용
- 자체 개발 OAuth2.0 서버의 토큰을 활용한 서비스 접근 권한 제어 및 smpark 소셜 로그인 기능 구현
- Clean Architecture 적용으로 내부 비즈니스 로직 보호, 의존성 주입(DI) 활용을 통한 모듈 간 결합도 감소, 코드 유지보수성 및 테스트 용이성 개선
기술 스택
:NodeJS
Express
TypeScript
JavaScript
NX Monorepo
Pug
MongoDB
Esbuild
Docker
GitHubActions
ESLint
Prettier
Jest
Cypress
링크
:🚀
smpark.dev
프로젝트
개인 포트폴리오 NextJS 프로젝트로 Feature Slice Design 방법론를 도입하여 리팩토링
기간 (리펙토링)
:2024.06 - 2024.08
역할
:Full Stack Developer
팀 구성
:Full Stack: 1명
주요 기술 포인트
:- Feature Sliced Design 방식과 re-export 패턴을 적용하여 모듈별 캡슐화를 통한 결합도 감소 및 기능별 확장성 향상을 위한 리팩토링 수행
- OAuth2.0 프로젝트와 연계하여 smpark 소셜 로그인 기능 적용
- Image blur, Font swap 등을 이용한 이미지와 폰트 최적화, 스크롤 이벤트 대신 Intersection Observer를 이용한 스크롤 이벤트 최적화, requestAnimationFrame을 이용한 canvas 렌더링 최적화 등 적용
- Lighthouse를 활용한 웹 성능 분석을 통해 성능, 접근성, 모범 사례 및 검색엔진 최적화(SEO) 영역에서 고득점 달성
기술 스택
:Next.js
TypeScript
Zustand
NextAuth
NX Monorepo
Tailwind
Docker
GitHubActions
ESLint
Prettier
링크
:Contact
E-mail & Chatting
하단의아이콘을 클릭하시면 각각 저의 이메일과 깃허브로 연결됩니다.
감사합니다. :D