미리보기
기본 정보
안녕하세요 👋🏻 팀원과의 소통이 좋은 제품을 만들 수 있다고 생각하는 주니어 Frontend Developer 서범석입니다. 다양한 경험으로 성장하고 사람들과 소통하는 것을 좋아합니다. 여러 사람들과 지식을 나누며 같이 성장하고자 합니다. 사용자 편의성을 위해 디자인뿐 아니라 성능 개선에도 초점을 두고 개발합니다. * 보훈 취업지원 대상자입니다.
기술 스택
TypeScript, next.js13, React, JavaScript, Vue.js, JIRA, Figma
경력
(주)어크로스비
Frontend Developer | Product Team
2021.12. ~ 2022.07. (8개월)
클라이언트 매출 정보 대시보드 시각화 웹서비스 개발
- Vue.js, Nest.js, Chart.js
크로스보드 물류 플랫폼 및 백오피스 개발
*학사 일정과 병행
브라이튼코퍼레이션(주)
Frontend Intern
2021.06. ~ 2021.08. (3개월)
Vue와 Firebase를 사용한 메모 웹서비스 개발
Musetown
Intern
2020.12. ~ 2021.02. (3개월)
인플루언서 차트 개발 및 유지보수
미국 현지 팀원들과 매주 Scrum 진행
프로젝트
명절 잔소리 영수증
삼성 청년 SW 아카데미
2024.01. ~ 진행 중
요약
- 삼성 청년 SW 아카데미에서 진행하는 웹 모바일 SNS 프로젝트
- 프론트엔드 3명, 백엔드 3명으로 구성
- 프론트엔드 리드 담당
- Figma 링크
기술 스택
- 코어: Next 13
- 스타일링: Vanilla Extract
- 상태관리: Recoil
- 테스트: Jest
프로젝트에서 중요하게 생각한 점
- SSR에서의 Zero Runtime css-in-js
- 이전 프로젝트에서 Emotion을 사용했으나, SSR 적용이 되지 않는 문제가 있었다.
- 이를 해결하기 위해 Zero Runtime css-in-js 라이브러리인 Vanilla Extract를 도입, 사용하고 있다.
- 컴포넌트 및 디렉토리 설계
- 팀원들과 협업하는 프로젝트이므로 폴더와 컴포넌트 구조를 확실하게 체계화했다.
- 각 디렉토리마다 README 파일을 작성하고, 효과적으로 사용하는 방법을 적어 팀에 기여했다.
SSAFY LIVE
삼성 청년 SW 아카데미
2023.11. ~ 진행 중
요약
기술 스택
- 코어: Next 13
- 스타일링: Emotion
- 상태관리: Recoil
- 테스트: Jest, Husky
프로젝트에서 중요하게 생각한 점
- 스타일링: 다크모드를 초기부터 구상
- Figma에서 색상 변수화 및 시맨틱 컬러 개념을 처음부터 생각하며 작업
- Emotion 활용하여 여러 컴포넌트를 공통 컴포넌트화
- Next.js 도입 이유
- Next 13 버전의 쉬운 App 라우팅 기능을 활용해보고 싶었다.
- 이전 프로젝트는 배포 후 CSR의 SEO 문제로 구글에서 보기 힘들었기 때문에, SSR 방식을 사용해보고 싶었다.
무엇을 구현했나?
어려웠던 점 & 배운 점
- 서버 컴포넌트와 클라이언트 컴포넌트의 구분
- 소셜 로그인
- WebSocket 문제
내집스캔
한국부동산데이터연구소
2021.11. ~ 2022.05.
요약
- 부동산 등기부등본 자동 분석 웹(React) 프로젝트
- 기획 및 디자이너 2명, 백엔드 개발자 1명, 프론트엔드 개발자 1명으로 구성
- React 프론트엔드 개발 담당
- Notion 포트폴리오 링크
성과
- 실제 사용할 수 있는 웹앱 개발 및 배포를 통한 초기 앱 구현
- 스타벅스 창업 챌린지 - 중기부 장관상 수상
- 경기콘텐츠진흥원 제2차 애자일 해커톤 최우수상 수상
무엇을 구현했나?
- 부동산 API를 활용하여 대한민국 주소지 검색 기능
- 여러 리포트들을 묶은 공통 컴포넌트
교육
삼성 청년 SW 아카데미 10기
사설 교육 | Java 전공
2023.07. ~ 현재 | 재학 중
국민대학교
대학교(학사) | 소프트웨어학과
2017.03. ~ 2022.08. | 졸업
