profile
A front web developer & passionate learner loving learning new things and working together with people๐Ÿฆ‹
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (151)object(5)array(4)Map(4)์žฌ๊ท€ํ•จ์ˆ˜(4)asynchronous(3)class(3)inheritance(3)API(3)git(3)๊นŠ์ด์šฐ์„ ํƒ์ƒ‰(DFS)(3)variable(3)promise(3)Event(3)JOIN(3)filter(3)IIFE(2)parseInt(2)callback Hell(2)split()(2)async(2)reverse(2)position(2)return(2)์•Œ๊ณ ๋ฆฌ์ฆ˜(2)Fetch(2)find(2)function(2)Sort(2)Defer(2)fill(2)isNaN(2)Object Oriented Programming(2)setInterval(2)slice(2)setTimeout(2)JSON.parse(2)Conditionals(2)canvas(2)Custom Hooks(2)์ธ์ฆ(2)Math.random(2)arrow function(2)private field(2)Prototype(2)encapsulation(2)reduce(2)optional chaining(2)๋น…์˜คํ‘œ๊ธฐ๋ฒ•(2)foreach(2)First-class Function(2)callback(2)Default parameters(2)localstorage(2)async/await(2)์ธ๊ฐ€(2)SOME(2)์ƒํƒœํŠธ๋ฆฌ(1)else if(1)ScrollIntoView(1)contains()(1)static methods(1)terminal(1)numberic seperators(1)absolute(1)link(1)requestAnimationFrame(1)instance(1)JSON.stringfy()(1)relative(1)Spread Syntax (...)(1)querySelector(1)main axis(1)library(1)Polymorphism(1)default parameter(1)JSON.stringify(1)catch(1)http(1)Box Model(1)CRA(1)linux(1)at method(1)prototypal inheritance(1)transform(1)voiceChanged(1)์ธ์ ‘๋ฆฌ์ŠคํŠธ(1)Event Handler(1)Request(1)Response(1)reference value(1)fillRect(1)operator(1)finally(1)๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ(1)chaining method(1)first-of-types(1)findIndex(1)์‹œ๋งจํ‹ฑ ํƒœ๊ทธ(1)speak(1)๋ฉ”๋ชจ์ด์ œ์ด์…˜(1)speechSynthesis(1)recursion(1)navigator(1)for..of(1)flatmap(1)์‹œ๊ฐ„๋ณต์žก๋„(1)์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜(1)localScope(1)ARC(1)React(1)Math.round(1)instanceof(1)isFinite(1)box tag(1)Module(1)router(1)OR assignment operator(1)ScrollHeight(1)capturing(1)๊ณต๊ฐ„๋ณต์žก๋„(1)item(1)Object.assign(1)Document(1)๋นˆ๋„์ˆ˜ ์„ธ๊ธฐ(1)await(1)์ด์ง„ํŠธ๋ฆฌ(1)useEffect(1)event loop(1)looping objects(1)searchParams(1)Side Effect(1)fixed(1)intersection observer api(1)parseFloat(1)node.js(1)parameter(1)while(1)๋‹ค์ค‘ํ•„ํ„ฐ(1)Math Module(1)perspective(1)Flex(1)JavaScript(1)useParams(1)function declaration(1)Higher-order Function(1)UI(1)abstraction(1)Intl(1)method(1)main(1)Flexbox(1)layout(1)Object.create(1)selector(1)keyframes(1)hoisting(1)isInteger(1)...arr(1)AJAX calls(1)prototype chain(1)classList(1)Math.PI(1)์ฟผ๋ฆฌ์ŠคํŠธ๋ง(1)template literals(1)json(1)assignment operators(1)concat(1)const(1)let(1)cross axis(1)replace(1)static properties(1)์‹œ๋งจํ‹ฑ ์›น(1)AND assignment operator(1)object literal(1)list-style-type(1)Rest parameters(1)fillStyle(1)object constructor(1)loop(1)getElementById(1)๊ฐ€์ค‘์น˜ ๋ฐฉํ–ฅ๊ทธ๋ž˜ํ”„(1)carriage return(1)looping arrays(1)String(1)constructor function(1)key(1)clientHeight(1)commit(1)context(1)์ด๋ถ„๊ฒ€์ƒ‰(1)Shorthand property names(1)nullish assignment operator(1)for..in(1)jquery(1)๊ฐœ๋ฐœ์ผ๊ธฐ(1)closePath(1)๋ฐฉํ–ฅ ๊ทธ๋ž˜ํ”„(1)State(1)inline block(1)hider-order function(1)this(1)self(1)๋ฉ”ํƒ€ ํƒœ๊ทธ(1)tofixed(1)์„ ์–ธ(declaration)(1)offsetHeight(1)Sass(1)Chaining(1)@property(1)React-slick(1)script(1)nullish coalescing operator(1)MediaQuery(1)apply method(1)splice(1)static method(1)preventDefault(1)Date object(1)git rabase(1)์ธ์ ‘๊ทธ๋ž˜ํ”„(1)Letter Spacing(1)block(1)function expression(1)execution context(1)inline(1)console(1)Ternary operator(1)Scope Chain(1)item tag(1)bind method(1)after(1)appendChild(1)framwork(1)๋ฌด๋ฐฉํ–ฅ ๊ทธ๋ž˜ํ”„(1)addEventListener(1)Flat(1)geolocation(1)short-circuiting(1)display(1)computed properties(1)github(1)parameters(1)JSX(1)toggle(1)๊ทธ๋ฆฌ๋”” ์•Œ๊ณ ๋ฆฌ์ฆ˜(1)text-transform(1)event delegation(1)useNavigate(1)svg(1)asynchoronous callback(1)call method(1)๊ทธ๋ž˜ํ”„(1)speechSynthesisUtterance(1)์กฐํ•ฉ์•Œ๊ณ ๋ฆฌ์ฆ˜(1)Props(1)์„ ํƒ์ž(selector)(1)CreateElement(1)if(1)remainder operator(1)synchoronous callback(1)Date(1)BigInt(1)bubbling(1)grid(1)getVoice(1)์œ„์ฝ”๋“œ(1)WeCode(1)๋„“์ด์šฐ์„ ํƒ์ƒ‰(1)๊ฒฐ์ • ์•Œ๊ณ ๋ฆฌ์ฆ˜(1)closure(1)private method(1)์ ˆ๋Œ€๊ฒฝ๋กœ(1)์ƒ๋Œ€๊ฒฝ๋กœ(1)padStart()(1)3D(1)getters and setters(1)promise.all(1)set(1)transform-style(1)nullish operator(1)Stateless(1)new line(1)beginPath(1)property value shorthand(1)container(1)scope(1)in operator(1)for loop(1)webspeech API(1)animation(1)tag(1)argument(1)Promise Chaining(1)public field(1)console API(1)fillText(1)insertAdjacentHTML(1)destructuring assignment(1)setters and getters(1)scroll event(1)aside(1)refactoring(1)substring(1)ํด๋ก ์ฝ”๋”ฉ(1)DOM traversing(1)getContext(1)every(1)
post-thumbnail

