shell์์ ํจํด๋งค์นญํ์ฌ ํ์ผ๋ช ํ๋ฒ์ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ!
๋ง์ฐ์ค ์ด๋ฒคํธ ์ ๋ณต // mouse ์ด๋ฒคํธ๊ฐ ์์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ผ๊ฐ์๋์ ๋ฒ์ด๋ฌ์ ๋๋ง ์์ผ๋ฉด ์ด ๊ธ์ ์์ฑํ์ง ์์์ ๊ฒ์ด๋ค.
์ฝ์ด์๋ฐ์คํฌ๋ฆฝํธ-์๋ฌํธ๋ค๋ง ๊ธ์ ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค. ์๋ฌ ํธ๋ค๋ง์ ์ด๋ป๊ฒ ํ๋ ๊ฒ์ด ์ข์๊ฐ์ ๋ํ ๊ณ ๋ฏผ์ ๊ณ์ ํด์๋ค.
๋ ธ์ ์ ์ฌ๋ฌ๊ฐ์ง ๋จ์ถํค๋ฅผ ์ง์ํ๊ณ ์์ด ๋จ์ถํค๋ง ์๊ณ ์๋ค๋ฉด ํค๋ณด๋๋ง์ ์ฌ์ฉํด์ ์์ฐ์ฑ์ ๋์ผ ์ ์๋ค.
ํจ์คํธ์บ ํผ์ค ๋ค์นด๋ผ์ฟ ๋ฐฐ1๊ธฐ ์๋ฃ๊ตฌ์กฐ/์๊ณ ๋ฆฌ์ฆ ์ ๋ฆฌ
Medium Daily Digest ๋ฅผ ๊ตฌ๋ ์ค์ธ๋ฐ Cypress ๊ธ์ ๋ง์ด ๋ดค๋๋ ์ถ์ฒ๊ธ์ Cypress ๊ด๋ จ ๊ธ์ด ๋ง์๋ค. ๊ทธ์ค์ Publish your Cypress Test Report with GitHub Actions๊ฐ ์์ด ๊ธ์ ์ฝ์ผ๋ฉด์ ๋ฐ๋ผํด๋ณด๊ธฐ๋ก ํ๋ค.
velopert ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ์คํ์ผ๋ง ํ์ต ์ ๋ฆฌ Sass, CSS Module, CSS-in-JS(styled-components)
snippet ์ ์ฝ๋ ์กฐ๊ฐ์ผ๋ก ๋จ์ถ์ด๋ฅผ ํตํด ์์ฃผ ์ฌ์ฉ๋๋ ์ฝ๋๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํ ์ ์๋๋ก ๋์์ฃผ๋ ๊ฒ์ด๋ค.์๋ฅผ ๋ค์ด clg๋ผ๊ณ ์ ๋ ฅํ๋ฉด console.log()๋ก ๋ณ๊ฒฝ๋๊ฑฐ๋rfc๋ผ๊ณ ์ ๋ ฅํ๋ฉด ๋ฆฌ์กํธ ํจ์ํ ์ปดํฌ๋ํธ ๊ตฌ์กฐ ์ฝ๋๋ฅผ ์์ฑํด์ฃผ์ด ๋ฐ๋ณต์ ์ธ ์ฝ๋ ์์ฑ์๊ฐ์ ์ค
ESLint ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ์ ํ์ธํด์ฃผ๋ ๋๊ตฌ์ด๋ค .
์ฝ๋ ์คํ์ผ์ ์ ๋ฆฌํ๊ธฐ ์ํ์ฌ prettier๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ ์ ๋ฆฌ
๋ฆฌ์กํธ ํด๋์คํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ๋, ์์ ์๋ constructor ๋ด๋ถ์์ this.state๋ฅผ ์ค์ ํด์ผ ํ๋๋ฐ ์์ฆ์ constructor ์์ด ๋ฐ๋ก state๋ฅผ ์ฌ์ฉํ ์ ์๋ ์ด์ ์ ๋ํ์ฌ..
setState ํจ์๋ฅผ ์ฌ์ฉํ ๋, ์ธ์๋ก ์ ๋ฐ์ดํธํ ๊ฐ์ ๋ฃ์ด์ค ์ ์๊ณ ํจ์๋ฅผ ๋๊ฒจ์ค ์ ๋ ์๋ค. ๋ ๋ฐฉ๋ฒ์ ์ฐจ์ด์ ์ ์์๋ณด์
๊ดํธ ์ ๋ฌธ์๋ฅผ, ๊ดํธ ์ ์ซ์๋งํผ ๋ฐ๋ณตํ์ฌ ๋์ดํด์ผ ํ๋ ๊ฒฝ์ฐ, ์ ๊ท์์ผ๋ก ์ฝ๊ฒ ํ ์ ์๋ค.
Square ํด๋์ค์ ํ๋กํ ํ์ ์ Rectangle์ ํ๋กํ ํ์ ์ผ๋ก ๋ฐ๊พผ ํ์๋, Square์ ์ธ์คํด์ค๋ฅผ ์์ฑํ ๋ ๋ถ๋ชจ ํด๋์ค์ธ Polygon ์์ฑ์๋ฅผ ํธ์ถํ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
class ๊ณต๋ถํ๋ ์น๊ตฌ๊ฐ ์ง๋ฌธํ ๋ด์ฉ ์ ๋ฆฌํ๊ธฐ - getter, setter ๋์๊ณผ์ ์ ์ดํด๋ณด์
useRef ๋ .current ํ๋กํผํฐ์ ๋ณ๊ฒฝ๊ฐ๋ฅํ ๊ฐ์ ๋ด๊ณ ์๋ ์์
๋ฒจ๋กํผํธ ๋ฆฌ์กํธ ๊ฐ์๋ ธํธ ์ค, "useState๋ฅผ ์ฌ์ฉํ๋ฉด state๊ฐ ์ ๋ฐ์ดํธ ๋๋๋ฐ const [state, setState]๋ฅผ ์ฌ์ฉํ ์ ์๋ ์ด์ ๊ฐ ๋ญ๊ฐ์?" ๋ผ๋ ์ง๋ฌธ์ด ์์๋ค. Why React Hook useState uses const
id, message, author ๋ฅผ ๊ฐ๊ฐ ์ํ๋ณ์๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ข์๊น? { id, message, author } ๊ฐ์ฒด๋ก ํ๋์ ์ํ๋ณ์๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ข์๊น ๊ถ๊ธํ๋ค๋ฉด?
๊ฐ์ฒด ๋ด๋ถ๊ฐ์ ๋ณ๊ฒฝํ๊ณ setState๋ฅผ ์ ์ฉํ์ง๋ง, ์ฌ๋ ๋๋ง์ด ์ผ์ด๋์ง ์๋๋ค. react์์๋ ์ํ๊ฐ ๋ณํ๋์ง ๋น๊ตํ ๋, Object.is๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ด๋ค.
ํ๋ก ํธ์๋ ํ๋ ์์ํฌ(๋ผ์ด๋ธ๋ฌ๋ฆฌ) 3๋์ฅ์ ๋ณด๋ฉด, Angular๋ ํ๋ ์์ํฌ, React๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. Vue๋ ๊ณต์ ํํ์ด์ง์ ๋ณด๋ฉด Progressive Framework๋ผ๊ณ ํํํ๊ณ ์๋ค.