leemember / FE_growing

๐Ÿง‘๐Ÿปโ€๐ŸŒพ TIL Record Repo & FE ์‹ค๋ฌด์—์„œ ๋งˆ์ฃผ ํ–ˆ๋˜ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…๊ณผ ๊ฒฝํ—˜ ์† ๋Ÿฌ๋‹ ํฌ์ธํŠธ

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป FE Growing

TIL

  • ๋‹ค์‹œ ํ•œ ๋ฒˆ ๋ฆฌ๋งˆ์ธ๋”ฉํ•˜๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

๐Ÿ“’ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ†บ์•„๋ณด๊ธฐ 1 (JS์— ํŠน์ง•๋“ค...)

๐Ÿ“• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ†บ์•„๋ณด๊ธฐ 2 (๋ณ€์ˆ˜์— ๋Œ€ํ•œ ๋ชจ๋“ ๊ฒƒ)

๐Ÿ“˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ†บ์•„๋ณด๊ธฐ 3 (์—ฐ์‚ฐ์ž)

๐Ÿ“— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ†บ์•„๋ณด๊ธฐ 4 (์ œ์–ด๋ฌธ)

๐Ÿ“™ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ†บ์•„๋ณด๊ธฐ 5 (ํ•จ์ˆ˜)

๐Ÿ“ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 6 (๊ฐ์ฒด๋ž€? / ์ƒ์„ฑ์ž ํ•จ์ˆ˜ / ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด)

๐Ÿค– ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 7 (ํด๋ž˜์Šค)

๐Ÿ”ป ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 8 (๋ฐฐ์—ด / ๊ณ ์ฐจํ•จ์ˆ˜)

๐Ÿ”ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 9 (์ดํ„ฐ๋Ÿฌ๋ธ”๊ณผ ์ œ๋„ˆ๋ ˆ์ดํ„ฐ)

๐ŸŸจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 10 (Map๊ณผ Set)

๐ŸŸ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 11 (์—ฐ์‚ฐ์ž)

๐Ÿงฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์ง• 12 (์ฃผ์„, ์—๋Ÿฌ์ฒ˜๋ฆฌ, ๋ชจ๋“ˆํ™”)

๐Ÿ‘€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง• 13 (๋น„๋™๊ธฐ)

๐Ÿ’“ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค 1 (์Šค์ฝ”ํ”„, ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ, ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ, ํ˜ธ์ด์ŠคํŒ…, var ๋ณ€์ˆ˜, ์—„๊ฒฉ๋ชจ๋“œ)

๐Ÿ“š ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค 2 (ํ”„๋กœํ† ํƒ€์ž…)

๐Ÿ˜ถ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค 3 (ํด๋กœ์ ธ)

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค 4 (This)

๐Ÿ™†๐Ÿปโ€โ™€๏ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค 5 (๋ฐ”๋ฒจ)

ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ์•Œ์•„์•ผํ•  ์›น๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ๊ฒƒ๋“ค

โญ๏ธ [๋ธŒ๋ผ์šฐ์ €] Web APIs (window)

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

๋ฆฌ์•กํŠธ

๋„คํŠธ์›Œํฌ

๐ŸŸข HTTP ๊ธฐ๋ณธ, ์—ญ์‚ฌ, ํด๋ผ์ด์–ธํŠธ ์„œ๋ฒ„ ๊ตฌ์กฐ, ๋ฌด์ƒํƒœ ํ”„๋กœํ† ์ฝœ, ๋น„ ์—ฐ๊ฒฐ์„ฑ, HTTP ๋ฉ”์‹œ์ง€

๐ŸŸข HTTP ๊ฐœ๋… ์•Œ์•„๊ฐ€๊ธฐ : IP ํ”„๋กœํ† ์ฝœ์˜ ํ•œ๊ณ„

๐ŸŸข HTTP ๊ฐœ๋… ์•Œ์•„๊ฐ€๊ธฐ (2) : PORT ์™€ DNS

CS (์ž๋ฃŒ๊ตฌ์กฐ/์•Œ๊ณ ๋ฆฌ์ฆ˜)

๐Ÿฟ ์ž๋ฃŒ๊ตฌ์กฐ ๊ฐœ๋… ์ •๋ฆฌ (1) ์‹œ๊ฐ„๋ณต์žก๋„, ๋น…์˜ค ํ‘œ๊ธฐ๋ฒ•, ๋ฐฐ์—ด, ์—ฐ๊ฒฐ๋ฆฌ์ŠคํŠธ

๐Ÿฟ ์ž๋ฃŒ๊ตฌ์กฐ ๊ฐœ๋… ์ •๋ฆฌ (2) ์Šคํƒ, ํ, ๋ฑ, ํ•ด์‹œํ…Œ์ด๋ธ”, ์…‹


