Tasty & Cool develpoment
scroll img
react icon
css icon
js icon
ladle img
About Me
‘멋’도 있고 ‘맛’도 있는 웹 개발을 합니다. 개발은 취미로 해왔던 요리와 비슷하다고 생각합니다.
언어 라는 재료, 코딩 이라는 레시피를 가지고
사용자의 입맛에 맞춰 센스있게 개발합니다.
console.log(김현우)
codingChef
html
css
js
react
react native
nodejs
express
mongo db
git
github
knife
Stacks 저는 이런 재료들을 다룰 줄 압니다! 아이콘을 클릭해보세요 :)
  • html HTML5
  • css CSS3
  • js JavaScript
  • react React.js
  • react native React-Native
  • nodejs Node.js
  • express Express
  • mongo db Mongo DB
  • git Git
  • github GitHub
    • mini knife
    • HTML5를 활용하여 웹 페이지의 구조를 작성하고 시맨틱한 마크업을 구현할 수 있습니다.
    • CSS3를 이용하여 웹 페이지의 스타일링과 레이아웃을 디자인하고, 애니메이션과 반응형 디자인을 구현할 수 있습니다.
    • JavaScript를 활용하여 웹 페이지에 동적인 기능을 추가하고, 사용자와의 상호작용을 구현할 수 있습니다.
    • React를 사용하여 모던하고 재사용 가능한 UI 컴포넌트를 개발하고, 가상 돔 기반의 효율적인 렌더링을 구현할 수 있습니다.
    • React Native를 활용하여 모바일 애플리케이션을 개발하고, Expo툴을 토대로 Android 플랫폼에서 동작하는 네이티브 앱을 만들 수 있습니다.
    • Node.js를 이용하여 서버 사이드 어플리케이션을 개발하고, 비동기적인 I/O 처리와 확장성 있는 네트워크 애플리케이션을 구축할 수 있습니다.
    • Express 프레임워크를 활용하여 Node.js 서버 개발을 보다 간편하게 할 수 있으며, 라우팅과 미들웨어 기능을 제공합니다.
    • MongoDB를 사용하여 NoSQL 데이터베이스를 다룰 수 있으며, 확장성과 유연성 있는 데이터 저장 및 검색 기능을 구현할 수 있습니다.
    • Git을 활용하여 소스 코드 버전 관리를 수행하고, 협업 작업을 위한 브랜치 관리와 코드 리뷰 기능을 활용할 수 있습니다.
    • GitHub를 이용하여 Git 저장소를 호스팅하고, 프로젝트 관리, 이슈 트래킹, 협업과 소셜 코딩을 수행할 수 있습니다.
Project
page in the bowl
Do you want to contact me?
myPhoto
Contact
GIT HUB : https://github.com/KHW1025
stack icons group
본 페이지는 상업적 목적이 아닌 비영리적 개인 포트폴리오용으로 만들어진 사이트입니다. KHW ⓒ 2023
Kim HyunWoo

# 적응력이 뛰어나며 빠르게 변화하는 환경에서도 잘 적응합니다. 💪

# 팀워크를 중요시하여 협업을 원활하게 진행합니다. 🙌

Education
2022.12.19 ~ 2023.06.27
그린 컴퓨터 아카데미
리엑트(React) 리엑트네이티브 EXPO 활용 프론트앤드개발자 양성과정
2014.03 ~ 2020.02
순천향대학교
수학과(주전공), it금융경영(복수전공)
경기도민 재난안전키트
pj6 Mockup
Over View '경기도민 재난안전키트'는 사고 대응메뉴얼을 제시하고 부가적인 기능들을 통해서 안전의식 향상과 위기 대처능력을 증진시키는 것이 목표입니다. 기획 (100%) / 디자인 (100%) / 구현 (100%)
Skill
  • '유튜브', '구글맵', '경기데이터 드림'의 Open API 활용
  • Expo환경에서 React - Native로 개발
  • Java Script
Kick
  • 1. 국민재난안전포털의 정보를 기반으로 한 메뉴얼 데이터를 JSON으로 작성, 카테고리별로 filter와 map함수를 사용해 분류하였습니다. 또한 useState를 사용해 Tab Menu UI를 만들었습니다.
    pj6Kick1
  • 2. 유튜브 Open API와 axios 활용, 실시간으로 ‘재난 대처 대피’ 관련한 유튜브 영상중 조회수가 높은 상위 리스트 영상을 제공하도록 하였습니다. 또한 youtube-iframe을 활용해 App 내에서 영상 시청이 가능하도록 만들었습니다.
    pj6Kick2
  • 3. 'Google Map Open API'와 '경기데이터드림'의 Open API를 활용해 경찰서, 소방서, 의료기관의 위치를 지도에 나타냈습니다. Location 함수를 사용해 위치 권한을 가져온 뒤 현재 위치값을 받아오는 기능을 추가했습니다.
    pj6Kick3
  • 4. filter 함수를 사용해 국민재난안전포털을 통해 발송된 재난문자중 경기도 지역기반으로 필터링하여 경기도 재난문자 정보 제공하였습니다.
    pj6Kick4
  • 5. Linking 기능을 사용하여 112, 119, 110 등 버튼을 누르면 전화다이얼 화면에 바로 번호가 적용되어 빠르게 전화가 가능하도록 하였습니다.
    pj6Kick5
