profile
Front-end Developer ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป
post-thumbnail

๊ธ€๋˜ 7๊ธฐ ์‹œ์ž‘!!

๊ธ€๋˜๋ผ๋Š” ๊ฐœ๋ฐœ์ž ๊ธ€์“ฐ๊ธฐ ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” ์ž‘๋…„์— ์ฒ˜์Œ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.์ฒ˜์Œ ์•Œ๊ฒŒ๋œ ํ›„, ๊ผญ ๋“ค์–ด๊ฐ€๊ณ  ์‹ถ์€ ๊ณณ์ด๋ผ๊ณ  ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ 7๊ธฐ๋Š” ์–ธ์ œ ๋ชจ์ง‘ํ•˜๋Š”์ง€ ํ•ญ์ƒ ์•Œ์•„๋ณด๊ณค ํ–ˆ๋‹ค. ์ง€๋‚œ ๋‹ฌ์— ๊ธ€๋˜ 7๊ธฐ๋ฅผ ๋ชจ์ง‘ํ•œ๋‹ค๋Š” ๊ธ€์„ ๋ณด๊ณ  ๋ฐ”๋กœ ์‹ ์ฒญํ–ˆ๋‹ค!๋ถ€ํŠธ์บ ํ”„๋ฅผ ์กธ์—…ํ•˜๊ณ  ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์—ˆ๋‹ค. ๋ถ€

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

(๋ฒˆ์—ญ)๐Ÿง If-else,switch๋ฅผ ์“ฐ์ง€๋ง๊ณ  Object Literals๋ฅผ ์จ๋ผ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ณต์žกํ•œ ์กฐ๊ฑด๋ฌธ์„ ์“ฐ๋Š” ๊ฒƒ์€, ํ•ญ์ƒ ์ง€์ €๋ถ„ํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋‹ค.๋‹ค์ˆ˜์˜ ์กฐ๊ฑด๋ฌธ์˜ ๊ฒฝ์šฐ,Object literal์ด ์ฝ”๋“œ๋ฅผ ๊ตฌ์กฐํ™”ํ•˜๋Š” ๊ฐ€์žฅ ์ฝ๊ธฐ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.์˜ˆ์‹œ๋ฅผ ๋ณด๋ฉด, ์šด์œจ์ด ์žˆ๋Š” ์Šฌ๋žญ ๊ตฌ๋ฌธ๊ณผ ๊ทธ ์˜๋ฏธ๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •

2021๋…„ 11์›” 8์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

3๏ธโƒฃ Three.js๋ž€?

Three.js๋Š” ์›นํŽ˜์ด์ง€์— 3D๊ฐ์ฒด๋ฅผ ์‰ฝ๊ฒŒ ๋ Œ๋”๋งํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 3D ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ.๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ,Three.js๋Š” 3D๊ฐ์ฒด๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ webgL์„ ์‚ฌ์šฉํ•œ๋‹ค. WebGL:์ ,์„ ,์‚ผ๊ฐํ˜•๋งŒ์„ ๊ทธ๋ฆฌ๋Š” ์•„์ฃผ ๋‹จ์ˆœํ•œ ์‹œ์Šคํ…œWebGL๋กœ ์ง์ ‘ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด ์ƒ๋‹น

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

๐Ÿ‘’ Vue 3. The composition API

Vue 3์—์„œ ์ƒˆ๋กœ ๋“ฑ์žฅํ•œ The composition API์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.1.Group logic together in a setup function2.Easily create reusable logic(Functions)์˜ˆ์‹œ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด์ž.ref๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š”

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

TIL.Vue ๋ผ์šฐํ„ฐ

๋ผ์šฐํ„ฐ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋จผ์ € ๋ผ์šฐํŒ…์ด ๋ฌด์—‡์ธ์ง€ ์•Œ์•„์•ผ ํ•œ๋‹ค. ๋ผ์šฐํŒ…์€ ์›น ํŽ˜์ด์ง€ ๊ฐ„์˜ ์ด๋™ ๋ฐฉ๋ฒ•์„ ๋งํ•œ๋‹ค. ๋ผ์šฐํŒ…์€ ํ˜„๋Œ€ ์›น ์•ฑ ํ˜•ํƒœ ์ค‘ ํ•˜๋‚˜์ธ SPA์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.SPA ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜: ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์— ์›น ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•˜์—ฌ ์ƒˆ๋กœ

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

