[AI 웹개발 취업캠프] 23.08.03 과제

SQL의 JOIN 은 Sub-query와 다르게 어떤 과정을 거쳐서 연산이 되는지 찾아보고 스터디한 내용을 작성해서 제출하기.

(선택 과제여서 나중에 할 예정)

 

---

SQL의 CRUD와 Python의 Flask&Pymysql을 이용하여 본인의 DB를 연동하고 데이터를 SELECT 또는 INSERT 할 수 있는 구문과 코드를 작성하여 내가 만들어놓은 html 문서에 데이터를 넘겨보는 작업을 완료하기.

과제 제출 커밋 링크

과제: 8.03 Flask&Pymysql 이용해서 DB SELECT, INSERT 구현 · go-tiger/AI-web-camp@14830cb

 

 

INSERT 부분  코드

fetch 를 사용하여 post 로 입력 값들을 보내주고
DOM 을 통해 하단의 결과 영역에 데이터 받은걸 표시해줬다.

JS

function insert() {
  const insertNickname = document.getElementById('insert-nickname').value;
  const insertEmail = document.getElementById('insert-email').value;
  const insertPassword = document.getElementById('insert-password').value;

  fetch('/insert', {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({ nickname: insertNickname, email: insertEmail, password: insertPassword}),
  })
  .then((response) => response.json())
  .then(data => {
    let resultWrap = document.querySelector('.insert-select-result-wrap');
    resultWrap.innerHTML = '';

    let h3 = document.createElement('h3');
    h3.setAttribute('class', 'insert-result');
    h3.textContent = data.msg;
    resultWrap.appendChild(h3);
  })
  .catch(Error => {
    console.log(Error);
  });
}

 

PY

# insert
@app.route('/insert', methods=['POST'])
def insert():
    nickname = request.get_json()['nickname']
    email = request.get_json()['email']
    password = request.get_json()['password']

    db = pymysql.connect(
        host='gotiger.ipdisk.co.kr',
        port=3316,
        user='nipa',
        password='1234',
        database='nipa',
        autocommit=True,
        cursorclass=pymysql.cursors.DictCursor
    )
    with db:
        curs = db.cursor()
        sql_insert = f'INSERT INTO `users` (nickname, email, password) VALUES("{nickname}", "{email}", "{password}");'
        curs.execute(sql_insert)

    return jsonify({'msg': 'Insert 완료'})

 

 

 

SELECT 부분 코드

INSERT 부분과 비슷하게 fetch 를 사용하여 post 로 입력 값들을 보내주고

fetchall() 로 모든 값 받아온 다음 브라우저로 보낸 후에

DOM를 이용해서 받은 데이터를 HTML에 표시해줬다.

JS

function select() {
  const selectNickname = document.getElementById('select-nickname').value;
  const selectPassword = document.getElementById('select-password').value;

  fetch('/select', {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({nickname: selectNickname, password: selectPassword}),
  })
  .then((response) => response.json())
  .then(data => {
    result = data.data
    let selectDiv = document.querySelector('.insert-select-result-wrap');
    selectDiv.innerHTML = '';

    result.forEach(data => {
      let resultWrap = document.createElement('div');
      resultWrap.setAttribute('class', 'insert-select-result-wrap')
      
      let p_id = document.createElement('p');
      p_id.setAttribute('class', 'select-result-id');
      p_id.textContent = 'id = ' + data.id;
      resultWrap.appendChild(p_id);
      
      let p_email = document.createElement('p');
      p_email.setAttribute('class', 'select-result-email');
      p_email.textContent = 'email = ' + data.email;
      resultWrap.appendChild(p_email);

      let p_nickname = document.createElement('p');
      p_nickname.setAttribute('class', 'select-result-nickname');
      p_nickname.textContent = 'nickname = ' + data.nickname;
      resultWrap.appendChild(p_nickname);

      let p_password = document.createElement('p');
      p_password.setAttribute('class', 'select-result-password');
      p_password.textContent = 'password = ' + data.password;
      resultWrap.appendChild(p_password);

      selectDiv.appendChild(resultWrap)
    })
  })
  .catch(Error => {
    console.log(Error);
  });
}

 

PY

@app.route('/select', methods=['POST'])
def select():
    nickname = request.get_json()['nickname']
    password = request.get_json()['password']

    db = pymysql.connect(
        host='gotiger.ipdisk.co.kr',
        port=3316,
        user='nipa',
        password='1234',
        database='nipa',
        autocommit=True,
        cursorclass=pymysql.cursors.DictCursor
    )
    with db:
        curs = db.cursor()
        sql_select = f'select id, nickname, email, password from `users` where nickname = "{nickname}" or password = "{password}" ;'
        curs.execute(sql_select)
        result = curs.fetchall()

    return jsonify({'data': result})

 

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성되었습니다.