Notice
Recent Posts
Recent Comments
Link
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- Effect Hook
- BFS์ DFS
- ํผํฐ ๋ชจ๋น์ ๋ฒ์ง ๋ชจํ
- Lifting state
- ์คํ ์ด์ธ ์ฝ๋
- prototype
- css
- ์คํ ์ด์ธ ์ฝ๋42๊ธฐ
- fetch api
- html
- JavaScript
- ์ปดํจํฐ ๊ณตํ
- css animation
- Study
- props drilling
- wai-aria
- ์๋งจํฑ์์
- React
- ๋ฒ์ง ๋ชจํ
- Cmarket
- WEB
- ์ ์ด์ฝฅ ๋์จ
- ํ ์คํธ ์์
- ํผํฐ ๋ชจ๋น
- ํ๋ก๊ทธ๋๋จธ์ค
- ๋ฒ๋ค๋ง
- ๊ณ ์ฐจํจ์
- jsx
- State
- git
Archives
- Today
- Total
roqkf
[Web] Cross Browsing ๋ณธ๋ฌธ

โค๏ธโ๐ฅ Cross Browsing
- ์น ์ฌ์ดํธ์ ์ ๊ทผํ๋ ๋ธ๋ผ์ฐ์ ์ ์ข ๋ฅ์ ์๊ด์์ด ๋๋ฑํ ํ๋ฉด๊ณผ ๊ธฐ๋ฅ์ ์ ๊ณตํ ์ ์๋๋ก ๋ง๋๋ ์์ ์ ์๋ฏธ
- ํต์ฌ point! ๋์ผํ ์ด ์๋ ๋๋ฑํ ํํ์ ์ง์คํ์. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์์ ์์ ํ ๋๊ฐ์ ํ๋ฉด์ด ๋ณด์ด๋๋ก ๋ง๋๋ ๊ฒ์ด ์๋๋ค. ์ ์ด์ ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ฌ์ฉํ๋ ๋ ๋๋ง ์์ง์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ํ๋ฉด์ ์์ ํ ๋๊ฐ์ด ๋ง๋๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํ๋ค. ๋ฐ๋ผ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ๋ชฉํ๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋๋ฑํ ์์ค์ ์ ๋ณด์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๊ฒ์ด๋ค.
๐ฒ ์ฐ๋ฆฌ๋ ์ด๋ฏธ Cross Browsing์ด ๋์ง ์์ ๋ถํธํจ์ ๊ฒช์ ์ ์ด ์๋ค!
- ๋ฌด์ธ๊ฐ ํ๋ ค๊ณ ํ ๋๋ง๋ค ๋จ๋ ๊ฒฝ๊ณ ์ฐฝ์ด ๋จ๋ ๊ฑธ ๊ฒฝํํด ๋ณธ ์ ์ด ์์ ๊ฒ์ด๋ค.
- ์ด ๋ฌธ์ ๋ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ(Internet Explorer)๊ฐ ๊ณ์ํด์ ๋ธ๋ผ์ฐ์ ์ ์ ์จ 1์๋ฅผ ์ฐจ์งํ๊ฒ ๋ง๋ค์๋, 1์์์ ๋ด๋ ค์จ ๋ค์๋ ๊ณ์ํด์ ๋์ ์ ์ ์จ์ ์ฐจ์งํ๊ฒ ๋ง๋ ์์ธ์ด๊ธฐ๋ํ ActiveX ๋๋ฌธ์ด๋ค.
๐ค ActiveX ?
- MS ์ฌ์์ ๊ฐ๋ฐํ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์ฉ ํ๋ฌ๊ทธ์ธ, ์น ๋ธ๋ผ์ฐ์ ์ ์น ๋ฌธ์๋ง์ผ๋ก๋ ์ด์ฉํ ์ ์๋ ์ถ๊ฐ ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํ ์ ์๊ฒ ํด ์ฃผ๋ ๋ธ๋ผ์ฐ์ ์ธ๋ถ ํ๋ก๊ทธ๋จ

