profile
A front web developer & passionate learner loving learning new things and working together with people๐Ÿฆ‹
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (175)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

๋ฆฌ์•กํŠธ์—์„œ ๋ฆฌ๋ Œ๋”๋ง์— ๋Œ€ํ•œ ๊ณ ์ฐฐ

์›๋ฌธ : https://www.joshwcomeau.com/react/why-react-re-renders/๋‚˜๋Š” ๋ฆฌ์•กํŠธ์˜ ๋ฆฌ๋ Œ๋”๋ง์— ๋Œ€ํ•ด์„œ ๋ง‰์—ฐํ•˜๊ฒŒ '๋ฆฌ๋ Œ๋”๋ง'์€ ๋‚˜์œ ๊ฒƒ์ด๋‹ค. ๋‹จ์ˆœํžˆ ํ”ผํ•ด์•ผํ•  ๊ฒƒ, ์ตœ์ ํ™”๋Š” ํ•˜๋ฉด ํ•  ์ˆ˜๋ก ์ข‹์€ ๊ฒƒ์ด๋‹ค. ๋ผ๊ณ ๋งŒ ์ƒ๊ฐํ•ด์™”๋‹ค. ํ•˜์ง€

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

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

์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ(event handler) ? ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ํ˜ธ์ถœ๋  ํ•จ์ˆ˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋“ฑ๋ก ? ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์˜ ํ˜ธ์ถœ์„ ์œ„์ž„ํ•˜๋Š” ๊ฒƒ. ํ•จ์ˆ˜๋ฅผ ์–ธ์ œ ํ˜ธ์ถœํ• ์ง€ ์•Œ ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ "ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ"ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ "๋ธŒ๋ผ

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

[GIT]์‹ค์ˆ˜๋กœ ๋‹ค๋ฅธ ๋ธŒ๋Ÿฐ์น˜์—์„œ ์ปค๋ฐ‹์„ ํ–ˆ์„ ๋•Œ

์–ผ๋งˆ ์ „์— ํšŒ์‚ฌ์—์„œ ์‹ค์ˆ˜๋กœ ๊ธฐ์กด์— ์ž‘์—…ํ•˜๋˜ branch์—์„œ commit์„ ํ•ด๋ฒ„๋ ค๋”ฐ ใ…Ž...ํ•˜์ง€๋งŒ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์ปค๋ฐ‹์„ ๋‹ค๋ฅธ ๋ธŒ๋Ÿฐ์น˜๋กœ ์˜ฎ๊ฒจ์ค„ ์ˆ˜๊ฐ€ ์žˆ๋‹ค-! ์˜ฎ๊ฒจ์•ผ ํ•  branch๋กœ ์ด๋™ํ•˜๊ธฐ git checkout (๋ธŒ๋Ÿฐ์น˜์ด๋ฆ„)์˜ฎ๊ฒจ์•ผ ํ•  commit๋“ค์˜ ๋ฒˆํ˜ธ๋ฅผ ํ™•์ธ

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

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

attributes ํ”„๋กœํผํ‹ฐ HTML ๋ฌธ์„œ์˜ ๊ตฌ์„ฑ ์š”์†Œ์ธ HTML ์š”์†Œ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์†์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ. HTML ์š”์†Œ์˜ ๋™์ž‘์„ ์ œ์–ดํ•˜๊ธฐ ์œ„ํ•œ ์ถ”๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์ œ๊ณต. ๊ธ€๋กœ๋ฒŒ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” ๋ชจ๋“  HTML์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ. type, v

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

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

DOM์€ HTML๋ฌธ์„œ์˜ ๊ณ„์ธต์  ๊ตฌ์กฐ์™€ ์ •๋ณด๋ฅผ ํ‘œํ˜„ํ•˜๋ฉฐ ์ด๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” API, ์ฆ‰ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ํŠธ๋ฆฌ ์ž๋ฃŒ๊ตฌ์กฐ๋‹ค. HTML ์š”์†Œ๋Š” HTML ๋ฌธ์„œ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐœ๋ณ„์ ์ธ ์š”์†Œ๋ฅผ ์˜๋ฏธํ•œ๋‹ค. HTML ์š”์†Œ๋Š” ๋ Œ๋”๋ง ์—”์ง„์— ์˜ํ•ด ํŒŒ์‹ฑ๋˜์–ด DOM์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 38์žฅ ์ •๋ฆฌ - ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ๊ณผ์ •

