여다슬 포트폴리오

DASEUL’S PORTFOLIO

PORTFOLIO

BEST

DEVELOPER

Let’s introduce

Yeo Da Seul’s

Works of Portfolio

실패를 학습으로,

부족함을 성장의 밑거름으로

늘 배우고, 늘 성장하자!
안녕하세요, 배우는 것을 좋아하고 끊임없이 성장하는 신입 개발자 여다슬입니다.
도전의 연속인 삶에서 코딩이란 저에게 큰 의미로 와닿았습니다. 텅 비었던 화면을 코드로 채워
감으로서 뿌듯함과 흥미를 느꼈습니다. 그러한 경험 덕분에 멈추지 않고 꾸준히 공부하고 발전할
수 있었습니다. 앞으로도 트렌드에 맞춰 성장하는 개발자가 되겠습니다.

JAVASCRIPT ⌂ REACT ⌂ VUE ⌂ NEXT.JS ⌂ JAVASCRIPT ⌂ REACT ⌂ VUE ⌂ NEXT.JS ⌂ JAVASCRIPT ⌂ REACT ⌂ VUE ⌂ NEXT.JS ⌂ JAVASCRIPT ⌂ REACT ⌂ VUE ⌂ NEXT.JS ⌂ JAVASCRIPT ⌂ REACT ⌂ VUE ⌂ NEXT.JS ⌂ JAVASCRIPT ⌂ REACT ⌂ VUE ⌂ NEXT.JS ⌂

NEXT.JS ⌂ VUE ⌂ REACT ⌂ JAVASCRIPT ⌂ NEXT.JS ⌂ VUE ⌂ REACT ⌂ JAVASCRIPT ⌂ NEXT.JS ⌂ VUE ⌂ REACT ⌂ JAVASCRIPT ⌂ NEXT.JS ⌂ VUE ⌂ REACT ⌂ JAVASCRIPT ⌂ NEXT.JS ⌂ VUE ⌂ REACT ⌂ JAVASCRIPT ⌂ NEXT.JS ⌂ VUE ⌂ REACT ⌂ JAVASCRIPT ⌂

What Can I do?

My
Skills

HTML

웹 페이지를 구축하고 콘텐츠를 구성하는 데에 능숙합니다. HTML 태그와 요소를 활용하여 웹 페이지의 구조와 레이아웃을 설계하며, 시맨틱 태그를 적절히 사용하여 의미론적인 마크업을 구현합니다.

script

웹 페이지에 동적인 기능과 상호작용성을 부여하는 데에 능숙합니다. 자바스크립트를 사용하여 웹 페이지의 동적인 동작을 제어하고, 사용자와의 상호작용을 강화시키는 다양한 기능을 구현할 수 있습니다.

react

리액트를 사용하여 동적이고 반응형인 사용자 인터페이스를 구축하는 데에 능숙합니다. 리액트의 기본 개념과 원리를 이해하고 있으며, 컴포넌트 기반 아키텍처를 활용하여 재사용 가능하고 모듈화된 UI 요소를 개발할 수 있습니다.

next.js

Next.js를 사용하여 더 나은 웹 사이트를 개발하는 데에 능숙합니다. 또한 이미지 최적화, 코드 분할, 프리페칭 등 다양한 최적화 기능을 활용하여 개발할 수 있습니다.

Vue

Vue.js로 현대적이고 반응형인 웹 애플리케이션을 구축하는 데에 전문성을 가지고 있습니다. Vue.js는 직관적인 문법과 유연한 데이터 바인딩을 통해 개발자가 코드를 간결하게 작성하고 유지보수하기 쉽게 만듭니다.

PHP

웹 개발을 위한 강력하고 유연한 도구를 제공하는 PHP 언어를 다루고 있습니다. PHP는 사용자 인터페이스(UI) 개발, 데이터 처리, 파일 조작 등 다양한 작업에 적합한 언어로, 웹 애플리케이션의 기능과 퍼포먼스를 향상시킬 수 있습니다.

SITE CODING