์‹ค๋ฌด์—์„œ ๋งˆ์ฃผํ–ˆ๋˜ ์ด์Šˆ๋“ค์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐ ํ–ˆ๋Š”์ง€์™€ ๊ฒฝํ—˜ ์† ๋Ÿฌ๋‹ ํฌ์ธํŠธ์— ๋Œ€ํ•ด ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“[JS] User Agent ๋ธŒ๋ผ์šฐ์ € ์ •๋ณด ์–ป๊ธฐ

๐Ÿ“์ˆซ์žํ˜• ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ bigNumber. js ์‚ฌ์šฉ๋ฒ•

๐Ÿ“[iOS] scorll smooth ๋น„ํ˜„์ƒ

๐Ÿ“ฒ ํ…Œ์ŠคํŠธํฐ ๋””๋ฒ„๊น… ํ•˜๋Š” ๋ฐฉ๋ฒ•

โœจ ์ธ๊ธฐ TOP 10 ์ฝ”์ธ ์ž๋™ ์Šฌ๋ผ์ด๋“œ ๋ชจ์…˜์˜ ํŠธ๋ ˆ์ด๋“œ ์˜คํ”„ (Trade-Off) ๊ธฐ๋ก

๐Ÿ”Ž Redux๋ž€..?

๐Ÿ’“ useRef element (์š”์†Œ) ์žก์„ ๊ฒฝ์šฐ

๐Ÿšฉ ์„œ๋น„์Šค ๋ฉ”์ธ์—์„œ ํˆดํŒ (๋งํ’์„ ) ๋„์šฐ๋ฉด์„œ ๋ฐฐ์šด์ 

๐ŸŒš ๋‹คํฌ๋ชจ๋“œ ๊ตฌํ˜„์— ์•Œ์•„์•ผ ํ•  ์ง€์‹๋“ค

๐Ÿ”Ž ๊ฒ€์ƒ‰ ๊ตฌํ˜„ ํ•˜๋ฉด์„œ ๋Š๋‚€์ 

๐Ÿ—ž ์–•์€๋ณต์‚ฌ ๊นŠ์€๋ณต์‚ฌ ๊ฐœ๋…

๐Ÿ‘‹ ๋ฆฌ์•กํŠธ hooks ์ข‹์€ ์ฝ”๋“œ ์ž‘์„ฑ ๋ฐฉ์‹

๐Ÿ‘ป IntelliJ + git (์ปค๋ฐ‹๋‚ด์—ญ ๋Œ๋ฆฌ๊ธฐ, ๋ธŒ๋Ÿฐ์น˜ ์ฒดํฌ์•„์›ƒ)

๐Ÿ‘ฉ๐Ÿปโ€๐ŸŽค Hooks ์ข…๋ฅ˜์— ๋”ฐ๋ฅธ ์‚ฌ์šฉ์„ค๋ช…๋ฒ•

๐Ÿ”— ๊ฐœ๋ฐœํ•  ๋•Œ ๋„์›€๋๋˜ ๊ฒŒ์‹œ๊ธ€ (React, JS)

๐Ÿ˜‡ ๋ฆฌ์•กํŠธ CRA ์ƒ์—์„œ ํ•ซ๋ฆฌ๋กœ๋“œ ์„ค์ •

๋กœ์ปฌ์—์„œ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  git ์‚ฌ์šฉ์ž ์ด๋ฆ„๊ณผ ์ด๋ฉ”์ผ ์„ค์ •(global ์˜ต์…˜)

(React) ํ•ด๋‹น ์œ„์น˜(URL)์— ์ ‘๊ทผ ๋ผ์žˆ์„ ์‹œ์—๋งŒ ์ ์šฉ ํ•˜์ž

โ˜˜๏ธ ํฌ๋กฌ(Chrome) ๋””๋ฒ„๊ทธ ๋จนํ†ต์‹œ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

๐Ÿ•น [IntelliJ] ํด๋” ์•ˆ ๋ณด์ด๊ณ  ํŒŒ์ผ๋งŒ ๋ณด์ด๋Š” ๋ฒ„๊ทธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

๐Ÿ“… datePicker ์‚ฌ์šฉ์‹œ ์˜ค๋Š˜ ๋‚ ์งœ ์ดํ›„, ๋ฏธ๋ž˜ ๋‚ ์งœ disable ์ฒ˜๋ฆฌ

๐Ÿ’ [JS]์ˆซ์ž ๊ฐ–๊ณ  ๋†€์•„๋ณด์ž. ์†Œ์ˆ˜์  ๋ฐ˜์˜ฌ๋ฆผํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ๋“ฑ ์™ธ

๐Ÿง [React] react-moment, moment.js ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ์‹œ๊ฐ„

๐Ÿคต๐Ÿปโ€โ™€๏ธ ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ ๊ณผ์ •๋“ค (env... build...)

๐Ÿค– Lodash (๋ฐฐ์—ด์•ˆ์˜ ๊ฐ์ฒด๋“ค์„ ํ•ธ๋“ค๋งํ•˜๊ธฐ ์ข‹์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ)