- ์ธ๊ณ ๋ธ๋ผ์ฐ์ ์ ์ ์จ๊ณผ ํ๊ตญ ๋ธ๋ผ์ฐ์ ์ ์ ์จ์ ๋น๊ตํด๋ณด๋ฉด, ์ง๊ธ์ ์๋์ ์ธ ์ ์ ์จ์ ์ฐจ์งํ๊ณ ์๋ ํฌ๋กฌ์ด ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์ ์ ์ ์จ์ ์ฒ์ ์ถ์ํ ์์ ์ด ๊ฐ๊ฐ 2012๋ ๋์ 2016๋ ๋์ธ ๊ฒ์ ๋ณผ ์ ์๋ค.
- ํ๊ตญ์ด ๋ฌด๋ ค 4๋ ์ด๋ ๋ค์ณ์ ธ ์๋ ์์น์ด๋ค. ํ๊ตญ ์ ๋ณดํ ์์ค์ ์๊ฐํ์ ๋์๋ ํนํ ์ด์ํ ํ์์ธ๋ฐ, ์ด๋ ๊ณต๊ณต๊ธฐ๊ด์ ํฌํจํ ํ๊ตญ์ ์น ์ฌ์ดํธ๋ค์ด ActiveX์ด ์ฌ์ฉ์ ์ฌ์ฉ์์๊ฒ ๊ฑฐ์ ๊ฐ์ ํ๊ธฐ ๋๋ฌธ์ด๋ค.
- ActiveX ๋๋ถ์ ์น ๋ธ๋ผ์ฐ์ ์์์ ์์ , ๋์์ ๋ฑ์ ๋ฉํฐ๋ฏธ๋์ด ์ฝํ ์ธ ๋ฅผ ์์ ๋กญ๊ฒ ์ฆ๊ธฐ๊ณ , ์ํ๊ณผ ์ฃผ์ ๋ฑ์ ๊ธ์ต ๊ฑฐ๋๋ ๊ฐ๋ฅํด์ง๊ณ , ์ฌ์ฉ์์ ์ ์์ ์ฆ๋ช ํ ์ ์๊ฒ ๋ผ ์ง์์ ๊ณต๋ฌธ์๋ฅผ ์ถ๋ ฅํ ์ ์๊ฒ ๋๋ ๋ฑ ์น ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ฅ์ ๊ฑฐ์ ๋ฌดํ๋๋ก ํ์ฅํ ์ ์๊ฒ ๋๋ค.
- ํ์ง๋ง ๋ฌธ์ ์ ์ ์ ๋ง ๋ฌดํ๋๋ก ํ์ฅํ๋ฉด์ ๋ฌด์ธ๊ฐ ์์ ํ๋ ค๊ณ ํ๋ฉด ActiveX๋ฅผ ์ค์นํ๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๋จ๊ณ , ํ์ํ ActiveX ํ๋๋ผ๋ ์ค์น๋ผ ์์ง ์์ผ๋ฉด ๊ธฐ๋ฅ์ด ์ ๋๋ก ์๋ํ์ง ์๋ ๋ฑ ๋ฐฐ๋ณด๋ค ๋ฐฐ๊ผฝ์ด ๋ ์ปค์ง๋ ํ์์ด ๋ฐ์ํ๊ฒ ๋์๋ค. ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ๋ ์ผ์ ๊ฑฐ์ ๋ถ๊ฐ๋ฅํ๋ค. ์ฆ, ActiveX ๋๋ฌธ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด ๋ถ๊ฐ๋ฅํ ์ํฉ์ด ๋ ๊ฒ์ด๋ค.

