Docker를 이용한 mysql & phpMyadmin 사용 (2-2) React-CRUD

이제는 모든 설정을 맞췄으니 코드를 작성해야한다.  이미 CRUD를 구현하고 테스트까지 해본상황이다. 글을 쓰면서 다시 만들려고했지만 NextJS로도 만들어봐야해서 리뷰느낌으로 작성할 예정이다. 이글에서는 React(TypeScript)로 진행하였고, API는 Express, DB mysql(phpMyAdmin)을 사용했다. GO GO

 

저번글에서는 컨테이너를 만들고 phpMyAdmin에 접속까지 했다 이제는 미리짜놓은 코드의 맞춰서 테이블을 만들고 데이터가 들어오는것을 확인하려한다.

 

 

1.먼저 왼쪽의 메뉴창에서 새로운 DB만들기를 클릭한다.

2.데이터베이스명 을 입력하고 만들기를 클릭한다.

3.testDB 에 테이블명을 입력하고 컬럼수를 입력한다.

4. 여기서 컬러명을 입력하면 된다.

 단! 나는 간단한 Todo-List를 만드는거라 id, title, content정도만 필요했다. 설정은 여러가지있지만 title, content는 타입을 TEXT로만 해줬다. DB의 이해도가 깊지 못하다. id는 당연히 int(number)이지만 이부분에서 설정을 몰라 살짝 삽질을 했다.  당연히 각행마다 고유key가 필요하다 sqlite3에서는 PRIMARY KEY 를 작성하면 자동으로 테이블이 들어갈때마다 고유번호를 자동으로 생성했다. 그래서 처음에는 A.I를 체크하지않고 데이터를 넣으니 데이터가 들어가지않았다. 자동생성을 위해 꼭 체크하자!!

 

5. 생성된 테이블구조를 보면 잘 생성된것을 볼수있다.

6. 데이터 보내기 (디자인은 없다.)

 

데이터가 잘보내졌다. 하지만 클라이언트가 준비가 안되어 있다면 상단 탭의 삽입을 통해서 데이터를 넣어볼수 있다. 행 삭제는 보기탭에서 삭제할수 있고, SQL탭을 클릭하면 SQL쿼리문을 간단히 생성할수 있고, 몇쿼리문은 쿼리 시물레이션이 가능하다. 내보내기를 통해서 테이블 코드를 파일로 받을수있다. 아직 많이 사용해본게아니라 이것저것 써볼예정이지만 나로써는 신세계다ㅠ-ㅠ 매 프로젝트마다 간단한 DB가 필요했고 그것을위해 테이블을 짜고, 함수를 짜고 하는게 불편했다. 아그리고 삭제는 테이블 작업탭에서 할수있다 ~