- Hydration을 이해하고 SSR과 SSG를 구현 할 수 있습니다.
- 세그먼트 단위의 URL Path 구조를 이해하고 동적으로 세그먼트 값을 사용하여 라우팅을 할 수 있습니다.
- React hooks을 사용 할 수 있으며 custom hook으로 무한 스크롤 기능을 모듈화해 사용한 경험이 있습니다.
- Redux, Recoil을 이용한 전역 상태를 관리 할 수 있습니다.
- 함수형 컴포넌트에 능숙합니다.
- DOM 요소의 CRUD를 하고 이벤트리스너를 적용하는데 능숙합니다.
- 클래스와 프로토타입의 차이를 이해하고 사용 할 수 있습니다.
- 배열과 객체의 메서드 사용에 능숙하며 필요한 데이터를 가공하여 사용 할 수 있습니다.
- 시멘틱태그를 사용하고 웹표준을 준수하려 노력합니다.
- canvas와 SVG 요소를 활용할 수 있으며, 라이브러리 없이 transition이나 Keyframe animation 작업을 할 수 있습니다. (슬라이드 캐러셀, 패럴랙스 스크롤)
- CSS3의 Media Queries, 상대단위 사용,
태그의 srcset 속성을 숙지하고 있으며 반응형 UI를 만들 수 있습니다.
- Flexbox, Grid Layout를 사용해 요소의 배치 및 정렬할 수 있습니다.
- Transitions 및 Animations으로 요소의 상태 변화를 부드럽게 처리하고 애니메이션을 만들 수 있습니다.
- Custom Properties (Variables)로 사용자 정의 변수를 사용하여 CSS에서 값을 재사용하고 관리합니다.
각 프로젝트의 제목을 클릭해 해당 프로젝트의 Readme를 확인 할 수 있습니다 :D
문서 관계 시각화 프로젝트
개발 학습을 위해 블로깅하는 문서를 네트워크 그래프로 시각화하여 개념을 정리하고 다른 내용과의 연관성을 쉽게 확인 할 수 있는 프로젝트입니다.
![](https://private-user-images.githubusercontent.com/85207564/318174871-9157830b-1a96-484b-8347-e6f4b21445e7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzQ3MTIsIm5iZiI6MTcyMTI3NDQxMiwicGF0aCI6Ii84NTIwNzU2NC8zMTgxNzQ4NzEtOTE1NzgzMGItMWE5Ni00ODRiLTgzNDctZTZmNGIyMTQ0NWU3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDAzNDY1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiODU2ODNhZWQyN2JhMjdmOGRiNDRlN2NlM2Y0ZWE5ZjE5NGVjYWVkYzIyZjkxYTg2MjNhMDVkNjc2Mzk0ZGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.mTQr0kIepLFnO4mvWL2r58K8di2fdRyl2Qjen1Zp-Sw)
2. Photoswipe
틴더라이크 이미지 스와이프 프로젝트
lorem picsum와 API 통신하며, 사진이 담긴 카드를 넘기며 좋고 싫음을 나타낼 수 있는 프로젝트입니다.
![](https://private-user-images.githubusercontent.com/85207564/315045822-0800c402-fa58-46ee-a2da-0c15cf62c93e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzQ3MTIsIm5iZiI6MTcyMTI3NDQxMiwicGF0aCI6Ii84NTIwNzU2NC8zMTUwNDU4MjItMDgwMGM0MDItZmE1OC00NmVlLWEyZGEtMGMxNWNmNjJjOTNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDAzNDY1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA3OWQ1MGQ3NzY1N2FhNGRhZGQyY2M4NjBlMmVhYTY5ZWY3M2NmOTZjMjk4MDRlMzljZThhZGI3ODM2NTg5MDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Tni9G2Pw_t4qdtXBzr0HLo7l_r33gU_IIKmEnxayMXo)
무한스크롤 이미지 피드가 있는 여행지 사진 공유 웹사이트
팀 프로젝트로 진행한 여행지 사진을 공유하는 웹 서비스를 개선한
회고 프로젝트
입니다.