2023 Baseline된 새로운 Web 기능
•0 j'aime•33 vues
Signaler
Partager
Télécharger pour lire hors ligne
Kitworks Team Study
![[KGIT_EWD]class03 0322](https://cdn.slidesharecdn.com/ss_thumbnails/ewdclass030322-120322061544-phpapp01-thumbnail.jpg?width=384&fit=bounds)
Contenu connexe
Similaire à 2023 Baseline된 새로운 Web 기능
Similaire à 2023 Baseline된 새로운 Web 기능(20)
![[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...](https://cdn.slidesharecdn.com/ss_thumbnails/i2max2015salesforcecloudsalesforcesalesfroce1platformd-day-150423023859-conversion-gate01-thumbnail.jpg?width=768&fit=bounds)
Plus de Wonjun Hwang
Plus de Wonjun Hwang(20)
2023 Baseline된 새로운 Web 기능
- 2. 목차 1. Web - dialog element - 개별 transform 속성 - 새로운 뷰포트 단위 - Deep Copy in JS 2. Javascript - with() - toSorted() - toReversed() - toSpliced()
- 3. Dialog Element Dialog Element는 팝업이나 모달을 생성해주는 요소 showModal 메소드를 통해 모달이나 팝업을 열 수 있음 Close 메소드를 통해 닫을 수 있음 Form 요소에 method=“dialog” 설정을 통해 dialog를 닫을 수 있음 Button 요소에는 formmethod=“dialog” 설정을 통해 dialog를 닫을 수 있음 ::backdrop 을 사용하여 배경의 스타일을 설정해줄 수 있음
- 4. Dialog Element • 네이티브 html 사용을 통해 좋은점 예를 들어, 포커스 매니지먼트, 탭 트랙킹, 쌓임맥락(stacking context) 작성할 코드도 줄고 관리할 코드도 줄어들 수 있음
- 5. Individual Transform Properties 애니메이션 설정할 때 transform를 통해 각각의 요소를 설정해주어야 했음 개별적으로 변환속성을 지정할 수 있음
- 8. New Viewport Units 모바일에서는 뷰포트 사이즈가 툴바, url바에 의해서 영향을 받음 예를 들어, 네비게이션 툴바, url 바 가 보일때도 있고 안보일때도 있음
- 9. New Viewport Units svh, lvh와 같이 새로운 단위을 통해 모바일 웹을 디자인 하는데 더 정확한 제어를 할 수 있음
- 10. Deep Copy in JS 객체의 깊은 복사를 할때에 주로 JSON.stringify와 JSON.parse를 사용했음 No more Stringify hack!
- 11. Deep Copy in JS structuredClone() 메소드를 사용하면 손쉽게 복사가 가능함
- 12. Javascript New Array Methods
- 13. Javascript New Array Methods - with()
- 14. Javascript New Array Methods
- 15. Javascript New Array Methods - toSorted()
- 16. Javascript New Array Methods
- 17. Javascript New Array Methods - toReversed()
- 18. Javascript New Array Methods
- 19. Javascript New Array Methods - toSpliced()
Notes de l'éditeur
- 이번 발표에서는 지난 5월에 구글io에서 발표된 웹 플렛폼에서 안정화된 새로운 기능 몇가지와 이번 년도에 추가된 새로운 자바스크립트 어레이 매소드를 소개하려고 합니다. Baseline이란 어떤 웹플랫폼 기능이 안정되게 사용할 수 있는지에 대한 명확한 정보를 주는 약간 기준선으로 이해하면 됩니다.
- 웹 파트에서는 최근 두 버전의 모든 주요 브라우저 엔진에 사용할 수 있는 몇가지 기능을 소개하려고 합니다. 구글io에서 소개한 바로는 웹 플렛폼은 나날이 발전하고 있는데 웹 브라우저 최신 버전 2개를 지원하는 정도면 새로운 웹 플랫폼 기능을 프로덕션에 사용할지 말지 결정하는데 좋은 기준이 될 것이라고 합니다. 자바스크립트 파트에서는 2023년에 추가된 새로운 자바스크립트 어레이 메소드 4가지를 소개해드리겠습니다.
- 기존 순수 html 요소를 사용해서 모달을 생성하려면 여러 방법이 있겠지만 이런식으로 생상할 수 있었습니다. 하지만 dialog 요소를 사용하면 브자우저의 지원을 받아 간단하게 생성할 수 있습니다. ::backdrop 수도 클라스를 사용해서 배경 스타일을 설정해 줄 수 있음.
- 예를 들어 포커스 매니지먼트, 탭 트랙킹, 쌓임맥락과 같은 기능이 웹 브라우저에서 브라우저상에서 지원이 되어 작성할 코드도 줄고, 관리할 코드도 줄어들 수 있습니다.
- 개별 transform 속성을 사용하면 변환 속성을 개별적으로 지정할 수 있습니다. 복잡한 키프레임 애니메이션을 작성할 때 유용하게 사용되어질 수 있다고 생각이 듭니다.
- 예를 들어 어떤 요소를 0에서 100%까지 전환하는 동안 중간에 요소를 회전시키고 서로 다른 키프레임 포인트에서 확장되는 애니메이션을 만든다고 생각해봅니다.
- 예전에는 각 키프레임 포인트에서 세가지 속성에 대한 값을 모두 설정해 줬어야합니다. 개별 transform 속성을 사용하면 각 속성에 대한 값만 작성하면 됩니다. 그래서 보시는 바와 같이 코드를 작성하고 관리하기가 훨신 쉬워진걸 볼 수 있습니다.
- 새로 추가된 뷰포트 단위는 모바일 웹사이트에서 유용합니다. 모바일에서는 뷰포트의 크기는 동적 툴바의 유무에 따라 달라집니다.
- 자바스크림트에서 깊은 복사를 할 수 있는것도 코드를 관리하고 작성하는데 더 쉽게해줍니다. 예전에는 주로 JSON.stringify와 JSON.parse를 사용해서 객체의 깊은 복사를 하였습니다. 원본 자바스크립트 객체를 가지고 json.stringify로 문자열로 만든 다음 json.parse를 통해 다시 자바스크립트 객체로 파싱합니다. 이러한 방법이 너무도 많이 사용되어져서 크롬 엔진인 v8에서 이 방법의 성능을 개선할 정도였다고 합니다.
- 하지만 structuredClone를 사용하면 이 방법이 필요하지 않습니다. structuredClone함수에 원본객체를 전달하기만 하면 깊이 복사가 된 객체가 생성됩니다.
- 새롭게 추가된 어레이 매소드를 소개해드리겠습니다. 저희는 immutable 메서드를 사용해서 상태 관리를 해주어야 사이드 이펙트가 없다는 말을 들어왔습니다. 그래서 보통 배열의 특정 인덱스의 요소를 변화하려고 하면 배열을 한번 복사해서 그 복사한 배열의 특정 인덱스의 요소를 변화해줍니다.
- 그런데 새로운 with 메소드를 사용하면 특정 인덱스의 요소를 손쉽게 바꿀 수 있고 새로운 배열로 반환해줍니다.
- 기존의 sort메소드도 마찬가지인데 새로운 배열을 sort메소드를 사용하여 반환받고 싶으면 우선 피플을 복사한뒤 sort 메소드를 사용해 새로운 배열로 반환받습니다
- 그러나 새로운 tosorted매소드를 사용하면 손쉽게 sorted된 매소드로 반환받을 수 있습니다. 이러한 새로운 매소드가 성능에도 조금이나마 도움이 됩니다. 왜냐하면 피플을 한번 카페할때 피플의 어레이의 루프를 한번 돌고 그 후에 sort 메소드로 루프를 한번더 돌게 되는데 tosorted 메소드는 한번만 루프를 돌고 새로운 배열을 반환해주기 때문입니다.
- toReversed메소드도 기존에는 한번 복사를 해주고 reverse메소드를 사용하여 새로운 배열을 만들어줍니다.