portfolio

FRONTAND

DEVELOPER

FRONTAND DEVELOPER

이름KIMDAEWON

지난 6개월동안 여러가지 프로그램을 사용해서 코딩을 배웠습니다 처음에는 처음 접해본 분야이기에 어색하게 느껴졌지만 HTML, CSS에 익숙해져가면서 점차 코딩에 재미를 붙이게 되었습니다 스크립트와 PHP, REACT, VUE를 배우게 되면서 위기가 찾아왔었지만 매일 새벽까지 배운것을 정리하며 그날 배운 내용은 그날 어떻게든 익히려고 노력했습니다.

'배움에는 끝이 없다' 라는 말이 있듯이 바다의 깊이와 같이 100% 라는 완벽한 수치는 없다고 생각합니다 지금은 다소 부족할지라도, 100%에 근접할 수 있도록 틈틈이 비는 시간을 이용해 배웠던것도 복습하고 새로운 것들을 공부하며 차근차근 실력을 쌓아 성장하여 저만의 전문성과 경쟁력을 갖추겠습니다.

작업물Work

WEB

standard

웹표준을 준수해서 사이트를 코딩 했습니다. 시맨틱태그, alt태그 ,blind, ir, 스킵메뉴 등을 사용했으며, 가장 기본적인 형태의 사이트로 웹표준 문법을 공부하기 위해서 사이트를 제작하게 되었습니다.

code

view

WEB

responsive

웹표준을 준수해서가며 반응형 사이트를 코딩 했습니다. 초기에 만든 가장 기본적인 형태의 반응형 사이트로 em, vw, vh, %를 처음부터 사용하기보다 미디어 쿼리를 사용해서 반응형을 잡아줬습니다 반응형에 대한 지식을 얻고 실전에서 활용해보기 위해서 사이트를 제작하게 되었습니다.

code

view

REACT

site coding

가장 기본적인 형태의 react API 사이트로 react 문법과 API 기초를 공부하기 위해서 사이트를 제작하게 되었습니다 about, reference, youtube, moive, unsplash 페이지로 구성되어 있으며 fetch 방식으로 api를 불러와 swiper를 이용해 각각 다른 종류의 슬라이드를 만들어 표현했습니다.

code

view

Youtube

clone coding

youtube를 clone coding한 사이트로 API에 대해 좀 더 심도있게 공부하기 위해서 사이트를 제작하게 되었습니다 즐겨보는 유튜버를 사이드 메뉴바로 배치해서 클릭시 관련 동영상을 Rapid API를 사용해서 axios방식으로 불러오게 구현했습니다.

code

view

VUE

site coding

가장 기본적인 형태의 vue API 사이트로 vue 문법과 API 기초를 공부하기 위해서 사이트를 제작하게 되었습니다 about, reference, youtube, moive, unsplash 페이지로 구성되어 있으며 fetch 방식으로 api를 불러와 swiper를 이용해 각각 다른 종류의 슬라이드를 만들어 표현했습니다.

code

view

PHP

clone coding

가장 기본적인 형태의 php 블로그 사이트로 php 문법과 기초를 공부하기 위해서 사이트를 제작하게 되었습니다 블로그, 게시판, 회원가입, 로그인 페이지로 구성되어 있습니다.

code

view

SCRIPT

JAVASCRIPT를 통해 만든 EFFECT 효과를 소개합니다. GAME , PARALLAX, MOUSE, SLIDER, SEARCH, QUIZ 등 다양한 이펙트 효과를 학습했습니다.

GAME
PARALLAX
MOUSE

SLIDER
SEARCH
QUIZ

GAME

EFFECT

그 동안 배운 HTML, CSS, JAVASCRIPT 를 모두 종합해서 만든 결정체인 GAME EFFECT 입니다. MUSIC BOX, SEARCH GAME, PAIR GAME, TETRIS GAME 등을 만들었으며 view 버튼을 누르시면 확인해 보실 수 있습니다.

code

view

PARALLAX

EFFECT

스크롤의 이동에 따라 메뉴 이동, 사이드 메뉴, 숨김 메뉴, 나타나기 효과 ,이질감 효과, 리빌 효과를 학습했습니다. GSAP를 사용한 파트는 일반적으로 작업한 것 보다 훨씬 smooth합니다. view 버튼을 누르시면 확인해 보실 수 있습니다.

code

view

MOUSE

EFFECT

마우스의 이동에 따라 조명효과 ,이미지 효과, 기울기 효과, 텍스트 효과 등을 학습 했습니다. 마우스 효과 역시 GSAP를 사용해서 작업한 파트는 일반적으로 작업한 것 보다 훨씬 smooth 합니다. view 버튼을 누르시면 확인해 보실 수 있습니다.

code

view

SLIDER

EFFECT

swiper를 이용하면 편리하지만 원리를 파악하기 위해 이미지가 변화하는 트렌지션 효과와 무한이동 플레이, 버튼, 닷 메뉴, 정지, 재생 버튼을 통한 슬라이딩 이미지를 컨트롤 하는 방법을 학습 했습니다. view 버튼을 누르시면 확인해 보실 수 있습니다.

code

view

SEARCH

EFFECT

검색과 클릭을 통해 그 동안 배운 CSS 속성들을 나타나고 정렬시켜주는 효과를 학습 했습니다. indexOf, search, charAt, find, filter, sort, reverse 등 다양한 메서드를 사용했습니다. view 버튼을 누르시면 확인해 보실 수 있습니다.

code

view

QUIZ

EFFECT

웹 디자인 기능사 필기도 공부하고 퀴즈형식의 스크립트도 만들어보는 일석이조의 느낌으로 퀴즈 이펙트에 대해 학습했습니다. 주관식, 주관식(여러문제), 객관식, 객관식(여러문제), 객관식(슬라이드형) 등 다양한 유형으로 퀴즈를 만들어봤습니다. view 버튼을 누르시면 확인해 보실 수 있습니다.

code

view

TEAM

PROJECT

PHP

PROJECT

첫 번째 팀프로젝트 꾸다 사이트 입니다. 스티커와 다이어리에 대한 사이트이며, 3명이 한조가 되어 php를 써서 만들었습니다. 로그인, 회원가입, 게시판, 마이페이지 외에 추가적으로 다이어리 만들기와 꾸미기 컨텐츠가 있습니다.

code

view

REACT

PROJECT

두 번째 팀프로젝트 요리 레시피 API 사이트 입니다. API를 이용해서 종류, 랭킹 유튜브 등을 불러오는 사이트이며, 2명이 한조가 되어 react를 써서 만들었습니다. 구조를 react로 옮겨놓은 상태이며, rapid API를 써서 슬라이드 형식으로 불러오려고 공부하고 있습니다.

code

view