4์ฃผ ์Šคํƒ€ํŠธ์—… ์ธํ„ด ํšŒ๊ณ ๋ก - ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… ์›น ๋งŒ๋“ค๊ธฐ

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

์–ด์ œ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 13์žฅ ์ •๋ฆฌ - ์Šค์ฝ”ํ”„

์Šค์ฝ”ํ”„๋Š” ์‹๋ณ„์ž๊ฐ€ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๋งํ•œ๋‹ค. ๋ชจ๋“  ์‹๋ณ„์ž(๋ณ€์ˆ˜ ์ด๋ฆ„, ํ•จ์ˆ˜ ์ด๋ฆ„, ํด๋ž˜์Šค ์ด๋ฆ„ ๋“ฑ)๋Š” ์ž์‹ ์ด ์„ ์–ธ๋œ ์œ„์น˜์— ์˜ํ•ด ๋‹ค๋ฅธ ์ฝ”๋“œ๊ฐ€ ์‹๋ณ„์ž ์ž์‹ ์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ์œ ํšจ ๋ฒ”์œ„๊ฐ€ ๊ฒฐ์ •๋˜๋Š” ๊ฒƒ. ์‹๋ณ„์ž๋ฅผ ๊ฒ€์ƒ‰ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ทœ์น™์ด๋ผ๊ณ ๋„ ํ•จ. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์–ด๋–ค

