๐ป Programming/Algorithm
ํ๋ก๊ทธ๋๋จธ์ค ์๊ณ ๋ฆฌ์ฆ ํ์ด https://school.programmers.co.kr/learn/courses/30/lessons/120844 ์ฌ์ฉ ์ธ์ด : ์๋ฐ์คํฌ๋ฆฝํธ JavaScript JS 1. ๋ฐฐ์ด ํ์ ์ํค๊ธฐ 1) ๋ฌธ์ ์ค๋ช
์ ์๊ฐ ๋ด๊ธด ๋ฐฐ์ด numbers์ ๋ฌธ์์ด direction๊ฐ ๋งค๊ฐ๋ณ์๋ก ์ฃผ์ด์ง๋๋ค. ๋ฐฐ์ด numbers์ ์์๋ฅผ direction๋ฐฉํฅ์ผ๋ก ํ ์นธ์ฉ ํ์ ์ํจ ๋ฐฐ์ด์ returnํ๋๋ก solution ํจ์๋ฅผ ์์ฑํด์ฃผ์ธ์. 2) ์ ํ ์ฌํญ 3 ≤ numbers์ ๊ธธ์ด ≤ 20 direction์ "left" ์ "right" ๋ ์ค ํ๋์
๋๋ค. 3) ์
์ถ๋ ฅ ์ numbers direction result [1, 2, 3] "right" [3, 1, 2] [4, 455, 6, 4, ..
โ๏ธ What I Learned/TIL
1. TypeScript์ ํ์ ๋ฐฐ๊ฒฝ 1) JavaScript์ Node.js ์๋ JavaScript๋ HTML, CSS์ ํจ๊ป ์ฌ์ฉ๋์ด ์น ํ์ด์ง์์ ๋์ ์ธ ํจ๊ณผ๋ฅผ ์ฃผ๊ธฐ ์ํด ๋ง๋ค์ด์ง ์คํฌ๋ฆฝํธ ์ธ์ด ์๊ฐ์ด ์ง๋๋ฉด์ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฑ๋ฅ์ ๋์ด๊ณ ์ ํ๋ ๋์ฆ ๋ฐ์ ๊ตฌ๊ธ V8 ์์ง์ ํ์ → Chrome ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋์ด ์์ ๊ตฌ๊ธ V8 ์์ง์ ์ฐ์ํ ์ฑ๋ฅ์ ๊ธฐ๋ฐ์ผ๋ก Node.js๋ผ๋ ํ๋ซํผ์ด ํ์ํ๊ณ , ์ด๋ฅผ ํตํด JS ์ธ์ด๋ก๋ ๋ฐฑ์๋ ํ๋ก๊ทธ๋๋ฐ์ด ๊ฐ๋ฅํด์ง 2) Node.js์ ์ ์ฌ์ ์ํ์ฑ ํ๋ก ํธ์๋์์์ ์๋ฌ๋ ์ฌ์ฉ์๊ฐ ๋ณด๋ ๋ทฐ๋ฅผ ํด์น ์๋ ์์ด๋, ์น ํ์ด์ง๋ฅผ ์ด์ฉํ๋๋ฐ ์ ๋ฐ์ ์ธ ๋์์ ํผํด๋ฅผ ๋ผ์น๋ ๊ฒฝ์ฐ๋ ๋ง์ง ์๋ค ํ์ง๋ง ๋ฐฑ์๋์์์ ์๋ฌ์ ๊ฒฝ์ฐ, ์๋ฌ์ ๋ํ ์์ธ ์ฒ๋ฆฌ๊ฐ ์ ๋๋ก ๋์ง ์์ผ๋ฉด ๋จ..
โ๏ธ What I Learned/TIL
1. React Query๋ 1) Client State vs. Server State Client State : ์น ๋ธ๋ผ์ฐ์ ์ธ์
๊ณผ ๊ด๋ จ๋ ์ ๋ณด ex. ์ ์ ์ ์ธ์ด, ํ
๋ง ๋ฑ ์๋ฒ์์ ์ผ์ด๋๋ ์ผ๊ณผ๋ ์๋ฌด ๊ด๋ จ์ด ์๋ state๋ค ๋จ์ํ ์ฌ์ฉ์์ ์ํ๋ฅผ trackingํ๋ ๊ฒ Server State : ์๋ฒ์ ์ ์ฅ,๊ทธ๋ฌ๋ ํด๋ผ์ด์ธํธ์๊ฒ ํ์ํ๋๋ฐ ํ์ํ ๋ฐ์ดํฐ๋ค ex. ๋ธ๋ก๊ทธ ํฌ์คํธ data from DB 2) React Query์ ์ญํ ์๋ฒ ๋ฐ์ดํฐ ์บ์๋ฅผ ๊ด๋ฆฌํ๋ค. React ์ฝ๋์ ์๋ฒ๋ฐ์ดํฐ๊ฐ ํ์ํ ๋ fetch๋ axios๋ฅผ ์ฌ์ฉํด ์๋ฒ๋ก ๋ฐ๋ก ์ด๋ํ์ง ์๊ณ , React Query ์บ์๋ฅผ ์์ฒญ ์ฆ, React Query ํด๋ผ์ด์ธํธ๋ฅผ ์ด๋ป๊ฒ ๊ตฌ์ฑํ๋๋์ ๋ฐ๋ผ ํด๋น ์บ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ง ๊ด๋ฆฌ ํ๋..
โ๏ธ What I Learned/TIL
1. ๐ซ Custom Hook 1) ๋๋ฌด๋๋ ๊ถ๊ธํ๋ ๋ด์ฉ ๋๋์ด! ์ ๋ฒ ๋ด์คํผ๋ ํ๋ก์ ํธ ํ ๋ ๊ณ์ํด์ input๊ฐ์ ํธ๋ค๋งํ๋ hook๋ค์ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉํ๋๋ฐ ์ด๊ฑธ ์ด๋ป๊ฒ ํ๋ฉด ๋ ํด๋ฆฐํ๊ฒ ๋ฆฌํฉํ ๋ง ํ ์ ์์์ง ๊ณ ๋ฏผ์ ํ์๋ค. 2) ์ฌ์ฉ๋ฐฉ๋ฒ hooks ํด๋ ์์ฑ ํ use~๋ก ์์ํ๋ (ex. useHookName.js) ํ์ผ ์์ฑ useState, useEffect, useRef ๋ฑ ๊ธฐ์กด ๋ฆฌ์กํธ ํ
์ ์ด์ฉํด์ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ก์ง์ custom hook์ผ๋ก ๋ง๋ค์ด์ค๋ค. โก๏ธ ์ด ๋, custom hook์๋ state์ handler ๋ ๊ฐ์ง๋ฅผ ์ ์ํด์ค๋ค. export default ํด์ค ๋ค ํ์ํ ๊ณณ์์ importํ์ฌ ์ฌ์ฉํ๋ฉด ๋! // useInput.js (์์) import { u..
โ๏ธ What I Learned/TIL
1. ํ๋ก์ ํธ ๊ฐ์ 1) ํ๋ก์ ํธ๋ช
๋ฐ ๋ด์ฉ ๐ ์๋ฐ์ด๋ฐ ์ด๋ง ์๋น์ค ์ฌ๊ณ ์ถ์ ๋ฌผ๊ฑด์ ๋ํ ๊ธ์ ๊ฒ์๊ธ๋ก ์ฌ๋ฆฌ๋ฉด, ํด๋น ๊ฒ์๊ธ์ ๋ฆฌ์คํธ๋ฅผ ์กฐํํ ์ ์๊ณ , ์ ํ์ ๊ตฌ๋งค ์ฌ๋ถ๋ฅผ ๋๊ธ๋ก ํ๊ฐํด์ฃผ๋ ๋ด์คํผ๋ ์ฌ์ดํธ Vercel ๋ฐฐํฌ https://news-feed-ten.vercel.app ์๋ฐ์ด๋ฐ ์ด๋ง news-feed-ten.vercel.app 2) ํ๋ก์ ํธ ๊ธฐ๊ฐ 2023. 6. 26 - 2023. 7. 3 3) ์ฌ์ฉ ์คํ React, Firebase, Redux, Styled-components, React-Router 4) ํ๋ก์ ํธ ๊ตฌ์กฐ ๐ฆsrc โฃ ๐components โ โฃ ๐authentication โ โ โฃ ๐Login.jsx โ โ โ ๐SignUp.jsx โ โฃ ๐comments โ โ โฃ..
โ๏ธ What I Learned/TIL
์ด๋ฒ ์ฃผ์ ํ์๋ค๊ณผ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์, ๋ธ๋์น๋ฅผ ์ด์ ์ ํ๋ ๊ฒ๊ณผ ๋ค๋ฅด๊ฒ ๋ ์ธ๋ถํํ๋ฉฐ ์์
ํ๊ฒ ๋์ด์ git branch์ ๋ํ ๊ฐ๋
์ ๋ฆฝ์ ๋ค์ ํด์ผ ํ ํ์์ฑ์ ๋๊ผ๋ค. ์ด์ ๊น์ง๋ง ํด๋, ๋ ํผ์ ๊ณผ์ ํ ๋๋ main-develop ์ด ์ ๋๋ก 1๊ฐ์ ์ถ๊ฐ ๋ธ๋์น๋ง ๋ง๋ค์ด์ ์ปค๋ฐ์ ํ์๋ค. ์ฌ์ค ๋ธ๋์น๋ฅผ ๋๋๋ ํฐ ์๋ฏธ๊ฐ ์๋ ์์ค์ด๊ธด ํ๋ค. ์ง์ ํ ๊ณผ์ ์์๋ ๋ง์ฐฌ๊ฐ์ง๋ก, main ๋ธ๋์น ๋ฐ์ ๊ฐ์์ ๋ธ๋์น๋ง 1๊ฐ์ฉ ๋ง๋ค๊ณ ์งํํ์ด์ main์ mergeํ ๋ ๋ง์ ์ถฉ๋๊ณผ์ ์ธ์์ ์์์ง๋ง, ๋ธ๋์น ์์ฒด์ ๋ํ ๊ณ ๋ ค๋ ํฌ๊ฒ ํ์ง ์์๋ ๊ฒ ๊ฐ๋ค. ๊ทธ๋ฆฌ๊ณ ๋น์์ ๋๋, ํ์๋ค๋ ์ง๊ธ๋ณด๋ค๋ ๋ Git์ด ์ด์ํ๋ค๋ณด๋ ๋ค๋ฅธ ์ฌ๋๊บผ pullํด์ค๋ค๊ฐ ๋ณธ์ธ ์ฝ๋ ๋ ์๊ฐ๊ณ ์ด๋ฐ ์ผ๋ ์ฌ๋ฌ ๋ฒ ์์๋๋ฌ๋ค. ์์ ์ ..
โ๏ธ What I Learned/TIL
firebase๋ฅผ ์ด์ฉํด์ ํ๋ก์ ํธ๋ฅผ ํ๋ ์ค์ธ๋ฐ, firebase์์ ์ฌ์ฉํ๋ API key๋ฅผ .env ํ์ผ์ ๋ฐ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์๊ฒ ๋์๋ค. ๊ทธ๋์ .env ํ์ผ์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค. 1. ํ๊ฒฝ๋ณ์(.env) 1) ํ๊ฒฝ๋ณ์๋? ์ด์ ์ฒด์ (Operating System)๋ ์ ํ๋ฆฌ์ผ์ด์
์์ ์ฌ์ฉ๋๋ ๋ณ์ ์ด ๋ณ์๋ค์ ์์คํ
์ค์ , ์ ํ๋ฆฌ์ผ์ด์
๊ตฌ์ฑ ๋ฐ ๋์์ ์ํฅ์ ๋ฏธ์น ์ ์๋ ๊ฐ๋ค์ ํฌํจ 2) ํ๊ฒฝ๋ณ์ ํ์ผ (.env) .env ํ์ผ์ ์ฃผ๋ก ํ๋ก์ ํธ์ ํ๊ฒฝ ๋ณ์๋ฅผ ์ค์ ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ํ์ผ "env"๋ "environment"์ ์ค์๋ง๋ก, ํ๊ฒฝ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ค์ ๊ฐ์ ์ ๊ณตํ๋ ๋ฐ ์ฌ์ฉ๋จ ์ผ๋ฐ์ ์ผ๋ก .env ํ์ผ์ ํ๋ก์ ํธ์ ๋ฃจํธ ๋๋ ํ ๋ฆฌ์ ์์น ํ๊ฒฝ ๋ณ์๋ฅผ ํค-๊ฐ ์์ผ๋ก ์ ์ 2. ..
โ๏ธ What I Learned/ํธ๋ฌ๋ธ์ํ
๐จ ๋ฐ์ ๋ฌธ์ ERROR in ./node_modules/react-router-dom/dist/index.js 13:0-810 export 'AbortedDeferredError' (reexported as 'AbortedDeferredError') was not found in 'react-router' (possible exports: Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, ..
โ๏ธ What I Learned/ํธ๋ฌ๋ธ์ํ
๐จ ๋ฐ์ ๋ฌธ์ Firebase: Error (auth/account-exists-with-different-credential) ํ์ฌ ์ํฉ 1. ์ด์ ๋ถํฐ GitHub ๊ณ์ ์์ Google ์์ด๋๋ฅผ ์ฌ์ฉํ๊ณ ์์๋ ์ํฉ 2. ๋ด๊ฐ ๋ง๋ ์น์ฑ์์ Google ๊ณ์ ์ผ๋ก ๋ก๊ทธ์ธ ํ ๋ก๊ทธ์์ โก GitHub ๋ก๊ทธ์ธ์ ์๋ํ๋ ๊ณผ์ ์์ GitHub ๋ก๊ทธ์ธ์ด ๋์ง ์๊ณ ์์ ์๋ฌ ๋ฐ์ ๐ค ๋ฌธ์ ์์ธ ๊ฐ์ ์ด๋ฉ์ผ ์ฃผ์๊ฐ ๋ค๋ฅธ ์ธ์ฆ ๋ฐฉ๋ฒ์ผ๋ก ์ ์๋์๊ธฐ ๋๋ฌธ์ ๋ฐ์ // ์์ GitHub : myemail@gmail.com Google : myemail@gmail.com // ์์ ๊ฐ์ด ๊ฐ์ gmail ์์ด๋๋ฅผ ๊ณต์ ํ๊ณ ์๋ ์ํฉ์์ ๋ฐ์ ๐ ํด๊ฒฐ ๋ฐฉ๋ฒ Authentication ์ค์ ๋ณ๊ฒฝ ์ฝ์ โก ํด๋น ํ๋ก์ ํธ ..
๐ป Programming/React
1. Redux๋? ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์ค์ state ๊ด๋ฆฌ์๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ๋์์ฃผ๋ ํจํค์ง ์ปดํฌ๋ํธ ๊ฐ์ state ๋ฐ์ดํฐ๋ค์ ๋ถ๋ชจ-์์ ๊ด๊ณ๋ก ์ค์ ํ์ฌ props๋ฅผ ํตํด ํ์ ์ ์ผ๋ก ์ ๋ฌํ์ง ์๊ณ , ์ค์์์ ๊ด๋ฆฌํ์ฌ ์ด๋ค ์ปดํฌ๋ํธ์์๋ ์ฝ๊ฒ ์ ๊ทผํ๊ณ ์ ์ดํ ์ ์๋๋ก ํด์ค๋ค. 1) Redux์ ํ๋ฆ View์์ ์ก์
์ด ์ผ์ด๋๋ค. dispatch์์ action์ด ์ผ์ด๋๊ฒ ๋๋ค. action์ ์ํ reducerํจ์๊ฐ ์คํ๋๊ธฐ ์ ์ middleware๊ฐ ์๋ํ๋ค. middleware์์ ๋ช
๋ น๋ด๋ฆฐ ์ผ์ ์ํํ๊ณ ๋ ๋ค, reducerํจ์๋ฅผ ์คํํ๋ค. reducer์ ์คํ๊ฒฐ๊ณผ store์ ์๋ก์ด ๊ฐ์ ์ ์ฅํ๋ค. store์ state์ subscribeํ๊ณ ์๋ UI์ ๋ณ๊ฒฝ๋ ๊ฐ์ ์ค๋ค. 2) Pro..