๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ‘ฉ‍๐Ÿ’ป ๊ฐœ๋ฐœ ๊ณต๋ถ€

(31)
[ํ•œ๊ฒฝxToss] ๐ŸŒ์ถ”๊ฐ€๊ณต๋ถ€) Javascript ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์žฅ์  / arrow function ์‚ฌ์šฉ ์ด์œ  ES6 ๋ฌธ๋ฒ• ์ดํ›„๋ถ€ํ„ฐ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๊ฐ€ ๋“ฑ์žฅํ–ˆ๋‹ค ๊ถ๊ธˆํ•œ ๊ฒƒ :์™œ JS์—์„œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•˜๋Š”๊ฑธ๊นŒ? ์™œ ? WHY/ ?? 1. ํ•จ์ˆ˜ํ˜• ๋ณ€์ˆ˜ const apple = 1000; // ๋ณ€์ˆ˜const add = (a, b) => a + b; // ํ™”์‚ดํ‘œ ํ•จ์ˆ˜console.log(add(2, 3)); // 5 ์‚ฌ์šฉ์ด ์ง๊ด€์ ์ด๋‹ค.๋ณ€์ˆ˜์™€ ๋™์ผํ•˜๊ฒŒ ์„ ์–ธ ํ›„, ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ํ˜ธ์ถœํ•˜๋ฉด ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค! 2. ๊ฐ„๋‹จํ•œ ์–‘์‹ ์งง์€ ์ˆ˜์‹์ผ ๊ฒฝ์šฐ ๊ด„ํ˜ธ๊ฐ€ ํ•„์š”์—†๋‹ค let func = x => x * 2 ; 3. this๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. ๐ŸŒŸ๐ŸŒŸ๐ŸŒŸโ€ผ๏ธ ์ผ๋ฐ˜ ํ•จ์ˆ˜ ๋‚ด์—์„œ๋Š” this๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋‚˜, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—๋Š” ํ•ด๋‹น ๋ฌธ๋ฒ•์ด ์ ์šฉ๋˜์ง€ ์•Š์Œ.๊ทผ๋ฐ ์ด๊ฒŒ ์žฅ์ ์ด ๋œ๋‹ค.ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋‚ด์—์„œ this๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์ƒ์œ„์—..
[ํ•œ๊ฒฝxToss] ๐Ÿฅ์ถ”๊ฐ€๊ณต๋ถ€) Number, parseInt ํŠน์ง•๊ณผ ์ฐจ์ด์ , JS ๋‚˜๋ˆ—์…ˆ, Math.floor, ๋ช…์‹œ์  ์ง„๋ฒ• ์ง€์ • ์ฝ”ํ…Œ ์ค€๋น„๋ฅผ c++๋กœ ํ–ˆ๋‹ค๋ณด๋‹ˆ js ํƒ€์ž…์ด ์ต์ˆ™ํ•˜์ง€ ์•Šใ„ทใ….. ์”จํ”Œํ”Œ์ด๋ž‘ ๋„ˆ๋ฌด ๋‹ค๋ฅด๋‹ค ใ… ใ… ์—ฐ์‚ฐ ์ „ ๋ณ€์ˆ˜ ์ „์ฒ˜๋ฆฌํ•˜๊ธฐ….!!! ๐Ÿ™๐Ÿ™ ๊ถ๊ธˆํ•œ ๊ฒƒ :let score = prompt().split(’ ’);let avg = 0;for(let i=0; i1. Number์™€ parseInt ์ฐจ์ด Number : ๋‚ด๋ถ€์˜ ์ˆ˜๋ฅผ ์ˆซ์ž๋กœ ๋ณ€ํ™˜,๋ฌธ์ž์—ด ์ „์ฒด๋ฅผ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜๋ฏ€๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ NaN์„ ๋ฆฌํ„ด. parseInt : ๋ฌธ์ž์—ด์—์„œ ์ •์ˆ˜๋ฅผ ์ถ”์ถœ.๋ฌธ์ž์—ด์— ์ˆซ์ž๊ฐ€ ์•„๋‹Œ ๋ฌธ์ž๊ฐ€ ํฌํ•จ๋˜์–ด๋„, ์•ž์ชฝ์˜ ์ˆซ์ž ๋ถ€๋ถ„๋งŒ ์ฒ˜๋ฆฌ console.log(parseInt("42"));         // 42console.log(parseInt("42px"));    // 42console.log(parseInt("   42")); ..
[ํ•œ๊ฒฝxToss] 3์ฃผ์ฐจ ์š”์•ฝ : CSS ์ค‘๊ธ‰ ๋ฐ Javascript * ๊ฐœ์ธ์˜ ํ•™์Šต ๋‚ด์šฉ ๊ธฐ๋ก ์ค‘, ๊ทนํžˆ ์ผ๋ถ€์˜ ๋‚ด์šฉ๋งŒ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. 3์ฃผ์ฐจ ์‹ค์ŠตCSS ์ค‘๊ธ‰ ์ด๋ฏธ์ง€ ์ž˜๋ผ์„œ ๋ฐฐ๊ฒฝ์œผ๋กœ ์“ฐ๊ธฐ : background-position๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž before/after li ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜ํ•˜๊ธฐlist-style: none;display:inline-block;padding: 10px; ๋ณ€ํ™˜ํšจ๊ณผ - transition ์†์„ฑ ์†์„ฑ ์ข…๋ฅ˜transition-delay : ์ง€์—ฐ์‹œ๊ฐ„duration : ๋ณ€ํ™˜์‹œ๊ฐ„property : ๋Œ€์ƒ ์†์„ฑtiming-function : ๋ณด๊ฐ„ ํƒ€์ž… (์ธํ„ฐํด๋ ˆ์ด์…˜, ์‹œ๊ฐ„์˜ ๊ฐ„๊ฒฉ์„ ์ฑ„์›€)cubic-bezier()๋ฐฐ์ง€์–ด ๊ณก์„  - ์ˆ˜ํ•™์ž ๋ฒ ์ง€์–ด๊ฐ€ ์ œ์•ˆํ•œ ๋‘ ์ ๋งŒ์œผ๋กœ ๊ณก์„ ์„ ์ •์˜ํ•˜๋Š” ๊ณต์‹๋ณ€ํ˜• ์†์„ฑ - transform ์†์„ฑ CSS ์ดˆ๊ธฐํ™” ์ฝ”๋“œ: Eric Meyer’s ..
[ํ•œ๊ฒฝxToss] ๐ŸŠ์ถ”๊ฐ€๊ณต๋ถ€) daisyUI dark mode / Tailwind CSS option / ๋ฐ์ด์ง€ UI ๋‹คํฌ๋ชจ๋“œ ์ž๋™ ์„ค์ • ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ :์ตœ๊ทผ UIUX ์ธก๋ฉด์—์„œ ๋‹คํฌ๋ชจ๋“œ๊ฐ€ ํ•„์ˆ˜์ด๋‹ค๋ชจ๋“  ์š”์†Œ๋ฅผ daisyui๋กœ ๋งŒ๋“ ๋‹ค๋ฉด, ๋‹คํฌ๋ชจ๋“œ๊ฐ€ ์‚ฌ์šฉ์ž PCํ™˜๊ฒฝ์— ๋งž๊ฒŒ ์ž๋™์œผ๋กœ ์ ์šฉ๋˜๋Š”๊ฑธ๊นŒ? ์˜ค๋Š˜ daisyUI๋ฅผ ๋ฐฐ์› ๋‹ค.๋ช‡๋…„๋™์•ˆ FE๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ, CSS๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ๊นŽ์•„ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ์ด๋Ÿฐ component ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์žˆ๋‹ค๋‹ˆ ์‹ ์„ธ๊ณ„๋ฅผ ์ ‘ํ•œ ๋Š๋‚Œ์ด๋‹ค ๐Ÿ‘€ DaisyUI๋ž€?Tailwind CSS๋ฅผ ํ™•์žฅํ•˜๋Š” UI ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฏธ๋ฆฌ ์„ค๊ณ„๋œ UI ์š”์†Œ๋ฅผ ์ œ๊ณตํ•˜์—ฌ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ์Šคํƒ€์ผ๋ง๋œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œhttps://daisyui.com/docs/cdn/ Use daisyUI from CDN — Tailwind CSS Components ( version 4 update is here )How to use daisyUI from a CDN?d..
[ํ•œ๊ฒฝxToss] ๐Ÿ“์ถ”๊ฐ€๊ณต๋ถ€) Tailwind CSS Media Queries / ํ…Œ์ผ์œˆ๋“œ ๋ฐ˜์‘ํ˜• ์Šคํƒ€์ผ ์ฒ˜๋ฆฌ / ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ์ ‘๋‘์–ด ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ :Tailwind ๋ฏธ๋””์–ด์ฟผ๋ฆฌ์—์„œ ํ™”๋ฉด ๋„ˆ๋น„๊ฐ€ sm๋ณด๋‹ค ์ž‘์€ ์ƒํ™ฉ์€ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌ๋˜๋‚˜?Tailwind์˜ ์žฅ์ , ๋‹จ์ ์€ ๋ฌด์—‡์ธ๊ฐ€?์ˆ˜์—…์‹œ๊ฐ„์— Tailwind๋ฅผ ์ฒ˜์Œ์œผ๋กœ ๋ฐฐ์› ๋‹ค (FE๊ฐœ๋ฐœ์ž ๋งž๋‚˜์š”..?) ์šฐ์„  Tailwind๋ž€,์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค ๊ธฐ๋ฐ˜์˜ CSS ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.๋ฏธ๋ฆฌ ์ •์˜๋œ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•ด HTML์—์„œ ์ง์ ‘ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ณ ,๊ธฐ์กด CSS ์ž‘์„ฑ ์—†์ด ๋น ๋ฅด๊ฒŒ ๋ ˆ์ด์•„์›ƒ๊ณผ ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.   ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์—์„œ๋Š” ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด, ๋ฐ˜์‘ํ˜• ์ ‘๋‘์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.  • sm: 640px ์ด์ƒ • md: 768px ์ด์ƒ • lg: 1024px ์ด์ƒ • xl: 1280px ์ด์ƒ • 2xl: 1536px ์ด์ƒ ์—ฌ๊ธฐ์„œ ๋‚ด ์ƒ๊ฐ ์›๋ž˜ ์›นํŽ˜์ด์ง€ CSS๋ฅผ ์ฒ˜์Œ์— PC ๊ธฐ์ค€์œผ๋กœ ๋งŒ๋“ค๊ณ , PC/tablet/..
[ํ•œ๊ฒฝxToss] ๐Ÿ‡์ถ”๊ฐ€๊ณต๋ถ€) CSS ๋ฐ˜์‘ ๋ฐ˜๋ณต ์„ค์ • / fade over ์œ„์น˜ / SCSS ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ :์˜ํ™”/์˜ˆ๋งค/๊ทน์žฅ ๊ฐ ๋ฒ„ํŠผ์˜ ์ˆœ์„œ๋ฅผ n์ด๋ผ๊ณ  ํ• ๋•Œ,hover ์‹œ ๋‚˜ํƒ€๋‚˜๋Š” ์•„๋ž˜์ชฝ hidden menu ๋ฆฌ์ŠคํŠธ๋ฅผmargin-right: calc(50%-n); ์ด๋Ÿฐ ์‹์œผ๋กœ ๊ณ„์‚ฐํ•ด์„œ ๊ฐ ๋ฒ„ํŠผ๋งˆ๋‹ค ์œ„์น˜๋ฅผ ๋‹ค๋ฅด๊ฒŒ ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค. ์•„์ง ์ˆ˜์—…์—์„œ ์ˆœ์ˆ˜ html, css๋งŒ ์‚ฌ์šฉ์ค‘์ด๋ผnth-child(๊ท€์ฐฎ์Œ)์ด๋‚˜ JS ์ด์™ธ์—๋„ ๋ฐฉ๋ฒ•์ด ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•ด์กŒ๋‹ค! chatGPTํ•œํ…Œ ์šฐ์„  ๋ฌผ์–ด๋ด„ -> ๊ฐ•์‚ฌ๋‹˜๊ป˜๋„ ์—ฌ์ญˆ์–ด๋ด„   ๋ฐฉ๋ฒ• 1: nth-child์™€ calc() ์กฐํ•ฉCSS์˜ nth-child()๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํŠน์ • ์ˆœ์„œ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค..hidden_menu:nth-child(1) .menulist { margin-right: calc(50% - 10px); /* ์ฒซ ๋ฒˆ์งธ hidden_menu *..
[ํ•œ๊ฒฝxToss] 1-2์ฃผ์ฐจ ์š”์•ฝ : ์ปดํ“จํ„ฐ ๊ต์œก / HTML / CSS * ๊ฐœ์ธ์˜ ํ•™์Šต ๋‚ด์šฉ ๊ธฐ๋ก ์ค‘, ๊ทนํžˆ ์ผ๋ถ€์˜ ๋‚ด์šฉ๋งŒ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋งค์ผ ๋…ธ์…˜์— ํ•™์Šต ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ๋ธ”๋กœ๊ทธ์—๋„ ์š”์•ฝํ•ด์„œ ์ •๋ฆฌํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•„ ์—…๋กœ๋“œํ•œ๋‹คํšŒ๊ณ ..๊ฐ€ ์•„๋‹Œ ๋ฆฌ์–ผ ์š”์•ฝ ๊ฐ•์‚ฌ๋‹˜์ด ํ•ญ์ƒ ์„ค๋ช…ํ•˜์‹ค ๋•Œ ์ตœ๋Œ€ํ•œ ๊ตฌ์ฒด์ ์œผ๋กœ ์•Œ๋ ค์ฃผ์…”์„œ๋ชจ๋ฅด๋˜ ๋‚ด์šฉ์ด๋‚˜ ์• ๋งคํ•˜๊ฒŒ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒƒ๋“ค์„ ํ™•์‹คํ•˜๊ฒŒ ๊นจ๋‹ซ๊ณ  ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.์ „๊ณต ๊ณผ๋ชฉ์—์„œ ๋ชจ๋‘ ๋ฐฐ์› ๋˜ ๋‚ด์šฉ์ด์ง€๋งŒ, ์ด๋ ‡๊ฒŒ ๋ณต์Šตํ•˜๋ฉด์„œ ์ƒˆ๋กœ์šด ๋‚ด์šฉ์ด๋‚˜ ๊ฟ€ํŒ๋„ ์•Œ๊ฒŒ ๋จ!!  chap1. ์šด์˜์ฒด์ œ(OS)chap2. ์ปดํ“จํ„ฐ ๊ตฌ์กฐ2์ง„์ˆ˜ ์†Œ์ˆ˜์ โ€ผ๏ธ์„ 8 / 16์ง„์ˆ˜๋กœ ๋ณ€ํ™˜ : ์†Œ์ˆ˜์  ๊ธฐ์ค€์œผ๋กœ 3 / 4๊ฐœ์”ฉ ์ž๋ฅด๊ณ  ์•ž๋’ค์— 0์„ ์ฑ„์šฐ๊ณ  ๋ณ€ํ™˜chap3. ์ •๋ณดํ†ต์‹ chap4. ๋„คํŠธ์›Œํฌ์ƒ์„ฑํ˜• AI (LLM)chatGPT : ์‹ค์‹œ๊ฐ„ ๊ฒ€์ƒ‰ํด๋กœ๋“œ : 10๊ฐœ์›” ์ „ ๋ฐ์ดํ„ฐ๊นŒ์ง€ ์œ ํšจ์ œ๋ฏธ๋‚˜..
[ํ•œ๊ฒฝxToss] 2๊ธฐ (ํ’€์Šคํƒ) ๋ถ€ํŠธ์บ ํ”„ - ์ง€์› ๋ฐ ํ•ฉ๊ฒฉ ํ›„๊ธฐ๐Ÿฆ‹ https://boottent.com/camps/hkit-tossbank_20241210101816 ํ•œ๊ตญ๊ฒฝ์ œ์‹ ๋ฌธ with ํ† ์Šค๋ฑ…ํฌ MLOps / Full Stack ํ›ˆ๋ จ์ƒ ๋ชจ์ง‘ | [๋ถ€ํŠธํ…ํŠธ] ์ผ์ •,๊ฐ€๊ฒฉ,๋น„์šฉ,ํ›„๊ธฐ,์ปค๋ฆฌํ˜[๋ถ€ํŠธํ…ํŠธ] 2025๋…„ ๊ตญ๋น„์ง€์›,๋ถ€ํŠธ์บ ํ”„ ๋ชจ์Œ! ์ผ์ •,๊ฐ€๊ฒฉ,๋น„์šฉ,์ปค๋ฆฌํ˜๋Ÿผ,๊ตญ๋น„์ง€์›,๋‚ด์ผ๋ฐฐ์›€์นด๋“œ,ํ›„๊ธฐ,์ฑ„์šฉ์—ฐ๊ณ„,HRD ๋น„๊ต์ •๋ฆฌboottent.com  2024๋…„์—๋Š” ์œ ๋… ๋ถ€ํŠธ์บ ํ”„๊ฐ€ ๋งŽ์ด ๋ณด์˜€๋‹ค.์ทจ์—…๋‚œ ๋•Œ๋ฌธ์— ์ •๋ถ€์—์„œ ๋ˆ์„ ๋ฟŒ๋ฆฌ๊ณ  ์žˆ๋‚˜...์‹ถ์„ ์ •๋„๋กœ ๋งŽ์€ ๊ธฐ์—…์ด ๋ถ€์บ ์„ ๊ฐœ์„คํ•˜๊ณ  ์žˆ์—ˆ๊ณ ,ํ‰์†Œ์— ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ๋งŒ ํ•ด๋ดค๋˜ ๋‚˜๋กœ์„œ๋Š” ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์„ ์ ‘ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๊ธฐํšŒ๋ผ๊ณ  ์ƒ๊ฐํ•ด์„œํ’€์Šคํƒ ๊ต์œก๊ณผ์ •์„ ์ฐพ์•„ ์ง€์›ํ–ˆ๊ณ , ๋ช‡ ๊ตฐ๋ฐ์— ํ•ฉ๊ฒฉํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์ค‘์—์„œ ๊ฐ€์žฅ ๋งค๋ ฅ์ ์ด์—ˆ๋˜ ๊ฑด ํ•œ๊ตญ๊ฒฝ์ œ์‹ ๋ฌธxํ† ์Šค..

728x90