๐ถ๐พ/frontend
![](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%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%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%2FbDTwhW%2FbtsD3pO9fpW%2FVK96k5j1CseupKbqrgypc1%2Fimg.jpg)
[js] localStorage์ ์ ์ฅ & login
localStorage ? - localStorage์ ์น ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์๋ ๊ธฐ๋ฅ์ผ๋ก, ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ซ์๋ ์ ์ฅํ ๋ฐ์ดํฐ๋ฅผ ๊ณ์ํด์ ์ ์งํ ์ ์๋ค. firebase๋ฅผ ํตํด ๋ก๊ทธ์ธ & ํ์๊ฐ์ ์ ๊ตฌํํ๊ณ , ๋ก๊ทธ์ธํ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ localStorage์ ์ ์ฅํ๋ ๋ฐฉ์์ ์ด์ฉํด๋ณด์๋ค. ์ฐ์ ๋ก๊ทธ์ธํ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ localStorage์ ์ ์ฅํ๊ธฐ ์ํด์๋ localStorage.setItem(key, value)๋ฅผ ์ด์ฉํ๋ค. const handleSubmit = (e) => { e.preventDefault(); signInWithEmailAndPassword(auth, id, password) .then((userCredential) => { const user = userCre..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRCWgv%2FbtsD4kz5cY1%2FWrk96WLuKhWP7W3PZ7dJRK%2Fimg.png)
[html] Open Graph
Open Graph ? - sns๋ฅผ ํตํด์ ์ฌ์ดํธ๊ฐ ๊ณต์ ๋ ๋, ์ฌ์ดํธ์ ๋ํ ๋ฉํ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํ ํ๊ทธ index.html ์ด์ธ ๋ค๋ฅธ property๋ https://ogp.me/ ์์ ํ์ธ ๊ฐ๋ฅ +) ์นด์นด์ค์์ ๋ฐ๋ก ๋ณ๊ฒฝ์ด ์๋ ๊ฒฝ์ฐ ์นด์นด์ค ๊ฐ๋ฐ์ ์ฌ์ดํธ > ๋๊ตฌ > ๋๋ฒ๊ฑฐ ๋๊ตฌ > ๊ณต์ ๋๋ฒ๊ฑฐ > URL ์ ๋ ฅ์ ํตํด ์บ์ ์ญ์
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCBk5E%2FbtsD0JfnrIS%2FjuxTNLE1RlXYSViUbZqmnk%2Fimg.jpg)
[react] Firebase๋ก ํ๋ก์ ํธ ๋ฐฐํฌ
https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform ๊ฐ๋ฐ์๊ฐ ์ฌ์ฉ์๊ฐ ์ข์ํ ๋งํ ์ฑ๊ณผ ๊ฒ์์ ๋น๋ํ๋๋ก ์ง์ํ๋ Google์ ๋ชจ๋ฐ์ผ ๋ฐ ์น ์ฑ ๊ฐ๋ฐ ํ๋ซํผ์ธ Firebase์ ๋ํด ์์๋ณด์ธ์. firebase.google.com ํ๋ก์ ํธ ์์ฑ ํ ์ ์นดํ ๊ณ ๋ฆฌ์์ ๋น๋ > ํธ์คํ ํด๋ฆญ 1. Firebase CLI ์ค์น $ npm install -g firebase-tools ํฐ๋ฏธ๋์์ ์คํ 2. ํ๋ก์ ํธ ์ด๊ธฐํ $ firebase login $ firebase init vscode์์ ์คํ (ํฐ๋ฏธ๋์์ ์คํ์ rootํด๋๊น์ง ๊ฐ์ ์คํ) firebase init (๋ฐ๋์ root ํด๋์..