웹 표준을 준수하며 다양한 방법으로 제작한 사이트입니다. 실제 사이트와 코드를 확인해보세요!

웹표준 사이트

사이트 보기

코드 보기

첫 번째로 만든 웹표준 사이트입니다. 커스텀 향수에 대한 설명과 향료에 대한 설명이 주로 이룹니다.사이트의 기본이 되는 슬라이드 유형, 배너 유형, 이미지 텍스트 유형, 카드 유형, 배너 유형, 텍스트 유형으로 구성하였습니다. swiper를 이용하여 이미지 슬라이드를 구현했으며 미디어 쿼리를 활용하여 반응형 작업까지 완료하였습니다.

PHP 블로그

사이트 보기

코드 보기

php를 처음 접하면서 만든 블로그 컨셉 사이트입니다. MYSQL을 배우면서 데이터를 전달하고 출력하는 과정을 알아가는 시간이였습니다. 로그인, 회원가입, 게시판, 블로그 등등 웹사이트의 기본이 되는 기능을 구현했습니다. 데이터 전달 방식과, 회원가입에서의 유효성 검사가 가장 어려웠다고 느꼈습니다.

팀프로젝트 사이트

사이트 보기

코드 보기

php를 기반으로 진행한 협력 프로젝트입니다. 학생을 비롯해 독해력을 키우고 싶은 사람들을 위한 문학/비문학 문제 풀이 사이트 입니다. 팀장으로서 전반적인 사이트 기획과 디자인, 마크업, 스크립트를 담당했으며, 리더쉽이나 분업에 대해 많이 배운 계기가 되었던 프로젝트였습니다.

리액트 사이트

사이트 보기

코드 보기

리액트를 처음 배우며 만든 사이트입니다. 근•현대 미술을 주제로 하였고, 현대 미술의 대표 화가, 유명 작품, 관련 유튜브 영상 또는 영화를 소개하는 사이트입니다. 컴포넌트를 하는 방법과, props를 이용해 속성값을 전달해주는 방법, 리액트 훅을 이용해 api를 불러오는 방법 등등 공부한 것을 열심히 녹여내어 작업하였습니다.

이마트 사이트

사이트 보기

코드 보기

클론 코딩으로 만든 이마트24 공식 홈페이지입니다. swiper와 gsap, jQuery등을 이용해 작업하였습니다. 클론 코딩을 하며 웹 페이지를 구축하는 과정에서 다양한 문제들을 마주하고 해결해야하는 기회를 접했습니다.

뷰 사이트

사이트 보기

코드 보기

Vue.js를 사용하여 만든 사이트입니다. 리액트와 동일하게 컴포넌트로 구성하였고, 다양한 Api를 활용하여 유튜브, 이미지, 영화를 구현하였습니다. 리액트와는 비슷하지만 데이터를 전달하는 방법, 쓰는 문법이 달라 어려웠지만 조금씩 익혀가며 적용시켰습니다.

넥스트 사이트

사이트 보기

코드 보기

Next.js를 활용하여 만든 사이트입니다. 익숙치 않는 프레임워크라 문법을 익히는 데에 어려웠지만, react와 동일한 점이 많아서 금방 적응할 수 있었습니다.

자동차 카탈로그 사이트

사이트 보기

코드 보기

자동차 API를 활용해 제작한 사이트입니다. Next.js로 제작하였으며 TypeScript, Tailwind.css, Post.css등등 다양한 스택을 포함하고 있습니다. 고급 검색 기능 구현과 필터링 기능 생성, 메타데이터 및 SEO 최적화 등등 여러가지 기능을 구현하여 만든 사이트입니다.

포켓몬 도감 사이트

사이트 보기

코드 보기

포켓몬 API를 활용해 제작한 사이트입니다. React로 제작하였으며 TypeScript, scss, redex등등 다양한 스택을 포함하고 있으며. firebase DB를 활용하여 사용자의 정보를 저장하고, Google을 연동하여 로그인을 구현하였습니다.

스터디 사이트

사이트 보기

코드 보기

