• 👋 Hi, I’m @snowman95
• 👀 I’m interested in ... Web Front-end Programming (React.js)
• 🌱 I’m currently learning ... HTML/CSS/JS, React, python
• 💞️ I’m looking to collaborate on ... web front-end project
• 📫 How to reach me ... [email protected]

• 현업
  • 라이브 배포 사이트 유지보수 및 리펙토링
    • 반응형 디자인 고려한 UI/UX 업데이트 : 모바일/테블릿/데스크탑
    • 자바스크립트 타입스크립트 전환
    • 모듈별 ErrorBoundary + Suspense 적용
    • URL hash 기반 서브 페이지 동작 체계 도입
  • Sendbird API를 연동한 메모/채팅 개발
    • Sendbird Chat API 만으로도 구현 해보았고, Sendbird Platform API로 구현된 사내 채팅 서버의 API 로도 구현 해봄
    • react-cool-virutal 를 활용하여 스크롤 up시 추가 메시지 불러오도록 구현
    • react-quill 활용하여 입력창 이모지/폰트 스타일 등 처리
  • 금융기관 연계 Web-App 개발
    • 현재 상태에 따른 페이지 이용 제한 적용
    • Framer-motion 활용하여 애니메이션 효과 적용
  • 디자인 시스템 기반 스토리북 컴포넌트 제작 및 활용
    • Storybook 활용하여 디자인시스템 컴포넌트 제작
• 상태관리
  • redux, redux-toolkit, recoil
• 네트워크 요청 캐싱
  • react-query(tanstack-query)
• GraphQL
  • apollo-client, graphql-codegen
• 디자인
  • Figma 를 통한 디자이너와의 협업 경험
  • Storybook, styled-component, emotion 라이브러리 사용 경험
• 그 외
  • Rest API, SSE(Server-Sent-Event), Socket 사용 경험

• 기본적인 수준의 IOS/Android 용 APP개발
• Expo를 사용하여 프리뷰 APP제작
• webview 를 통해 웹페이지를 띄우는 정도의 간단한 개발 가능함.

(2022.09.18 기준)

• Node.js + express 백엔드 스터디
  • 연말까지 Nest.js 까지 스터디 완료하고 2023년에 백엔드+프론트 풀스텍 프로젝트 진행 예정 !
• 제 근황이 궁금하시면 블로그 방문해주세요 https://11001.tistory.com/category (2023.02.17 기준)
• next.js + graphql
  • 서버사이드 렌더링과 필요한 데이터만 가져오는 graphql 기술을 공부하고 있습니다. (2024.09.26 기준)
• nest.js
  • 백엔드 강의 수강하였습니다. 현업에서 이슈 트래킹시 매우 큰 도움이 되는 중입니다.
• next.js + firebase
  • 프로젝트 진행하면서 1인 풀스텍 개발 진행해보고 있습니다.

• 인원 : 4인 (개발 1, 디자인 1, 기획 2) 중 개발 담당

• 환경

  • 모노레포 (yarn workspace + lerna) 로 3개의 레포지토리를 묶어서 구성했습니다.
    • React.js, React-Native, Storybook
  • 스타일 : emotion
  • 디자인 시스템 : Storybook

• 설명 : 액티브 시니어를 타겟으로 한 KB 스타뱅킹 앱 리뉴얼 프로젝트 입니다.

• 깃 리포지토리 / 프리뷰

  • vercel page : kb-bankapp
  • vercel page : kb-bankapp-storybook
  • git repository: Clone-Carrot

• 이미지

• 기간 : 2021.11 ~ 2022.01 (중단)

• 인원 : 2인 (FE 1, BE 1) 중 FE 담당

• 환경

  • Frontend : React.js + styled-components + Redux RTK Query
  • Backend : Java Spring boot with Gradle + H2 Database

• 설명 : 당근 마켓은 앱으로만 서비스 사용이 가능하고 웹은 모양만 만들어둔 수준으로 실제론 사용이 불가합니다. 웹으로도 서비스를 이용할 수 있도록 로그인/회원가입, 게시글 등록 기능을 추가하였습니다.

