profile
๊นŒ๋จน์ง€๋งˆ๋„ํ† ๋„ํ† ์ž ๋ณด๐Ÿ˜
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (102)vue(44)React(31)router(16)vue router(13)๋„์ ๋„์ (9)components(9)JavaScript(7)vuex(7)Props(5)State(5)withoutCRA(4)queue(4)v model(3)useState(3)CSS(3)v-on(3)v-for(3)next.js(3)v if(3)lifecycle(2)mutations(2)key(2)transition(2)css-modules(2)router view(2)๋น„๋™๊ธฐ(2)pre-rendering(2)Payload(2)ref(2)typescript(2)modules(2)react-query(2)catch-all(2)CSR(2)Fetch(2)link(2)useEffect(2)Dispatch(2)setter(2)API(2)Created(1)forwarding refs(1)framework(1)library(1)actions(1)alias(1)Registered Ports(1)mapActions(1)beforeRouteEnter(1)plugins(1)merge(1)http(1)Callback refs(1)CRA(1)mapState(1)Cloudinary(1)stack(1)์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง(1)$route.matched(1)priority queue(1)Dynamic Ports(1)scroll-behavior(1)mac(1)Named Routes(1)once(1)X-Templates(1)React.lazy(1)Cache(1)v-show(1)Rebux(1)๋ชจ๋“ˆ(1)Object Spread Operator(1)SSH key(1)appear(1)memoization(1)router.replace(1)velog(1)๋‹ค์ค‘์ž…๋ ฅ์ œ์–ด(1)mapMutations(1)PORT(1)beforeRouteUpdate(1)permission denied(1)HWR(1)์„ ์–ธ์  ๋ Œ๋”๋ง(1)์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ(1)Crashlytics(1)strict(1)getServerSideProps(1)fetching(1)v-once(1)computed(1)structure(1)Firebase(1)Getters(1)slot-scope(1)await(1)command not found(1)rootGetters(1)๊ตฌ์กฐ(1)ajax(1)ํ”Œ๋Ÿฌ๊ทธ์ธ(1)window.history API(1)async(1)rootState(1)node.js(1)class(1)branch(1)useParams(1)Deque(1)ESLint(1)webpack(1)layout(1)namespaced(1)Named Views(1)this.$route(1)hash mode(1)directives(1)Nginx(1)REST API(1)updated(1)vuex store(1)Handling Events(1)fragment(1)inline-template(1)๋ผ์šฐํŠธ ๋ฉ”ํƒ€ ํ•„๋“œ(1)conflict(1)nested(1)afterEach(1)cacheTime(1)Lazy loading(1)Query Invalidation(1)registerModule(1)context(1)watch(1)Google Analytics(1)destroyed(1)v-slot(1)keep alive(1)router-link(1)useMemo(1)useReducer(1)apache(1)circular queue(1)axios(1)Outlet(1)middleware(1)parent(1)styled components(1)์ด๋ฒคํŠธ์ฒ˜๋ฆฌ(1)repository(1)hook(1)useCallback(1)์‚ฌ์šฉ์ž ์ •์˜ ์ด๋ฒคํŠธ(1)preserveState(1)BrowserRouter(1)type annotation(1)swp(1)SSR(1)type(1)transition mode(1)template(1)$off(1)custom hook(1)beforeEnter(1)Stale(1)data(1)meta(1)params(1)Slots(1)form(1)๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ(1)getter(1)passing-props(1)spa(1)E325: ATTENTION(1)ON(1)router.push()(1)style(1)rewrites(1)redirects(1)์กฐ๊ฑด๋ถ€๋ Œ๋”๋ง(1)github(1)router.go(1)v-else-if(1)render(1)redirect(1)seo(1)Well-Known Ports(1)JSX(1)Redux Toolkikt(1)babel(1)diff(1)useNavigate(1)v else(1)@Inject(1)v-bind(1)@BeforeEach(1)๊ฟ€๋ฒ™์ฐจ๋…ธ(1)mutation(1)unregisterModule(1)๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง(1)forms(1)CreateElement(1)methods(1)provide(1)Style Bindings(1)beforeResolve(1)transition-group(1)mixins(1)createNamespacedHelpers(1)history mode(1)authentication(1)git(1)vim(1)staletime(1)๊ฐ์ฒด ์ „๊ฐœ ์—ฐ์‚ฐ์ž(1)React.memo(1)queries(1)์ˆœํ™˜ ์ฐธ์กฐ(1)๋ณ€์ด(1)์ œ์–ด์ปดํฌ๋„ŒํŠธ(1)Root(1)hydration(1)mounted(1)port number(1)promise(1)import(1)useFetch(1)beforeCreate(1)Dynamic Routes(1)data fetching(1)A/B testing(1)instance(1)caching(1)mapGetters(1)ReactDOM(1)

