SlideShare a Scribd company logo

2023 Baseline된 새로운 Web 기능

Kitworks Team Study

1 of 19
Download to read offline
Baseline 새로운 기능
목차
1. Web
- dialog element
- 개별 transform 속성
- 새로운 뷰포트 단위
- Deep Copy in JS
2. Javascript
- with()
- toSorted()
- toReversed()
- toSpliced()
Dialog Element
Dialog Element는 팝업이나 모달을 생성해주는 요소
showModal 메소드를 통해 모달이나 팝업을 열 수 있음
Close 메소드를 통해 닫을 수 있음
Form 요소에 method=“dialog” 설정을 통해 dialog를 닫을 수 있음
Button 요소에는 formmethod=“dialog” 설정을 통해 dialog를 닫을 수 있음
::backdrop 을 사용하여 배경의 스타일을 설정해줄 수 있음
Dialog Element
• 네이티브 html 사용을 통해 좋은점
예를 들어, 포커스 매니지먼트, 탭 트랙킹,
쌓임맥락(stacking context)
작성할 코드도 줄고 관리할 코드도 줄어들 수
있음
Individual Transform Properties
애니메이션 설정할 때 transform를
통해
각각의 요소를 설정해주어야 했음
개별적으로 변환속성을 지정할 수
있음
Individual Transform Properties

Recommended

Java script 강의자료_ed13
Java script 강의자료_ed13Java script 강의자료_ed13
Java script 강의자료_ed13hungrok
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322jylee6977
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용중선 곽
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 
프로그래밍 언어 기초(델파이,C++)
프로그래밍 언어 기초(델파이,C++)프로그래밍 언어 기초(델파이,C++)
프로그래밍 언어 기초(델파이,C++)Devgear
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Jeado Ko
 

More Related Content

Similar to 2023 Baseline된 새로운 Web 기능

Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
2일차 20140402
2일차 201404022일차 20140402
2일차 20140402Jake Yoon
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Kyoung Up Jung
 
겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow
겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow
겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlowGilbok Lee
 
이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기Devgear
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
LucideWorks Banana 소개
LucideWorks Banana 소개 LucideWorks Banana 소개
LucideWorks Banana 소개 SuHyun Jeon
 
2주 HTML 수업추가
2주 HTML 수업추가2주 HTML 수업추가
2주 HTML 수업추가지수 윤
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오Haegyun Jung
 
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성
웹표준 프레임워크   메타웍스3의 적용 사례와 생산성웹표준 프레임워크   메타웍스3의 적용 사례와 생산성
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성영재 김
 
나의 첫 윈도우/맥 애플리케이션 개발하기
나의 첫 윈도우/맥 애플리케이션 개발하기나의 첫 윈도우/맥 애플리케이션 개발하기
나의 첫 윈도우/맥 애플리케이션 개발하기Devgear
 
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thWeb Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thChang W. Doh
 
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...i2max
 
Bluemix 23th meetup 실습 자료
Bluemix 23th meetup 실습 자료Bluemix 23th meetup 실습 자료
Bluemix 23th meetup 실습 자료HyeonJeong Jo
 

Similar to 2023 Baseline된 새로운 Web 기능 (20)

Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & Polymer
 
2일차 20140402
2일차 201404022일차 20140402
2일차 20140402
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.
 
겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow
겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow
겨울계절학기 윈도우 8.1 스토어앱개발 족집게강의 by 이길복 CTO / HugeFlow
 
About WebCAT
About WebCATAbout WebCAT
About WebCAT
 
이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기
 
2-2. html5
2-2. html52-2. html5
2-2. html5
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
react-ko.pdf
react-ko.pdfreact-ko.pdf
react-ko.pdf
 
LucideWorks Banana 소개
LucideWorks Banana 소개 LucideWorks Banana 소개
LucideWorks Banana 소개
 
2주 HTML 수업추가
2주 HTML 수업추가2주 HTML 수업추가
2주 HTML 수업추가
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오
 
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성
웹표준 프레임워크   메타웍스3의 적용 사례와 생산성웹표준 프레임워크   메타웍스3의 적용 사례와 생산성
웹표준 프레임워크 메타웍스3의 적용 사례와 생산성
 
Html5
Html5 Html5
Html5
 
나의 첫 윈도우/맥 애플리케이션 개발하기
나의 첫 윈도우/맥 애플리케이션 개발하기나의 첫 윈도우/맥 애플리케이션 개발하기
나의 첫 윈도우/맥 애플리케이션 개발하기
 
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thWeb Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
 
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...[I2max 아이투맥스] 2015 salesforce 발표자료  cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
[I2max 아이투맥스] 2015 salesforce 발표자료 cloud동향에서 salesforce 앱 개발까지_ salesfroce 1...
 
Bluemix 23th meetup 실습 자료
Bluemix 23th meetup 실습 자료Bluemix 23th meetup 실습 자료
Bluemix 23th meetup 실습 자료
 

More from Wonjun Hwang

XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyWonjun Hwang
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyWonjun Hwang
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사Wonjun Hwang
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Wonjun Hwang
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음Wonjun Hwang
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드Wonjun Hwang
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링Wonjun Hwang
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업Wonjun Hwang
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기Wonjun Hwang
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드Wonjun Hwang
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기Wonjun Hwang
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계Wonjun Hwang
 
Flutter & Firebase
Flutter & FirebaseFlutter & Firebase
Flutter & FirebaseWonjun Hwang
 

More from Wonjun Hwang (20)

XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team StudyXSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
 
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team StudyFlutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
 
PWA
PWAPWA
PWA
 