• 목표

  • 협업 경험 쌓기
    • Backend 개발자와 협업하여 2인 프로젝트 진행
    • 프로젝트 관리 : Git Project, issue
    • 깃 브랜치 관리 : Git Flow 전략
    • DB Table 설계
    • API 명세 : Swagger
    • 주 1회 스크럼 진행
    • 서버 Rest API 연동
    • 웹 사이트 배포
  • 기술 스텍 실적용 경험 쌓기
    • 페이징 : Spring Boot pageable
    • 리소스 로드 최적화 : IntersectionObserver
    • 타입강제 : Typescript
    • 반응형 웹 : React-Responsive
    • 테스트 : Cypress
    • 배포 : Docker & Jenkins
  • Open API 사용하여 복잡한 기능 구현
    • 주소 검색
      • Kakao 우편번호 서비스
    • 전화번호/구글 로그인 인증
      • Firebase Auth
    • 카카오 로그인 인증
      • Kakao Develop

• 깃 리포지토리 / 프리뷰

  • git repository: Clone-Carrot

• 이미지

• 기간 : 2021.10.11 ~ 11.09

• 인원 : 1인 (FE 1) 중 FE 담당

• 환경 :

  • Frontend : React.js + styled-components
  • Backend : Open API Movie Database API 활용

• 설명 : Popcorn Time 사이트 프론트앤드 화면 클론 프로젝트입니다. React 스터디 목적으로 프로젝트 진행하였습니다.

• 목표 :

  • Open API 연동
    • 영화/드라마 정보 Movie Database API
  • 검색 기능 구현
  • Youtube 영상 삽입

• 사용 React 패키지

  • styled-components
  • styled-reset
  • react-router-dom
  • react-helmet
  • prop-types
  • axios

• 느낀점

  • 클래스형 컴포넌트의 불편함
    • DataContainer, DataPresenter, index 파일 총 3개씩 만들어서 관리
    • 코드 길이가 길어지고 관리할 파일이 많아졌음
  • 함수형 컴포넌트의 편리함
    • Custom Hook을 만들어서 코드 재사용 가능
    • 전체 코드 길이가 대폭 감소
  • State Management의 필요성
    • 컴포넌트 Depth가 커질 수록 props와 state를 컴포넌트 넘나들며 전달하는 불편함이 있었음.

• 깃 리포지포리 / 프리뷰

  • netlify page : nomflix
  • git repository: nomflix

• 이미지

• 기간 : 2021.10.3 ~ 10.4

• 인원 : 1인 (FE 1) 중 FE 담당

• 환경 :

  • Frontend : HTML / CSS / JS

• 설명 : paintbox 사이트 프론트앤드 화면 클론 프로젝트입니다.

• 목표 :

  • 다양하고 복잡한 형태의 CSS 레이아웃 구성 연습
    • 창 크기에 따른 이미지 크기 조절, 이미지 늘어지지 않도록 제어

    width: 100%;
    object-fit: cover;
    max-height: 780px;

• 깃 리포지포리 / 프리뷰

  • git page : Paintbox Clone
  • git repository: Paintbox Clone

• 이미지

• 기간 : 2021.09.26

• 인원 : 1인 (FE 1) 중 FE 담당

• 환경 :

  • Frontend : HTML, CSS, JS, SCSS

• 설명 : best horror sceens 사이트 프론트앤드 화면 클론 프로젝트입니다. SCSS 중점 Study 목적으로 진행하였습니다.

• 목표

  • CSS, SCSS 연습

• 깃 리포지포리 / 프리뷰

  • git page : Best-horror-sceens Clone
  • git repository: Best-horror-sceens Clone

• 이미지

• 기간 : 2021.09.25 ~ 10.02

• 인원 : 1인 (FE 1) 중 FE 담당

• 환경 :

  • Frontend : HTML / CS

• 설명 : "Momentum APP" 프론트앤드 화면 클론 프로젝트입니다.

• 목표

  • Open API 연동
    • 날씨 Open API OpenWeather를 사용하여 현재 지역의 날씨/온도 호출
  • Javascript 스터디
    • querySelector를 통해 HTML 조작