์–ด์ œ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 12์žฅ ์ •๋ฆฌ - ํ•จ์ˆ˜

12์žฅ ํ•จ์ˆ˜ 12.1 ํ•จ์ˆ˜๋ž€? ๐Ÿง ํ”„

์–ด์ œ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 11์žฅ ์ •๋ฆฌ - ์›์‹œ ๊ฐ’๊ณผ ๊ฐ์ฒด์˜ ๋น„๊ต

โœ”๏ธ ์›์‹œ ํƒ€์ž… : ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’, ๊ฐ์ฒด ํƒ€์ž… : ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐ’โœ”๏ธ ์›์‹œ ๊ฐ’์„ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ๋ณ€์ˆ˜(ํ™•๋ณด๋œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„)์—๋Š” ์‹ค์ œ ๊ฐ’์ด ์ €์žฅ ๋œ๋‹ค. ๊ฐ์ฒด๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ๋ณ€์ˆ˜(ํ™•๋ณด๋œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„)์—๋Š” ์ฐธ์กฐ ๊ฐ’์ด ์ €์žฅโœ”๏ธ ์›์‹œ ๊ฐ’์„ ๊ฐ–๋Š” ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜

2์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

.gitignore์— .env ํŒŒ์ผ ์˜ฌ๋ ค๋„ git์— ์˜ฌ๋ผ๊ฐˆ ๋•Œ

git ์—์„œ envํŒŒ์ผ ์—†์• ์ฃผ๊ธฐ์ฐธ๊ณ  https://stackoverflow.com/questions/38983153/git-ignore-env-files-not-working