얕은복사,깊은복사
얕은복사,깊은복사얕은복사,깊은복사
얕은복사,깊은복사
 
Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
 
Passkey
PasskeyPasskey
Passkey
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업
 
AI News '23.12
AI News '23.12AI News '23.12
AI News '23.12
 
Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드
 
상속과 구현
상속과 구현상속과 구현
상속과 구현
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계
 
성능 테스트
성능 테스트성능 테스트
성능 테스트
 
WebRTC
WebRTCWebRTC
WebRTC
 
Flutter & Firebase
Flutter & FirebaseFlutter & Firebase
Flutter & Firebase
 

2023 Baseline된 새로운 Web 기능

Editor's Notes

  1. 이번 발표에서는 지난 5월에 구글io에서 발표된 웹 플렛폼에서 안정화된 새로운 기능 몇가지와 이번 년도에 추가된 새로운 자바스크립트 어레이 매소드를 소개하려고 합니다. Baseline이란 어떤 웹플랫폼 기능이 안정되게 사용할 수 있는지에 대한 명확한 정보를 주는 약간 기준선으로 이해하면 됩니다.
  2. 웹 파트에서는 최근 두 버전의 모든 주요 브라우저 엔진에 사용할 수 있는 몇가지 기능을 소개하려고 합니다. 구글io에서 소개한 바로는 웹 플렛폼은 나날이 발전하고 있는데 웹 브라우저 최신 버전 2개를 지원하는 정도면 새로운 웹 플랫폼 기능을 프로덕션에 사용할지 말지 결정하는데 좋은 기준이 될 것이라고 합니다. 자바스크립트 파트에서는 2023년에 추가된 새로운 자바스크립트 어레이 메소드 4가지를 소개해드리겠습니다.
  3. 기존 순수 html 요소를 사용해서 모달을 생성하려면 여러 방법이 있겠지만 이런식으로 생상할 수 있었습니다. 하지만 dialog 요소를 사용하면 브자우저의 지원을 받아 간단하게 생성할 수 있습니다. ::backdrop 수도 클라스를 사용해서 배경 스타일을 설정해 줄 수 있음.
  4. 예를 들어 포커스 매니지먼트, 탭 트랙킹, 쌓임맥락과 같은 기능이 웹 브라우저에서 브라우저상에서 지원이 되어 작성할 코드도 줄고, 관리할 코드도 줄어들 수 있습니다.
  5. 개별 transform 속성을 사용하면 변환 속성을 개별적으로 지정할 수 있습니다. 복잡한 키프레임 애니메이션을 작성할 때 유용하게 사용되어질 수 있다고 생각이 듭니다.
  6. 예를 들어 어떤 요소를 0에서 100%까지 전환하는 동안 중간에 요소를 회전시키고 서로 다른 키프레임 포인트에서 확장되는 애니메이션을 만든다고 생각해봅니다.
  7. 예전에는 각 키프레임 포인트에서 세가지 속성에 대한 값을 모두 설정해 줬어야합니다. 개별 transform 속성을 사용하면 각 속성에 대한 값만 작성하면 됩니다. 그래서 보시는 바와 같이 코드를 작성하고 관리하기가 훨신 쉬워진걸 볼 수 있습니다.
  8. 새로 추가된 뷰포트 단위는 모바일 웹사이트에서 유용합니다. 모바일에서는 뷰포트의 크기는 동적 툴바의 유무에 따라 달라집니다.
  9. 자바스크림트에서 깊은 복사를 할 수 있는것도 코드를 관리하고 작성하는데 더 쉽게해줍니다. 예전에는 주로 JSON.stringify와 JSON.parse를 사용해서 객체의 깊은 복사를 하였습니다. 원본 자바스크립트 객체를 가지고 json.stringify로 문자열로 만든 다음 json.parse를 통해 다시 자바스크립트 객체로 파싱합니다. 이러한 방법이 너무도 많이 사용되어져서 크롬 엔진인 v8에서 이 방법의 성능을 개선할 정도였다고 합니다.
  10. 하지만 structuredClone를 사용하면 이 방법이 필요하지 않습니다. structuredClone함수에 원본객체를 전달하기만 하면 깊이 복사가 된 객체가 생성됩니다.
  11. 새롭게 추가된 어레이 매소드를 소개해드리겠습니다. 저희는 immutable 메서드를 사용해서 상태 관리를 해주어야 사이드 이펙트가 없다는 말을 들어왔습니다. 그래서 보통 배열의 특정 인덱스의 요소를 변화하려고 하면 배열을 한번 복사해서 그 복사한 배열의 특정 인덱스의 요소를 변화해줍니다.
  12. 그런데 새로운 with 메소드를 사용하면 특정 인덱스의 요소를 손쉽게 바꿀 수 있고 새로운 배열로 반환해줍니다.
  13. 기존의 sort메소드도 마찬가지인데 새로운 배열을 sort메소드를 사용하여 반환받고 싶으면 우선 피플을 복사한뒤 sort 메소드를 사용해 새로운 배열로 반환받습니다
  14. 그러나 새로운 tosorted매소드를 사용하면 손쉽게 sorted된 매소드로 반환받을 수 있습니다. 이러한 새로운 매소드가 성능에도 조금이나마 도움이 됩니다. 왜냐하면 피플을 한번 카페할때 피플의 어레이의 루프를 한번 돌고 그 후에 sort 메소드로 루프를 한번더 돌게 되는데 tosorted 메소드는 한번만 루프를 돌고 새로운 배열을 반환해주기 때문입니다.
  15. toReversed메소드도 기존에는 한번 복사를 해주고 reverse메소드를 사용하여 새로운 배열을 만들어줍니다.