Front-End
PJY
PORTFOLIO
사용자 중심의 개발을 지향하며,
직관적이고 최적화된 웹 환경을 만들고자, 끊임없이 성장하고 있습니다.


박준영
Front-End Developer
- ENTJ
- 사색적 사고
- 꾸준한 성찰
- 탐구적 태도
- 디테일 중시
- 분석하는 습관
- 성장 지향적
- 꼬리 질문가
- 구조적 사고
- 깊이 있는 분석
- 주도적인 문제 해결
저는 어려움에 직면할 때마다 끊임없이 탐구하고 문제를 해결하며 성장해왔습니다. 아직 배울 것이 많은 개발자이지만, 문제 해결에 대한 열정과 탐구심만큼은 누구보다 자신 있습니다. 스스로에게 끊임없이 질문을 던지며 더 나은 개발자로 성장하고자 합니다.
ARCHIVING

코드인 디자인은 웹에이전시입니다. 퍼블리싱과 프론트엔드를 맡아서 해왔습니다.
- [ 무인 기기 관리 페이지 ] (React) - 지점 데이터를 표시하는 테이블을 만들고 필터와 검색 기능을 추가하여 사용자가 원하는 지점을 쉽게 찾을 수 있도록 구현. - 일부 페이지 퍼블리싱을 작업과 React Query를 활용하여 API와의 데이터 연동을 구현.
- [ 청년 배관 ] - 솔라피 API 연동
- [공유기 관리 어드민 페이지] (Vue) - 프로젝트의 공용 컴포넌트를 구현했습니다. - Chart를 포함한 대쉬보드, 페이지 전반의 퍼블리싱을 진행했습니다. - 스웨거(Swagger) 문서를 기반으로 Vue Query를 활용하여 API 연동 및 데이터 처리 로직을 구현했습니다.
- [Z-one 체육 대학 합격 예측] (Next) - 공통 컴포넌트를 제작하여 코드의 재사용성과 유지보수성을 향상시켰습니다. - 어드민 페이지와 정시/수시 대학 찾기 페이지의 퍼블리싱 및 API 연동을 수행했습니다. - 대학 찾기 및 대학 관리 필터 기능을 구축했습니다. - 오픈 전, 전반적인 수정을 하였습니다.
- [Xpla] (Next) - 프로젝트 내 i18next를 활용한 다국어 지원 추가 및 언어 선택에 따른 콘텐츠 변경 - 일부 페이지 퍼블리싱 구현 및 수정
- [아파트 관리 모바일 웹 퍼블리싱] (Vue) - Vue 3를 활용한 프로젝트 초기 설정 및 모바일 최적화 구현 - 재사용성을 고려한 컴포넌트 설계 및 퍼블리싱 진행 - Storybook을 도입하여 컴포넌트 관리 체계 구축

React.js와 Springboot를 활용한 자바 풀스택 개발자 과정
- [파이널 프로젝트] 스프링부트 기반의 Rest API 서버를 연동한 React.js SPA 애플리케이션 개발 및 클라우드서버 배포 프로젝트 수행
- [세미 프로젝트] 스프링부트와 마이바티스를 활용한 MVC Model2 기반 풀스택 웹 애플리케이션 프로젝트 수행
- React.js를 활용한 SPA 애플리케이션 개발 학습
- 웹 표준을 적용한 Web Front 개발 학습
- ORM 프레임워크를 활용한 서버 애플리케이션 개발 학습
- 스프링부트를 활용한 RestAPI 서버프로그래밍 학습
- 스프링 프레임워크를 활용한 BackEnd 서버 개발 학습
- 영속성 프레임워크를 활용한 데이터베이스 연동 응용 SW 개발 학습
- 응용 SW 개발을 위한 자바프로그래밍 기초 학습
- 관계형 데이터베이스를 위한 SQL 및 데이터 모델링 학습

[웹코딩] UIUX반응형디자인(웹표준,HTML5, CSS)프론트엔드(퍼블리셔)개발자 과정
- 웹페이지의 구조를 만들기 위한 HTML 기초 문법과 태그종류별 작성법,
- HTML5 표준 웹기술을 바탕으로 문서의 구조를 제작하는 방법
- 웹문서를 표현하기 위한 CSS의 문법을 익히고, 다양한 레이아웃기법과 디자인적인 요소들을 표현하여 동적이면서 웹표준화된 페이지를 구현
CAREER
2023.12 ~ 2024.8
코드인디자인

