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

๐Ÿ’ฌ

(50)
49, 50์ผ์ฐจ ๐Ÿ’– 49์ผ์ฐจ Part 16. Svelte Ch 1. Svelte ์ž…๋ฌธ https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using tec svelte.dev Write less code No virtual DO..
48์ผ์ฐจ ๐Ÿช‚ 48์ผ์ฐจ Part 15. Next.js๋กœ ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ Ch 2. Next.js๋กœ Blog ๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ Ch 2. Next.js๋กœ Blog ๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Next.js๋Š” ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์ •์  ๋ฐ ์„œ๋ฒ„ ๋ Œ๋”๋ง, TypeScript ์ง€์›, ์Šค๋งˆํŠธ ๋ฒˆ๋“ค๋ง, ๊ฒฝ๋กœ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ค๊ธฐ ๋“ฑ ํ”„๋กœ๋•์…˜์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„..
47์ผ์ฐจ ๐Ÿ•๏ธ 47์ผ์ฐจ Part 15. Next.js๋กœ ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ Ch 1. Sanity๋กœ Blog ๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ Ch 1. Sanity๋กœ Blog ๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ https://slides.com/woongjae/nextjs2021 Next.js 2021 ๋„ฅ์ŠคํŠธ์ œ์ด์—์Šค 2021 slides.com https://www.sanity.io/ The Unified Content Platform – Sanity.io Sanity is the unified content platform that lets your team work together in real-time to build engaging digital experiences across channels. www.sanity.io Content is Data S..
46์ผ์ฐจ ๐Ÿฆซ 46์ผ์ฐจ Part 14. GraphQL ๋ง›๋ณด๊ธฐ (Server ๋งŒ๋“ค๊ธฐ) Part 14. GraphQL ๋ง›๋ณด๊ธฐ (Server ๋งŒ๋“ค๊ธฐ) https://slides.com/woongjae/graphql2021 GraphQL 2021 ๊ทธ๋ž˜ํ”„ํ์—˜ 2021 slides.com https://graphql.org/ GraphQL | A query language for your API Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single ev..
45์ผ์ฐจ ๐Ÿ˜ถ‍๐ŸŒซ๏ธ 45์ผ์ฐจ Part 13. mobX๋กœ ์ƒํƒœ๊ด€๋ฆฌํ•˜๊ธฐ Part 13. mobX๋กœ ์ƒํƒœ๊ด€๋ฆฌํ•˜๊ธฐ https://slides.com/woongjae/mobx2021 MobX 2021 ๋ชน์—‘์Šค 2021 slides.com https://mobx.js.org/README.html README · MobX mobx.js.org ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ์ ๊ทน ํ™œ์šฉํ•œ๋‹ค. cra ์— ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•... ์Šคํ† ์–ด ๊ฐ์ฒด์— ๋ถ™์ด๋Š” ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๊ฐ€ ์žˆ๊ณ , => @observable ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๊ฐ€ ์žˆ๋‹ค. => @observer TypeScript ๊ฐ€ Base ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค Redux ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ์Šคํ† ์–ด์— ํ•„์š”ํ•œ ๋ถ€๋ถ„๊ณผ ๋ฆฌ์•กํŠธ์— ํ•„์š”ํ•œ ๋ถ€๋ถ„์ด ์žˆ๋‹ค. npm i mobx -D npm i mobx-react -D..
43, 44์ผ์ฐจ ๐Ÿฆฃ 43์ผ์ฐจ 44์ผ์ฐจ Part 12. React๋กœ ๋‚˜์˜ ์ฑ…์ƒ ๋งŒ๋“ค๊ธฐ (TypeScript) https://my-books.vercel.app/signin React App my-books.vercel.app $ npx create-react-app my-books --template typescript ๐Ÿ”— ๋ผ์šฐํŒ… ์„ค์ •ํ•˜๊ธฐ $ npm i react-router-dom $ npm i react-error-boundary ๐Ÿ”— ๋กœ๊ทธ์ธ, ๋กœ๊ทธ์•„์›ƒ $ npm i redux react-redux redux-saga redux-devtools-extension redux-actions $ npm i @types/react-redux @types/redux-actions -D $ npm i antd $ npm i @an..
42์ผ์ฐจ ๐Ÿฅธ 42์ผ์ฐจ Part 11. Redux ๋กœ ์ƒํƒœ๊ด€๋ฆฌํ•˜๊ธฐ Ch 2. Redux Advanced (1) Ch 3. Redux Advanced (2) Ch 2. Redux Advanced ๐Ÿ”— Async Action with Redux (not use ๋ฏธ๋“ค์›จ์–ด) API ํ˜ธ์ถœ์€ ๋ณดํ†ต componentDidMount ์‹œ์ ์— ํ•ด์•ผ ํ•œ๋‹ค. $ npm i axios // ./redux/action.js ... // users // ๊นƒํ—™ API ํ˜ธ์ถœ์„ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธ export const GET_USERS_START = "GET_USERS_START"; // ๊นƒํ—™ API ํ˜ธ์ถœ์— ๋Œ€ํ•œ ์‘๋‹ต์ด ์„ฑ๊ณต์ ์œผ๋กœ ๋Œ์•„์˜จ ๊ฒฝ์šฐ export const GET_USERS_SUCCESS = "GET_USERS_SUCCESS"; // ๊นƒ..
41์ผ์ฐจ ๐Ÿฆฅ 41์ผ์ฐจ Part 11. Redux ๋กœ ์ƒํƒœ๊ด€๋ฆฌํ•˜๊ธฐ Ch 1. Redux Basic Ch 1. Redux Basic $ npm i redux ๋‹จ์ผ ์Šคํ† ์–ด๋‹ค! [๋งŒ๋“ค๊ธฐ] ๋‹จ์ผ ์Šคํ† ์–ด ์‚ฌ์šฉ ์ค€๋น„ํ•˜๊ธฐ import redux ์•ก์…˜์„ ์ •์˜ํ•˜๊ณ , ์•ก์…˜์„ ์‚ฌ์šฉํ•˜๋Š”, ๋ฆฌ๋“€์„œ๋ฅผ ๋งŒ๋“ค๊ณ , ๋ฆฌ๋“€์„œ๋“ค์„ ํ•ฉ์นœ๋‹ค. ์ตœ์ข… ํ•ฉ์ณ์ง„ ๋ฆฌ๋“€์„œ๋ฅผ ์ธ์ž๋กœ, ๋‹จ์ผ ์Šคํ† ์–ด๋ฅผ ๋งŒ๋“ ๋‹ค [์‚ฌ์šฉํ•˜๊ธฐ] ์ค€๋น„ํ•œ ์Šคํ† ์–ด๋ฅผ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ import react-redux connect ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ์— ์—ฐ๊ฒฐ ๐Ÿ”— Action (์•ก์…˜) function ์•ก์…˜์ƒ์„ฑ์ž(...args) { return ์•ก์…˜; } ์•ก์…˜ ์ƒ์„ฑ์ž๋ฅผ ํ†ตํ•ด ์•ก์…˜์„ ๋งŒ๋“ค์–ด ๋ƒ…๋‹ˆ๋‹ค. ๋งŒ๋“ค์–ด๋‚ธ ์•ก์…˜ ๊ฐ์ฒด๋ฅผ ๋ฆฌ๋•์Šค ์Šคํ† ์–ด์— ๋ณด๋ƒ…๋‹ˆ๋‹ค. ๋ฆฌ๋•์Šค ์Šคํ† ์–ด๊ฐ€ ์•ก์…˜ ๊ฐ์ฒด๋ฅผ ๋ฐ›์œผ๋ฉด ์Šคํ† ์–ด..