🖥️ Frontend/frontend+16 ⛈️vite🪁 알아보기 나야나나야나⛈️vite🪁 ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev [Vue + Vite] 근데 Vite는 뭔가요?Vue 3로 오면서 Vue 프로젝트를 만들면 Vite 기반으로 빌드설정이 이루어지게 된다. Vite는 기존의 Vue CLI를 대체하기 위한 툴이다. Vite를 이용하여 Vue 프로젝트의 스캐폴딩을 만든다라고 보면 된다.analogcode.tistory.comVite는 모던 프론트엔드 도구 : 번들러파일들을 빠르게 변환하고 모듈을 관리해 주는 역할 Webpack 업그레이드 버전!주요 두 가지 기능Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능Build : Production 배포를 위한 소스코드 번들링 기능주요 특징빠른 개발 서.. 2024. 9. 13. 🌺 React-query 공부하기 🌺 React QueryReact 애플리케이션에서 서버 상태 관리를 용이하게 하는 라이브러리데이터 페칭, 캐싱, 동기화, 업데이트 등의 과정을 자동화데이터 페칭: useQuery와 같은 훅을 사용하여 비동기 데이터를 쉽게 로드하고, 컴포넌트에 자동으로 반영캐싱: 로드된 데이터를 자동으로 메모리에 저장하고, 동일한 요청이 재발생할 때 캐시에서 빠르게 데이터 가져옴백그라운드 업데이트 및 리프레시: 애플리케이션의 데이터를 최신 상태로 유지하기 위해 백그라운드에서 데이터를 주기적으로 업데이트데이터 동기화: 여러 컴포넌트와 페이지에서 동일한 데이터를 사용할 경우, 데이터의 일관성을 유지오류 관리: 데이터 로드 과정에서 발생할 수 있는 오류를 캡처하고 처리하는 메커니즘을 제공예시import { useQuery }.. 2024. 9. 2. 🐻 Zustand Introduction - ZustandHow to use Zustandzustand.docs.pmnd.rs주스탠드 (Zustand)주스탠드는 상태 관리 라이브러리로, Redux와 같은 기존의 상태 관리 라이브러리보다 간단하고 직관적인 API를 제공리덕스의 복잡한 설정과 보일러플레이트 없이도 상태를 효과적으로 관리 주요 기능:간단한 설정: 작은 설정으로 강력한 상태 관리가 가능합니다.훅 기반 API: useStore 같은 훅을 사용해서 컴포넌트 내에서 직접 상태를 접근하고 업데이트할 수 있습니다.비동기 로직 통합: 액션 내에서 비동기 로직을 쉽게 통합하고 관리할 수 있습니다.컴포넌트 간 상태 공유: 애플리케이션의 다양한 컴포넌트 간에 상태를 쉽게 공유하고 업데이트할 수 있습니다.🐻 예제import { .. 2024. 8. 19. 🌸 React Query & Zustand 🌸 🌸 상태관리 라이브러리 상태관리 라이브러리는 웹 또는 모바일 애플리케이션에서 사용자 인터페이스(UI)의 상태를 효율적으로 관리하고, 애플리케이션의 다양한 컴포넌트 간에 상태를 쉽게 공유하며, 상태 변화를 추적하고 조작하는 데 도움을 주는 도구이러한 라이브러리들은 대규모 애플리케이션의 복잡성을 관리하고, 데이터 흐름을 예측 가능하게 만드는 데 큰 역할 Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, cach.. 2024. 8. 19. 프론트엔드 : 💝Emotion 공부공부💝EmotionCSS-in-JS libraryJS 로 css 스타일을 작성하도록 설계된 라이브러리 Emotion – Introduction(Edit code to see changes)emotion.sh GitHub - emotion-js/emotion: 👩🎤 CSS-in-JS library designed for high performance style composition👩🎤 CSS-in-JS library designed for high performance style composition - emotion-js/emotiongithub.comEmotion is a performant and flexible CSS-in-JS library. Building on many othe.. 2024. 8. 8. 🌏 RealWorld 프로젝트 - react/recoil 신촌프관팀에서 사부가 내려준 숙제를 한다 뚠뚠 🌏 RealWorld란~ GitHub - gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more - gothinkster/realworld github.com Home - Conduit conduit.realworld.how front CodebaseShow codebase.show To.. 2024. 4. 2. 🟦 Typescript 공부하기 🟦 사부님 숙제. 오늘 10시 회의인데 3시간 남았다. TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 아~ 몰라몰라 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발 if ("" == 0) { // 참입니다! 근데 왜죠?? } if (1 < x < 3) { // *어떤* x 값이던 참입니다! } 존재하지 않는 프로퍼티의 접근을 허용 const obj = { width: 10, height: 15 }; // 왜 이게 NaN이죠? 철자가 어렵네요! const area = obj.width * obj.heigth; 정적 검사 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것 TypeScript == .. 2024. 3. 20. ⚛️ 모던 리액트 - 3장 투두리스트 만들기 보호되어 있는 글 입니다. 2024. 3. 12. ⚛️ 모던 리액트 - 1장 내 터진 출석프로그램..흑흑슨 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us ⚛️ 1. 리액트는 어쩌다 만들어졌을까? dom을 전부 날려버리고 다시 만들어서 보여주기 => 메모리에 가상 DOM을 만들 업데이트가 필요한 부분만 가상 DOM으로 수정 그 후 리액트의 알고리즘을 통해 다른 부분을 감지하여 실제 DOM에 패치 ⚛️ 2. 작업환경 준비 Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다. 그렇기에 해당 도구들.. 2024. 2. 25. 🟦 TypeScript 🟦 - 신촌알고리즘출석프로그램 Documentation - The Basics Step one in learning TypeScript: The basic types. www.typescriptlang.org 🟦 TypeScript 🟦 - Microsoft에 의해 개발된 오픈 소스 프로그래밍 언어 - JavaScript의 상위 집합(superset)으로, JavaScript에 타입 시스템을 추가하여 개발한 언어 - TypeScript는 크로스 플랫폼 및 크로스 브라우저 호환성을 갖춘 JavaScript 코드를 생성 - 웹, 서버, 모바일 애플리케이션 개발 등 다양한 분야에서 사용 🟦 TypeScript의 주요 특징 - 정적 타입 검사: TypeScript는 변수, 매개변수, 객체 속성 등에 대한 타입 정보를 명시적으로 선언할 수 있음.. 2024. 2. 11. 이전 1 2 다음