๋‹ค์‹œ ์“ฐ๋Š” React Next.js #2

Next.js ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ layout ํŒจํ„ด components ํด๋”์— Layout.js ๋งŒ๋“ค์–ด NavBer, Header ๋“ฑ ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋„ฃ๋Š”๋‹ค. ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ _app.js์— ์ž‘์„ฑํ•ด๋„ ๋˜์ง€๋งŒ, ๋Œ€์ค‘์ ์œผ๋กœ app.js๋ฅผ ํฌ๊ฒŒ ํ•˜๊ธฐ๋ณด๋‹จ Layout

2023๋…„ 3์›” 27์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

๋‹ค์‹œ ์“ฐ๋Š” React Next.js #1

์•„ Nextjs ๋ญ๋”๋ผ~ ๋ถ„๋ช…ํžˆ ์ผ์—ˆ๋Š”๋ฐ~๋‹ค์‹œ ์“ด๋‹ค~์‰ฝ๊ฒŒ ํ’€์–ด ๋งํ•˜๋ฉด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Library) : ๋‹จ์ˆœ ํ™œ์šฉ๊ฐ€๋Šฅํ•œ ๋„๊ตฌ๋“ค์˜ ์ง‘ํ•ฉ ๊ฐ™์€ ๋Š๋‚Œ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„๋•Œ ์‚ฌ์šฉํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€๊ฑฐ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.ํ”„๋ ˆ์ž„์›Œํฌ(Framework) : ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์ •ํ•œ ๊ทœ์น™๋Œ€๋กœ ์‚ฌ์šฉํ•ด์•ผ

2023๋…„ 3์›” 25์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

ํฌํŠธ(Port)๋ž€?

๊ฟ€ ๋จน์€ ๋ฒ™์–ด๋ฆฌ๊ฐ€ ๋˜์ง€ ์•Š๊ธฐ ์œ„ํ•œ ์ฐจ๊ทผ์ฐจ๊ทผํ•œ ๋…ธ๋ ฅ #1 ํฌํŠธ(Port) IP ์ฃผ์†Œ์™€ ํ•จ๊ป˜ ํ‘œ๊ธฐํ•˜๋Š” ์˜ˆ์‹œ : http://000.000.000.000:21 http : ํ”„๋กœํ† ์ฝœ 000.000.000.000 : IP ์ฃผ์†Œ :num : ํฌํŠธ ๋ฒˆํ˜ธ ํฌํŠธ(port)๋Š” ๋ณดํ†ต

2023๋…„ 3์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Cloudinary ์…‹์—…ํ•˜๊ธฐ

Cloudinary๋Š” ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ ์ด๋ฏธ์ง€ ๋ฐ ๋น„๋””์˜ค ๊ด€๋ฆฌ ์„œ๋น„์Šค์ด๋‹ค. ์ด๋ฏธ์ง€๋‚˜ ๋น„๋””์˜ค๋ฅผ ๊ทธ๋ƒฅ ์—…๋กœ๋“œ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋ณ€ํ™˜ํ•˜์—ฌ ๋” ๋น ๋ฅด๊ฒŒ ๋กœ๋”ฉํ•  ์ˆ˜ ์žˆ๊ณ ,๋ณ€ํ™˜ ์‹œ ํ€„๋ฆฌํ‹ฐ๋‚˜ ์‹œ๊ฐ์ ์œผ๋กœ ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š์œผ๋ฉฐ ์ž๋™์œผ๋กœ ์ด๋ฏธ์ง€๋‚˜ ๋น„๋””์˜ค๋ฅผ ๋‹ค๋ฅธ ๋ฒ„์ „์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.์ผ