๋ธŒ๋ผ์šฐ์ €๋Š” HTML, CSS, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ์ด๋ฏธ์ง€, ํฐํŠธ ํŒŒ์ผ ๋“ฑ ๋ Œ๋”๋ง์— ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜๊ณ  ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต์„ ๋ฐ›๋Š”๋‹ค. ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ์—”์ง„์€ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต๋œ HTML๊ณผ CSS๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ DOM๊ณผ CSSOM์„ ์ƒ์„ฑํ•˜๊ณ  ์ด๋“ค์„ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ Œ๋”ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

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

useEffect ์˜์กด์„ฑ๋ฐฐ์—ด์„ ๋น„์› ๋Š”๋ฐ ์™œ ๋ Œ๋”๋ง์ด ๋‘๋ฒˆ์ด ๋˜์ฃ ?

์–ผ๋งˆ์ „์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๊ฐ€ ๋  ๋•Œ ํ•œ๋ฒˆ๋งŒ ๋ฐ์ดํ„ฐ ํŽ˜์นญ์„ ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ์š”๋Ÿฐ์‹์œผ๋กœ ๋กœ์ง์„ ์งฐ๋”๋‹ˆ ํ‚ฌ ๋•Œ๋งˆ๋‹ค ํ™”๋ฉด์ด ํ•œ๋ฒˆ ๊นœ๋นก ๊ฑฐ๋ฆฌ๋Š” ๊ฒƒ์ด์—ˆ๋‹ค!์•Œ๊ณ ๋ณด๋‹ˆ React18 + StrictMode์—์„œ๋Š” ๊ฐœ๋ฐœ๋ชจ๋“œ์—์„œ data fetching์ด ์ตœ์†Œ ๋‘ ๋ฒˆ์ด์ƒ ์ผ์–ด๋‚  ์ˆ˜ ์žˆ๋‹ค๋Š” ํŠน์ง•

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 26์žฅ ์ •๋ฆฌ - ES6 ํ•จ์ˆ˜์˜ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ

โœ”๏ธ ES6 ์ด์ „์˜ ๋ชจ๋“  ํ•จ์ˆ˜๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ๋„ ํ˜ธ์ถœํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค. (callable & constructor)๐Ÿ”– ์ฐธ๊ณ )callable : ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜ ๊ฐ์ฒดconstructor : ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜ ๊ฐ์ฒด non-

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

[react & typescript]๋ฌด๋ฃŒ ์›น์—๋””ํ„ฐ timyMCE ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•!

๋ฆฌ์•กํŠธ์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ๊ต‰์žฅํžˆ ํŽธ๋ฆฌํ•œ ์›น์—๋””ํ„ฐ๊ฐ€ ์žˆ๋‹ค! ๊ฒŒ์‹œํŒ ๊ธ€์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ์ •๋ง ์œ ์šฉํ•˜๋‹ค-! ์œ„์™€ ๊ฐ™์ด ์ƒ๊ฒผ๋Š”๋ฐ, ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ๋„ ๊ฐ€๋Šฅํ•˜๊ณ  (s3 ํ™œ์šฉํ•ด์•ผํ•จ), ์ €์žฅํ•  ๋•Œ๋„ ํƒœ๊ทธ๋“ค๋„ ๋‹ค ์ €์žฅ์ด ๋˜์„œ ๊ฐ€์šด๋ฐ ์ •๋ ฌ, ๊ธ€๊ผด ๋ณ€๊ฒฝ, ์ƒ‰ ๋ณ€๊ฒฝ ๋“ฑ ๊ทธ

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