• 깃 리포지포리 / 프리뷰

  • git page : Momentum Clone
  • git repository: Momentum Clone

• 이미지

• 기간 : 2021.09.21 ~ 10.25

• 인원 : 1인 (FE 1) 중 FE 담당

• 환경 :

  • Frontend : HTML / CSS

• 설명 : "Kakao Talk APP" 프론트앤드 화면 클론 프로젝트입니다.

• 목표

  • HTML/CSS 스터디
  • CSS Animation 적용하기

• 역할 : Front-end(전체)

  • 사용한 기술 : HTML, CSS

• 깃 리포지포리 / 프리뷰

  • git page : Kokoa Clone
  • git repository: Kokoa Clone

• 이미지

• 기간 : 2021.11.14

• 인원 : 1인 (FE 1) 중 FE 담당

• 설명 : React Native 를 이용하여 Android/IOS/Web 3개의 플랫폼에서 구동되는 Todo list App 입니다.
  Work 와 Travel 를 분리하여 각각 다른 Todo list를 작성할 수 있습니다.

• 환경

  • React Native
  • Expo

• 목표

  • React Native 학습

• 깃 리포지포리 / 프리뷰

  • git page : WHTH
  • git repository: Momentum Clone

• 이미지

• Nomadcoders
  

• 대상
  • Server : DB(Database) Server, AP(Application) Server, DR(Disaster Recovery) Server, 개발용 Server, Test Server
  • Storage : (Mid-range ~ high-end) 단일(Active), 이중화(Active-Standby), SRDF(Active-Active)
  • San Switch : Brocade 계열
• 구축
  • Server/Storage 장비 DataCenter 입고
  • 장비 Mount 및 물리적인 작업 진행 (전원 연결, 케이블 연결)
  • San switch Config and Zonning, 외장 Storage LUN 할당하여 서버에서 외장 스토리지 Disk 접근
  • OS Install, FW Upgrade, SW Install, kernel parameter setting, User/Filesystem Creation
  • Availability Test
• 운영
  • Event 모니터링, 조치
  • H/W Part (CPU, Memory, Controller, Disk, ...) 증설, 교체
  • 시설 점검 : OS Patch, FW Upgrade, ...
  • 노후 장비 유휴전환, 폐기
  • Disaster Recovery (DR) 훈련
  • Vendor 별 장비 Proof Of Concept (POC) Test 수행

• Sell Scripting
• Ansible (IT Automation Tool)

• Jira (kanban board)
• Confluence (wiki)

• Front-end :
  • Pivot을 이용하여 해상도가 달라져도 동일 화면 보이도록 구현 가능
  • Animation을 이용하여 창 열기/닫기 등의 전환 모션 구현 가능
  • 스크롤 바가 있는 입력창 구현 가능
• Back-end :
  • 상속/인터페이스를 이용하여 등장인물에 대한 클래스 명세서 작성 및 구현 가능
  • 게임 환경설정/흐름제어를 위한 클래스 작성 가능
  • 간단한 수준의 적 AI 구현 가능
• Effector :
  • 파티클을 이용하여 원하는 모양의 이펙트 구현 가능
  • 트리거/콜리전 등을 이용한 물체 감지/충돌 제어 가능
  • 간단한 수준의 3D 인게임 영상 제작 가능
• VR :
  • VR 환경에서 동작하는 프로그램 개발 가능

• 설명 : 랜덤하게 지뢰가 숨겨진 크기가 NxN의 판 위에서 플레이어가 목적지까지 횡단하는 지뢰 피하기 퍼즐게임. 주변에 숨겨진 지뢰의 숫자를 나타내는 '등대'를 보고 지뢰의 위치를 유추하고 아이템을 활용하면서 최소한의 횟수로 목적지에 도착하면 높은 점수를 얻을 수 있습니다.
• 역할 : Front-end(전체), Back-end(플레이어 조작, 맵 생성, 아이템, 점수, 랭킹 등)
• 사용한 기술 : 최단거리 알고리즘
• 어려운 문제 : 반드시 목적지 까지 가는길이 있도록 지뢰를 배치하는 방법
• 문제 극복 방법 : N-Queen 알고리즘을 활용하여 지뢰를 배치하여 길을 막아버리는 경우가 없도록 구현.
• git repository: MARK
  

