리액트 db 데이터 출력
본문
리액트 강좌를 보고 공부중인데 db 연동 후 데이터 출력은 콘솔에 잘 찍히는데요
이해가 되지 않는게 있는데 이 부분은 어떤 역할을 하는걸까요? 강좌에서 이 부분에 대한 언급이 없어서요..
app.get('/api/userList', (req, res) => { 이 부분에서 /api/userList 는 저한테 있지도 않은 페이지인데요..
다른 걸로 바꿔도 에러도 없이 값이 잘 나오네요.. 이해가 안되서요.
// 회원리스트
app.get('/api/userList', (req, res) => {
db.query("SELECT * FROM usertable", (err, data) => {
if (err) {
console.log('err');
res.send(err);
} else{
console.log('success ok');
res.send(data);
}
});
});
강좌대로라면 두 군데 나오더라구요
답변 2
/api/userList 라는 건, 해당 경로로 호출 하는 건데요...
exporess 에서 세팅한 건 그 경로를 만들겠다 라는 뜻입니다.
조금 더 이해를 위해
app.get('abcd/sdjghasdjkghasjkdghasdjkhgjkasdhgjkasdhgk') 라고 만들었다고 가정할께요
그럼 로컬에서 localhost:3000/abcd/sdjghasdjkghasjkdghasdjkhgjkasdhgjkasdhgk 이렇게 접속할 수 있다..라는 뜻이 됩니다.
REACT 에서 ROUTER 기억하시나요 ? 없는 경로를 내가 지정한 경로를 만들어서 컴포넌트를 대입 시키면
그 페이지가 보여주던거 ?? 그거랑 같습니다.
그럼 더 나아가서 fetch 를 활용해 해당 주소를 호출해서 ... response 되는 데이터를 콘솔창에 뿌린다 라고 생각하시면 됩니다.
api/userList에서 디비 조회해서 data 값을 반환하잖아요?! 그래서
위에 fetch 를 통해 data 값을 console.log 에 잘 찍히는 겁니다.
덧. 보통이라는 표현 보다는 일반적인 코딩에서는 에러 > 석세스가 아니라 / 석세스 > 에러 방식을 많이 사용하실 텐데 ..하면서 갸우뚱 했습니다.
쉽게 생각하시면 /api/userList 에서
api 는 파일 경로
userList 는 내부메소드입니다.
Router 를 통해 api 파일로 접속하고 파일 내의 userList 메소드를 실행 시켜 데이터를 가져오는 겁니다.