코드인 디자인은 웹에이전시입니다. 퍼블리싱과 프론트엔드를 맡아서 해왔습니다.
- [ 무인 기기 관리 페이지 ] (React) - 지점 데이터를 표시하는 테이블을 만들고 필터와 검색 기능을 추가하여 사용자가 원하는 지점을 쉽게 찾을 수 있도록 구현. - 일부 페이지 퍼블리싱을 작업과 React Query를 활용하여 API와의 데이터 연동을 구현.
- [ 청년 배관 ] - 솔라피 API 연동
- [공유기 관리 어드민 페이지] (Vue) - 프로젝트의 공용 컴포넌트를 구현했습니다. - Chart를 포함한 대쉬보드, 페이지 전반의 퍼블리싱을 진행했습니다. - 스웨거(Swagger) 문서를 기반으로 Vue Query를 활용하여 API 연동 및 데이터 처리 로직을 구현했습니다.
- [Z-one 체육 대학 합격 예측] (Next) - 공통 컴포넌트를 제작하여 코드의 재사용성과 유지보수성을 향상시켰습니다. - 어드민 페이지와 정시/수시 대학 찾기 페이지의 퍼블리싱 및 API 연동을 수행했습니다. - 대학 찾기 및 대학 관리 필터 기능을 구축했습니다. - 오픈 전, 전반적인 수정을 하였습니다.
- [Xpla] (Next) - 프로젝트 내 i18next를 활용한 다국어 지원 추가 및 언어 선택에 따른 콘텐츠 변경 - 일부 페이지 퍼블리싱 구현 및 수정
- [아파트 관리 모바일 웹 퍼블리싱] (Vue) - Vue 3를 활용한 프로젝트 초기 설정 및 모바일 최적화 구현 - 재사용성을 고려한 컴포넌트 설계 및 퍼블리싱 진행 - Storybook을 도입하여 컴포넌트 관리 체계 구축
2022.10 ~ 2023.3
하이미디어 학원

React.js와 Springboot를 활용한 자바 풀스택 개발자 과정
- [파이널 프로젝트] 스프링부트 기반의 Rest API 서버를 연동한 React.js SPA 애플리케이션 개발 및 클라우드서버 배포 프로젝트 수행
- [세미 프로젝트] 스프링부트와 마이바티스를 활용한 MVC Model2 기반 풀스택 웹 애플리케이션 프로젝트 수행
- React.js를 활용한 SPA 애플리케이션 개발 학습
- 웹 표준을 적용한 Web Front 개발 학습
- ORM 프레임워크를 활용한 서버 애플리케이션 개발 학습
- 스프링부트를 활용한 RestAPI 서버프로그래밍 학습
- 스프링 프레임워크를 활용한 BackEnd 서버 개발 학습
- 영속성 프레임워크를 활용한 데이터베이스 연동 응용 SW 개발 학습
- 응용 SW 개발을 위한 자바프로그래밍 기초 학습
- 관계형 데이터베이스를 위한 SQL 및 데이터 모델링 학습
2022.7 ~ 2022.8
그린컴퓨터학원

[웹코딩] UIUX반응형디자인(웹표준,HTML5, CSS)프론트엔드(퍼블리셔)개발자 과정
- 웹페이지의 구조를 만들기 위한 HTML 기초 문법과 태그종류별 작성법,
- HTML5 표준 웹기술을 바탕으로 문서의 구조를 제작하는 방법
- 웹문서를 표현하기 위한 CSS의 문법을 익히고, 다양한 레이아웃기법과 디자인적인 요소들을 표현하여 동적이면서 웹표준화된 페이지를 구현
프레임워크 & 프로그래밍 언어
React
Next.js
Vue
JavaScript
TypeScript
퍼블리싱
HTML5
CSS3
SASS / SCSS
Tailwind CSS
Emotion
Styled Components
Chakra UI
상태관리
Redux
RTK Query(초급)
Recoil
React Query(초급)
개발 도구 & 디자인 시스템
GitHub
Figma
Storybook
PROJECT
각 프로젝트의 자세한 내용을 보시려면 항목을 클릭해주세요.
- 개인
책숲 – 도서 커머스 웹 애플리케이션
NEXT.jsTYPESCRIPTSCSSRECOILREACTSCROLLFIGMAGITHUB - 개인
PJY Portfolio v2
NEXT.jsTYPESCRIPTSCSSRECOILREACTSCROLLFIGMAGITHUB - 코드인디자인
무인 기기 관리 페이지
REACTTYPESCRIPTEMOTIONCHAKRA_UIREACT_QUERYRECOILFIGMAGITHUB - 코드인디자인
연결 장비 통합관리 시스템
VUETYPESCRIPTSCSSCHART_JSTANSTACK_TABLEVUETIFYPINIAFIGMAGITHUB - 코드인디자인
z-one(체육 대학 합격 예측)
NEXT.jsRTKAG_GRIDCHAKRA_UISTORYBOOKTYPESCRIPTSWIPERFIGMAGITHUB - 코드인디자인
Xpla - 다국어 작업, 일부 퍼블리싱
NEXT.jsFIGMAGITHUB - 코드인디자인
입주민 대상 아파트 생활 서비스 (모바일 화면 퍼블리싱)
VUESTORYBOOKFIGMAGITHUB - 개인
PJY Portfolio v1
REACTSCSSFIGMAGITHUB - 하이디미어 학원
The Tech Titan (인사관리 그룹웨어 애플리케이션)
REACTHTMLCSSJAVASPRINGRESTfulORACLEMUIFIGMAGITHUB - 하이디미어 학원
SMILE INVEST(크라우드 펀딩 사이트)
REACTHTMLCSS