코딩 공부/JavaScript30 [JS] Vite ViteVue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구입니다. 현재 Vue, React, Svelte 등의 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있숩나다. Vite는 자바스크립트 네이티브 모듈을 기반으로 한 데브 서버입니다. 이미 현대 프런트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있습니다. 그런데 왜 Vite와 같은 도구들이 나온 이유는 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문입니다. 왜 빠른지 이해하기 위해서는 먼저 번들링과 자바스크립트 네이티브 모듈을 이해해야 합니다. 🏷️ 번들링웹팩(.. 2024. 10. 29. [Axios / Vue / Pinia] Axios를 사용할 때, JWT token 정보와 같이 요청하는 방법 Axios를 사용할 때, JWT token 정보와 같이 요청하는 방법프로젝트를 진행하면서 Vue를 사용하게 되었는데, 이때 JWT를 사용하여 Spring으로 요청을 보내면서 토큰을 같이 보내야 했습니다. 그래서 요청 헤더에 토큰을 넣어서 보내야 하는 방법이 필요하게 되었습니다. 그래서 찾아본 결과 Vue의 Pinia를 통해서 토큰을 관리하고 요청을 보낼 때, 같이 보내는 방법을 사용하게 되었습니다.🏷️ 사용 코드import { defineStore } from "pinia";export const useAuthStore = defineStore('auth', { state: () => ({ token: localStorage.getItem('token') || '', userId: '', .. 2024. 10. 5. [JS] async와 await async와 await ES2017에 도입된 문법으로서, Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해줍니다. 유의해야 할 점이 async/await가 Promise를 대체하기 위한 기능이 아니라는 것입니다. 내부적으로는 여전히 Promise를 사용해서 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만 다르게 해줄 뿐이라는 것입니다. 🏷️ async와 await 기본 사용법 async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽습니다. function 키워드 앞에 async 만 붙여주면 되고, 비동기로 처리되는 부분 앞에 await 만 붙여주면 됩니다. // 기존 Promise.then() 형식 function.. 2023. 12. 9. [React] Formik Formik Formik은 React의 장황한 form을 3가지 측면에서 도와주는 작은 라이브러리입니다. ▪️ form state 안팎에서 값 가져오기 ▪️ 유효성 검사 및 오류 메시지 ▪️ form submit 처리 현재 시점에 비슷한 라이브러리들과의 다운로드 수를 비교해보면 1위를 달리고 있고 formik이 다른 라이브러리들에 비해 성능 측면이나 추론, 리펙토링에서 우위를 점하고 있습니다. 🏷️ 설치 npm install formik 🏷️ 예시 코드 import { Formik, Form, Field, ErrorMessage } from "formik"; export default function TestComponent() { // 코드 생략 function onSubmit(values) { // .. 2023. 12. 3. [React] useEffect useEffect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook입니다. 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다. 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때 , 그리고 업데이트 될 때 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.(라이프사이클 훅을 대체할 수 있게 되었습니다) ex) componentDidMount, componentDidUpdate, componentWillUnmount mount란? 리액트에서 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 말 그대로 브.. 2023. 12. 2. [React] React Context React Context 리액트 context는 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줍니다. 다시 말해, 리액트 context는 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 해줍니다. 🏷️ 사용해야 할 때 리액트 context는 앱의 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할 때 유용합니다. ✅ 데이터 종류 ▪️ 테마 데이터 (다크 모드 혹은 라이트 모드) ▪️ 사용자 데이터 (현재 인증된 사용자) ▪️ 로케일 데이터 (언어 혹은 지역) 데이터는 자주 업데이트할 필요가 없는 리액트 context에 위치해야 합니다. 왜냐하면 context는 전체적인 상태 관리를 위해 만들어진 시스템이 아니기 때문입니다. context는 데이터를.. 2023. 11. 29. 이전 1 2 3 4 5 다음
