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

๐Ÿ’ฌ/ใ…ใ……ใ…Œใ…‹ใ…ใ…… ์ฑŒ๋ฆฐ์ง€

 (50)
33์ผ์ฐจ ๐Ÿป 33์ผ์ฐจ Part 10. React ๋กœ ์‡ผํ•‘๋ชฐ ๋งŒ๋“ค๊ธฐ (React ๊ธฐ๋ณธ) Ch 2. React Component Ch 2. React Component ๐Ÿ”— React Component ๋งŒ๋“œ๋Š” ๋ฒ• // Class Component // ์ •์˜ class ClassComponent extends React.Component { render() { return Hello; } } // ์‚ฌ์šฉ ReactDOM.render(, document.querySelector("#root")); // Function Component 1 // ์ •์˜ function FunctionComponent() { return Hello; } // ์‚ฌ์šฉ ReactDOM.render(, document.querySelector("#ro..
32์ผ์ฐจ ๐Ÿป 32์ผ์ฐจ Part 10. React ๋กœ ์‡ผํ•‘๋ชฐ ๋งŒ๋“ค๊ธฐ (React ๊ธฐ๋ณธ) Ch 1. React Getting Started Ch 1. React Getting Started https://slides.com/woongjae/react2021 React 2021 ๋ฆฌ์•กํŠธ 2021 slides.com ๐Ÿ”— NVM https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com ๐Ÿ”— React ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ // 1. ๋ฆฌ์•กํŠธ ..
31์ผ์ฐจ ๐Ÿ’ƒ 31์ผ์ฐจ Part 8. Bundler Ch 1. Parcel Ch 2. Webpack Ch 1. Parcel ๐Ÿ”— Parcel Plugin Static Files Copy => ์ •์  ํŒŒ์ผ ์—ฐ๊ฒฐ https://www.npmjs.com/package/parcel-plugin-static-files-copy parcel-plugin-static-files-copy ParcelJS plugin to copy static files from static dir to bundle directory.. Latest version: 2.6.0, last published: a year ago. Start using parcel-plugin-static-files-copy in your project by runnin..
30์ผ์ฐจ ๐Ÿงผ 30์ผ์ฐจ Part 7. CSS ํ”„๋ ˆ์ž„์›Œํฌ BootStrap Ch 1. CSS ํ”„๋ ˆ์ž„์›Œํฌ BootStrap Ch 1. CSS ํ”„๋ ˆ์ž„์›Œํฌ BootStrap https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com https://getbootstrap.com/docs/5.1/components/buttons/ Buttons Use ..
29์ผ์ฐจ ๐Ÿฆ  29์ผ์ฐจ Part 6. SCSS Ch 1. SCSS Ch 1. SCSS SCSS์˜ ์ค‘์ฒฉ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ์„ ํƒ์ž ๋ฐ˜๋ณต์„ ์ค„์—ฌ์ค€๋‹ค! SCSS๋ฅผ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ํ†ตํ•ด CSS๋กœ ๋ณ€ํ™˜(์ปดํŒŒ์ผ)ํ•œ๋‹ค. https://sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be..
28์ผ์ฐจ ๐Ÿฅ• 28์ผ์ฐจ Part 4. TypeScript Essentials Ch 7. Generics Ch 7. Generics ํƒ€์ž…์€ ์ตœ๋Œ€ํ•œ ์ž‘์€ ๋ฒ”์œ„๋กœ ์ œํ•œ ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค!!! ๊ทธ๋ ‡๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜์Ÿˆ // Generics vs Any function helloString(message: string): string { return message; } function helloNumber(message: number): number { return message; } // ๋” ๋งŽ์€ ๋ฐ˜๋ณต๋œ ํ•จ์ˆ˜๋“ค ... function hello(message: any): any { return message; } console.log(hello("Mark").length); // any console.log(hello(..
27์ผ์ฐจ โค๏ธ‍๐Ÿ”ฅ 27์ผ์ฐจ Part 4. TypeScript Essentials Ch 6. Classes Ch 6. Classes (ES6~) class๋Š” object๋ฅผ ๋งŒ๋“œ๋Š” ์ฒญ์‚ฌ์ง„์ด๋‹ค. // Quick Start class Person { name; constructor(name: string) { this.name = name; } } const p1 = new Person("Mark"); console.log(p1); ๐Ÿ”— Constructor & Initialize class Person { name: string = "Mark"; // ๋ฐฉ๋ฒ• 1) ๋””ํดํŠธ ์ƒ์„ฑ์ž age!: number; // ํ”„๋กœํผํ‹ฐ๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ณณ ๋˜๋Š” ์ƒ์„ฑ์ž์—์„œ ๊ฐ’์„ ํ• ๋‹นํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์—๋Š” !๋ฅผ ๋ถ™์—ฌ์„œ ์œ„ํ—˜์„ ํ‘œํ˜„ํ•œ๋‹ค. // ๋ฐฉ๋ฒ• 2) ..
26์ผ์ฐจ ๐Ÿ˜ 26์ผ์ฐจ Part 4. TypeScript Essentials Ch 5. Interfaces Ch 5. Interfaces ์™ธ๋ถ€์ ์œผ๋กœ ๋“œ๋Ÿฌ๋‚˜๋Š” ๊ฐ์ฒด์˜ ์‚ฌ์šฉ ๋ฐฉ์‹์ด ์ ํ˜€์žˆ๋Š” ํƒ€์ž… interface Person1 { name: string; age: number; } function hello1(person: Person1): void { console.log(`์•ˆ๋…•ํ•˜์„ธ์š”! ${person.name} ์ž…๋‹ˆ๋‹ค.`); } const p1: Person1 = { name: "Mark", age: 39, }; hello1(p1); ๐Ÿ”— optional property interface Person3 { name: string; age?: number; // optional property [index: strin..

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”