Axios interceptors๋กœ ํ† ํฐ ์—ฐ์žฅํ•˜๋Š” ๋ฒ•!

Axios๋Š” ์ƒ๊ฐํ•œ ๊ฑฐ ์ด์ƒ์œผ๋กœ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค! ๊ต‰์žฅํžˆ ํŽธ๋ฆฌํ•จ,,, Axios interceptors๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ•˜๊ธฐ ์ „์— ๋ฌด์–ธ๊ฐ€๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์š”์ฒญ์„ ํ•˜๊ณ  ๋‚˜์„œ ์‘๋‹ต์„ ๋ฐ›์•˜์„ ๋•Œ๋„ ๋ฏธ๋ฆฌ interceptors์—์„œ ๋ฌด์–ธ๊ฐ€๋ฅผ ์ฒ˜๋ฆฌํ•ด์ค„

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

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

25.7 ํ”„๋กœํผํ‹ฐ ๐Ÿง ์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ โœ”๏ธ ์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ๋Š” constructor ๋‚ด๋ถ€์—์„œ ์ •์˜ํ•ด์•ผ ํ•œ๋‹ค. โœ”๏ธ ์–ธ์ œ๋‚˜ publicํ•˜๋‹ค. why? ES6ํด๋ž˜์Šค๋Š” ๋‹ค๋ฅธ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด์ฒ˜๋Ÿผ private, public, protected ํ‚ค์›Œ๋“œ์™€ ๊ฐ™์€ ์ ‘๊ทผ ์ œํ•œ์ž(access modifier)๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Œ. ex) ๐Ÿง ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ > ์ ‘๊ทผ์ž ํ”„...

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

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด. ํด๋ž˜์Šค๊ฐ€ ํ•„์š” ์—†๋Š” ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋‹ค. ES5์—์„œ๋Š” ํด๋ž˜์Šค ์—†์ด๋„ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์™€ ํ”„๋กœํ† ํƒ€์ž…์„ ํ†ตํ•ด ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด์˜ ์ƒ์†์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Œ. ex)๐Ÿ‘‰ ๊ธฐ์กด ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๋ณด๋‹ค ์ž๋ฐ”๋‚˜ C ๐Ÿ‘‰

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 24์žฅ ์ •๋ฆฌ - ํด๋กœ์ €

ํด๋กœ์ € mdn์—์„œ ์ •์˜ํ•˜๊ณ  ์žˆ๋Š” ํด๋กœ์ €์— ๋Œ€ํ•œ ์ •์˜ > ํด๋กœ์ €๋Š” ํ•จ์ˆ˜์™€ ๊ทธ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ๊ณผ์˜ ์กฐํ•ฉ์ด๋‹ค. 24.1 ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„ ๐Ÿง ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„๋ž€? > ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ํ•จ์ˆ˜๋ฅผ ์–ด๋””์„œ ํ˜ธ์ถœํ–ˆ๋Š”์ง€๊ฐ€ ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜๋ฅผ ์–ด๋””์— ์ •์˜ํ–ˆ๋Š”์ง€์— ๋”ฐ๋ผ ์ƒ์œ„ ์Šค์ฝ”ํ”„๋ฅผ

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 23์žฅ ์ •๋ฆฌ - ์‹คํ–‰ ์ปจํ…์ŠคํŠธ

๐Ÿ‘‰ ์ „์—ญ ์ฝ”๋“œ(global code) : ์ „์—ญ์— ์กด์žฌํ•˜๋Š” ์†Œ์Šค์ฝ”๋“œ (์ „์—ญ ์‹คํ–‰ ์ปจํƒ์ŠคํŠธ)๐Ÿ‘‰ ํ•จ์ˆ˜ ์ฝ”๋“œ(function code) : ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š” ์†Œ์Šค์ฝ”๋“œ (ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ)๐Ÿ‘‰ eval ์ฝ”๋“œ : ๋นŒํŠธ์ธ ์ „์—ญ ํ•จ์ˆ˜์ธ eval ํ•จ์ˆ˜์— ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋˜์–ด ์‹คํ–‰๋˜

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

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

