728x90
반응형
전 포스트에서 업로드 하는 것까지 구현해보았다.
이번 포스트에서는 클라이언트에서 파일을 조회하는 것을 구현해보겠다.
1. 먼저 리스트 항목 등을 클릭했을 경우의 이벤트 함수를 구현해준다. 파라미터는 원하는 값으로 하면 된다.
// 이미 등록된 파일이 있는지 확인
axios.get(`/api/file`, {
params: {
file_customer_code: customerKey
}
}).then(({ data }) => {
if (data.success) {
// 파일이 존재할 경우
}
})
2. 백엔드에서 데이터베이스를 조회하고 있으면 결과값을 반환해주는 라우터를 작성한다.
router.get('/', function (req, res, next) {
const query = req.query;
const customer_code = query.file_customer_code
try {
File.findOne(
{
where: {
file_customer_code: customer_code
}
}).then((result) => {
if (result) {
res.send({ success: true, result })
}
else {
res.send({ success: false })
}
})
}
catch (Err) {
res.send({ success: false })
}
})
3. 데이터가 존재할 경우 클라이언트의 file State 를 변경해주기 위해 fileReducer를 수정한다.
( 데이터베이스의 값을 불러와 다운로드 할 때 필요한 파라미터들을 클라이언트로 전송 )
function fileReducer(state: any, action: any) {
switch (action.type) {
case 'init':
return initFileState;
case 'listClick':
var newState = state;
Object.keys(newState).map((item: any, index: any) => {
if(item === 'file_location') { // 위치로 s3 url을 만들어 다운로드 기능을 구현한다.
newState[item] = 'https:// s3 url ' +action.value[item]
}
else {
newState[item] = action.value[item]
}
})
return newState;
default:
return {
...state,
[action.name]: action.value
}
}
}
4. fileDispatch를 적용해준다. (DB 내용이 state에 잘 들어오게끔)
// 이미 등록된 파일이 있는지 확인
axios.get(`/api/file`, {
params: {
file_customer_code: customerKey
}
}).then(({ data }) => {
if (data.success) {
fileDispatch({ type: 'listClick', value: data.result })
}
})
이 파일의 key 값인 s3에 저장된 경로가 클라이언트로 넘어오면 클라이언트쪽에서 파일 다운로드 하는 로직을 구현할 수 있다.
- 리스트 항목같은 데이터를 조회하고자 하는 버튼을 클릭했을 때 해당 데이터에 맞는 파일이 존재하는지 데이터베이스를 조회한다.
- 데이터베이스에 없으면 그냥 패스. 만약 있을 경우 데이터베이스에 저장된 내용 중 file_location( s3 file key )를 클라이언트로 가져온다.
- 클라이언트에서 s3에 접속하여 다운로드를 한다.
728x90
반응형
'Back-End > Node.js' 카테고리의 다른 글
| Node.js | winston으로 로깅(Logging) 미들웨어 만들기 (1) (0) | 2022.05.26 |
|---|---|
| Node.js | Multer 를 이용한 AWS S3 파일 업로드 구현(4) | React(Next.js) url image download (0) | 2022.04.27 |
| Node.js | Multer 를 이용한 AWS S3 파일 업로드 구현(2) (0) | 2022.04.27 |
| Node.js | Multer 를 이용한 AWS S3 파일 업로드 구현(1) (2) | 2022.04.26 |
| Node.js | Multer 설치 및 기본 메소드 (0) | 2022.04.26 |