๐Ÿงต Vue.js ์Šคํ„ฐ๋”” 1.

{{๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ}}ํ•˜๋Š” ์ด์œ ??1\. HTML์— ํ•˜๋“œ์ฝ”๋”ฉํ•ด๋†“์œผ๋ฉด ๋‚˜์ค‘์— ๋ณ€๊ฒฝ์ด ์–ด๋ ค์›€2.Vue์˜ ์‹ค์‹œ๊ฐ„ ์ž๋™ ๋ Œ๋”๋ง์ด ๋œ๋‹ค.=>Vue๋Š” data๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด data์™€ ๊ด€๋ จ๋œ HTML์—๋„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜์ด ๋œ๋‹ค.3\. ์• ์ดˆ์— ๊ฐ’์ด ๋ฐ”๋€” ์ผ ์—†์œผ๋ฉด ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์•ˆํ•ด๋„ ๋œ

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

๐Ÿคฉ forEach vs for Loops ์ฐจ์ด์ 

์•„๋ž˜ array์•ˆ์— object๊ฐ€ ์žˆ๋Š” ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด์ž.foodArray์•ˆ ๊ฐ object๋ฅผ iterateํ•˜๊ธฐ ์œ„ํ•ด for loop๋ฅผ ์“ฐ๊ณ ์ž ํ•œ๋‹ค.forEach๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด for loop์™€ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.forEach๋Š” ๋ชจ๋“  array์•ˆ์— ์กด์žฌํ•œ๋‹ค. ์œ„

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

forEach vs for in vs for of

ํ—ท๊ฐˆ๋ฆฌ๋Š” forEach, for in, for of๋ฅผ ์ •๋ฆฌํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.forEach๋Š” ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฐ˜๋ณตํ•˜๋ฉฐ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.์˜ค์ง Array๊ฐ์ฒด์—์„œ๋งŒ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๋ฉ”์„œ๋“œ. ๋ฐ˜๋ณต๋ฌธ์ด ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜์ด๋‹ค.for...in์€ ๊ฐ์ฒด์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฐ์ฒด์˜ key๊ฐ’๊ณผ value

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

๐Ÿคฉ ์žฌ๋ฏธ์žˆ๋Š” javascript ์˜ˆ์ œ 1

๐Ÿ˜€ ๋ฌด๊ถ๋ฌด์ง„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์„ธ๊ณ„์— ๋น ์ ธ๋ณด์ž! 1.[]์™€ ![]์€ ๊ฐ™๋‹ค. > [] ==![] =>true ์œ„ ํ‘œํ˜„์‹์€ ์•„๋ž˜์™€ ๊ฐ™์ด ๋‹จ์ˆœํ™”๋  ์ˆ˜ ์žˆ๋‹ค. ์ถ”์ƒํ•ญ๋“ฑ ์—ฐ์‚ฌ์ž๋Š” ์–‘์ชฝ์„ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋น„๊ตํ•˜๊ณ  ์„œ๋กœ ๋‹ค๋ฅธ ์ด์œ ๋กœ ๊ฒฐ๊ตญ ์–‘์ชฝ์˜ ์ˆซ์ž๋Š” 0์ด ๋œ๋‹ค. 2.tr

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

TIL.useMemo๋ž€?

useMemo๋Š” useCallback๊ณผ ๋น„์Šทํ•˜๋‹ค. memoized callback์„ ๋ฆฌํ„ดํ•˜๋Š” ๋Œ€์‹ , memoized value๋ฅผ ๋ฆฌํ„ดํ•œ๋‹ค.useMemo๋Š” 2๊ฐœ์˜ arguments(ํ•จ์ˆ˜, ์˜์กด์„ฑ ๋ฐฐ์—ด)๋ฅผ ๊ฐ–๋Š”๋‹ค. ๋งค ๋ Œ๋”์‹œ, ์˜์กด์„ฑ๋ฐฐ์—ด์˜ ๊ฐ’์— ์•„๋ฌด๋Ÿฐ ๋ณ€ํ™”๊ฐ€ ์—†๋‹ค๋ฉด use

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

TIL.useCallback์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž

useCallback์€ 2๊ฐœ์˜ argument(callback function, ์˜์กด์„ฑ๋ฐฐ์—ด)๋ฅผ ๊ฐ–๋Š”๋‹ค.์˜์กด์„ฑ ๋ฐฐ์—ด์˜ ๊ฐ’์ด ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ memoized callback ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•œ๋‹ค.๐ŸนMemoization์€ ๋ฌด์—‡์ธ๊ฐ€?memoized,momoization์€ ์ตœ์ ํ™” ๊ธฐ์ˆ 

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