๊ฐ์ฒด ๋‚ด์—์„œ ๋ฉ”์„œ๋“œ๊ฐ€ ์ž์‹ ์ด ์†ํ•œ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ํŒœ์กฐํ•˜๋ ค๋ฉด ๋จผ์ € ์ž์‹ ์ด ์†ํ•œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์‹๋ณ„์ž๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.์ด๋ฅผ ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ this๋ผ๋Š” ํŠน์ˆ˜ํ•œ ์‹๋ณ„์ž ์ œ๊ณต.this๋Š” ์ž์‹ ์ด ์†ํ•œ ๊ฐ์ฒด ๋˜๋Š” ์ž์‹ ์ด ์ƒ์„ฑํ•  ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ž๊ธฐ ์ฐธ์กฐ ๋ณ€

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

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

๐Ÿ‘‰ ํ‘œ์ค€ ๋นŒํŠธ์ธ๊ฐ์ฒด(standard built-in objects/native objects/global objects) ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์˜ ๊ณตํ†ต ๊ธฐ๋Šฅ ์ œ๊ณต, ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ์„œ ์‚ฌ์šฉ๋œ๋‹ค.๐Ÿ‘‰ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด(host objects) ECMAAscript ์‚ฌ์–‘์— ์ •

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

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

์„ ์–ธํ•˜์ง€ ์•Š์€ ์‹๋ณ„์ž์— ๊ฐ’์„ ํ• ๋‹นํ•˜๋ฉด ์ „์—ญ๊ฐ์ฒด์˜ 'ํ”„๋กœํผํ‹ฐ' ๊ฐ€ ๋œ๋‹ค. ์ด๋Š” ๋ณ€์ˆ˜๊ฐ€ ์•„๋‹ˆ๋‹ค. window.y = 20 ์ฒ˜๋Ÿผ ํ•ด์„๋˜์–ด, ์ „์—ญ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋˜๋Š” ๊ฒƒ. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์˜ ๋ฌธ๋ฒ•์„ ์ข€ ๋” ์—„๊ฒฉํžˆ ์ ์šฉํ•˜์—ฌ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๊ฑฐ๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 19์žฅ ์ •๋ฆฌ - ํ”„๋กœํ† ํƒ€์ž…

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ช…๋ นํ˜•(imperative), ํ•จ์ˆ˜ํ˜•(functional),ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜(prototype-based) ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(Object Ori-ented Programming)์„ ์ง€์›ํ•˜๋Š” ๋ฉ€ํ‹ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค. ํ”„๋กœ๊ทธ๋žจ์„ ๋ช…๋ น์–ด ๋˜๋Š” ํ•จ์ˆ˜์˜ ๋ชฉ๋ก

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 18์žฅ ์ •๋ฆฌ - ํ•จ์ˆ˜์™€ ์ผ๊ธ‰ ๊ฐ์ฒด

๋ฌด๋ช…์˜ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰ ๋Ÿฐํƒ€์ž„์— ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.๋ณ€์ˆ˜๋‚˜ ์ž๋ฃŒ๊ตฌ์กฐ(๊ฐ์ฒด, ๋ฐฐ์—ด ๋“ฑ)์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๐Ÿ‘‰ ํ•จ์ˆ˜๊ฐ€ ์ผ๊ธ‰ ๊ฐ์ฒด๋ผ๋Š” ๊ฒƒ์€ ํ•จ์ˆ˜๋ฅผ ๊ฐ์ฒด์™€ ๋™์ผํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ.

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

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive 17์žฅ ์ •๋ฆฌ - ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ

new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•˜์—ฌ ๊ฐ์ฒด(์ธ์Šคํ„ด์Šค)๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•ด ์ƒ์„ฑ๋œ ๊ฐ์ฒด ๐Ÿ”– ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” Object ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ด์™ธ์—๋„ String, Number, Boolean, Function, Array, Date, RegExp, Promise๋“ฑ์˜ ๋นŒ

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