최종 팀 프로젝트[front] content-type 정하기

https://github.com/sdoram/b4_exhibitions_frontend

GitHub - sdoram/b4_exhibitions_frontend: B4조 지금은 전시상황 프론트엔드

 

 

백엔드로 이미지가 있는 데이터 content-type 정하기 

1.base64로 이미지 파일 인코딩과 디코딩하기

장점 : application/json으로 데이터 전달 가능

단점 : 사용을 위해 사용법을 익히는 시간 필요 

결론: 대체 방법이 있는 상황에서 시도하기에는 시간 소모가 심하다. 

 

2. formData 사용 후 if문을 통한 분기 

장점 : 낮은 이해도로 원하는 결과를 만들 수 있을 만큼 사용이 간단함 

단점 : 코드가 지저분해지면서 가독성 저하, 유지보수 능력 저하 

결론 : 다른 방법이 있다면 피하고 싶다. 

 

3. formData 사용 후 논리 연산자 사용하기 

장점 : 어렵지 않은 사용법과 상당히 간략한 코드로 가독성 증가 

단점 : 데이터가 없는 경우가 아닌 기본값을 설정하므로 기본값을 허용하지 않는 경우 사용이 곤란함 

결론 : 필수값이 아닌 경우 db에서 blank와 null을 허용하고 있으므로 사용이 가능함 

 

 문제점

백엔드로 이미지가 있는 데이터는 application/json으로 바로 사용이 불가능 했음 

 시도해 본 것들

2번의 방법으로 만든 코드 

const email = document.getElementById("email").value;
    const nickname = document.getElementById('nickname').value;
    const password = document.getElementById('password').value;
    const passwordCheck = document.getElementById('passwordCheck').value;
    const gender = document.getElementById('gender').value;
    const profileImage = document.getElementById('profileImage').files[0];
    const bio = document.getElementById('bio').value;
    // API 전달용 data
    if (password == passwordCheck) {
        const data = new FormData();
        if (email) {
            data.append("email", email)
        }
        if (nickname) {
            data.append("nickname", nickname)
        }
        if (password) {
            data.append("password", password)
        }
        if (passwordCheck) {
            data.append("password_check", passwordCheck)
        }
        if (gender) {
            data.append("gender", gender)
        }
        if (profileImage) {
            data.append("profile_image", profileImage)
        }
        if (bio) {
            data.append("bio", bio)
        }

if문이 필요하지 않은 부분까지 불필요한 코드 선언 

 

 해결 방법

3번의 방법으로 만든 코드

const email = document.getElementById("email").value;
    const nickname = document.getElementById('nickname').value;
    const password = document.getElementById('password').value;
    const passwordCheck = document.getElementById('passwordCheck').value;
    const gender = document.getElementById('gender').value;
    const profileImage = document.getElementById('profileImage').files[0];
    const bio = document.getElementById('bio').value;
    // API 전달용 data
    if (password == passwordCheck) {
        const data = new FormData();
        data.append("email", email)
        data.append("nickname", nickname)
        data.append("password", password)
        data.append("password_check", passwordCheck)
        data.append("gender", gender)
        data.append("profile_image", profileImage || '')
        data.append("bio", bio || '')

코드가 줄어들면서 회원가입 시 값이 없을 수 있는 필드에 or 사용 기본값 '' 설정 

 알게 된 점

js에서 ||을 통해서 or 연산자를 사용할 수 있다. 

한 방법에 필요한 시간도 리소스로 생각하는 경험을 할 수 있었다.