React TypeScript H5 프로젝트 설정 및 최적화
1. 프로젝트 생성 및 Gitee 저장소 연동
새로운 React TypeScript 프로젝트를 생성하려면 create-react-app을 사용할 수 있습니다.
// Node.js 설치 확인
node -v
// create-react-app 설치
npm install -g create-react-app
// TypeScript 프로젝트 생성
npx create-react-app my-ts-project --template typescript
// 프로젝트 디렉토리 이동 및 개발 서버 실행
cd ...
7월 3일 20:36에 게시됨
React 프로젝트 설치 및 설정 문제 해결
주의사항 (오류)
npm install -g cnpm --registry=https://registry.npm.taobao.org
'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
// 다른 컴포넌트를 설치한 후 npm start 명령을 다시 실행할 때 위 오류가 발생할 수 있습니다.
## 해결 방법 1:
npm install react-scripts
설치 완료 후 npm start ...
6월 25일 01:46에 게시됨
프론트엔드 시스템 설계 핵심: 데이터 수집 SDK, RBAC 기반 권한 제어, 대용량 파일 처리 및 대시보드 화면 적응
1. 프론트엔드 데이터 수집(Analytics) SDK 아키텍처 설계
안정적이고 확장 가능한 프론트엔드 분석 SDK를 구축하기 위해서는 수집해야 할 핵심 지표와 데이터 전송 방식에 대한 깊은 고민이 필요합니다.
수집 대상 및 전략
페이지 뷰(PV) 및 세션: 라우터 변경 또는 페이지 로드시 자동으로 히스토리를 기록하여 트래픽 흐름을 파악합니다.
커스텀 인터랙션: 버 ...
6월 21일 17:33에 게시됨
Axios 기본 설정과 ASP.NET Core Web API를 활용한 Base64 캡차 이미지 표시
개요
본 문서에서는 Vue.js 프론트엔드에서 Axios를 사용하여 ASP.NET Core 3.1 백엔드로부터 Base64 형식의 캡차 이미지를 가져와 표시하는 방법에 대해 설명한다. Axios의 기본 URL과 타임아웃을 전역적으로 설정하는 방법도 함께 다룬다.
1. 프론트엔드 구현
다음은 Vue.js와 Axios를 사용하여 캡차 이미지를 표시하는 HTML 페이지이다.
<!DOCTYPE html>
< ...
6월 8일 21:45에 게시됨
axios를 활용한 네트워크 요청 처리
설치 및 기본 사용법
axios는 자바스크립트 기반의 HTTP 클라이언트로, 브라우저와 Node.js 환경에서 모두 사용 가능합니다. 설치 후 간편한 API를 통해 다양한 종류의 요청을 처리할 수 있습니다.
GET 요청 예제
axios.get('/api/user', {
params: {
userId: 9527
}
})
.then(response => {
console.log('응답 데이터:', response.data);
})
.catch(error => ...
6월 6일 19:05에 게시됨
프론트엔드 빈 문자열이 유발하는 백엔드 Long 타입 JSON 파싱 오류 및 해결책
API 요청 시 발생하는 알 수 없는 500 오류
폼 데이터를 저장하는 기능을 개발하던 중, API 요청이 실패하며 다음과 같은 응답을 받는 상황이 발생할 수 있습니다.
{
"status": 500,
"error": "Invalid JSON format",
"success": false
}
요청 페이로드를 확인해 보면 다음과 같이 비어 있는 문자열이 포함된 것을 볼 수 있습니다.
{
"documentId": 2048,
"docum ...
6월 3일 16:23에 게시됨
Vue.js 환경에서 Axios를 활용한 비동기 HTTP 요청 처리
Axios 개요 및 설치
Vue.js 애플리케이션에서 비동기 HTTP 통신을 구현할 때 Axios는 가장 널리 사용되는 Promise 기반의 클라이언트 라이브러리입니다. 브라우저와 Node.js 환경 모두에서 원활하게 작동하며, 직관적인 API를 제공합니다.
패키지 설치
프로젝트 환경에 맞는 패키지 매니저를 사용하여 Axios를 설치할 수 있습니다.
# npm 사용
npm install axios
# yarn ...
5월 30일 12:10에 게시됨
Vue 3에서 Axios 인터셉터 구현하기
Vue 3에서 Axios 사용하기
Vue.js 3 환경에서 Axios를 사용하는 방법은 Vue.js 2.x와 크게 다르지 않지만, 일부 수정과 업데이트가 필요하다. 아래에서는 Vue.js 3에서 Axios를 정의하고 사용하는 방법을 살펴보자.
먼저, Axios와 Vue.js 3.x를 설치해야 한다. npm이나 yarn 같은 패키지 관리자를 사용하여 설치할 수 있다:
npm install axios vue@next
이제 Vue.js 3 ...
5월 22일 07:24에 게시됨