- ActiveX๋ง ์ตํฐ๋ท ์ต์คํ๋ก๋ฌ๊ฐ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์ ์ํฅ์ ์คฌ๋ ์์๋ ์๋๋ค. ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ์ต์ ์คํ์ CSS์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋๋ก ์ง์ํ์ง ๋ชปํ๊ณ , ์ด ๋๋ฌธ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์ํด ์น ํ์ค์ ์ ํดํ๋ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํ๋ค. ๋ค๋ฅธ ์น ๋ธ๋ผ์ฐ์ ๋ค์ ์ต์ ๋ฌธ๋ฒ์ ์ง์ํ๋๋ฐ ์ค๋กฏํ IE๋ง์ ์ํด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์๊ฐ๊ณผ ๋น์ฉ์ ํฌ์ํด์ผ ํ๋ค. ์ด๋ฐ ์ฌ๋ฌ ์ด์ ๋๋ฌธ์ IE๋ ์น ๊ฐ๋ฐ์ ์ฌ์ด์์ ๊ณต๊ณต์ ์ ์ด๋ผ๊ณ ๊น์ง ๋ถ๋ฆฌ๊ฒ ๋์๋ค.

- IE๋ 2022๋ 6์ 15์ผ์๋ก ์ง์์ ์ข ๋ฃํ๊ฒ ๋์๊ณ , ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ๊ฐ์ฅ ํฐ ๊ฑธ๋ฆผ๋์ด์ธ ๋ธ๋ผ์ฐ์ ๊ฐ ์ํดํ๊ฒ ๋ ๊ฒ์ด๋ค. ๋ฌผ๋ก MS ์ฌ์ ์ฃ์ง์์ ์์ง ActiveX๋ฅผ ์ฌ์ฉํ๋ ์น ์ฌ์ดํธ๋ค์ ์ํด IE๋ฅผ ์ต์ 2029๋ ๊น์ง ์ ๊ณตํ ์์ ์ด๋ผ๊ณ ๋ฐํ์ง๋ง ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ํ ๋, IE ๋๋ฌธ์ ๋จธ๋ฆฌ ์ธ๋งฌ ์ผ์ ๊ฑฐ์์์ ๊ฒ์ด๋ค.
- IE์ ์ง์ ์ข ๋ฃ๋ก ๋์ด๋๊ฐ ๋ฎ์์ง ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์ด๋ป๊ฒ ์งํํ๋ฉด ๋๋์ง ์์๋ณด์!
โค๏ธโ๐ฅ Cross Browsing | Workflow
1. ์ด๊ธฐ ๊ธฐํ
- ์ด๋ค ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค ๊ฒ์ธ์ง ๊ฒฐ์
- ์น ์ฌ์ดํธ์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ, ์ฝํ ์ธ ๋ ์ด๋ค ๊ฒ์ผ๋ก ํ ์ง, ๋์์ธ๊ณผ ๊ฐ์ ์ฌํญ์ ๊ฒฐ์
- ์ฌ์ดํธ์ ๊ณ ๊ฐ์ด ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ , ์ ๊ทผ ๊ธฐ๊ธฐ ํ๊ฒ์ธต์ด ์ฃผ๋ก ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ๋ฅผ ํ์ ํด ์ ํฉํ ๊ธฐ์ ์ ์ฌ์ฉํด ๊ฐ๋ฐํ ์ ์๋๋ก ๊ธฐํ
2. ๊ฐ๋ฐ
- ์ฝ๋๋ฅผ ์์ฑํ ๋๋ ์ฌ์ฉํ๋ ์ฝ๋๊ฐ ๊ฐ ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๋์ง ํธํ์ฑ์ ํ์ ํ๊ณ ์ฌ์ฉํด์ผ ํ๋ค. MDN, Can I Use ๋ฑ์ ์ฌ์ดํธ์์ ๋ธ๋ผ์ฐ์ ์ ์ฝ๋์ ํธํ์ฑ์ ํ์ธํ ์ ์๋ค.
- ์ฝ๋๋ฅผ ์์ฑํ๋ค ๋ณด๋ฉด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ํ๊ธฐ ํ๋ ์ํฉ์ด ์๊ธธ ์๋ ์๋๋ฐ, ์ด๋ฐ ๊ฒฝ์ฐ์๋ ์ด๋ฅผ ์ธ์ ํ๊ณ ๋์ฒด ์๋จ์ ๋ง๋ จํ๋ ๊ฒ ์ข๋ค. ๋ํ ๊ฐ๋ฐ ์ค์ธ ์ฌ์ดํธ๊ฐ ์ผ๋ถ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์๋ ์ด์ฉ ์ ์์ด ์ ๋๋ก ๊ธฐ๋ฅํ์ง ์์ ์ ์๋ค๋ ์ฌ์ค์ ์๊ณ ๋ฐ์๋ค์ฌ์ผ ํ๋ค.
3. ํ ์คํธ / ๋ฐ๊ฒฌ
- ๊ฐ ๊ธฐ๋ฅ์ ๊ตฌํ ํ, ๊ฐ ๊ธฐ๋ฅ๋ค์ ํ ์คํธ๊ฐ ํ์
- ์์ ์ ์ธ ๋ฐ์คํฌํฑ ๋ธ๋ผ์ฐ์ ์์ ํ
์คํธ ์งํ
ํด๋ํฐ, ํํ๋ฆฟ ๋ธ๋ผ์ฐ์ ๋ฑ ๋ค์ํ ๊ธฐ๊ธฐ์์ ํ ์คํธ ์งํ
์ด๊ธฐ ๊ธฐํ ๋จ๊ณ์์ ๋ชฉํํ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ค๋ฉด ํด๋น ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ ์งํ
๋ค์ํ ์ด์์ฒด์ ์์๋ ํ ์คํธ ์งํ - ์ง์ ํ ์คํธ๋ฅผ ์งํํ๋ ๋ฐฉ๋ฒ๋ ์์ง๋ง, TestComplete, LambdaTest, BitBar ๋ฑ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ํ ์คํธ ํด์ ์ฌ์ฉํ์ฌ ์๋์ผ๋ก ํ ์คํธ๋ฅผ ์งํํด ์ฃผ๋ ๋๊ตฌ๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ๋ ์๋ค.
4. ์์ / ๋ฐ๋ณต
- ํ ์คํธ ๊ณผ์ ์์ ๋ฒ๊ทธ๋ฅผ ๋ฐ๊ฒฌํ๋ค๋ฉด ์์ ์ด ํ์ํ๋ค. ๋ฒ๊ทธ ๋ฐ์ ์์น๋ฅผ ์ต๋ํ ์ขํ ํน์ ํ๊ณ , ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ๋ ํน์ ๋ธ๋ผ์ฐ์ ์์์ ํด๊ฒฐ๋ฐฉ๋ฒ์ ์ ํด์ผํ๋ค. ์ฃ๋ถ๋ฆฌ ์ฝ๋๋ฅผ ์์ ํ๋ค๊ฐ, ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์์ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ ์ ์์ผ๋ฏ๋ก, ์กฐ๊ฑด๋ฌธ์ ์์ฑํด ๋ค๋ฅธ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐฉ์์ผ๋ก ์์ ํ๋ ํธ์ด ์ข๋ค. ์์ ์ ์๋ฃํ๋ฉด 3๋ฒ ๊ณผ์ ๋ถํฐ ๋ฐ๋ณตํ๋ค.
'๐ป Development > Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Web] SEO (0) | 2023.01.17 |
---|---|
[Web] ์น ํ์ค & ์ ๊ทผ์ฑ (0) | 2023.01.09 |
[Web] ์์ฃผ ํ๋ฆฌ๋ Markup (0) | 2023.01.09 |
[Web] ์น ํ์ค & Semantic HTML (0) | 2023.01.09 |
wireframe & prototype (0) | 2022.12.18 |