프론트-백 에러해결

김민준·2023년 6월 30일

TIL-----------------------------내림차순↓

목록 보기

7/111

1. Auto Increment 초기화
2. 자바스크립트 메시지 박스
3. Input, Div
4. 쿠키, 객체 가져오기

공부하며 느낀 점
참조한 사이트

Auto Increment 초기화

PrimalKey를 auto incremnet 해놨더니 이전값을 삭제하고 다시 만들면 이전값 부터 채우는 것이 아니라 마지막 다음 값부터 채운다.

자세한 방법은 아래의 링크를 참조하고, 현재로써는 SQL 명령을 이용해서 auto increment를 초기화 할 수 있고, 방법은 두가지가 있다.

값을 삭제할 때 삭제한 값으로 설정하기
0으로 설정하기

어떤 방법을 쓰든 현재값을 채우고 나면 다음 값중 가장 작은 값(보통은 +1)으로 채운다고 한다.

자바스크립트 메시지박스

Alret 단순하게 메시지 출력, [확인]

window.alert("ALERT창 입니다.");
alert("window.alert 에서 window 는 생략 가능합니다!");

Prompt 입력을 받는 창, [확인]+[취소]

window.alert("ALERT창 입니다.");
alert("window.alert 에서 window 는 생략 가능합니다!");

confirm 의견을 묻는 창, [확인]+[취소]

window.alert("ALERT창 입니다.");
alert("window.alert 에서 window 는 생략 가능합니다!");

Input, Div

적용 가능한 속성의 예시

<input id="id" type="text" placeholder="ID 입력" />
type: "text"는 단순 입력, "password"는 비밀번호 입력창 (입력값이 ***으로 보인다.)
autocomplete : "off"시 자동완성이 비활성화된다.
placeholder = "입력창 배경글씨"
value = "입력값 미리 넣기"

값을 자동으로 넣기

document.getElementById('nameModal').innerText = "이름: " + data.id;
document.querySelector('#nicknameModal').value = data.nickname;

같은 방식으로 div 나 input에 값을 넣을 수 있다.

<div id="nameModal">이름 : </div>
<input type="text" id="nicknameModal" placeholder="닉네임">

반대로 input이나 dive의 내용을 json으로 만들 수 도 있다.

// 폼 데이터 수집
const id = document.getElementById('id').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
const name = document.getElementById('name').value;
const nickname = document.getElementById('nickname').value;
const message = document.getElementById('message').value;

// 폼 데이터 객체 생성
const formData = {
    id: id,
    password: password,
    confirmPassword: confirmPassword,
    name: name,
    nickname: nickname,
    message: message
};

const userData = {
  id: document.querySelector('#idmoal').innerText,
  name: document.querySelector('#nameModal').value,
  nickname: document.querySelector('#nicknameModal').value,
  password: document.querySelector('#passwordDel').value,
  confirmPassword: document.querySelector('#passwordConfirmModal').value,
  message: document.querySelector('#messageModal').value
};

위와 아래의 방법중 무엇을 쓰든 상관 없다.
작업물의 특성이나 개인의 취향에 따라가자.

쿠키, 객체 가져오기

토큰이 저장된 쿠키가 안가져와진다면 const cookie = document.cookie; 처럼 .document로 가져오자
객체 또는 객체의 프로퍼티를 출력하는데 undefined나 object가 뜬다면, 객체의 안에 객체가 있는지 확인해보자.
data 라는 객체의 "message"값을 가져오는데 실패한다면 자세히보자, data라는 객체안에 또 data라는 객체가 들어 있는 것일 수 도 있다. data.message 가 아니라 data.data.message로 가져오는 식이다.