๐ถ๐พ
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk00qJ%2FbtsE0rJW9j1%2FQqziMXbj00YFoZw9MksVW0%2Fimg.png)
[css] height ๊ธธ์ด ๋๋ ธ์ ๋, ์์ชฝ ๋ฐฉํฅ์ผ๋ก ๋์ด๋๊ฒ ํ๊ธฐ
๋ฌธ์ ๋ง๋๊ทธ๋ํ(?)์ฒ๋ผ ์์ชฝ์ผ๋ก ๋์ด๋๋ ์ฌ๊ฐํ์ ๋ง๋ค๊ณ ์ ํ๋๋ฐ height๊ธธ์ด๋ฅผ ๋๋ฆฌ๋ฉด ์๋ ๋ฐฉํฅ์ผ๋ก ๋์ด๋์ ์์น๋ฅผ ๋ง์ถ๊ธฐ ์ฝ์ง ์์๋ค (height๊ธธ์ด๊ฐ props์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๊ฒ ํ๋ ๊ฒ์ ๊ตฌํํ๊ณ ์์์) ๋ด๊ฐ ์ฒดํฌํ ๊ฐ์๋งํผ ๊ทธ๋ํ์ ๊ธธ์ด๊ฐ ๊ธธ์ด์ ธ์ผํ๊ธฐ ๋๋ฌธ์ ๊ธฐ์ค์ด ์๋์ชฝ์ด ๋์ด์ผํ์ ํด๊ฒฐ transform: scaleY(-1); transform-origin: top; ์์์ ๊ฐ์ฅ์๋ฆฌ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ์์ง์ผ๋ก ๋ค์ง์ด ๋ฐฉํฅ์ ๋ฐ๊พธ๋ฉด heigth๋ฅผ ๋๋ ธ์๋ ์์ชฝ์ผ๋ก ๋์ด๋๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค.
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb3A7nH%2FbtsEP8qIj9z%2FWHPKQW4s9f6H6cs3aB24WK%2Fimg.jpg)
[react] div ํฌ๊ธฐ content ๊ธธ์ด์ ๋ฐ๋ผ ๋ณ๊ฒฝ
๋ฌธ์ {field} {date} navigate(`/edit/${date}`)} /> ๐ {title} {content} PostConatiner๊ฐ ํ์์ ๋ฐ์ค์ผ ๋, content์ ๊ธธ์ด์ ๋ฐ๋ผ ์ธ๋ก๊ธธ์ด๊ฐ ๊ธธ์ด์ ธ์ผํ๋ค. ํด๊ฒฐ const textBoxRef = useRef(null); useEffect(() => { if (textBoxRef.current) { const textBoxHeight = textBoxRef.current.clientHeight + 70; const container = document.getElementById("PostsContaioner"); if (container) { container.style.height = `${textBoxHeight}px`; } } }, [..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc7kBD6%2FbtsECtg8wXx%2FM6DMZUszthI6E2njUi3m5k%2Fimg.png)
[redux] react์์ redux-toolkit ์ฌ์ฉ
๊ฐ์ธํ๋ก์ ํธ๋ฅผ ์งํํ ๋๋ ๊ณ์ props๋ก ์ฐ๊ฒฐ-์ฐ๊ฒฐํด์ ๋๊ฒจ์ผํ๋ ๊ฒ์ ๋ํด ๊ท์ฐฎ์๊ณผ .. ๊ทธ๋ ๊ฒ ๊ณ์ ์์์ผ๋ก ๋๊ธฐ๋ค๋ณด๋ ์ฐ๊ด๋์ง ์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ค๊น์ง ๋ฆฌ๋๋๋ง์ด ๋์ด์ผํ๋ ๊ฒ์ ๋ํด ๋ฌธ์ ๋ฅผ ๋๋ผ๊ณ ์๋ ์์ค ์ํ์ฝ๋ฉ ๋ฆฌ๋์ค ๊ฐ์๋ฅผ ํตํด ์๋ก์ด ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ์ ์๊ฒ ๋๊ณ , ์ด์ด ๋ฆฌ๋์ค ํดํท๊น์ง ์๊ฒ๋์๋ค. redux - js ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ - store๋ผ๋ ํ๋๋ฟ์ธ ๋ฐ์ดํฐ ๊ณต๊ฐ - action์ ํตํด์ ์ํ ๋ณ๊ฒฝ - ๋ณ๊ฒฝ์ ์์ ํจ์๋ก๋ง ๊ฐ๋ฅ ๐ store ์ํ๊ฐ ๊ด๋ฆฌ๋๋ ํ๋์ ๊ณต๊ฐ ๐ action store์ ์ด๋ฐํ ๋ฐ์ดํฐ ๐ reducer action์ reducer๊ฐ ๋ฐ์ store์ ์ํ๋ฅผ ์ ๋ฐ์ดํธ ๐ dispatch store์ ๋ด์ฅํจ์ ์ค ํ๋๋ก action์ ๋ฐ์์ํด ac..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOyBqS%2FbtsEvdlZ9Sj%2FkqkIw39KKk3IPTQ3WEPAkK%2Fimg.png)
[pocketBase] pocketBase ์ฌ์ฉ
์ ํ๋ธ ๋ณด๋ค๊ฐ "๋จ ํ๋์ ํ์ผ๋ก ๋ฐฑ์๋ ๊ตฌ์ถ"์ด๋ผ๋ ํ์ดํ๋ก pocketBase์ ๋ํ ๋ด์ฉ์ด ์ฌ๋ผ์์ ๋ณด๋๊น ํฅ๋ฏธ๊ฐ ์๊ฒจ์ ์ง์ ์ฌ์ฉํด๋ณด๊ธฐ๋ก ๊ฒฐ์ ! ํผ์ ๋ฆฌ์กํธ ํ๋ก์ ํธ ๋ง๋ค๋ ์ฌ์ฉํ๊ธฐ ์ฌ์ธ ๊ฒ ๊ฐ์๋ค ์ฌ์ฉ ์ ๋ค์ด๋ก๋ pocketBase Docs์ ๊ฐ์ ์ด์์ฒด์ ์ ๋ง์ถฐ ๋ค์ด๋ก๋ ๋ค์ด๋ฐ์ ํ์ผ์์ ์๋ ๋ช ๋ น์ด ./pocketbase serve ์ค๋ฅ ?! (mac) ๊ทธ๋ฐ๋ฐ.. 'pocketbase'์(๋) Apple์์ ์ ์ฑ ์ํํธ์จ์ด๊ฐ ์๋์ง ํ์ธํ ์ ์๊ธฐ ๋๋ฌธ์ ์ด ์ ์์ต๋๋ค... ํด๊ฒฐ์ ์ํด ์๋ ์ฒ๋ผ ์ค์ ์ ๋ค์ด๊ฐ์ ๊ทธ๋๋ ํ์ฉ์ ํด๋ฆญ ๊ทธ ๋ค์ ๋ค์ ์ณ๋ณด๋ ์ด๋ ๊ฒ ์ ๋ฌ๋ค ๐ฅณ ์ฌ์ฉ admin http://127.0.0.1:8090/_/ ๋ค์ด๊ฐ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ ์ปฌ๋ ์ ์ด ๋ง๋ค์ด์ ธ ์๋ ์ํ์..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2OJID%2FbtsEuOTs5bL%2FhntxbNdkUi2NjpMmeGuQ91%2Fimg.jpg)
[styled-components] styled-components ์ฌ์ฌ์ฉ & props
์ปดํฌ๋ํธ ํ์ฅ(์ฌ์ฌ์ฉ)ํ๊ธฐ ๋ฒํผ ํ๋๋ฅผ ๋ง๋ค์ด์ ๊ทธ ๋ฒํผ์ ์ฌ์ฌ์ฉํด ๊ธ์ํฌ๊ธฐ๊ฐ ๋ค๋ฅธ ๋ฒํผ์ ์ฝ๊ฒ ๋ง๋ค๊ธฐ const SimpleBtn = syteld.button` color:white; background-color:green; `; const LargeBtn = styeld(SimpleBtn)` font-size: 50px; `; ๊ดํธ () ์์ ๋ฃ์ด์ค์ผ๋ก ์ฌ์ฌ์ฉ ๊ฐ๋ฅ LargeBtn์ color, background-color๋ฅผ ์์(?) ๋ฐ๊ฒ ๋จ Props ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ const ReactBtn = styled.button` color: ${(props)=> props.primary? "white" : "black"} `; // 1. Normal // 2. Primary 1์ pr..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcoL8Pz%2FbtsEqvzjaaH%2FAhkrLoDQQUGRQPdnjnPdK1%2Fimg.jpg)
[style-components] props ์ค๋ฅ
๋ฌธ์ Warning: React does not recognize the isVisible prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isVisible instead. If you accidentally passed it from a parent component, remove it from the DOM element. {work.workDeadline < today ? "๋ง๊ฐ๋ ์ง๊ฐ ์ง๋ todo์ ๋๋ค !" : work.workDeadline === today ? "์ค๋๊น์ง ๋๋ด์ผํ๋ todo์ ๋๋ค !" : null} const Dead..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbpvdeM%2FbtsEmMBwQPC%2FfL9lm433DG83mHiL6o2GI1%2Fimg.png)
[css] cursor ๋ณ๊ฒฝ
cursor๋ฅผ ๋ด๊ฐ ์ํ๋ ์ด๋ฏธ์ง๋ก ๋ณ๊ฒฝํ๊ธฐ ์ํด ์๋ ์ฝ๋๋ฅผ ๋ฃ์ด์คฌ๋ค ์ด๋ฏธ์ง๊ฐ ๋ก๋ ๋์ง ์์๊ฒฝ์ฐ ๋ค์ auto๋ก ์คํ๋๋ค cursor: url("/public/images/cur.png"), auto; โ๏ธ ์ด๋ฏธ์ง ์ ์ฉ์ด ์๋ ๊ฒฝ์ฐ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๊ฐ 128px์ดํ์ฌ์ผ ์ ์ฉ์ด ๊ฐ๋ฅํ๋ค๊ณ ํ๋๊น ์ด๊ฑฐ ๊ผญ ํ์ธ ! ๊ฒฝ๋ก ํ์ธ ! ๋๋ ์ด๋ฏธ์ง ํฌ๊ธฐ ๋๋ฌธ์ ์ ์ฉ์ด ์๋์์๋ค ๐ ๐ญ ๋ง๋ค์ด์ง ์ปค์ ์ด์ฉ https://www.cursors-4u.com/cursor/2009/11/11/animated-hello-kitty-wink.html Animated Hello Kitty Wink Cursor Option #1 - Universal CSS/HTML Code This CSS/HTML Code of Animated ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FblFN0Z%2FbtsEmCTazYd%2FROUGT4KcKpU4kWkkNmRnJ0%2Fimg.png)
[css] Animate.css ์ฌ์ฉ
https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style ์ฌ์ดํธ์์ ๋ค์ํ ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ๋ฏธ๋ฆฌ ์ฌ์ฉํด๋ณด๊ณ ์ํ๋ ์ ๋๋ฉ์ด์ ์ ๋ด ํ๋ก์ ํธ์ ์ ์ฉํ ์ ์๋ค ! ์ค์น npm install animate.css --save ์ ์ฉ ์ ๋๋ฉ์ด์ ์ ์ฉ์ ์ํ js ํ์ผ์ import 'animate.cs..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPMuzr%2FbtsEkhhgP4R%2FvUicJ6U8wWp5i7dZcaxwK1%2Fimg.jpg)
[react] ์๋ก๊ณ ์นจํด์ผ ๊ฒ์๋ฌผ ๋จ๋ ๋ฌธ์
๋ฌธ์ ๋ก๊ทธ์ธ / ๋ก๊ทธ์์์ firebase ์ธ์ฆ์ ํตํด ํ๊ณ , user ์ ๋ณด์ ๋ฐ๋ผ ๋ด๊ฐ ์ด ๊ธ๋ง ๋ณด์ฌ์ผํ๋๋ฐ ๋ก๊ทธ์ธ์ ํ๋ฉด ์ด์ ๋ก๊ทธ์ธ์ ํ๋ user์ ๊ฒ์๊ธ์ด ๋ณด์ด๊ณ ์๋ก๊ณ ์นจ์ ํด์ผ ๊ทธ๋๋ถํฐ ์ง๊ธ user๊ฐ ์ด ๊ฒ์๋ฌผ์ด ๋ณด์ ํด๊ฒฐ ๊ทธ๋ฅ .. user๋ฅผ state๋ก ๊ด๋ฆฌ๋ฅผ ์ํ๊ฑฐ์์ ๐ฎ๐จ ๋ user๊ฐ ๋ณํ๋ ๊ฒ์ ๋ฐ๋ผ ๊ฒ์๋ฌผ์ ๊ฐ์ ธ์ฌ ์ ์๊ฒ useEffect dep์ user๋ฅผ ์ถ๊ฐํด์คฌ์ด์ผํ๋ค ๐จ // const user = JSON.parse(localStorage.getItem("user")); ์ด๋ ๊ฒ ๋์ด์์์ const [user, setUser] = useState(JSON.parse(localStorage.getItem("user"))); const uid = user && user...