깃허브

블로그

프론트앤드 디발자, 박범수 입니다.

새로운 기술 학습에 관심이 많고 사용자에게 좋은 경험을 제공 하는것을 최우선으로 생각합니다.

좋은 사용자 경험은 직관적인 디자인, 딜레이 없는 서비스 제공에서 찾을 수 있다 생각합니다.

웹 개발, 디자인, 퍼블리싱을 어우르는 융합형 인재를 목표합니다.

박범수

  • 010-8606-6857
  • banma1234@gmail.com
  • 경성대학교 컴퓨터공학과 졸
  • 부산시 연제구 반송로40
  • 깃허브
  • 블로그
  • linked-in

    • 프론트앤드

    JS

    TS

    React

    Next.js

    Sass

    백앤드

    node.js

    mongoDB

    mySQL

    디자인

    Figma Clip studio

    데브옵스

    AWS

    vercel

    JS 기반의 프로젝트들을 수행하였습니다.

      Chocoham 블로그

    • SEO의 개념과 필요 요소들을 배웠습니다. sitemap은 SSR을 활용하여 동적 파일로, meta-data, RSS는 정적 파일로 제출하였습니다. Google PageSpeed Insights 기준 검색엔진 최적화 100점을 받았습니다.
    • 분산 서비스에 관해 배웠습니다. 외부 호스팅 서버 CDN을 구성, 기존에 비해 이미지 로딩 시간을 1초 이상 줄였습니다. AWS S3 bucket을 JS SDK를 이용해 블로그, CDN과 연동하여 블로그 내 썸네일, 포스트 이미지 전송을 구현했습니다.
    • 사용 모듈의 버전업에 근거한 리팩토링 및 migration을 경험하였습니다. 신규 문법과 개선된 메소드 사용은 곧 성능 개선으로 이어졌습니다.
    • 계층형 트리구조를 활용한 대댓글 시스템을 직접 구현하여 비관계형 DB 스키마의 설계 및 쿼리문, api 작성에 관해 배웠습니다.
    # Next.js# typescript# SCSS# node.js# mongoDB

      포트폴리오 웹페이지

    • vanila JS, CSS만을 이용한 싱글페이지 애플리케이션입니다. 3D 모델 출력을 제외한 모든 애니메이션 및 기능을 라이브러리 없이 구현하였습니다. 이 프로젝트를 통해 javascript 역량을 한층 향상시켰습니다.
    • Three.js를 활용해 웹 환경에서 3D 모델을 다루는 법을 배웠습니다. 이를 활용해 브라우저 이벤트에 3D 모델의 애니메이션을 연동, 사용자 경험을 향상시켰습니다.
    • ease-in, ease-out 등 transition을 수행할 때 bezier-curve를 적용하여 애니메이션이 사용자에게 보다 자연스럽게 연출되도록 구현했습니다.
    • intersection observer 기능을 활용한 TOC(table of contents)를 두어 각 페이지의 주제를 나타내고 페이지간 이동을 용이하게끔 하였습니다.
    # javascript# CSS# Three.js# vite

    [React] 4드론보다 빠른 동시편집 구현하기(1) (feat: yorkie)

    [React] 4드론보다 빠른 동시편집 구현하기(1) (feat: yorkie)

    React 환경에서 Notion, Figma와 같은 동시편집 기능을 활용하여 todo-list 앱을 최대한 빠르고 간단하게 만들고자 합니다. 라이브러리는 yorkie를 사용하겠습니다. 간단히 구현 가능하며 국내에서 개발된 라이브러리기 때문에 한국인 커뮤니티가 활성화되어있어 사후지원도 용이한 편입니다.

      2024-10-17

    [lv.2] 주차 요금 계산 | 프로그래머스

    [lv.2] 주차 요금 계산 | 프로그래머스

    프로그래머스 lv.2 주차 요금 계산 풀이 with javascript. javascript의 객체를 이용해 차량의 입/출차 시간을 기록, 해당 객체를 순회하며 주차시간을 주어진 요금표에 맞게 정산하는 것으로 문제를 해결한다.

      2023-06-04

    [문제해결] frequency Counter 패턴

    [문제해결] frequency Counter 패턴

    frequency counter 패턴은 hash를 활용하는 패턴으로 빈도수를 측정하고 비교하는데 사용된다. javascript에서는 객체 혹은 Map 자료형을 이용해 구현할 수 있다. 단순 배열을 이용하는것 보다 시간복잡도를 눈에띄게 줄일 수 있다.

      2023-05-12

    Next.js 13+에서 무한 대댓글 구현 (with mongoDB)

    Next.js 13+에서 무한 대댓글 구현 (with mongoDB)

    next.js 13 이상의 버전에서 mongoDB와 계층형 트리구조를 활용한 무한 대댓글을 구현하였습니다. 댓글가 대댓글의 그룹으로 묶어 관리하는 REF, 댓글의 순서를 결정하는 RE_STEP, 댓글의 들여쓰기 레벨을 의미하는 RE_LEVEL, 부모 댓글의 고유 식별자를 의미하는 RE_PARENT 총 4개의 속성을 이용해 자동으로 대댓글의 위치를 조정하도록 하였습니다.

      2024-04-12

    [next.js] CDN 서버를 활용한 Markdown 이미지 첨부(1)

    [next.js] CDN 서버를 활용한 Markdown 이미지 첨부(1)

    마크다운에서 이미지를 첨부하기 위해선 img태그의 src에 url을 전달하듯 url 형식의 문자열을 전달해야 합니다. 때문에 README를 작성하거나 저처럼 블로그 등지에서 마크다운을 활용하는 경우 첨부하고자 하는 이미지의 전처리 과정이 요구됩니다.

      2023-11-12

    [python] snscrape를 이용한 웹크롤링 및 데이터 시각화

    [python] snscrape를 이용한 웹크롤링 및 데이터 시각화

    python 모듈인 snscrape, wordCloud 모듈을 이용해 twitter에서 특정 키워드가 포함된 트윗을 크롤링하여 언급 빈도수에 따라 시각화된 자료를 생성할 수 있다.

      2023-03-21

    [자료구조] 연결리스트(linked_list) | javascript

    [자료구조] 연결리스트(linked_list) | javascript

    javascript로 이해하는 자료구조 [연결리스트(linked-list)] : 연결리스트(linked-list)는 리스트의 일종으로 노드(node)와 데이터가 포인터(pointer)를 가지고 한 줄로 이어져있는 형태를 띈다. 자료의 추가 및 삭제 시간복잡도가 O(1)이나 다른 자료형보다 저장공간을 많이 차지하는 단점이 있다.

      2023-04-25

    다양한 포스트를 작성하였습니다.

    오픈소스 프로젝트에 참여하여 다양한 경험을 하였습니다.

    오픈소스 프로젝트에 실제로 기여하며 협업하는 법을 배웠습니다.

    # 커뮤니티 # 화상회의 # 질의응답 # 오픈소스 컨트리뷰션

    # 문서화

    # 버그픽스

    # 기능추가

    # 테스트케이스 작성

    개발과 디자인을 아우르는 융합형 인재가 되겠습니다.

    끝까지 봐주셔서 감사합니다.