2023๋…„ 2์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Firebase ์…‹์—…ํ•˜๊ธฐ

Firebase๋Š” ๊ตฌ๊ธ€์—์„œ ์ง€์›ํ•˜๋ฉฐ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ํ”Œ๋ ›ํผ์ด๋‹ค.๋นŒ๋“œํ•˜๊ณ  ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒํ•˜๊ณ  ๊ฒŒ์ž„์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.Firebase๋Š” ๋นŒ๋“œ ๋‹จ๊ณ„๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ๋ฐฐํฌ ํ›„๊นŒ์ง€ ๋ชจ๋“  ํ”„๋กœ์„ธ์Šค์—์„œ ํ•„์š”ํ•œ ๊ฒƒ๋“ค์„ ๋‹ด๊ณ  ์žˆ๋‹ค.๋นŒ๋“œ : Firestore, Au

2023๋…„ 2์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Git์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๋ณด์ž

Git Git : ๋‹ค์šด๋ฐ›์•„ ์„ค์น˜ํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ํ˜•์ƒ ๊ด€๋ฆฌ ๋„๊ตฌ(Configuration Management Tool) ํ”„๋กœ๊ทธ๋žจ GitHub : Git์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ์˜จ๋ผ์ธ ์„œ๋น„์Šค Git ์‚ฌ์šฉํ•˜๊ธฐ 1. Git ์„ค์น˜ Homebrew ํŽ˜์ด์ง€์—์„œ ์Šค

2023๋…„ 1์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

๋„์ ๋„์ 2

์˜ค๋Š˜ Vue ๊ฐ•์˜๋ฅผ ๋‹ค ๋“ค์—ˆ๋‹ค,,์ข€ ๊ตต์งํ•œ ๊ฒƒ๋“ค์€ ๋‚˜๋ฆ„? ๋‹ค ๋“ค์€ ๊ฒƒ ๊ฐ™๋‹ค์™œ ์ด๋ ‡๊ฒŒ ์˜ค๋ž˜ ๋†€์•˜๋‚˜ ์ž์ฑ…๋„ ํ•˜๊ณค ํ–ˆ์ง€๋งŒ ์ด์ œ์™€ ๋‹ค์‹œ ์ƒ๊ฐํ•ด๋ณด๋ฉด๊ทธ๋ž˜๋„ ๋‚˜๋ฅผ ์œ„ํ•ด ์‰ฌ์–ด๋„ ๋˜๋Š”, ์‰ด๋งŒํ•œ ์‹œ๊ฐ„์ด์—ˆ๋˜ ๊ฑฐ ๊ฐ™๋‹คVue ๊ฐ•์˜๊ฐ€ ๋๋‚˜๊ฐˆ ๋•Œ์ฏค Vue๊ฐ€ ๋๋‚˜๋ฉด ๋ญ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์•ผ ํ•˜๋‚˜ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ

2022๋…„ 12์›” 14์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue Vuex Advanced

์‹ค์ œ๋กœ Vuex๋Š” ์ฝ”๋“œ ๊ตฌ์กฐ๋ฅผ ์ œํ•œํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค. ํ•˜์ง€๋งŒ,์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ ˆ๋ฒจ์˜ ์ƒํƒœ<span style="color:2. ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝ์‹œํ‚ค๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ๋™๊ธฐ ํŠธ๋žœ์žญ์…˜์ธ mutation์„ commitํ•˜๋Š” ๊ฒƒ๋น„๋™๊ธฐ์‹ ๋กœ์ง์€ ์บก์Šํ™”๋˜์–ด์•ผ ํ•˜๋ฉฐ action์œผ๋กœ ๊ตฌ์„ฑ์œ„ ๊ทœ

2022๋…„ 12์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue Vuex ๋ชจ๋“ˆ

