채용공고 올리기

박완섭님을 응원해보세요!

지금 만족하고 있어요

미리보기

기본 정보

이름
박완섭
직업
프론트엔드 개발자
간단 소개

안녕하세요, 소프트한 프론트엔드 개발자 박완섭입니다. '소프트'웨어의 의미를 이해하고 소프트웨어가 지속적으로 변화할 수 있는 코드를 작성하는 것을 중요한 가치로 생각합니다. 계속해서 발생하는 요구 사항의 변화와 기능 업데이트에 효율적이고 안전한 방법으로 대응할 수 있는 코드 구조를 설계하는 데 큰 관심을 가지고 있습니다.

기술 스택

기술 스택

HTML/CSS, JavaScript, TypeScript, React, Webpack, react-query, tailwind-css

프로젝트

프로젝트명

jsx-eslint/eslint-plugin-react 컨트리뷰트 2회

소속/기관명

오픈소스

프로젝트 기간

2023.08. ~ 2023.12.

프로젝트 내용

Overview

  • sort-prop-types Rule의 noSortAlphabetically 옵션을 true로 설정하여도 적용되지 않는 버그를 발견하여, 해당 오류를 수정하여 PR.
  • video 태그에 onResize Prop이 unknown property로 인식되는 버그를 발견하여, 해당 오류를 수정하여 PR.

Link

sort-prop-types PR
no-unknown-property PR

프로젝트명

Issue Tracker

소속/기관명

개인 프로젝트

프로젝트 기간

2023.11. ~ 2024.01.

프로젝트 내용

Overview

  • GitHub 이슈 탭 클론 코딩
  • 팀 프로젝트로 진행했던 프로젝트에 supabase를 사용하여 개인 프로젝트로 새로 개발

Skills

  • TypeScript, React, Tailwind, Tanstack query, React Hook Form
  • Webpack, Inversify
  • Supabase

Development

  • 관심사 분리

    • Presentation, Domain, Data 3개의 레이어를 분리하여 각 레이어간 의존성 감소
    • Presentation(뷰)과 Data(API) 사이 의존성 제거
    • IoC컨테이너를 활용하여 의존성 주입 자동화 및 중앙화

  • 공용 컴포넌트 재사용성 향상

    • 공용 컴포넌트와 도메인을 분리함으로써 공용 컴포넌트 재사용성 증가
    • Compound Component 패턴을 활용하여 공용 컴포넌트 캡슐화 및 재사용성 증가

  • webpack을 활용한 개발 환경 구성

    • webpack의 HMR 만으로는 리액트 컴포넌트의 상태가 유지 되지 않아 React Fast Refresh를 활용하여 컴포넌트 상태 유지
    • dev mode에 추천되는 source map 옵션들을 비교 분석하여 가장 적합한 source map 사용을 통한 빌드 시간 감소
    • babel-plugin-transform-typescript-metadata를 사용하여 @babel/preset-typescript 사용 시 decorator를 인식하지 못하는 문제 해결

  • webpack을 통한 production 최적화

    • splitChunks를 통해 공통 모듈 추출
    • MiniCssExtractPlugin을 통해 CSS 별도의 파일로 추출
    • CssMinimizerPlugin을 통해 CSS 번들 최적화
    • code splitting을 통해 최초 로딩 시간 감소

Link

Github
Blog | 관심사 분리
Blog | 공용 컴포넌트 재사용성 향상
Blog | 웹팩 설정

프로젝트명

News Stand

소속/기관명

개인 프로젝트

프로젝트 기간

2023.03. ~ 2023.04.

프로젝트 내용

Overview

  • 네이버 메인 화면 뉴스 탭 클론 코딩

Skills

  • JavaScript

Development

  • 리액트, 뷰와 같은 모던 라이브러리/프레임워크의 동작 원리를 이해하기 위해 JavaScript로 SPA 및 FLUX 아키텍처 구현
  • Observer Pattern을 이용한 데이터 바인딩

    • Observer Pattern에서 Subject가 Observers를 강한 참조로 관리하게 될 경우 명시적인 Unsubscribe를 하지 않으면 GC가 되지 않아 메모리 누수가 발생
    • Subject의 Observers를 WeakRef를 통해 약한 참조로 관리하여 명시적인 Unsubscribe없이도 GC가 되도록 해결. 또한, GC가 된 Observer의 WeakRef 인스턴스를 FinalizationRegisitry를 이용하여 Subject의 Observers에서 제거

Link

Github
Blog | 옵저버패턴 Memory Leak 해결하기

프로젝트명

Onol (오늘 뭐하고 놀지)

소속/기관명

팀 (PM 1, Designer 1, FE 1)

프로젝트 기간

2023.11. ~ 2023.11.

프로젝트 내용

Overview

  • 주변 놀거리를 랜덤으로 추천해주는 프로젝트
  • PM, 디자이너와의 협업을 통해 10일간 MVP 제작

Skills

  • React, styled-components

Development

  • 기존 range 타입의 input을 기반으로 한 슬라이더의 Discrete한 움직임을 개선하여 Continous한 움직임의 슬라이더 구현하여 UX 향상
  • 디자이너 분의 복잡한 애니메이션 요구사항을 구현하기 위해 Lottie 사용

Link

Github

프로젝트명

Issue Tracker

소속/기관명

팀 (FE 2, iOS2, BE2)

프로젝트 기간

2023.05. ~ 2023.05.

프로젝트 내용

Overview

  • GitHub 이슈 탭 클론 코딩

Skills

  • React, styled-components

Development

  • GitHub 이슈/마일스톤을 활용한 백로그/주간 스프린트 관리
  • 데일리 스크럼을 통한 팀원과의 일정 공유
  • KPT 방법론을 활용한 주간 회고

Link

Github

포트폴리오

URL

link

https://github.com/caesar1030

깃허브
link

https://caesar1030.tistory.com/

티스토리

교육

소속/기관명

코드스쿼드

종류 | 전공

사설 교육 | FE 마스터즈 코스

재학 기간 | 재학 상태

2023.01. ~ 2023.06. | 졸업

소속/기관명

인하대학교

종류 | 전공

대학교(학사) | 컴퓨터공학과

재학 기간 | 재학 상태

2017.03. ~ 2023.02. | 졸업

소속/기관명

진성고등학교

종류 | 전공

고등학교

재학 기간 | 재학 상태

2012.03. ~ 2015.02. | 졸업

댓글