2020 신입

프론트엔드 개발자

포트폴리오

이경환
LEE KYUNGHWAN
+82 10 2598 9724
1997. 03. 13

01

한국외식음료협회

웹 개발

Overview

대학교 재학 당시 산학 협력 활동으로 개발한 웹 페이지입니다.

당시 HTML5, CSS, 자바스크립트의 기초 지식만 가지고 있는 상태에서 회사에 적용되었던 기술인 ASP를 빠르게 습득하여 메인 페이지 및 다양한 페이지를 리뉴얼 했으며 회사의 업무 일부분을 자동화 시키는 등 업무에 필요한 여러 기능을 개발했습니다.

mockup-kfba-main kfba-main-mobile

Stack

  • HTML5
  • CSS3
  • Javascript
  • jQuery
  • IIS 7.5
  • Classic ASP
  • MSSQL

Detail

- 일정한 규칙의 엑셀 양식에서, 기존에는 직접 회원 정보를 입력해서 접수/처리를 한 반면, '일괄 접수/처리'라는 기능을 개발하여 자격증 시험 결과를 클릭 한번으로 일괄적 처리/접수를 가능케 했습니다.

- 수검생의 수검표를 출력하는 과정에서, 기존에는 수검생 한 명마다 페이지를 들어가서 수검표 출력이라는 버튼을 눌러 수검표를 출력했었으나 '일괄 출력' 기능을 개발하여 현재 페이지의 수검생들의 DOM을 이어붙여 프린트를 가능케 했습니다.

Link

02

FAIRY

Overview

Fairy는 어떤 웹 페이지에나 삽입시킬 수 있는 서비스 접근성을 향상 시킬 수 있게 도와주는 Vue와 Node.js 풀스택 프로젝트입니다. 코드 몇 줄로 개발자 없이 서비스를 이용하는 데에 어려움을 겪는 사용자에게 서비스에 대한 도움말 혹은 힌트를 제공할 수 있습니다.

Stack

  • Vue
  • Firebase
  • Element UI
  • SCSS

Link

Detail

Fairy라는 이름은 웹 페이지의 작은 요정이라는 뜻에서 지었습니다. 웹 페이지를 개발하면서 문득 드는 생각이, 만약 내가 만든 기능을 사용자가 제대로 사용하지 못한다면 그것만큼 아쉬울 때가 없을 것 같아 사용자에게 도움말이나 힌트를 직관적으로, 그러면서도 UI를 해치지 않는 방법을 생각하다 개발하게 되었습니다.

형태는 어떤 페이지에서나 삽입시킬 수 있는 형태로 만들었습니다. 채널톡 혹은 Help Scout 같이 페이지 우측 하단에 이모티콘 같은 Element를 삽입시키는 형태에 영감을 받아 제작하였습니다.

주요 기능은 컨텐츠를 보여주거나 사용자로부터 메세지를 받아 페이지에서 관리할 수 있는 기능입니다. 마크다운을 이용해 컨텐츠를 작성하고 나머지 App의 정보를 작성하면 사용자 페이지에서 HTML에 삽입할 수 있는 코드를 생성합니다. App을 사용할 페이지에 해당 코드를 삽입하면 우측 하단에 App이 표시되는 방식으로 동작합니다.

mockup-three-device-image

03

Shaft

Overview

Shaft는 게시판의 확장 형태로 구상하여 게시판보다 더 큰 커뮤니티라는 개념으로 만든 풀스택 프로젝트입니다. 사용자는 한 주제(토픽)를 가지고 여러 사람들과 의견을 나눌 수 있으며 Quill(오픈소스 마크다운 에디터)을 사용하여 마크다운으로 글을 올릴 수 있고 좋아요/댓글/답글 등 기능을 REST API 형태로 Nuxt의 서버 미들웨어에 포함 시켜 제작했습니다.

Stack

  • Nuxt
  • Express
  • TailwindCSS
  • MySQL
  • VueQuillEditor
  • JSONWebToken
  • Google App Engine

Link

shaft-base-1 shaft-base-2 shaft-base-3

04

개발 블로그

Overview

개발자에게 있어서 제일 중요한 것은 끊임없는 학습이라고 생각합니다. 학습 내용을 기록하고 막히는 부분에 있어서 해결했던 점 등을 다양한 사람들과 공유해서 피드백을 받고 더 성장할 수 있는 원동력이 될 거라 생각해 블로그를 운영하고 있습니다. Gridsome이라는 오픈 소스를 이용해서 JAMStack으로 Netlify에 배포하였습니다.

Stack

  • Vue
  • Gridsome
  • TailwindCSS
  • Netlify

Link

mockups-blog-3-screens
안녕하세요 :)

저는 HTML5, CSS3, Javascript(ES6+)를 기반으로 웹의 전반적인

지식을 가지고 있으며 특히 Vue를 사용한 Single Page Application

개발에 자신있습니다.

그 외, React 혹은 Nuxt에 관심이 많으며 새로운 기술/지식 등에 있어서

도전적인 정신을 가지고 매일 공부하고 있습니다.

여러분들과 함께 성장하고 싶습니다. 감사합니다.

드래그로 페이지를 이동