• 설명 : 클릭 하나만으로 모든 것이 진행되는 게임. 클릭이 상황에 따라 공격, 점프, 슬라이딩 등의 알맞은 액션이 취해집니다. 타이밍에 맞춰 클릭하세요.
  2017년 제 2회 부산ICT 융합 헤커톤 대회 주제 '부산 인디 게임 리메이크'에 맞춰 BEARDOOR 社의 'Tap Tap Knight'을 리메이크한 작품.
• 역할
  • Front-end(오프닝 화면, 게임 중단, 플레이어 조작, Animation 등)
• 사용한 기술 : 확률
• 어려운 문제 : Stage에 등장하는 적/장애물이 적절한 확률에 따라 등장하도록 구현
• 문제 극복 방법 : Switch문에서 적/장애물 마다 가중치를 주어서 확률을 구현함
• 영상: MARK - 지뢰 피하기 퍼즐 게임
  

• 설명 : 우주에서 행성을 움직이는 사령관이 되어 임무를 완수하는 게임.
  행성에 다양한 건물을 지어서 공격/수비할 수 있으며 중력을 이용해 물체를 끌어당기기 가능.

• 역할 :

  • Back-end (게임 시작/끝/중단 등의 흐름 제어, 플레이어 조작 및 플레이에 필요한 다양한 함수 생성, 게임 스테이지 제작, 이벤트 제작)
  • Effector (이펙트/특수효과 제작 등)

• 사용한 기술 : 기하와벡터, 싱글톤 디자인패턴, 클래스 상속, 간단한 수준의 적 AI, 3D 유도미사일

• 어려운 문제 : 성능최적화

• 문제 극복 방법 : 플레이어에 부착된 원형의 트리거가 각 Object에 부착된 트리거와 반응할 경우에만 Object가 동작하도록 구현
  그 외 Object는 유휴 상태로 대기시킴.
  적들이 플레이어와 마주치면 공격하거나, 따라오거나, 피해가거나 등의 다양한 액션을 취하는데
  엄청나게 많은 적이 따라오는 경우 프레임 드랍이 발생하므로 일정 거리가 벌어지면 더 이상 따라오지 않도록 제어

• 수상

  • 제 2회 BuStar:Challenge 게임 공모전 최우수상 수상작
  • 스마일게이트 멤버쉽10기(창작부문) 활동작
  • 2018 부산 인디커넥트 페스티벌 출품작

• 영상: First Planet - 3D 슈팅 전략 게임
  

• 설명 : 화면을 터치하면 플레이어 머리 위로 로프를 발사합니다.
  로프가 지형에 닿으면 그 상태로 고정되고 지형에 닿지 않으면 로프는 고정되지 않고 떨어지게 됩니다.
  로프가 고정되면 스마트폰 화면을 좌우로 기울여 로프의 끝을 중심으로 좌우로 진자 운동이 가능하며,
  다시 화면을 터치하면 반동을 이용해 그 방향으로 발사됩니다.

• 역할

  • 프로젝트 멘토
  • Front-end(전체 구현)
  • Back-end(플레이어 로프액션 및 적 AI, 아이템 효과구현)
  • Effector(이펙트 구현)

• 사용한 기술 : 스마트폰 화면의 기울어짐 정도를 입력으로 이용하기

• 어려운 문제 : 로프 반동의 힘을 어느정도로 주어야 하는가?

• 문제 극복 방법 : 반복 테스트를 통하여 반동력을 적절한 수치로 조절

• git repository: CLIME

• 영상: CLIME - 자이로센서를 이용한 로프액션 게임
  

• 설명 : 일기장 어플리케이션에 재미있는 게임적 요소를 담았습니다.
  귀여운 고양이를 키우기 위한 게임머니를 구하기 위해 일기를 꾸준히 쓰도록 유도하는 어플리케이션