โ˜ ๏ธ react ๋ฐ˜๋ณต๋ฌธ For๋กœ JSX ๋ฆฌํ„ดํ•˜๊ธฐ

๐Ÿคฒ Recoil ์‚ฌ์šฉ๋ฒ• (index ์ž‘์—…์— ์ ์šฉํ•ด๋ณด๋ฉด์„œ ๋Š๋‚€์  ๋“ฑ๋“ฑ..)

๐Ÿ’ฉ ๋ฆฌ์•กํŠธ ํด๋ง Polling ํ•˜๋Š” ๋ฐฉ๋ฒ• !

๐Ÿ [์ธํ…”๋ฆฌ์ œ์ด] Prettier ์ ์šฉํ•˜๊ธฐ (์ €์žฅํ•˜๋ฉด ์ž๋™์œผ๋กœ ์ด์˜๊ฒŒ ์ •๋ ฌ)

โ—๏ธ HTTP ์ฃผ๋กœ ๋ฐœ์ƒ๋˜๋Š” ์—๋Ÿฌ์ฝ”๋“œ

๐Ÿช ์ฟ ํ‚ค๋ž€ ?

๐Ÿ’ฟ ์Šคํฌ๋กค ๋กค๋ง ์Šฌ๋ผ์ด๋“œ ๊ตฌํ˜„ํ•˜๊ธฐ

๐ŸŠ ๋ชจ๋ฐ”์ผ์ผ ๋•Œ ํ…์ŠคํŠธ ๊ธด๊ฑฐ ... ์ฒ˜๋ฆฌ

โ˜๏ธŽ react์—์„œ innerHTML ์‚ฌ์šฉํ•˜๊ธฐ

โญ๏ธ ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€ ํด๋ฆญ ์‹œ ํŒŒ๋ผ๋ฏธํ„ฐ id ๊ฐ’์— ๋งž์ถฐ ์ฝ˜ํ…์ธ  ๋งตํ•‘๋˜๊ธฐ

โค๏ธโ€๐Ÿ”ฅ ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€ window.localStorage

๐Ÿ’œ React JSX ์ƒ ์ฒจ๋ถ€ ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ ํ•˜๊ธฐ

๐Ÿ–‡ ๋งํฌ ๋ณต์‚ฌํ•˜๊ธฐ ๊ตฌํ˜„ํ•˜๊ธฐ

โค๏ธโ€๐Ÿฉน SNS ์†Œ์…œ ๊ณต์œ ํ•˜๊ธฐ ์ž‘์—…ํ•˜๊ธฐ

๐Ÿงโ€โ™€๏ธ Kakao ์†Œ์…œ ์—ฐ๋™ API ์ž‘์—…ํ•  ๋•Œ

๐Ÿฃ ๋ฐ์ดํ„ฐ๊ฐ€ proxy ํ˜•ํƒœ๋กœ ๊ฐ’์ด ์ถœ๋ ฅ ๋  ๊ฒฝ์šฐ toJS()

๐Ÿคฆ๐Ÿปโ€โ™€๏ธ ์„œ๋ฒ„ ์ฃฝ์—ˆ๋Š”์ง€ ์‚ด์•˜๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ•

๐Ÿ”ป ๋ฆฌ๋ˆ…์Šค ์œ ์šฉํ•œ ํ„ฐ๋ฏธ๋„ ๋ช…๋ น์–ด

๐ŸŸก ์ ˆ๋Œ€๊ฒฝ๋กœ ../../ ์ด๋Ÿฐ๊ฑฐ ์—†์ด ๋””๋ ‰ํ† ๋ฆฌ ๊ฒฝ๋กœ ๊น”๋”ํ•˜๊ฒŒํ•˜๊ธฐ

git ์œ ์šฉํ•œ ๋ช…๋ น์–ด ๋ชจ์Œ์ง‘

๐ŸšŒ ๋ฐ์ดํ„ฐ fetching์‹œ config ํŒŒ๋ผ๋ฏธํ„ฐ ๊ฐ’ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ

๐Ÿค– ๋ Œ๋”๋ง ํ•  DOM๋…ธ๋“œ์— dangerouslySetInnerHTML ํƒœ๊ทธ ์‚ฌ์šฉ์‹œ purify ์‚ฌ์šฉํ•˜์ž

๐Ÿ™ƒ HTML ์ด๋ฉ”์ผ ํ…œํ”Œ๋ฆฟ ํผ ์ž‘์—… ์‹œ ์œ ์˜์‚ฌํ•ญ


About

๐Ÿง‘๐Ÿปโ€๐ŸŒพ TIL Record Repo & FE ์‹ค๋ฌด์—์„œ ๋งˆ์ฃผ ํ–ˆ๋˜ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…๊ณผ ๊ฒฝํ—˜ ์† ๋Ÿฌ๋‹ ํฌ์ธํŠธ


Languages

Language:HTML 88.7%Language:JavaScript 11.3%