TIL.useReducer์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž

useReducer๋ž€? useRedcuer Hook์€ react๊ฐ€ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ reducer function์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. useState Hook๊ณผ ๋งค์šฐ ๋น„์Šทํ•œ๋ฐ, ์ฐจ์ด์ ์ด๋ผ๋ฉด useReducer๋Š” ์ข€ ๋” ๋ณต์žกํ•œ ๋กœ์ง๊ณผ ์ƒํƒœ๊ด€๋ฆฌ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€

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

TIL5.LeetCode_Longest Common Prefix

Write a function to find the longest common prefix string amongsts an array of strings. If there is no common prefix, return an empty string "". Exam

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

TIL4.LeetCode_Roman to Integer

Roman numerals are represented by seven different symbols :I,V,X,L,C,D,M.Symbol : ValueI 1V 5X 10L

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

Javascript_Design Pattern

๋””์ž์ธํŒจํ„ด์€ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์— ๋ฐœ์ƒํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ด์Šˆ๋“ค์„ ํ•ด๊ฒฐํ•˜๋Š”๋ฐ ๋„์›€์„ ์ฃผ๋Š” ์ผ์ข…์˜ ์ฆ๋ช…๋œ ๊ธฐ์ˆ ๋“ค์ด๋‹ค.์ด๋Ÿฌํ•œ ์ƒํ™ฉ์—์„œ๋Š” ์ด๋Ÿฌํ•œ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ์ด๋ผ๋Š” ์ผ์ข…์˜ ๋ฐฉํ–ฅ์„ฑ์„ ์ œ์‹œํ•ด์ค€๋‹ค.์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์€ ํŠน์ • ํด๋ž˜์Šค์˜ ๊ฐ์ฒด๋ฅผ ํ•œ ๊ฐœ๋งŒ ์œ ์ง€ํ•˜๋Š” ํŒจํ„ด์ด๋‹ค.์ „์—ญ์—์„œ ์ ‘๊ทผํ•  ์ˆ˜

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

TIL3.LeetCode_Palindrome Number

Given an integer X, return true if x is palindrome integer. An integer is a palindrome when it reads the same backward as forward. For example, 121 is

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

TIL2.LeetCode_Reverse Integer

Given a signed 32-bit integer x, return x with its digits reversed.If reversing x causes the value to go outside the signed 32-bit integer range โˆ’231,

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

TIL1_LeetCode: Longest Substring Without Repeating Characters

Given a string s, find the length of the longest substring without repeating charactersExample 1Input: s = "abcabcbb"Output:3Explanation: The answer i

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

TIL.useContext์™€ useReducerํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ

Context API๋Š” ์ƒํƒœ์˜ ์ค‘์•™๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ์ƒํƒœ๊ด€๋ฆฌ ๋„๊ตฌ๋ฆฌ๋•์Šค์™€ ๋‹ค๋ฅด๊ฒŒ ์—ฌ๋Ÿฌ ์ €์žฅ์†Œ๊ฐ€ ์กด์žฌํ•  ์ˆ˜ ์žˆ๋‹ค. Context API๋Š” ํฌ๊ฒŒ ์ „์—ญ ์ƒํƒœ๊ฐ€ ์ €์žฅ๋˜๋Š” context, ์ „์—ญ ์ƒํƒœ๋ฅผ ์ œ๊ณตํ•˜๋Š” provider, ์ „์—ญ ์ƒํƒœ๋ฅผ ๋ฐ›์•„ ์‚ฌ์šฉํ•˜๋Š” consumer๋กœ ๋‚˜๋‰œ๋‹คcon

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

Flexbox์‚ฌ์šฉ ์‹œ 3๊ฐ€์ง€ tips

grid's element์—์„œ space-between,space-around๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊นจ์ง„ grids๋ฅผ ๋ณด๊ธฐ ์‰ฝ๋‹ค.๊ทธ๋ ‡๊ธฐ์— column-gap์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋‹ค.์˜ˆ์‹œ)justify-content์™€ align-items๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ˆ˜์ง ์ •๋ ฌ์‹œ ๋ฐ์ดํ„ฐ๋ฅผ

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