본문 바로가기

💬

(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 액션; } 액션 생성자를 통해 액션을 만들어 냅니다. 만들어낸 액션 객체를 리덕스 스토어에 보냅니다. 리덕스 스토어가 액션 객체를 받으면 스토어..

이전 1 2 3 4 ··· 7 다음

티스토리툴바