강원 펫 트립
pj5 Mockup
Over View '강원 펫 트립'은 반려동물과 함께 강원도를 여행하고자 하는 사용자들을 위해 반려동물 동반 이용가능한 여행지의 위치와 정보를 제공하는 사이트입니다. 기획 / 디자인 (100%) / 구현 (100%)
Skill
  • '강원도 반려동물 동반관광 API시스템'에서 제공하는 API 활용
  • 'Kakao Map Open API' 활용
  • React
  • Java Script
Kick
  • 1. Json 데이터와 svg 코드를 활용해 지도 내 원하는 지역을 누르면 해당지역의 색 변경과 그에 맞는 데이터가 바인딩 되도록 하였습니다.
    pj5Kick1
  • 2. 사용자의 접근성을 우선으로 React Hook을 활용해 도시별 페이지, 카테고리 페이지, 디테일 페이지로 나누었습니다.
    pj5Kick2
  • 3. filter 함수를 사용해 검색모달을 만들어 원하는 장소검색 기능을 추가했습니다.
    pj5Kick3
  • 4. Kakao Map Open API와 Json데이터의 위도, 경도 값을 활용해 강원도 지역 내 동물병원의 위치를 검색할 수 있는 기능을 추가하였습니다.
    pj5Kick4
GPTLIX
pj4 Mockup
현재 API키의 사용기간이 만료하여 기능작동이 실행되지 않을 수 있습니다.
Over View 'GPTLIX'는 취향에 맞는 드라마나 영화의 제목, 감독, 배우, 장르 등을 입력하면 그에 맞는 작품을 추천해주는 사이트입니다. 기획 (100%) / 디자인 (100%) / 구현 (100%)
Skill
  • 'ChatGPT Open API' API 활용
  • JavaScript
  • Node.JS, Express
  • AWS LAMBDA, CloudFlare
Kick
  • 1. Cloudflare는 호스팅을 담당하고, AWS Lambda와 API Gateway는 서버리스 아키텍처로 백엔드 기능을 제공하도록 했습니다.
    pj4Kick1
  • 2. 클라이언트가 POST 요청을 보내면 백엔드에서 OpenAI API를 사용하여 영화와 드라마 추천을 수행하고, 추천 결과를 응답으로 반환하도록 하였습니다.
    pj4Kick2
Today's Menu
pj3 Mockup
Over View 'Today's Menu'는 평소 취미로 만들었던 요리의 정보를 활용하였습니다. 누구나 음식의 사진과 정보를 입력하고 추가할 수 있습니다. 미니 기능으로 랜덤으로 하나를 추첨할 수 있는 사이트입니다. 기획 (100%) / 디자인 (100%) / 구현 (100%)
Skill
  • 'ChatGPT Open API' API 활용
  • Html, Css, JavaScript
  • Node.JS, Express
  • Mongo DB
Kick
  • 1. Express 모듈을 사용하여 서버를 생성, EJS 템플릿 엔진을 설정, MongoDB에 연결하고, "project3" 데이터베이스의 "post" 및 "counter" 컬렉션과 연동하였습니다.
    pj3Kick1
  • 2. Math.random() 함수를 사용해 DB에 등록된 메뉴중 랜덤으로 추출해 추천하는 기능을 만들었습니다.
    pj3Kick2
대전시민천문대 리뉴얼
pj2 Mockup
Over View 기존 예약 이용자가 사용함에 있어 접근하기 힘든 UI와 Index 페이지 내에 불필요한 요소들을 리뉴얼 하였습니다. 기획 / 디자인 / 구현 (100%)
Skill
  • Html, Css, JavaScript
Kick
  • 1. 기존 페이지 의 불필요한 요소들을 리뉴얼하여 사용자의 편의성을 중점으로 직관적인 디자인과 UI를 만들었습니다.
    pj2Kick1
  • 2. '개인예약'과 '단체예약'은 forEach함수를 활용해 Tab Menu 형식으로 만들었습니다. 진행순서는 Accordion 형식의 UI로 구성했습니다. 정보가 입력되지 않았을때는 다음 순서로 넘어가지 않게 하였습니다.
    pj2Kick2
퍼플독 리뉴얼
pj1 Mockup
Over View 모바일 위주로만 구성된 UI와 반응형이 적용되지 않은 기존의 퍼플독 페이지를 리뉴얼하여 웹 사용자의 접근성을 높혔습니다. 기획 / 디자인 (100%) / 구현 (100%)
Skill
  • Html, Css, JavaScript
Kick
  • 1. 기존 페이지 의 모바일 위주로 구성되어 있고 반응형이 적용되지 않은 UI를 리뉴얼 하였습니다. Swiper를 활용해 상단 배너와 상품리스트를 슬라이드로 구성했습니다.
    pj1Kick1
  • 2. 각 상품 레벨에 따른 구독 중단 패널티 금액을 배열에 넣고 해당하는 상품마다 패널티가 추가되는 비회원가가 나타나도록 하였습니다.
    pj1Kick2
  • 3. forEach함수를 활용해 Tab Menu 형식으로 만들었습니다.
    pj1Kick3