0%
00:00:00

동재의 포트폴리오 바로가기

#밥 값하는 프론트엔드 개발자 : 강동재

강동재
강동재
강동재
강동재
강동재
강동재
강동재
강동재
강동재
copyright© 2021 Kang dong jae. wedsite made by me.

about

I want to enjoy things and have fun and
live like every day is the last day

Kdong

식사는 하셨습니까?

밥 값하는 프론트 엔드 개발자 강동재 입니다.

항공 · 기계설계를 전공으로 공부하였고, 다양한 분야의 업무를 하며 나의 적성에 맞는 일을 찾고자 노력을 했습니다. 다니던 대학원을 휴학하고 국비지원학원에서 약 6개월간의 여정을 시작했습니다. 아직은 서툴고 부족하다는 점을 알고 있습니다. 하지만 반대로 생각하면 얼마나 더 성장할 수 있는 기회라고 생각합니다. “밥값하는 프론트 엔드 개발자 강동재” 는 항상 노력하며 열정적으로 공부하며 경험을 통해 성장하는 모습을 보여드리겠습니다.

#trendly #modesty #patience
#instagram #youtube #kakao
LEARN MORE
WANT TO SEE HOW
ME HELP SITES? 강동재의 다양한 사이트를 소개합니다.
WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD
WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD
WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD WEB STANDARD
웹 표준 사이트

웹표준 사이트 제작 웹 표준 지침서를 준수하고 크로스브라우징 작업을 한 사이트 입니다. 모든 사용자가 이용에 불편이 없도록 대체 텍스트로 웹 접근성 또한 고려하였습니다. 슬라이드, 탭, 메뉴, 팝업, 동영상 기능을 작업하였으며, 동적인 부분을 더하기 위해 slick.js 등과 같은 플러그인을 이용하여 배너와 갤러리에 효과를 주었습니다. 크로스 브라우징은 익스플로러 8버전부터 지원합니다.

GITHUB 사이트 보기
RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
반응형 사이트

반응형 사이트 제작 미디어 쿼리를 이용하여 디바이스 종류에 따라 유연하게 보여지는 반응형 작업을 진행한 사이트입니다. 웹 표준과 동일한 슬라이드, 탭, 메뉴, 팝업, 동영상 기능들을 추가해서 작업을 진행하였습니다. 크로스 브라우징은 익스플로러 8버전부터 지원합니다.

GITHUB 사이트 보기
MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX
MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX
MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX MEGABOX
메가박스 사이트

기업형 사이트 제작 미디어 쿼리를 이용하여 디바이스 종류에 따라 유연하게 보여지는 반응형 작업을 진행한 메가박스 사이트입니다. 자바스크립트 라이브러리인 jQuery를 이용했고, 이미지 슬라이드를 구현하기 위해 Swipper를 사용하여 구현하였습니다.

GITHUB 사이트 보기
TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT
TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT
TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECTTEAM PROJECT TEAM PROJECT TEAM PROJECT TEAM PROJECT
팀 프로젝트 사이트

팀 프로젝트 사이트 제작 조장을 맡으며 전체적인 사이트의 코드 및 구성을 맡아서 작업했습니다. 또한 PHP와 MYSQL을 활용하여 데이터베이스를 활용하여 로그인, 회원가입 기능을 구현하였습니다. 커뮤니티와 레시피 글을 작성할 수 있게 했으며, 카카오 지도 api를 사용하여 지도 검색 및 등록된 맛집으로 이동할 수 있게 작업을 진행했습니다.

GITHUB 사이트 보기
PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP
PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP
PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP
php 사이트

PHP 사이트 제작 PHP를 활용하여 만든 포트폴리오 사이트입니다. MYSQL과 데이터베이스를 활용하여 완성하였고, 댓글을 작성하면 지정된 형태로 댓글을 표시해주고 데이터베이스에 저장될 수 있게 작업했습니다. 문의하기를 통해 Mail을 작성하여 보낼 수 있게 작업했습니다.

GITHUB 사이트 보기
REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT
REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT
REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT REACT
php 사이트

리액트 사이트 제작 리액트로 만든 포트폴리오 사이트입니다. 컴포넌트와 Props를 활용하여 사이트를 완성하였고, SCSS를 사용하여 스타일을 지정했습니다. Json 파일을 서버에서 받아와 API로 작업을 진행했습니다.

