https://github.com/toa-web-dev/toa-web-dev
https://github.com/toa-web-dev/toa-web-dev
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/toa-web-dev/toa-web-dev
- Owner: toa-web-dev
- Created: 2024-02-15T08:03:10.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-14T10:23:01.000Z (over 1 year ago)
- Last Synced: 2024-05-14T11:36:01.632Z (over 1 year ago)
- Size: 106 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 기술 스택
### Javascript
- DOM 요소를 CRUD하고 적절한 이벤트를 등록/해제 할 수 있습니다.
- 배열과 객체의 메서드 사용에 능숙하며 필요한 데이터를 가공하여 사용 할 수 있습니다.
- 비동기 처리로 HTTP response를 처리하고 데이터를 추출해 웹페이지에 적용 할 수 있습니다.
- 클래스와 프로토타입의 차이를 이해하고 사용 할 수 있습니다.
### HTML5, CSS3
- 시멘틱태그를 사용하고 웹표준을 준수하려 노력합니다.
- canvas와 SVG 요소를 활용할 수 있으며, 라이브러리 없이 transition이나 Keyframe animation 작업을 할 수 있습니다. (슬라이드 캐러셀, 패럴랙스 스크롤)
- CSS3의 Media Queries, 상대단위 사용, ![]()
태그의 srcset 속성을 숙지하고 있으며 반응형 UI를 만들 수 있습니다.
- Flexbox, Grid Layout를 사용해 요소의 배치 및 정렬할 수 있습니다.
- Transitions 및 Animations으로 요소의 상태 변화를 부드럽게 처리하고 애니메이션을 만들 수 있습니다.
- Custom Properties (Variables)로 사용자 정의 변수를 사용하여 CSS에서 값을 재사용하고 관리합니다.
### NextJS
- Hydration을 이해하고 SSR과 SSG를 구현 할 수 있습니다.
- 세그먼트 단위의 URL Path 구조를 이해하고 동적으로 세그먼트 값을 사용하여 라우팅을 할 수 있습니다.
### React
- React hooks을 사용 할 수 있으며 custom hook으로 무한 스크롤 기능을 모듈화해 사용한 경험이 있습니다.
- Redux, Recoil을 이용한 전역 상태를 관리 할 수 있습니다.
- 함수형 컴포넌트에 능숙합니다.
# 포트폴리오 링크
각 프로젝트의 제목을 클릭해 해당 프로젝트의 **Readme**를 확인 할 수 있습니다 _:D_
## 1. ONSPLASH (무한스크롤 이미지피드 사이트)
## [배포 주소(https://on-splash.vercel.app/)](https://on-splash.vercel.app/)
#### [저장소 repository](https://github.com/toa-web-dev/OnSplash)
#### 이미지 API를 활용한 이미지 피드 웹 프로젝트입니다.
#### vercel을 사용해 CI/CD 파이프라인을 구축하였습니다.
- 비동기 처리로 서버에서 응답 받은 JSON 데이터를 가공
- Intersection Observer API로 무한 스크롤링
- 이미지 로딩 시 스켈레톤 로더 구현
- 뷰포트 너비에 따라 적응형 UI 구현
## 2. Photoswipe
**틴더라이크 이미지 스와이프 프로젝트**
[lorem picsum](https://picsum.photos/)와 API 통신하며, 사진이 담긴 카드를 넘기며 좋고 싫음을 나타낼 수 있는 프로젝트입니다.
## [배포 주소(https://photoswipe-agl3a4eeo-toas-projects.vercel.app/)](https://photoswipe-agl3a4eeo-toas-projects.vercel.app/)
#### [저장소 repository](https://github.com/toa-web-dev/Photoswipe)
## 3. Graphify_dev_note (블로깅 프로젝트)
> **문서 관계 시각화 프로젝트**
>
> 개발 학습을 위해 블로깅하는 문서를 네트워크 그래프로 **시각화**하여 개념을 정리하고 다른 내용과의 연관성을 쉽게 확인 할 수 있는 프로젝트입니다.
## [배포 주소(https://graphify-dev-note.vercel.app/)](https://graphify-dev-note.vercel.app/)
#### [저장소 repository](https://github.com/toa-web-dev/Graphify_dev_note)
### 애용하는 레퍼런스
- 코어 자바스크립트 도서
- [MDN web Docs](https://developer.mozilla.org/ko/)
- [자바스크립트 기본](https://ko.javascript.info/first-steps)