Storybook: ์žฅ์น˜ ๋ฐฉํ–ฅ ์ด๋ฒคํŠธ / ์ž์ด๋กœ ์Šค์ฝ”ํ”„ (๋ชจ๋ฐ”์ผ ์žฅ์น˜)

์— ๋งŒ๋“  2019๋…„ 07์›” 25์ผ  ยท  1๋…ผํ‰  ยท  ์ถœ์ฒ˜: storybookjs/storybook

๋ฒ„๊ทธ ์„ค๋ช…
deviceorientation ์ด๋ฒคํŠธ์™€ ํ•จ๊ป˜ ์Šคํ† ๋ฆฌ ๋ถ์„ ์‚ฌ์šฉํ•˜๋ ค๊ณ ํ•˜๋ฉด ์ด๋ฒคํŠธ๊ฐ€ ์‹œ์ž‘๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค (ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ iframes ์ด (๊ฐ€) ์›์ธ / ์ฐจ๋‹จ์„ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ์Œ). ๋™์ž‘์€ ๋ชจ๋ฐ”์ผ ์žฅ์น˜์—์„œ ๋™์ผํ•˜๊ฑฐ๋‚˜ ๊ฐœ๋ฐœ ๋„๊ตฌ๋กœ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค.

์žฌํ˜„ํ•˜๋ ค๋ฉด
๋™์ž‘์„ ์žฌํ˜„ํ•˜๋Š” ๋‹จ๊ณ„ :

  1. DeviceOrientationEvent ๊ฐ’ ์•ŒํŒŒ, ๋ฒ ํƒ€, ๊ฐ๋งˆ๋ฅผ ๋กœ๊ทธ ์•„์›ƒํ•˜์—ฌ ๊ตฌํ˜„ํ•  ์ˆ˜์žˆ๋Š” deviceorientation ์ด๋ฒคํŠธ๋กœ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  2. ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์Šคํ† ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์ด๋ฒคํŠธ๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™
์Šคํ† ๋ฆฌ์—์„œ`deviceorientation` ์ด๋ฒคํŠธ๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์ฒด๊ณ„:

  • ์šด์˜์ฒด์ œ : Win10
  • ๋ธŒ๋ผ์šฐ์ € : ํฌ๋กฌ
  • ํ”„๋ ˆ์ž„ ์›Œํฌ : ๋ฐ˜์‘
  • ๋ฒ„์ „ : "@ storybook / react": "^ 5.1.9"
question / support

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ฌธ์ œ๋ฅผ ์ข…๊ฒฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ถœ์ฒ˜๊ฐ€ ์•ˆ์ „ํ•˜์ง€ ์•Š์€ iframe (http)์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋ฐ”์ผ ์žฅ์น˜์—์„œ ์žฅ์น˜ ๋™์ž‘ / ๋ฐฉํ–ฅ ์ด๋ฒคํŠธ๋ฅผ ์ˆ˜์‹ ํ•˜๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ณต๋œ SSL ์ธ์ฆ์„œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ์ปฌ ํ˜ธ์ŠคํŠธ (https) ์„œ๋ฒ„์—์„œ ์Šคํ† ๋ฆฌ ๋ถ์„ ์‹คํ–‰ํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

>๋ชจ๋“  ๋Œ“๊ธ€

๋ฌธ์ œ๋ฅผ ์ข…๊ฒฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ถœ์ฒ˜๊ฐ€ ์•ˆ์ „ํ•˜์ง€ ์•Š์€ iframe (http)์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋ฐ”์ผ ์žฅ์น˜์—์„œ ์žฅ์น˜ ๋™์ž‘ / ๋ฐฉํ–ฅ ์ด๋ฒคํŠธ๋ฅผ ์ˆ˜์‹ ํ•˜๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ณต๋œ SSL ์ธ์ฆ์„œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ์ปฌ ํ˜ธ์ŠคํŠธ (https) ์„œ๋ฒ„์—์„œ ์Šคํ† ๋ฆฌ ๋ถ์„ ์‹คํ–‰ํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