GITHUB 사이트 보기
VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE
VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE
VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE VUE
vue 사이트

뷰 사이트 제작 뷰로 만든 포트폴리오 사이트입니다. 컴포넌트와 Props를 활용하여 사이트를 완성하였고, SCSS를 사용하여 스타일을 지정했습니다. Json 파일을 서버에서 받아와 API로 작업을 진행했습니다.

GITHUB 사이트 보기
MAKE
 CREATIVE SCRIPT EFECTS. 강동재의 다양한 스크립트를 소개합니다.
MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE
MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE
MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE MOUSE
마우스 이펙트

MOUSE EFFECT 마우스를 활용한 스크립트 예제를 만들었습니다. 마우스를 움직이면 글씨가 마우스의 방향으로 이동되면서 반전되는 효과를 보여줍니다.

JAVASCRIPT JQUERY
SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER
SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER
SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER SLIDER
슬라이더 이펙트

SLIDER EFFECT 자바스크립트와 제이쿼리를 활용하여 슬라이더를 구현해봤습니다. 자동으로 슬라이드 되거나, 연속으로 슬라이더 되거나 버튼 및 닷 버튼을 구현해봤습니다.

JAVASCRIPT JQUERY
PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX
PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX
PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX
패럴렉스 이펙트

PARALLAX EFFECT 자바스크립트와 제이쿼리를 이용하여 script effect를 만들어 봤습니다. 스크롤시 메뉴가 사라졌다 나타나거나 리빌효과, 이질감 효과 등 다양한 Effect를 구현했습니다.

JAVASCRIPT JQUERY
GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME
GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME
GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME GAME
게임 이펙트

GAME EFFECT 자바스크립트와 제이쿼리를 이용하여 만든 GAME EFFECT입니다. 게임이 시작되면 배경음악이 나오고 정답과 오답시 다른 음악 나오며, 점수와 시간초도 작업했습니다.

JAVASCRIPT JQUERY
INTRODUCE
MY
 STUDY 강동재의 공부한 내용을 소개합니다.

리액트 Youtube

Youtube API를 활용하여 리액트 사이트를 만들었습니다. component와 props를 활용하였고, search를 통해 원하는 영상을 검색할 수 있습니다. 해당 썸네일을 클릭하면 해당 페이지로 이동될 수 있게 했습니다.

리액트 유뷰트

리액트 포트폴리오

json 파일을 직접 만들어 외부에서 불러와서 작업했습니다. javascript-fetch를 사용하여 작업하였으며, scss도 사용했습니다.

리액트 포트폴리오

뷰 Youtube

기존에 만든 리액트 사이트를 뷰로 전환하여 만들었습니다.

뷰 유뷰트

뷰 포트폴리오

기존에 만든 리액트 사이트를 뷰로 전환하여 만들었습니다.

뷰 포트폴리오

팀프로젝트 지도

카카오 지도 API를 활용하여 원하는 장소를 검색할 수 있으며, 사이트에 미리 등록된 장소들을 클릭하여 지도가 움직일 수 있게 작업했습니다.

맵 API

팀프로젝트 커뮤니티

PHP와 MySQL을 이용하여 데이터베이스 작업을 했습니다. 글쓰기를 눌러 글을 작성하면 데이터베이스에 저장이 되고, 해당되는 데이터를 가져와 보여줍니다.

팀프로젝트 커뮤니티

PHP 댓글

PHP와 MySQL을 이용하여 데이터베이스 작업을 했습니다. 댓글쓰기를 눌러 댓글을 작성하면 데이터베이스에 저장이 되고, 해당되는 데이터를 가져와 보여줍니다.

PHP 댓글쓰기

PHP 메일

PHP와 MailTo를 이용하여 작업했습니다. 보내는 이메일을 적고 내용을 입력하면 지정된 메일로 문의할 수 있게 작업했습니다.

PHP 메일문의

패럴렉스 가로모드

기존 세로로 스크롤되던 페이지를 가로로 스크롤 할 수 있게 작업했습니다. 가로로 스크롤 될때 하단에 강아지 이미지를 이미지 스플라이트를 사용하여 움직이게 작업했습니다.

패럴렉스 도그

뷰 무비검색

영화 API를 활용하여 Top10, 급상승 인기 영화, 마블 영화 등 영화 소개 및 검색할 수 있는 사이트를 뷰를 활용하여 제작하였습니다.

스크롤러 활용