6์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 10์žฅ ์ •๋ฆฌ - ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฑฐ์˜ "๋ชจ๋“  ๊ฒƒ"์ด ๊ฐ์ฒด. ์›์‹œ ๊ฐ’์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ๊ฐ’(ํ•จ์ˆ˜, ๋ฐฐ์—ด, ์ •๊ทœ ํ‘œํ˜„์‹ ๋“ฑ)์€ ๋ชจ๋‘ ๊ฐ์ฒด. 0๊ฐœ ์ด์ƒ์˜ ํ”„๋กœํผํ‹ฐ๋กœ ๊ตฌ์„ฑ๋œ ์ง‘ํ•ฉ์ด๋ฉฐ ํ”„๋กœํผํ‹ฐ๋Š” key์™€ value๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. ๐Ÿ”– ์›์‹œํƒ€์ž…์˜ ๊ฐ’์€ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’(immutable va

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 6์žฅ ์ •๋ฆฌ - ๋ฐ์ดํ„ฐ ํƒ€์ž…

์›์‹œํƒ€์ž… - ์ˆซ์ž ํƒ€์ž…, ๋ฌธ์ž์—ด ํƒ€์ž…, ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…, undefined ํƒ€์ž…, null ํƒ€์ž…, symbol ํƒ€์ž…๊ฐ์ฒด ํƒ€์ž… - ๊ฐ์ฒด, ํ•จ์ˆ˜, ๋ฐฐ์—ด ๋“ฑ ๐Ÿ”– ์ˆซ์ž ํƒ€์ž…์€ ๋ชจ๋‘ ์‹ค์ˆ˜๋กœ ์ฒ˜๋ฆฌ๋œ๋‹ค. ์ •์ˆ˜๋งŒ ํ‘œํ•œํ•˜๊ธฐ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ณ„๋„๋กœ ์กด์žฌํ•˜์ง€ ์•Š์Œ. Infinity(์–‘์˜

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 2, 3์žฅ ์ •๋ฆฌ - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ๊ฐœ๋ฐœํ™˜๊ฒฝ๊ณผ ์‹คํ–‰ ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ†ต์‹ ๊ธฐ๋Šฅ (1999๋…„ XMLHttpRequest๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๋“ฑ์žฅ)๊ตฌ๊ธ€ V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์œผ๋กœ ๋นŒ๋“œ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ(runtime environment). ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ธŒ๋Ÿฌ

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 5์žฅ ํ‘œํ˜„์‹๊ณผ ๋ฌธ ์ •๋ฆฌ

์‹(ํ‘œํ˜„์‹ expression)์ด ํ‰๊ฐ€(evaluate)๋˜์–ด ์ƒ์„ฑ๋œ ๊ฒฐ๊ณผ ๐Ÿ”– ์ฐธ๊ณ ) ํ‰๊ฐ€? ์‹์„ ํ•ด์„ํ•ด์„œ ๊ฐ’์„ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ.๐Ÿ”– ๊ฐ’์˜ ํŠน์ง• : ๋ฐ์ดํ„ฐ ๊ฐ’์„ ๊ฐ€์ง.๋ฉ”๋ชจ๋ฆฌ์— 2์ง„์ˆ˜ ์ฆ‰ bit์˜ ๋‚˜์—ด๋กœ ์ €์žฅ๋œ๋‹ค. ์‚ฌ๋žŒ์ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ž ๋˜๋Š” ์•ฝ์†๋œ ๊ธฐํ˜ธ๋ฅผ

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 4์žฅ ๋ณ€์ˆ˜ ์ •๋ฆฌ

4.1 ๋ณ€์ˆ˜๋ž€ ๋ฌด์—‡์ธ๊ฐ€? ์™œ ํ•„์š”ํ•œ๊ฐ€? ๐Ÿง ๋ณ€์ˆ˜๋ž€? > ํ•˜๋‚˜์˜ ๊ฐ’์„ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ํ™•๋ณดํ•œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„ ์ž์ฒด ๋˜๋Š” ๊ทธ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•œ ์ด๋ฆ„. ๐Ÿ‘‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ๊ฐ’์„ ์ €์žฅํ•˜๊ณ  ์ฐธ์กฐํ•˜๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์œผ๋กœ ๊ฐ’์˜ ์œ„์น˜๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ƒ์ง•์ ์ธ ์ด๋ฆ„. ๐Ÿง ๋ณ€์ˆ˜๋ž€ ์™œ

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

[React]Redux ์จ๋ณด๊ธฐ

2์ฐจ ํ”„๋กœ์ ํŠธ ๋•Œ ๋ฆฌ๋•์Šค๋ฅผ ์จ๋จน์–ด๋ณด์ง€ ๋ชปํ•œ ์•„์‰ฌ์›€์ด ์ปธ๋‹ค. ๐Ÿฅฒ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ ํ•ญ์ƒ state๋ฅผ ๋‚ด๋ ค์ฃผ๊ณ  ๋˜ ๋‚ด๋ ค์ฃผ๊ณ , ๋‹ค์‹œ ์ตœ์ƒ๋‹จ ๋ถ€๋ชจ๋กœ ๋Œ์–ด์˜ฌ๋ ค์ฃผ๊ณ  ๋ณต์žกํ•˜๊ณ  ๊ท€์ฐฎ์€ ์ž‘์—…๋“ค์„ ๋งŽ์ด ํ•˜๋‹ค๋ณด๋‹ˆ, ๋ฆฌ๋•์Šค๋‚˜ ํ˜น์€ context API๋ฅผ ์“ธ ์ค„ ์•ˆ๋‹ค๋ฉด ๋” ํšจ์œจ์ ์œผ๋กœ

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

ํ™˜๊ฒฝ๋ณ€์ˆ˜ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” .env ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ

ํ™˜๊ฒฝ๋ณ€์ˆ˜๋“ค ๊ด€๋ฆฌํ•ด์ฃผ๋Š” .envํŒŒ์ผ ๋”ฐ๋กœ๋งŒ๋“ค์–ด์ฃผ๋ฉด, api key๋“ฑ ๊ฐœ์ธ์ •๋ณด๋ฅผ ์ง์ ‘์ ์œผ๋กœ ๋…ธ์ถœํ•˜์ง€ ์•Š๊ณ  ํŒŒ์ผ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. .env๋Š” ํŒŒ์ผ์˜ ์ตœ์ƒ๋‹จ ๋ฃจํŠธ์— ๋งŒ๋“ค์–ด์ค„ ๊ฒƒ! ๐Ÿ‘‰ ๋ฆฌ์•กํŠธ ๋‚ด์—์„œ๋Š” REACT_APP์„ ์‹œ์ž‘์œผ๋กœ ์ ์–ด์ค„ ๊ฒƒ๐Ÿ‘‰ const ๋“ฑ์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ๋”ฐ๋กœ ์„ 

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

formData.append ํ™œ์šฉํ•ด์„œ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ํ•˜๊ธฐ

formData.append๋ฅผ ํ™œ์šฉํ•ด์„œ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œํ•˜๋Š” ๋ฒ•

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

[React] firebase์ด์šฉํ•˜์—ฌ google ์†Œ์…œ ๋กœ๊ทธ์ธ ๊ตฌํ˜„ํ•˜๊ธฐ

๊ธฐ์—…ํ˜‘์—…์—์„œ ๊ทธ๋‹ˆ๊ทธ๋‹ˆ๋‹˜๊ณผ ์ƒˆ๋กญ๊ฒŒ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค(!)react, getstream API, firebase๋ฅผ ํ™œ์šฉํ•œ ์ฑ„ํŒ… ์›น์„ ๋งŒ๋“œ๋Š” ํ”„๋กœ์ ํŠธ์ด๋‹ค. ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋”ฐ๋กœ ์—†๊ธฐ์— firebase๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ธ์ฆ์ธ๊ฐ€ ํ†ต์‹ ์„ ์ง„ํ–‰ํ•˜๊ณ , firebase ๋‚ด์— ์žˆ๋Š”

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

[React] 2์ฐจ ํ”„๋กœ์ ํŠธ ํšŒ๊ณ ๋ก(!) feat ํƒˆ์ž‰ ํด๋ก ์ฝ”๋”ฉ

์•ˆ๋๋‚  ๊ฒƒ๋งŒ ๊ฐ™์€ 2์ฐจ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋์ด ๋‚ฌ๋‹ค. ์‹œ๊ฐ„ ์ฐธ ๋น ๋ฅด๋‹ค. ์–ด๋Š์ƒˆ 1,2์ฐจ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ณ  ๋‹ค์Œ์ฃผ๋ฉด ๊ธฐ์—…ํ˜‘์—…์ด๋‹ค. ์–ด์ฐŒ๋˜์—ˆ๊ฑด, ์ด๋ฒˆ 2์ฐจ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉฐ ๋Š๊ผˆ๋˜ ์ , ๋ฐฐ์› ๋˜ ์  ๋“ฑ ์ง„์†”ํ•˜๊ฒŒ ์ ์–ด๋‚ด๋ณด๊ณ ์ž ํ•œ๋‹ค. โœ”๏ธ ๋ฟŒ์ž‰ ํ”„๋กœ์ ํŠธ ์›น์‚ฌ์ดํŠธ ์ดฌ์˜ ๋งํฌ : https

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

[React] ๋‹ค์ค‘ํ•„ํ„ฐ ๋กœ์ง ์งœ๋Š” ๋ฒ• & ๊ตฌํ˜„ํ•˜๊ธฐ with query string

๐Ÿค” ๋‹ค์ค‘ํ•„ํ„ฐ ๋กœ์ง ๊ตฌ์ƒํ•˜๊ธฐ ์ด๋ฒˆ 2์ฐจ ํ”„๋กœ์ ํŠธ์—์„œ ์ฟผ๋ฆฌ์ŠคํŠธ๋ง ๊ด€๋ จํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„ ๋ถ€๋ถ„์„ ๋‹ด๋‹นํ–ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ ๊ฐ€์žฅ ๊ธฐ์–ต์— ๋‚จ์•˜๋˜ ๋‹ค์ค‘ํ•„ํ„ฐ! ๊ตฌ์ƒํ•œ ๋กœ์ง, ์ฝ”๋“œ ๊ณต์œ ๊นŒ์ง€ ํ•ด๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค--! ๐Ÿง ํ•ด๊ฒฐํ•ด์•ผํ–ˆ๋˜ ๋ฌธ์ œ

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

React-Slick์œผ๋กœ ์Šฌ๋ผ์ด๋“œ ๊ตฌํ˜„ํ•˜๊ธฐ

์ด๋ฒˆ 2์ฐจ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ž์œ ๋กœ์ด ์“ธ ์ˆ˜ ์žˆ์—ˆ๋‹ค(!)๋ ˆ์ด์•„์›ƒ ๊ณผ์ •์—์„œ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ๊ธฐ๋Šฅ์ด ์ด๋ฏธ์ง€ ์Šฌ๋ผ์ด๋“œ ๋ถ€๋ถ„์ด์—ˆ๋‹ค. 1์ฐจ ํ”„๋กœ์ ํŠธ ๋•Œ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  transformX ์™€ transition์„ ํ™œ์šฉํ–ˆ๋Š”๋ฐ, ์ด๋ฒˆ์—๋Š” Styled Comp

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

[Git] git rebase์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž-!

๋‘ ์ปค๋งจ๋“œ๋“ค์€ ๋ธŒ๋žœ์น˜์˜ ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ๋‹ค๋ฅธ ๋ธŒ๋žœ์น˜์— ํ•ฉ์น˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ๋‹ค. (But ๋‹ค๋ฅธ ๋ฐฉ์‹)โœ”๏ธMerge : main branch์—์„œ commitํ•œ ์ˆœ์„œ๋“ค feature์— mergeํ•  ๋•Œ ๊ทธ ์‹œ๊ฐ„ ๊ทธ๋Œ€๋กœ commit ์ €์žฅ๋œ๋‹ค. (History ๊ทธ๋Œ€๋กœ update๋œ๋‹ค)

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

[React] Custom Hook ์‚ฌ์šฉํ•˜๊ธฐ + useOutsideClick

Custom Hook์€ ์ด๋ฆ„์ด use๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜์ด๋‹ค.Custom Hook์„ ์‚ฌ์šฉํ•˜๋ฉด ์ง€๊ธˆ๊นŒ์ง€ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ํ•œ ๋ฉ์ด๋กœ ๊ฒฐํ•ฉํ•˜์—ฌ ์‚ฌ์šฉํ–ˆ๋˜ State์™€ Effect๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ถ„๋ฆฌํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.์ž์‹ ๋งŒ์˜ Hook์„ ๋งŒ๋“ค๋ฉด ์ปดํฌ๋„ŒํŠธ ๋กœ์ง์„ ํ•จ์ˆ˜๋กœ

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

[React] ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ์— ๋”ฐ๋ผ ์ฝ”๋“œ ์งœ๊ธฐ ์˜ˆ์‹œ (Separation of Concerns)

๊ฐœ๋ฐœ์ž๋กœ์„œ ์ฝ”๋“œ๋ฅผ ์งค ๋•Œ ๊ณ ๋ คํ•ด์•ผํ•  ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์š”์†Œ ์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ”๋กœ '๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ'์— ๋”ฐ๋ผ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ๊ฒƒ์ด๋‹ค. ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ๋ž€ ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๊ฐ€ ๋‹จ์œ„ ๋ณ„๋กœ ํ•˜๋‚˜์˜ ๊ด€์‹ฌ์‚ฌ๋งŒ ๊ฐ–๋„๋ก ํ•˜๊ณ  ๊ทธ ๊ด€์‹ฌ์‚ฌ์— ๋Œ€ํ•ด์„œ๋งŒ ์ถฉ์‹คํžˆ ๋™์ž‘ํ•˜๋„๋ก ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค.๐Ÿ‘‰ ์ฆ‰ ํ•œ ์ฝ”๋“œ ๋‚ด

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