Skip to content

Commit a969ef5

Browse files
shlee9999shlee9999
authored
Merge pull request #60 from prgrms-web-devcourse-final-project/56-feature/api-request-snippets
[Feature] #56 API 요청 스니펫
2 parents ea2940d + 7ebbc44 commit a969ef5

File tree

13 files changed

+123
-34
lines changed

13 files changed

+123
-34
lines changed

‎.vscode/typescript.code-snippets

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"import { styled } from 'styled-components'",
77
"",
88
"export const ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}} = styled.div`",
9-
" $2",
9+
" ${2}",
1010
"`;",
1111
],
1212
},
@@ -16,9 +16,55 @@
1616
"body": [
1717
"import { styled } from 'styled-components'",
1818
"",
19-
"export const ${3:${TM_DIRECTORY/.*\\/(.*)$/$1/}} = styled.div`",
20-
" $2",
19+
"export const ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}} = styled.div`",
20+
" ${2}",
2121
"`;",
2222
],
2323
},
24+
"Axios Request Function": {
25+
"prefix": "api-req",
26+
"body": [
27+
"import { AxiosError } from 'axios';",
28+
"import { APIResponse, ErrorResponse } from '~types/apiResponse';",
29+
"import { axiosInstance } from '~apis/axiosInstance';",
30+
"",
31+
"interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Request {",
32+
" ${2}",
33+
"}",
34+
"",
35+
"interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Response {",
36+
" ${3}",
37+
"}",
38+
"",
39+
"export const ${4:${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}} = async (req: ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Request): Promise<APIResponse<${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Response>> => {",
40+
" try {",
41+
" const { data } = await axiosInstance.${5|get,post,put,patch,delete|}<APIResponse<${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Response>>(",
42+
" `/${6:endpoint}`,",
43+
" req",
44+
" );",
45+
" return data;",
46+
" } catch (error) {",
47+
" if (error instanceof AxiosError) {",
48+
" const { response, request } = error as AxiosError<ErrorResponse>;",
49+
"",
50+
" if (response) {",
51+
" //? 서버에서 응답이 왔지만 에러가 발생한 경우",
52+
" console.error('${7:ErrorMessage}', response.data);",
53+
" throw new Error(response.data.message ?? '요청 실패');",
54+
" }",
55+
"",
56+
" if (request) {",
57+
" //? 요청 자체가 실패한 경우 : 네트워크 연결 문제나 CORS 에러와 같은 클라이언트 측 문제",
58+
" console.error('요청 에러:', request);",
59+
" throw new Error('네트워크 연결을 확인해주세요');",
60+
" }",
61+
" }",
62+
"",
63+
" console.error('예상치 못한 에러:', error);",
64+
" throw new Error('다시 시도해주세요');",
65+
" }",
66+
"};",
67+
],
68+
"description": "Axios request function template with error handling",
69+
},
2470
}

‎src/App.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import PWABadge from '@/PWABadge'
2-
import { router } from '@/router'
3-
import GlobalStyle from '@/styles/globalStyle'
4-
import { lightTheme, darkTheme } from '@/styles/theme'
1+
import PWABadge from '~/PWABadge'
2+
import { router } from '~/router'
3+
import GlobalStyle from '~/styles/globalStyle'
4+
import { lightTheme, darkTheme } from '~/styles/theme'
55
import { useState } from 'react'
66
import { RouterProvider } from 'react-router-dom'
77
import styled, { ThemeProvider } from 'styled-components'

‎src/apis/axiosInstance.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import axios, { AxiosInstance } from 'axios'
2+
3+
export const axiosInstance: AxiosInstance = axios.create({
4+
baseURL: import.meta.env.VITE_SERVER_URL,
5+
timeout: 5000,
6+
headers: {
7+
'Content-Type': 'application/json',
8+
},
9+
})
10+
11+
axiosInstance.interceptors.request.use(
12+
config => {
13+
// 요청 전 수행할 작업
14+
const token = localStorage.getItem('token')
15+
if (token) {
16+
config.headers['Authorization'] = `Bearer ${token}`
17+
}
18+
return config
19+
},
20+
error => {
21+
return Promise.reject(error)
22+
}
23+
)
24+
25+
axiosInstance.interceptors.response.use(
26+
response => response,
27+
error => {
28+
// 응답 에러 처리
29+
if (error.response.status === 401) {
30+
// 인증 에러 처리
31+
//todo refresh 요청
32+
}
33+
return Promise.reject(error)
34+
}
35+
)

‎src/components/Input/TwoLineInput/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { TEXTAREA_VALIDATION } from '@constants/validations'
1+
import { TEXTAREA_VALIDATION } from '~constants/validations'
22
import { ChangeEvent, useState } from 'react'
33
import { TextareaAutosizeProps } from 'react-textarea-autosize'
44
import * as S from './styles'

‎src/components/LazyComponents.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { lazy } from 'react'
22

3-
export const HomePage = lazy(() => import('@pages/HomePage'))
4-
export const LoginPage = lazy(() => import('@pages/LoginPage'))
5-
export const LogPage = lazy(() => import('@pages/LogPage'))
6-
export const MyPage = lazy(() => import('@pages/MyPage'))
7-
export const WalkPage = lazy(() => import('@pages/WalkPage'))
3+
export const HomePage = lazy(() => import('~pages/HomePage'))
4+
export const LoginPage = lazy(() => import('~pages/LoginPage'))
5+
export const LogPage = lazy(() => import('~pages/LogPage'))
6+
export const MyPage = lazy(() => import('~pages/MyPage'))
7+
export const WalkPage = lazy(() => import('~pages/WalkPage'))

‎src/components/Toggle/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SettingsStoreKey, useSettingsStore } from '@stores/settingsStore'
1+
import { SettingsStoreKey, useSettingsStore } from '~stores/settingsStore'
22
import * as S from './styles'
33

44
type ToggleProps = {

‎src/components/ToggleArea/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ToggleBox from '@components/ToggleBox'
1+
import ToggleBox from '~components/ToggleBox'
22
import * as S from './styles'
33

44
export default function ToggleArea() {

‎src/components/ToggleBox/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import Toggle from '@components/Toggle'
2-
import { Typo14, Typo15, Typo17 } from '@components/Typo'
3-
import { SETTINGS_INFO } from '@constants/settingsInfo'
4-
import { SettingsStoreKey } from '@stores/settingsStore'
1+
import Toggle from '~components/Toggle'
2+
import { Typo14, Typo15, Typo17 } from '~components/Typo'
3+
import { SETTINGS_INFO } from '~constants/settingsInfo'
4+
import { SettingsStoreKey } from '~stores/settingsStore'
55
import * as S from './styles'
66

77
type ToggleBoxProps = {

‎src/constants/settingsInfo.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SettingsStoreKey } from '@stores/settingsStore'
1+
import { SettingsStoreKey } from '~stores/settingsStore'
22

33
export const SETTINGS_INFO: Record<SettingsStoreKey, { title: string; desc: string }> = {
44
allNotifications: {

‎src/pages/WalkPage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import MapComponent from '@pages/WalkPage/components/MapComponent'
1+
import MapComponent from '~pages/WalkPage/components/MapComponent'
22
import * as S from './styles'
33
import { Helmet } from 'react-helmet-async'
44

0 commit comments

Comments
 (0)