수업 시간에 공부한 것을 따로 정리해 모아놓은 사이트입니다. 자바스크립트와 예제부터 MySQL, 웹디자인 기능사, 리액트 기본 개념, 작업한 사이트를 기록하였습니다. 매일 티스토리 블로그와 병행하여 꾸준하게 정리했습니다.

SCRIPT EFFECT

자바스크립트로 제작한 다양한 이펙트들을 소개합니다. 실제 사이트와 코드를 확인해보세요!

JAVASCRIPT

EFFECT

PARALLAX

QUIZ

GAME

MOUSE

QUIZ

GAME

PARALLAX

MOUSE

GAME

Hover The Card!

GAME

EFFECT

GAME

다양한 요소들이 있는 게임 이펙트 입니다. 뮤직 플레이어, 테트리스 게임, 메모리 게임, 서치 게임 등등 자바스크립트를 활용한 게임들을 제작하였습니다. 바탕화면의 있는 폴더들을 클릭하면 해당 게임이 열립니다.

여러 가지 스크립트를 활용하느라 어려웠지만, 차근차근 하나씩 이해하며 배워가는 과정이 있었기에 만족스러운 결과물이 나왔던 것 같습니다.

사이트보기 코드 보기

Click Me!

PARALLAX

EFFECT

PARALLAX

자바스크립트와 GSAP를 활용해 만든 패럴랙스 이펙트입니다. scrollTop값을 구해 각각구역의 위치를 알아내고, 그에 맞춰 이미지와 텍스트에 애니메이션을 입혔습니다. 또, GSAP를 이용해 포트폴리오 사이트에 들어가면 좋은 효과들을 작업했습니다. GSAP의 ScrollTrigger를 통해 가로 모드나 리빌 효과, 핀 애니메이션 등등 여러 가지 애니메이션들을 배운 시간이였습니다.

사이트보기 코드 보기

Click Me!

MOUSE

EFFECT

MOUSE

자바스크립트와 CSS를 활용해 마우스 이펙트를 만들어보았습니다. 마우스를 특정 요소에 오버했을 때 다양한 효과들과 GSAP를 이용해 부드러운 애니메이션 효과를 작업했습니다.

이때 GSAP를 거의 처음으로 접하였는데, 자바스크립트와 CSS로 짜던 애니메이션을 GSAP로 바꾸니 간편하고, 더욱 자연스러운 움직임이 느껴져 신기했던 기억이 납니다!

사이트보기 코드 보기

Click Me!

QUIZ

EFFECT

QUIZ

자바스크립트를 활용하여 퀴즈 이펙트를 제작하였습니다. 주관식, 객관식, CBT 유형 등 여러 가지 유형들이 있고 퀴즈 문제는 자격증 공부를 준비하고 있던 웹디자인 기능사, 정보처리 기능사의 필기 문제들을 기반으로 넣었습니다.

특히 CBT 유형은 json으로 데이터를 저장해 fetch를 이용해 데이터를 받아오는 것이 어려웠던 기억이 납니다!

사이트보기 코드 보기

Click Me!

SLIDE

EFFECT

SLIDE

자바스크립트, 제이쿼리를 활용해 만든 슬라이드 이펙트입니다. 기본 페이드 효과와 좌측으로 이동하는 유형, 연속으로 이동하는 유형, 썸네일, 버튼과 닷메뉴가 있는 유형 등으로 작업하였습니다.

웹디자인 실기 중 이미지 슬라이드를 구현하는 데에도 많은 도움이 됐습니다. 나아가 swiper 작업을 할 수 있었습니다!

사이트보기 코드 보기

Click Me!

SEARCH

EFFECT

SEARCH

자바스크립트를 활용하여 제작한 서치 이펙트입니다. CSS 속성들을 검색해볼 수 있도록 CSS 사전을 만들었고, indexOf()/search() 메서드를 이용하여 스크립트를 짰습니다.

직접 CSS 속성들을 조사해 내용을 채워넣어 CSS 많은 속성들에 대해서도 공부한 시간이였습니다.

사이트보기 코드 보기

Click Me!