๋‹จ์ผ ์ƒํƒœ ํŠธ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ชจ๋“  ์ƒํƒœ๊ฐ€ ํ•˜๋‚˜์˜ ํฐ ๊ฐ์ฒด ์•ˆ์— ํฌํ•จ๋˜๊ฒŒ ๋œ๋‹ค.๊ทธ๋Ÿฌ๋‚˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง์— ๋”ฐ๋ผ ์ €์žฅ์†Œ๊ฐ€ ๋งค์šฐ ๋น„๋Œ€ํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค.์ด๋ฅผ ์œ„ํ•ด Vuex๋Š” ์ €์žฅ์†Œ๋ฅผ ๋ชจ๋“ˆ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.๊ฐ ๋ชจ๋“ˆ์€ ์ž์ฒด <span style="backgroun

2022๋…„ 12์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue Vuex ์•ก์…˜

์•ก์…˜์€ mutations์™€ ์œ ์‚ฌํ•˜๋‹ค. ๋‹ค๋ฅธ ์ ์€,์ƒํƒœ๋ฅผ mutations์‹œํ‚ค๋Š” ๋Œ€์‹  ์•ก์…˜์œผ๋กœ mutations์— ๋Œ€ํ•œ commit์„ ํ•œ๋‹ค.<span style="background-color:\`\`\`javascriptconst store = new Vuex.S

2022๋…„ 12์›” 13์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue Vuex ๋ณ€์ด

Vuex ์ €์žฅ์†Œ์—์„œ ์‹ค์ œ๋กœ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€ ๋ณ€์ด<span style="color:Vuex mutations์€ ์ด๋ฒคํŠธ์™€ ๋งค์šฐ ์œ ์‚ฌํ•˜๋‹ค.๊ฐ mutations์—๋Š” ํƒ€์ž… ๋ฌธ์ž์—ด ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์žˆ๊ณ  ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜๋Š” ์‹ค์ œ ์ƒํƒœ ์ˆ˜์ •์„ ํ•˜๋Š” ๊ณณ์ด๋ฉฐ, ์ฒซ ๋ฒˆ์งธ ์ „๋‹ฌ์ธ์ž๋กœ

2022๋…„ 12์›” 13์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue Vuex Getters