• 역할

  • Front/Back-end (일기장 파트 담당 : 일기 쓰기, 수정, 삭제, 검색, 달력, 폰트 변경 구현)
  • Front/Back-end (미니 게임 파트 담당 : 게임 선택/실행/종료 제어 환경 제작, 두더쥐 잡기, 쥐 분류하기 등의 미니 게임 제작)

• 어려운 문제 : 화면에 글자 수가 많아졌을 경우 슬라이드 바가 생성되도록 구현

• 문제 극복 방법 : 게임 앤진 내에 제공되는 슬라이드 모듈 내부에 text area 모듈을 넣어서 구현

• 수상

  • 제 6회 K-Hackathon 앱 공모전 우수상 수상작

• 영상: 일기썼냥 - 일기장 어플리케이션
  

※ 2019 글로벌게임잼 작품 (개발자 직군 참여)

• 설명 : 사방에서 달려드는 좀비들을 막기위해 상하좌우로 벽을 지어서 최대한 오래 생존하는 것이 목표인 게임.
  좀비는 벽에 닿으면 터져서 죽음. 플레이어는 시간이 지나면 배고픔을 느끼므로 반드시 식량을 찾으러 떠나야만 함.
  건설 가능한 벽의 개수는 한정적이므로 불필요한 벽을 허물고 빠르게 다시 지어야함.
• 역할
  • Front-end (전체)
  • Back-end (플레이어 조작, 적 AI, 아이템 구현)
• 어려운 문제 : 가끔 비정상적으로 아주 빠른속도로 속도로 날아오는 좀비가 존재함.
• 문제 극복 방법 : 충돌에 의한 물리엔진으로 인해 간헐적으로 발생한 것으로 확인. 물리적인 충돌을 제거한 트리거를 사용하도록 변경
• git repository: DAD
• 글로벌게임잼 인증 주소
• 영상: DAD - 건설 생존게임
  

• Front-end : 간단한 수준의 게임화면 구현 가능, Animation을 이용하여 창 열기,닫기 등 전환 모션 구현 가능
• Back-end : 게임엔진의 Actor(등장인물) 상속구조를 이해하고 알맞은 객체 사용 가능, 블루프린트/C++를 이용한 게임 로직 구현 가능
• VR : VR 컨트롤러로 조작하고 VR 디스플레이에 출력하도록 VR 프로그래밍 개발 가능

• 설명 : 시작과 동시에 적의 보스와 전투를 하는 게임. 적 보스는 3D 탄막 형태의 공격을 하는 것이 특징
• 역할 : 게임 Front/Back-end 전체 구현.
• 어려운 문제 : 복잡하고 다양한 보스 AI 구현
• 문제 극복 방법 : 게임 엔진에서 제공하는 비헤이비어 트리를 이용하여 보스 AI 구현
• git repository: THReflect
• 영상: THReflect : 탄막 액션게임
  

• 설명 : 가상 환경에서 누구나 손쉽게 프로토타이핑을 제작할 수 있는 툴

  • 기즈모 도구를 구현하여 물체를 변형할 수 있게 하고 그리드 스냅을 구현하여 더욱 정밀한 물체변형이 가능하도록 하였습니다.
  • 인벤토리에 사용될 에셋의 썸네일을 제작하는 기능을 만들어서 개발 단계에서 활용하였고
    에셋의 타입별로 인벤토리에 보여주고 선택해서 월드에 꺼내 배치할 수 있도록 하였습니다.
    머티리얼이나 파티클의 파라미터 값을 변경하면 적용되도록 하였습니다.

• 역할

  • Front-end/Back-end (Transform 모듈과 인벤토리 모듈 담당)

• 어려운 문제 : 기즈모 구현

• 문제 극복 방법 : 벡터 내적과 외적을 이용하여 마우스 드래그한 방향이 좌/우 인지 상/하인지 구별

• 영상: AUTOTYPE : VR 프로토타이핑 툴
  

1. python

• python 언어를 사용하여 다양한 자료구조를 다룰 수 있음.
• python library를 임포트하여 활용할 수 있음.
• 너무 복잡하지 않은 수준의 프로그램 개발 가능.

• pyexcel : python 코드로 손쉽게 Excel 파일을 다루기 위한 라이브러리
• git page: pyexcel
• git repository: pyexcel