45일차 - 서드파티 패키지 기초
서드파티(Third-party) 패키지에 대하여
코딩을 할 때 수많은 스타일과 기능들을 직접 구현하다보면 언제 다 만들지, 한번에 구현이 잘 될지 등등 걱정이 될 때가 많다. 그럴 때마다 이미 만들어진 툴이 있다면 좋겠다라는 생각을 하게 되는데, 이 경우 사용하는 것이 서드파티 패키지이다.
서드파티 패키지는 간단한 코드 패키지나 코드 파일을 뜻하며, 다른 사람이 작성하고 전세계 웹을 통해 배포되서 모든 사람들이 자신의 프로젝트에 이용할 수 있다. 그래서 이 패키지를 통해 미리 구축된 기능 또는 미리 구축된 스타일을 활용할 수 있다.
서드파티 패키지에는 CSS용 패키지로 부트스트랩, Material UI, Tailwind CSS가 있다.
자바스크립트용 패키지로 image carousel, Scrollspy, Parallax effect 등이 있다.
위 이미지는 부트스트랩 홈페이지(https://getbootstrap.com/)이다. 이곳에서 자주 사용하는 많은 부트스트랩의 스타일, 기능들을 보면서 직접 사용해볼 수 있다.
이러한 서드파티 패키지를 사용하는 것은 보다 적은 코드를 사용할 수 있다는 장점이 있다. 또, 개발자는 기존에 정의된 것을 사용할 수 있기 때문에 최종 결과를 더 빨리 얻을 수 있다.
하지만 개발자가 해석과 정확한 동작 제어를 하기가 어려워서 제공되는 기본 구성옵션을 받아들일 수밖에 없는 단점도 있다.
위 이미지는 오늘 수업을 하며 만들어본 문서인데, 모두 서드파티패키지를 이용해서 만들었다. 부트스트랩 홈페이지에서 예시를 가져와서 이미지만 저번에 사용했던 이미지를 불러오고, 수업을 진행하며 서드파티 패키지의 기능을 이해하는 데에 중점을 뒀다.
또, 위 이미지의 사진은 원래 문서를 가득 채울정도로 컸지만, 직접 CSS 코드로 줄여보았다. 이처럼, 서드파티 패키지를 사용한다고 해서 반드시 패키지만 써야하는 것은 아니며, 직접 파일을 만들어 다듬을 수 있다.
자바스크립트 용도 중 image carousel은 다른 여러 개의 이미지를 순환할 수 있는 슬라이드 쇼이다.
위 이미지는 아까 경복궁 사진이 있던 곳인데, 마우스를 올리면 화살표와 바(_)가 나타나게 되고, 화살표를 누르면 다음 이미지로 이동하는 기능을 가지고 있다. 위 이미지들은 순환기능도 포함하고 있다.
HTML의 aria- 속성에 대하여
aria- 속성은 오늘 부트스트랩 코드를 보면서 간단한 설명을 들은 속성인데, MDN을 참고하여 좀 더 덧붙여보면, 접근가능한 리치 인터넷 어플리케이션(ARIA, Accessible Rich Internet Applications)을 뜻하며, 장애를 가진 사용자가 웹 콘텐츠와 자바스크립트를 이용하여 개발한 웹 어플리케이션을 이용할 때 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다.
이 aria는 HTML을 보충하는 보조 기술에 대한 추가 속성이며, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공해준다.
(참고: https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA)
