๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • What would life be If we had no courage to attemp anything?

์ „์ฒด ๊ธ€292

์›นํŒฉ(Webpack) webpack ๐Ÿ’ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ชจ๋“ˆ์„ ์ง€์›ํ•˜์ง€ ์•Š์•˜์ง€๋งŒ (ES5), ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์ƒˆ๋กœ์šด ํ‘œ์ค€์ธ ECMAScript6(ES6)๊ฐ€ ์ƒ๊ธฐ๋ฉด์„œ ๋ชจ๋“ˆ์„ ์ง€์›. CommonJS๋ณด๋‹ค ๋ฌธ๋ฒ•์ด ๋” ๊ฐ„๊ฒฐํ•ด์ง ๊ตฌ์กฐ๊ฐ€ staticํ•˜๊ฒŒ ๋ถ„์„ ๊ฐ€๋Šฅํ•˜๊ณ  ์ตœ์ ํ™”๋„ ๋จ. CommonJS๋ณด๋‹ค ์ˆœํ™˜ ์˜์กด์„ฑ ์ง€์›์ด ์ž˜๋จ ๊ทธ๋Ÿฌ๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋Š” ์—ฌ์ „ํžˆ ํŒŒ์ผ ๋‹จ์œ„ ๋ชจ๋“ˆ์„ ์ž˜ ๋ชจ๋ฆ„. ES6๋Š” ์ผ๋ถ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ์ง€์›. ๋”ฐ๋ผ์„œ ์—ฌ๋Ÿฌ ๋ฒ„์ „์˜ ๊ฐ๊ธฐ ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด๋Ÿฐ ๋ชจ๋“ˆํ™”๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๋„ ์žˆ์Œ. ํ•˜๋‚˜์˜ ์†Œ์Šค๋กœ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ณด์—ฌ์ฃผ๋Š”๊ฒŒ ์›น์˜ ํŠน์žฅ์  ๋ชจ๋“ˆ์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ๋ฌถ์–ด ๋„คํŠธ์›Œํฌ ๋น„์šฉ์„ ์ตœ์†Œํ™” ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•จ ์ด ๊ณผ์ •์ด ๋ฐ”๋กœ bundling ์›นํŽ™์˜ 4๊ฐ€์ง€ ๊ฐœ๋… ์—”ํŠธ๋ฆฌ // webpack.config.js module.exports = .. 2023. 6. 15.
npm ERR! Cannot read properties of null (reading 'edgesOut') Styled-Components ์„ค์น˜์‹œ ์˜ค๋ฅ˜ ๋ฌธ์ œ ์ƒํ™ฉ styled-components ์„ค์น˜ ๋ฐฉ๋ฒ• - ๊ณต์‹Docs npm install styled-components react ํ”„๋กœ์ ํŠธ์— styled-components๋ฅผ ์„ค์น˜ํ•˜๊ธฐ ์œ„ํ•ด ๊ณต์‹ ๋ฌธ์„œ์— ์–ธ๊ธ‰๋œ ์„ค์น˜ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ–ˆ๋Š”๋ฐ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์™”๋‹ค. npm ERR! Cannot read properties of null (reading 'edgesOut') ๋ฌธ์ œ ์›์ธ latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 ์ดํ›„๋กœ ๋‹ค์Œ ๋ช…๋ น์–ด์‹œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ. ๋ฌธ์ œ ํ•ด๊ฒฐ //.. 2023. 5. 14.
vscode ํ„ฐ๋ฏธ๋„ ๊ธ€์”จ ๊นจ์ง ํ˜„์ƒ Vscode ํ„ฐ๋ฏธ๋„ ๊ธ€์”จ ๊นจ์ง ํ˜„์ƒ ๋ฌธ์ œ cmd์ฐฝ์œผ๋กœ ๋…ธ๋“œ ํŒŒ์ผ์„ ์‹คํ–‰ํ–ˆ๋”๋‹ˆ Terminal์—์„œ ํ•œ๊ธ€์ด ๊นจ์ ธ์„œ ํ‘œ์‹œ๋˜์—ˆ๋‹ค. // settings.json ์ˆ˜์ •- ํŒŒ์›Œ์…€ ์ธ์ฝ”๋”ฉ์„ ์ง€์ • "[powershell]": { "files.encoding": "utf8bom", "files.autoGuessEncoding": true } ๋‚˜์˜ ๊ฒฝ์šฐ Vscode์˜ settings.json๋ฅผ ์ˆ˜์ •ํ•ด๋„ ํ•ด๊ฒฐ์ด ๋˜์ง€ ์•Š์•˜๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• chcp 65001 ์ž…๋ ฅ D:\yuiseo\Node.js-BASIC\lecture> chcp 65001 Reference http://ngmsoftware.com/bbs/board.php?bo_table=study&wr_id=531 2023. 4. 10.
[Jest] Test ์ž‘์„ฑ - Matcher (toBe(), not.toBe(), toEqual(), toStrictEqual(), toBeNull(),toBeUndefined(),toBeDefined(),toBeTruthy(),toBeFalsy()) ๊ฐ„๋‹จํ•œ ํ…Œ์ŠคํŠธ ์ž‘์„ฑ ์ฝ”๋“œ1. toBe() //fn.js const fn = { add : (num1,num2) => num1+num2 } module.exports = fn //fn.test.js const fn = require('./fn') test('1์€ 1์ด์•ผ',()=>{ expect(1).toBe(1) }) test('2๋”ํ•˜๊ธฐ 3์€ 5์•ผ',()=>{ expect(fn.add(2,3)).toBe(5) }) test('3๋”ํ•˜๊ธฐ 3์€ 5์•ผ',()=>{ expect(fn.add(3,3)).toBe(5) }) ๊ฒฐ๊ณผ1. ์ฝ”๋“œ2. toBe(), not.toBe() const fn = require('./fn') test('1์€ 1์ด์•ผ',()=>{ expect(1).toBe(1) }) test('2๋”ํ•˜๊ธฐ 3์€.. 2023. 2. 2.
[Test] ํ”„๋ก ํŠธ์—”๋“œ ํ…Œ์ŠคํŠธ ํ”„๋ก ํŠธ์—”๋“œ ํ…Œ์ŠคํŠธ ๐Ÿ’ก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๊ธฐ๋Œ€ํ•œ ๊ฒฐ๊ณผ๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์ฆํ•˜๋Š” ์ผ๋ จ์˜ ๋ชจ๋“  ํ–‰์œ„ ๋ชฉํ‘œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์•ˆ์ •์„ฑ๊ณผ ์œ ์ง€ ๋ณด์ˆ˜์„ฑ ํ–ฅ์ƒ์ด ๋ชฉํ‘œ ๋‚ด๋ถ€ ์ฝ”๋“œ์˜ ๋‹ค์–‘ํ•œ ์—ฐ์‚ฐ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํด๋ผ์ด์–ธํŠธ ์˜์—ญ์— ๋Œ€ํ•œ ์‚ฌ์šฉ์ž์˜ ์ธํ„ฐ๋ ‰์…˜(๋งˆ์šฐ์Šค ํด๋ฆญ, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ ๋“ฑ)๋„ ๊ณ ๋ คํ•ด ์˜ฌ๋ฐ”๋ฅธ ๊ฒฐ๊ณผ ๊ฒ€์ฆ DOM ์š”์†Œ๋“ค์ด ์›ํ•˜๋Š” ์œ„์น˜์— ์ง€์ •ํ•œ ํฌ๊ธฐ๋‚˜ ์—ฌ๋ฐฑ์„ ๊ฐ€์ง€๊ณ  ์ ์ ˆํ•˜๊ฒŒ ๋ฐฐ์น˜๋˜์–ด ์žˆ๋Š”์ง€ ๊ฒ€์ฆํ•ด์•ผ ํ•จ ์ด ๋ชจ๋“  ๊ณผ์ •์€ ๊ฐœ๋ฐœ ๊ณผ์ •๋ถ€ํ„ฐ QA๊นŒ์ง€ ์ž๋™ํ™”๋œ ํšŒ๊ท€ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์ง€์†์ ์œผ๋กœ ๊ฒ€์ฆ ์ข‹์€ ํ…Œ์ŠคํŠธ๋ž€? ๋ชจ๋“  ํ…Œ์ŠคํŠธ๋Š” ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰ ๋‹ค๋ฅธ ํ…Œ์ŠคํŠธ์˜ ๊ฒฐ๊ณผ๋‚˜ ์‹คํ–‰ ์—ฌ๋ถ€์™€๋Š” ๋ฌด๊ด€ํ•˜๊ฒŒ ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰ ํ…Œ์ŠคํŠธ์˜ ๊ฒฐ๊ณผ๋Š” ์ผ๊ด€์„ฑ์ด ์žˆ์–ด์•ผ ํ•จ ํ…Œ์ŠคํŠธ๋Š” ์™ธ๋ถ€ ํ™˜๊ฒฝ์— ์ƒ๊ด€์—†์ด ์ผ๊ด€์„ฑ ์žˆ๋Š” ๊ฒ€์ฆ์„ ์ˆ˜ํ–‰ ์ ์ ˆํ•œ ๋ชจํ‚น์„ ํ†ตํ•ด ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ OS, ๋„คํŠธ์›Œํฌ ๋˜๋Š” .. 2023. 2. 1.
[JavaScript] javascript ์•Œ์•„๋‘˜ ๊ฒƒ ๋ณดํ˜ธ๋˜์–ด ์žˆ๋Š” ๊ธ€ ์ž…๋‹ˆ๋‹ค. 2023. 1. 31.
[CS] ์ž๋ฃŒ๊ตฌ์กฐ์˜ ์ข…๋ฅ˜ ์„ ํ˜• ๊ตฌ์กฐ ํ•œ ์›์†Œ ๋’ค์— ํ•˜๋‚˜์˜ ์›์†Œ ๋งŒ์ด ์กด์žฌํ•˜๋Š” ํ˜•ํƒœ๋กœ ์ž๋ฃŒ๋“ค์ด ์„ ํ˜•์œผ๋กœ ๋‚˜์—ด๋˜์–ด ์žˆ๋Š” ๊ตฌ์กฐ ์„ ํ˜• ๊ตฌ์กฐ์— ํ•ด๋‹น๋˜๋Š” ์ž๋ฃŒ๊ตฌ์กฐ๋Š” ๋ฐฐ์—ด, ์—ฐ๊ฒฐ ๋ฆฌ์ŠคํŠธ, ์Šคํƒ, ํ ๋“ฑ์ด ์žˆ์Œ ๋น„์„ ํ˜• ๊ตฌ์กฐ ์›์†Œ ๊ฐ„ ๋‹ค๋Œ€๋‹ค ๊ด€๊ณ„๋ฅผ ๊ฐ€์ง€๋Š” ๊ตฌ์กฐ๋กœ ๊ณ„์ธต์  ๊ตฌ์กฐ๋‚˜ ๋งํ˜• ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ์— ์ ์ ˆ ๋น„์„ ํ˜• ๊ตฌ์กฐ์— ํ•ด๋‹น๋˜๋Š” ์ž๋ฃŒ๊ตฌ์กฐ๋Š” ํŠธ๋ฆฌ์™€ ๊ทธ๋ž˜ํ”„ ๋“ฑ์ด ์žˆ์Œ 2023. 1. 31.
[JavaScript] LocalStorage์™€ SessionStorage Local Storage์™€ Session Storage ๐Ÿฐ ์›น ์Šคํ† ๋ฆฌ์ง€ ๊ฐ์ฒด(web storage object)์ธ localStorage์™€ sessionStorage๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด์— ํ‚ค-๊ฐ’ ์Œ์„ ์ €์žฅ ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์นจํ•˜๊ณ (sessionStorage์˜ ๊ฒฝ์šฐ) ์‹ฌ์ง€์–ด ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•ด๋„(localStorage์˜ ๊ฒฝ์šฐ) ๋ฐ์ดํ„ฐ๊ฐ€ ์‚ฌ๋ผ์ง€์ง€ ์•Š๊ณ  ๋‚จ์•„ ์žˆ์Œ ์ฟ ํ‚ค ๋Œ€์‹  ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ์ด์œ ? ์ฟ ํ‚ค์™€ ๋‹ค๋ฅด๊ฒŒ ์›น ์Šคํ† ๋ฆฌ์ง€ ๊ฐ์ฒด๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ ์‹œ ์„œ๋ฒ„๋กœ ์ „์†ก๋˜์ง€ ์•Š์Œ ์ฟ ํ‚ค๋ณด๋‹ค ๋” ๋งŽ์€ ์ž๋ฃŒ ๋ณด๊ด€ ๊ฐ€๋Šฅ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ตœ์†Œ 2MB ํ˜น์€ ๊ทธ ์ด์ƒ์˜ ์›น ์Šคํ† ๋ฆฌ์ง€ ๊ฐ์ฒด๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ์Œ ๊ฐœ๋ฐœ์ž๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด ์›น ์Šคํ† ๋ฆฌ์ง€ ๊ตฌ์„ฑ ๋ฐฉ์‹์„ ์„ค์ • ์ฟ ํ‚ค์™€ ๋˜ ๋‹ค๋ฅธ ์ ์€ ์„œ๋ฒ„๊ฐ€ HTTP ํ—ค๋”๋ฅผ ํ†ตํ•ด ์Šคํ† ๋ฆฌ.. 2023. 1. 29.
[React] font ์ ์šฉ ๋ฐฉ๋ฒ• 1. ํ•„์š”ํ•œ ํฐํŠธ ๋‹ค์šด๋กœ๋“œ Pretendard ๋‚˜์˜ ๊ฒฝ์šฐ font ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด woff2 format์„ ์„ ํƒํ•จ 2. React ํ”„๋กœ์ ํŠธ์— ํฐํŠธ ๋ณต์‚ฌ 3. ํฐํŠธ ์ ์šฉ @font-face { font-family: "PretendardVariable"; src: local("PretendardVariable"),url("/src/assets/fonts/PretendardVariable.woff2") format("woff2"); } Reference React ํฐํŠธ ๋ณ€๊ฒฝ ๋ฐฉ๋ฒ• 2023. 1. 28.
[axios] axios 2 axios? ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์œ„ํ•œ Promise ๊ธฐ๋ฐ˜์˜ ํด๋ผ์ด์–ธํŠธ ์›๋ž˜๋Š” “XHR”์ด๋ผ๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ ๊ฐ์ฒด๋ฅผ ํ™œ์šฉํ•ด AJAX ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋Š”๋ฐ, ์ด๋ณด๋‹ค ํŽธ๋ฆฌํ•œ AJAX ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๋„์›€์„ ์คŒ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์ธํ„ฐํŽ˜์ด์Šค์™€ ํ•จ๊ป˜ ํŒจํ‚ค์ง€๋กœ ์‚ฌ์šฉ์ด ๊ฐ„ํŽธํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณต ์„ค์น˜ # npm ์‚ฌ์šฉํ•˜๊ธฐ: $ npm install axios # yarn ์‚ฌ์šฉํ•˜๊ธฐ: $ yarn add axios ์‚ฌ์šฉ axios.get('') //Promise return .then(..) .catch(..) //Axios ์‚ฌ์šฉํ•˜๊ธฐ const URL = '>' async function test(){ const response = await axios.get(URL) const data = response.data console.log(d.. 2023. 1. 27.