본문 바로가기
반응형

FrontEnd10

lodash 사용법 및 유용 기능 총 정리 Lodash는 JavaScript에서 자주 사용되는 배열, 객체, 문자열, 함수 등을 다루기 위한 유틸리티 라이브러리이다.배열 정리, 객체 병합, 깊은 복사(Deep Clone), 데이터 필터링, 성능 최적화 등의 작업을 쉽게 처리할 수 있도록 도와준다. 1. Lodash 설치더보기Lodash를 사용하려면 npm 또는 CDN을 통해 설치할 수 있다.1️⃣ npm을 이용한 설치npm install lodash2️⃣ ES6 import 방식으로 사용import _ from 'lodash';3️⃣ CDN을 이용한 브라우저에서 사용 2. 배열 관련 함수더보기 1️⃣ _.chunk - 배열을 일정한 크기로 나누기const array = [1, 2, 3, 4, 5, 6];console.log(_.chunk(arra.. 2025. 2. 5.
Axios에서 Config 객체를 활용한 적절한 HTTP 요청 방법 Axios에서는 요청을 보낼 때 config 객체를 활용하여 URL, HTTP 메서드, 헤더, 파라미터 등을 설정할 수 있다.1. GET 요청 - @RequestParam 및 @PathVariable 사용GET 요청은 데이터를 가져오는 용도로 사용되며, 본문(RequestBody)을 포함할 수 없다.Spring Boot에서 사용할 수 있는 어노테이션:@RequestParam: 쿼리 파라미터를 받아서 처리 (ex: ?name=Alice&role=admin)@PathVariable: URL 경로의 변수를 받아서 처리 (ex: /users/1)@RequestBody 사용 불가: GET 요청은 본문을 가지지 않기 때문import interceptor from '@/service/plugins/intercepto.. 2025. 2. 5.
Vue3 - 컴포넌트 생명주기 (Composition API) 컴포넌트 생명주기(Component LifeCycle) Vue3에서 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 파괴되기까지의 여러 단계를 설명하는 개념이다. 각 단계는 특정 시점에 호출되는 라이프사이클 훅을 가지고, 이를 통해 개발자가 컴포넌트의 생성, 업데이트, 파괴 등의 과정에서 필요한 코드를 실행할 수 있다. Composition API의 주요 라이프사이클 훅 라이프사이클 훅 설명 setup() Composition API의 일부로 beforeCreate(생성 전)와 created(생성 후)훅 사이에 호출된다. 이 단계에서 props, state, method를 정의하고 라이프사이클 훅을 사용할 수 있다. onBeforeMount() 컴포넌트가 마운트되기 직전에 호출된다. 이 시점에서는 아직 DO.. 2024. 2. 29.
이벤트 버블링(Event Bubbling) - 상위 요소로 이벤트 전파 이벤트 버블링 (Event Bubbling) 이벤트 버블링이란, 웹 브라우저에서 이벤트가 발생했을 때, 해당 이벤트가 발생한 엘리먼트로부터 시작해서 DOM 트리를 따라 부모 요소로 전파되는 것을 말한다. 즉, 어떤 엘리먼트(예:button)에 이벤트(예:onClick)가 발생하면 해당 이벤트는 먼저 해당 엘리먼트에서 발생하고, 그 다음에는 요소의 부모, 또 전파되어 그 부모의 부모 등으로 계속 상위 엘리먼트로 전파되는 것을 말한다. 이 과정은 최상 요소인 또는 document 객체에 도달하거나, 이벤트의 전파가 명시적으로 중단될 때까지 계속된다. 이벤트 버블링은 이벤트를 처리하는 핸들러를 효율적으로 관리할 수 있게 해주는 중요한 메커니즘이다. 예를들어, 테이블에 여러 버튼이 있다고 가정하면, 각 버튼마다.. 2024. 2. 28.
NextJS 데이터 최신화 설정, ISR과 캐싱 전략 NextJS의 데이터 최신화 1. ISR(Incremental Static Regeneration) ISR란? Next.js에서 제공하는 기능으로, 정적 생성과 서버 사이드 렌더링의 장점을 결합한 형태이다. ISR를 사용하면, 정적페이지를 빌드 시점에 미리 생성하고, 배포 후에도 정해진 간격으로 페이지를 업데이트 할 수 있다. 이 방법을 통해 페이지 로드 시간을 줄이고, 동시에 최신 컨텐츠를 유지할 수 있는 방법을 제공한다. ISR의 작동방식? 처음으로 페이지를 빌드할 때, 모든 페이지가 정적 파일로 생성된다. 개별 페이지에 revalidate 속성을 설정하면, 해당 페이지는 정해진 시간 간격마다 재생성될 수 있다. 페이지가 재생성되는 동안, 사용자들은 여전히 이전에 생성된 정적 페이지를 보게되며, 새로.. 2024. 1. 7.
Next JS, Client 컴포넌트와 Server 컴포넌트란? Client Components와 Server Components는 리액트 컴포넌트를 서버와 클라이언트 측에서 어떻게 처리하고 렌더링하는지에 대한 새로운 개념이다. 기본 리액트 컴포넌트 기본 리액트 앱에서는 모든 컴포넌트가 클라이언트 측에서 렌더링된다. 즉, 사용자의 브라우저에서 JS를 실행해서 UI를 구성한다는 의미이며, 이 방식은 상호작용이 많은 동적인 웹 애플리케이션에 적합하지만, 초기 로딩 시간이 길거나 SEO(검색 엔진 최적화)에 불리한 점이 있다. 서버 컴포넌트 서버 컴포넌트는 이름 그대로, 서버에서만 렌더링이되고, 최종 HTML 결과만 클라이언트로 전송된다. 즉, 상호작용이 없거나 병경되지 않는 UI를 작성할 때 이상적이라고 할 수 있다. 예를 들어, 데이터를 로드하고 표시하는 컴포넌트가 서.. 2024. 1. 6.
반응형