๋ชฉ๋ก2022/05 (4)
whatisthis?
REFERENCE SCSS ๊ฐ์ด๋ SCSS SASS๋ CSS pre-processor๋ก์, ๋ณต์กํ ์ก์ ์ ์ฝ๊ฒ ํด์ฃผ๊ณ ์ฝ๋์ ์ฌํ์ฉ์ฑ์ ๋์ฌ์ค. (์ ์ง๋ณด์ ์ฉ์ด) ๋ณ์ Variable ์ ์ธ CSS์ ๋ณ์ ๊ฐ๋ ์ ๋์ ํด์ค. ๋ณ์ ์ฌ์ฉ์ $๊ธฐํธ๋ฅผ ์ฌ์ฉ. $primary-color: #333; body { background: $primary-color; } Variable Scope ํน์ ์ ํ์์์ ๋ณ์ ์ ์ธ์, ํด๋น ์ ํ์ ์์์๋ง ์ ๊ทผ ๊ฐ๋ฅ. ํ๋๊ทธ (flag) ์ ์ญ ๋ณ์ ์ค์ ์ : !global ๊ธฐ๋ณธ ๊ฐ ์ค์ ์ (๋ณ์๊ฐ undefined๋ null์ผ๋) : !default ํ๋๊ทธ๋ mixin ์์ฑ์ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋จ. body { $primary-color: #eee !global; $sub-color:..
์ฐธ๊ณ ๋ฌธ์ My velog Redux 1. ์ฉ์ด ์ค๋ช ์ก์ ์์ฑํจ์ (action creator) ๋จ์ํ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐ์์์ ์ก์ ๊ฐ์ฒด ํํ๋ก ๋ง๋ค์ด์ค. ๋์ค์ ์ปดํฌ๋ํธ์์ ๋์ฑ ์ฝ๊ฒ ์ก์ ์ ๋ฐ์์ํค๊ธฐ ์ํจ. ๋ณดํต export ํค์๋๋ฅผ ๋ถ์ฌ์ ๋ค๋ฅธ ํ์ผ์์ ๋ถ๋ฌ์ ์ฌ์ฉํจ. ๋ฆฌ๋์ (reducer) ๋ณํ๋ฅผ ์ผ์ผํค๋ ํจ์. state,action ๋๊ฐ์ง์ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฐ์์ด. ํ์ฌ ์ํ์ ์ก์ ์ ์ฐธ๊ณ ํ์ฌ ์๋ก์ด state๋ฅผ ๋ฆฌํดํจ. ๋ฆฌ๋์ค์์๋ ์ฌ๋ฌ๊ฐ์ ๋ฆฌ๋์๋ฅผ ๋ง๋ค๊ณ ํฉ์ณ์ ๋ฃจํธ ๋ฆฌ๋์(Root Reducer)์ ๋ง๋ค ์ ์์. ์ฐธ๊ณ useReducer์์๋ default:์ throw new Error('Unhandled Action')์ ๋ฃ์ง๋ง, ๋ฆฌ๋์ค์ reducer์์๋ state๋ฅผ ๊ทธ..
์ฌ์ค ์ง๋๋ฒ์ ๊ธฐํํ์๋ rainy-player. ๋๋ฌด UI๊ฐ ์ ์นํ๊ณ (...) ๋ง์ ๋ค์ง ์์์ ์ด๋ฐ์ ๋ค์ ๊ฐ์ ์์๋ ํ๋ก์ ํธ์ด๋ค. ์ฒ์ ๊ธฐํ์ ๊ทธ๋ฆฌ๊ณ ์ ์ ๊ณผ์ (?) ์ ๋งํฌ ์ฐธ์กฐ! Rainy player ๋๋ ํ์์ ์ ์ด ์ค์ง ์์ผ๋ฉด ๋น์๋ฆฌ๋ฅผ ๋ฃ๊ณ ๋ ํ๋ค. ๊ทธ๋์ ๋ด๊ฐ ์ข์ํ๋ ๋น์๋ฆฌ๋ฅผ ํ์ด์ฃผ๋ rain sound player app์ ๋ง๋ค๋ฉด ์ข๊ฒ ๋ค๊ณ ์๊ฐํ๊ณ , ๊ธฐํ์ ํ๊ธฐ ์์ํ๋ค. ์ฒ์ ๊ธฐํ์ ์์ ๊ฐ์ด ๋๋ฌด๊ฐ ๋ณด์ด๊ณ , ๋น์๋ฆฌ๋ฅผ ๋ค์๋๋ง๋ค ๋๋ฌด๊ฐ ์ ์ ์๋ผ๋๋ก ํ๋ ์ปจ์ ์ผ๋ก ๊ตฌ์ํ์๋ค. ๊ทธ๋ฐ๋ฐ, ๋ญ๊ฐ ์ฌ์ฌํ ๋๋์ด ๋ค๊ณ ๋์์ธ์ด ์ค์ํ ๊ฒ ๊ฐ์์ ๊ธฐ๋ฅ์ ์ด๊ฒ์ ๊ฒ ๊ณ ๋ฏผํ๊ฒ ๋์๋ค. ๊ทธ๋์ ํ์ํ ์๋ก์ด ๋ฒ์ ! NEW! Rainy Player ๋น์๋ฆฌ ํ๋ ์ด์ด์ธ ๊ฒ์ ๋์ผํ์ง๋ง, UI๊ฐ ์กฐ๊ธ ๋..
styled-components ๊ณต์ ๋ฌธ์ styled-components = css in JS. ์คํ์ผ ์ ์๋ฅผ CSSํ์ผ์ด ์๋ JS ์ปดํฌ๋ํธ์ ๋ฐ๋ก ์ฝ์ ํ๋ ๊ธฐ๋ฒ. ์นํ์ด์ง๋ฅผ HTML/CSS/JS๋ก ๋ถ๋ฆฌํ๋ ๊ฒ์ด ์๋, ์ฌ๋ฌ๊ฐ์ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํ๊ณ , ๊ฐ ์ปดํฌ๋ํธ์ ๊ฐ๊ฐ์ HTML,CSS,JS๋ฅผ ๋ด์ฅํ๋ ๋ฐฉ์์ผ๋ก ์์ฑ. styled-components ์ค์น $ yarn add styled-componentsSYNTAX styled ํจ์๋ฅผ ์ํฌํธ. styled ํจ์๋ HTML ํ๊ทธ ๋๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ์คํ์ผ์ ์ ์ฉํจ HTML Element styled.button` // style `; React Component styled(Button)` // style `; ๋ ๋ฌธ๋ฒ ๋ชจ๋ ES6 Tagged T..