flutter & node js

sanghun park·2022년 11월 22일

프론트에서 아이디와 비밀번호를 백엔드로 넘겨 주면 데이터베이스에 데이터를 저장시켜보았다.

프론트엔드 : flutter

백엔드 : node js

const pool = mysql.createPool({
    connectionLimit: 10,
    host: dbconfig.host,
    user: dbconfig.user,
    password: dbconfig.password,
    database: dbconfig.database,
    debug: false,
});

최대 커넥션 개수를 10개로 제한.
보안을 위해 host,user,password,database는 dbconfig.js 파일에 따로 저장하여 사용.

Connection Pool을 이용하면 필요할때마다 connection을 만들고 닫지 않아도 됨.

const app = express();
app.use(express.urlencoded({extended:true}));
app.use(express.json());

클라이언트로 부터 받은 http요청 메세지 형식에서 body를 해석하기 위해 데이터의 형태에 따라 express.urlencoded() 나 express.json() 가 필요함.

app.get('/user', (req,res)=>{
    //로직 작성 
})

'http://localhost:포트번호/user' url에 get 방식으로 오는 데이터를 처리하기 위함.
post는 app.post() 형태.

프론트에서 데이터를 전송할때 백엔드에서 get / post 구분해서 받아야함.

< post 데이터 처리 전체코드 >

app.post("/user", (req,res)=>{
   console.log('/user 호출', +req);

   const paramId = req.body.id;
   const paramPassword = req.body.password;

   pool.getConnection((err, conn)=>{

       if(err){
           conn.release();
           console.log('mysql-error');
           return ;
       }

       console.log('mysql success');

       const exec = conn.query('insert into school.users (id,password) values (?,?);',
       [paramId,paramPassword],
       (err,result)=>{
           conn.release();
           console.log('실행된 sql ' +exec.sql);
           if(err){
               console.log('error!!');
               console.dir(err);
               return;
           }
           if(result){
               console.dir(result);
               console.log('inserted data '+result);

               res.writeHead('200', {'Content-Type': 'text; charset=utf8'});
               res.end();
           }else{
               console.log('fail to insert');

               res.writeHead('400',{'Content-Type': 'text; charset=utf8'})
           }
       }
       )
   })
});

프론트에서 테스트를 하기 위해 간단한 ui를 만든 후 , get 방식과 post 방식 모두 테스트를 해봤다.

get 방식

const baseUrl = 'http://10.0.2.2:3000/user';
String test = '1234';
fetch() async {
  final url = Uri.parse('$baseUrl?test=$test');
  var res = await http.get(url);
}

url 뒤에 데이터를 붙혀서 보내주는 형식으로 저런형태로 보내주게 되면 test = '1234' 라는 값이 서버로 전송이 됨.

post 방식

_postRequest() async {
  http.Response response = await http.post(
    Uri.parse(baseUrl),
    headers: <String, String>{
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: <String, String>{'id': 'park', 'password': '1235134aaAA!!@@@##'},
  );
}

body에 서버에서 insert할 값들과 values들을 임의로 넣어서 테스트 해보면 아래의 사진과 같은 콘솔이 나오고 데이터베이스에 저장이된다.

플러터 ui 코드

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 200,
            ),
            GestureDetector(
              onTap: () {
                // fetch();
                _postRequest();
                print('object');
              },
              child: const Text('데이터 불러오기'),
            ),
          ],
        ),
      ),
    );
  }
}

많은 구글링과 유투브를 찾아보며 공부했지만 ,,, 제대로 이해하려면 많은 시간이 필요할 것 같다...