[React] Cross Browsing

kokoball0ยท2022๋…„ 2์›” 28์ผ
0

React.js

๋ชฉ๋ก ๋ณด๊ธฐ
16/17
post-thumbnail

ํ…Œ์ŠคํŠธ ๋จผ์ € ํ•˜๊ธฐ

๐Ÿ’ก ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ
By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills.
โ†’ ๋„ค.. IE 9, 10, 11์—์„œ ๋ฆฌ์•กํŠธ๊ฐ€ ๋Œ์•„๊ฐ€์ง€ ์•Š๋Š”๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ˜ˆ

  • ์ง์ ‘ ๋ˆˆ์œผ๋กœ ์•ˆ ๋˜๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ํ…Œ์ŠคํŠธํ•˜๊ธฐ

๊ฐœ๋ฐœ๋‹จ๊ณ„์—์„œ ํ…Œ์ŠคํŠธ ํ•˜๋Š” ๋ฒ• for window

  • npm run start ํ›„,
  • window ์‚ฌ์šฉ์ž๋Š” ๋ฐ”๋กœ Internet Explorer ์—ด์–ด์„œ ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค ๐Ÿ˜‰

๊ฐœ๋ฐœ๋‹จ๊ณ„์—์„œ ํ…Œ์ŠคํŠธ ํ•˜๋Š” ๋ฒ• for mac

  1. ํ„ฐ๋ฏธ๋„์—์„œ ์•„๋ž˜์˜ ๋ช…๋ น์–ด ์ž‘์„ฑ
ifconfig

  1. ์‚ฌ์ง„ ์ฐธ๊ณ ํ•˜์—ฌ inet ์— ์ž‘์„ฑ๋˜์–ด ์žˆ๋Š” ip ์ฃผ์†Œ๋กœ ์ ‘๊ทผ

    ex) ie ๋ธŒ๋ผ์šฐ์ €์—์„œ http://192.168.35.00:3000 ์œผ๋กœ ์ ‘์†

๐Ÿ™‹๐Ÿปโ€โ™€๏ธ ์•„๋งˆ IE์—์„œ ํ•˜์–€ ํ™”๋ฉด์ด ๋‚˜์˜ฌ ๊ฑฐ์˜ˆ์š”....
๋†€๋ผ์ง€ ๋งˆ์„ธ์š”. ๊ทธ๋ƒฅ ์—๋Ÿฌ ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค. ๐Ÿคจ

๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”!

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• - JavaScript

step1. react-app-polyfill ์„ค์น˜

yarn add react-app-polyfill

step2. polyfill import

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

step3. node_modules/.cache ์‚ญ์ œ

step4. package.json browserslist์— ie 11 ์ถ”๊ฐ€

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• - CSS

ํ…์ŠคํŠธ๐Ÿ‘€ IE์—์„œ ์—ฌ๋Ÿฌ CSS property๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋ˆˆ์œผ๋กœ ์ง์ ‘ ๋ณด๋ฉด์„œ ํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค...
์ƒ๊ฐ๋ณด๋‹ค ๊นจ์ง€๋Š”๊ฒŒ ๋งŽ์„ ์ˆ˜ ์žˆ์–ด์š” ๐Ÿคญ

์ง์ ‘ ์ˆ˜์ •ํ•ด๋ณด๊ธฐ

  1. ์•ž์—์„œ JS ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•ด๊ฒฐํ–ˆ๋‹ค๋ฉด, ์ผ๋‹จ ํ™”๋ฉด์ด ๋ณด์ด๊ธฐ ์‹œ์ž‘ํ• ๊ฑฐ์˜ˆ์š”!
  2. ํฌ๋กฌ๊ณผ ๋‹ค๋ฅด๊ฒŒ ํ‘œํ˜„๋˜๋Š” UI๋ฅผ ์ฐพ์•„๋ณด์„ธ์š”.
  3. ํ•ด๋‹น CSS์— ์‚ฌ์šฉ๋œ property๊ฐ€ IE์—์„œ ์ง€์›์ด ๋˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด์„ธ์š”.
    • can i use ์—์„œ IE ๋ฒ„์ „๋ณ„๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ํ•ด๋‹น property ์ด๋ฆ„ + ie ์กฐํ•ฉ์œผ๋กœ ๊ฒ€์ƒ‰ํ•˜๋ฉด ๋‹ต๋ณ€์„ ๋ฐ”๋กœ ์ฐพ์„ ์ˆ˜๋„ ์žˆ์–ด์š”!
  4. ์ด์ œ ์˜ˆ์ƒํ•˜๋Š” ๋””์ž์ธ๊ณผ ๋˜‘๊ฐ™์ด ๋ณด์ผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋‚˜์”ฉ ์ˆ˜์ •ํ•ด์ฃผ์„ธ์š”.

  • CSS์˜ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•œ๋ฒˆ์— ์ง€์›ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๊ธด ํ•˜์ง€๋งŒ, ์›ฌ๋งŒํ•˜๋ฉด ์ง์ ‘ ์ˆ˜์ •ํ•˜๋ฉด์„œ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€