๋•Œ๋กœ๋Š” ์ €์žฅ์†Œ ์ƒํƒœ๋ฅผ ๊ธฐ๋ฐ˜ํ•˜๋Š” ์ƒํƒœ๋ฅผ ๊ณ„์‚ฐ<span style="color:<span style="color:\`\`\`javascriptcomputed: { doneTodosCount () { return this.$store.state.todos.

2022๋…„ 12์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue Vuex ์ƒํƒœ

Vuex๋Š” ๋‹จ์ผ ์ƒํƒœ ํŠธ๋ฆฌ<span style="color:์ฆ‰, ์ด ๋‹จ์ผ ๊ฐ์ฒด๋Š” ๋ชจ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋ฅผ ํฌํ•จํ•˜๋ฉฐ ์›๋ณธ ์†Œ์Šค<span style="color:์ด๋Š” ๊ฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๋งˆ๋‹ค ํ•˜๋‚˜์˜ ์ €์žฅ์†Œ๋งŒ ๊ฐ–๊ฒŒ ๋œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.๋‹จ์ผ ์ƒํƒœ ํŠธ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํŠน์ •

2022๋…„ 12์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Vue Vuex ์„ค์น˜ ๋ฐ ์‚ฌ์šฉ๋ฒ•

Vuex๋Š” Vue.js ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ„ด + ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด๋‹ค.์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ <span style="background-color:๋˜ํ•œ Vue์˜ ๊ณต์‹ devtools ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ๊ณผ ํ†ตํ•ฉ๋˜์–ด ์„ค์ • ์‹œ๊ฐ„์ด ํ•„์š” ์—†๋Š” ๋””๋ฒ„๊น… ๋ฐ

2022๋…„ 12์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue-router ์ง€์—ฐ๋œ ๋กœ๋”ฉ

๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ด์šฉํ•œ ์•ฑ ์ œ์ž‘ ์‹œ, JavaScript ๋ฒˆ๋“ค์ด ๋งค์šฐ ํฌ๋‹ค๋ฉด ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์‹œ๊ฐ„์— ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋‹ค.๊ฐ ๋ผ์šฐํŠธ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณ„๋„์˜ ๋‹จ์œ„๋กœ ๋ถ„ํ• ํ•˜๊ณ  ๊ฒฝ๋กœ๋ฅผ ๋ฐฉ๋ฌธํ•  ๋•Œ ๋กœ๋“œํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ผ ๊ฒƒ์ด๋‹ค.Vue์˜ <span style="background-col

2022๋…„ 12์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue-router ์Šคํฌ๋กค ๋™์ž‘

ํด๋ผ์ด์–ธํŠธ ์ธก ๋ผ์šฐํŒ…์„ ์‚ฌ์šฉํ•  ๋•Œ <span style="background-color:vue-router๋Š” ์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์„ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ผ์šฐํŠธ ํƒ์ƒ‰์—์„œ ์Šคํฌ๋กค ๋™์ž‘์„ ์™„์ „ํžˆ ์‚ฌ์šฉ์ž ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.<span style="color:๋ผ์šฐํ„ฐ ์ธ์Šคํ„ด์Šค๋ฅผ

2022๋…„ 12์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue-router ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ

๋•Œ๋กœ๋Š” ๋ผ์šฐํŠธ๊ฐ€ ํ™œ์„ฑํ™”๋  ๋•Œ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์•ผ ํ•œ๋‹ค.<span style="color:์ด๋•Œ, ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.ํƒ์ƒ‰ ํ›„ ๊ฐ€์ ธ์˜ค๊ธฐ: <span style="background-color:- ํƒ์ƒ‰ํ•˜๊ธฐ ์ „์— ๊ฐ€์ ธ์˜ค๊ธฐ: ๋ผ์šฐํŠธ <span

2022๋…„ 12์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue-router ํŠธ๋žœ์ง€์…˜

<router-view>๋Š” ๋ณธ์งˆ์ ์œผ๋กœ ๋™์ ์ธ ์ปดํฌ๋„ŒํŠธ์ด๋””.๋•Œ๋ฌธ์— <transition> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ํŠธ๋žœ์ง€์…˜ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.<span style="color:\`\`\`html ๋Œ€์ƒ ๋ผ์šฐํŠธ์™€ ํ˜„์žฌ ๋ผ์šฐํŠธ ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ

2022๋…„ 12์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue-router ๋ผ์šฐํŠธ ๋ฉ”ํƒ€ ํ•„๋“œ

๋ผ์šฐํŠธ๋ฅผ ์ •์˜ ํ•  ๋•Œ meta ํ•„๋“œ๋ฅผ ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.routes ์„ค์ •์˜ ๊ฐ ๋ผ์šฐํŠธ ๊ฐ์ฒด๋ฅผ ๋ผ์šฐํŠธ ๋ ˆ์ฝ”๋“œ ๋ผ๊ณ  ํ•œ๋‹ค.๋ผ์šฐํŠธ ๋ ˆ์ฝ”๋“œ๋Š” ์ค‘์ฒฉ ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ <span style="background-color:์˜ˆ๋ฅผ ๋“ค์–ด, ์œ„ ๋ผ์šฐํŠธ ๊ตฌ์„ฑ์—์„œ URL <span

2022๋…„ 12์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Vue-router ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ

๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ(navigation guard) ๋ž€ ๋ทฐ ๋ผ์šฐํ„ฐ๋กœ <span style="background-color:์˜ˆ๋ฅผ ๋“ค์–ด, ์‚ฌ์šฉ์ž์˜ ์ธ์ฆ ์ •๋ณด๊ฐ€ ์—†์œผ๋ฉด ํŠน์ • ํŽ˜์ด์ง€์— ์ ‘๊ทผํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์ˆ ์ด๋‹ค.์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ๋™์ž‘ํ•˜๋Š” ์ „์—ญ ๊ฐ€๋“œํŠน์ • ur

2022๋…„ 12์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท