Chapter 2. 팀(박치기 공룡) 프로젝트 시작

내일배움캠프 스파르타 코딩클럽 팀프로젝트

드디어 시작된 팀프로젝트!

사실 어제인 5월 1일 수요일부터 시작하였다.

새로 주어진 과제에서 기존 개인프로젝트 과제에 덧붙이는 과정이라

기존에 하였던 팀원 한분의 코드를 채택하여 하다 보니 코드를 해석하는데 시간도 걸리고

할당량을 채우느라 어제의 TIL은 물건너 가버렸다.

 

팀프로젝트 과정 내용으로 넘어가기 전에 하나 짚고 넘어가야 할게 있어서

이렇게 작성한다.

바로 날마다 아침 9시부터 진행되는 알고리즘 코드카타

오늘의 문제는 문자열을 정수로 바꾸기다. 

 

< 문제 설명 >

문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요.

제한 조건

• s의 길이는 1 이상 5이하입니다.
• s의 맨앞에는 부호(+, -)가 올 수 있습니다.
• s는 부호와 숫자로만 이루어져있습니다.
• s는 "0"으로 시작하지 않습니다.

입출력 예

예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다.
str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다.

 

raw code 는 아래와 같이 주어졌는데

 

function solution(s) {
    var answer = 0;
    return answer;
}

 

사실 이게 다필요없고 문자에서 숫자 숫자에서 문자 반환하는 것은 무언가의 method 나 function을 사용하지 않고서는

어렵다 생각한다. 그래서 단순하게  parseInt 를 적용해 보았다.

 

function solution(s) {
    let answer = parseInt(s)
    return answer;
}

 

이렇게 하면 원하는 결과 값을 얻을 수 있다. 그리고 왜 이걸짚고 넘어가냐면

아래와 같이 문자와 숫자 형변환의 많은 것들을 기억하기 위함이다. 

 

문자를 숫자로 변환

1. parseInt()와 parseFloat()

parseInt() 함수는 문자열을 정수로 변환합니다. 만약 문자열에 소수점이 포함되어 있다면, parseInt()는 소수점 이전까지만 정수로 변환합니다. 반면, parseFloat()는 문자열에서 실수를 추출할 수 있습니다.

 

console.log(parseInt("10.5")); // 10
console.log(parseFloat("10.5")); // 10.5
console.log(parseInt("100px")); // 100
console.log(parseFloat("0.1em")); // 0.1

 

또한

 

console.log(parseInt("123")); // 123
console.log(parseInt("123abc")); // 123
console.log(parseInt("abc123")); // NaN, 문자열 시작이 숫자가 아님
console.log(parseInt("0xF", 16)); // 15, 16진수 F를 10진수로 변환
console.log(parseInt("11", 2)); // 3, 2진수 11을 10진수로 변환

 

주의 사항

1. Radix 생략: radix 매개변수를 생략하면 JavaScript는 문자열의 형식을 기반으로 진법을 추측합니다. 예를 들어, 문자열이 "0x"로 시작하면 16진수로 간주하고, 그 외에는 대부분 10진법으로 처리합니다. 그러나, 항상 radix를 명시적으로 제공하는 것이 좋습니다.
2. Leading Zero: 오래된 JavaScript 엔진에서는 문자열이 "0"으로 시작하는 경우 이를 8진수로 해석할 수 있습니다(ES5 이전). 이러한 혼란을 방지하기 위해 항상 radix를 지정하는 것이 현명합니다.

 

2. 단항 플러스 (+) 연산자

단항 플러스 연산자는 간단히 값을 숫자로 변환하는 방법입니다. 문자열이 유효한 숫자인 경우, 이 연산자를 사용하여 숫자로 변환할 수 있습니다.

 

const value = "123";
console.log(+value); // 123

 

3. Number() 함수

Number() 함수는 다양한 타입의 값을 숫자로 변환하는 데 사용됩니다. 이 함수는 유효하지 않은 값에 대해서는 NaN을 반환합니다.

 

console.log(Number("123")); // 123
console.log(Number("123.456")); // 123.456
console.log(Number("abc")); // NaN

 

4. 자동 타입 변환

JavaScript에서는 산술 연산자를 사용할 때 자동으로 타입을 숫자로 변환하기도 합니다. 예를 들어, 문자열에 빼기 연산자를 적용하면 JavaScript는 해당 값을 숫자로 간주합니다.

 

const value = "123";
console.log(value - 0); // 123

 

 

5. 비트 연산자

비트 연산자도 내부적으로는 피연산자를 숫자로 변환합니다. 예를 들어, 비트 OR 연산자 |는 숫자로 변환하는 데 사용할 수 있습니다. 이 방법은 특히 정수로의 변환이 필요할 때 유용합니다.

 

console.log("123" | 0); // 123
console.log("123.456" | 0); // 123 (소수점 이하 절삭)

 

 

 

숫자를 문자로 변환

1. toString() 메소드

toString() 메소드는 숫자를 문자열로 변환합니다. 선택적으로 기수(진법)를 인자로 넘겨 해당 진법의 문자열로 변환할 수도 있습니다.

 

const number = 123;
const text = number.toString(); // "123"
console.log(text);

const hexString = number.toString(16); // "7b" (16진수로 변환)
console.log(hexString);

 

2. 문자열 연결

JavaScript에서 숫자에 빈 문자열("")을 더하면 자동으로 문자열로 변환됩니다. 이는 매우 간단하고 직관적인 방법입니다.

 

const number = 123;
const text = number + ""; // "123"
console.log(text);

3. String() 함수

const number = 123;
const text = String(number); // "123"
console.log(text);

 

4. Template literals (템플릿 리터럴)

ES6부터 JavaScript는 템플릿 리터럴을 지원합니다. 백틱(`)을 사용하여 문자열을 생성할 때 변수나 표현식을 ${} 내에 넣어 문자열로 변환할 수 있습니다.

 

const number = 123;
const text = `${number}`; // "123"
console.log(text);

 

참 많은것 들이 있다. 항상 반복을 하면 기억에 남을 수 있기 때문에 두고두고 보며 반복할 셈이다.

이어서 과제 프로젝트로 넘어가 보겠다.

 

<등록버튼 함수로직>

// <등록 버튼>

// brtId: html button Id, movieId: 영화Id

//seconId 정의 : html input태그의 변형되는 firstId 는 생략하고 그 나머지 반복되는 Id

// Ex: updateBtr(movieId, "updatebtr", "input") 이렇게 설정 가능

function uploadBtr(movieId, brtId, secondId) {

    const $getbrt = document.getElementById(brtId);

    $getbrt.addEventListener("click", (event) => {

        storageUpdate(movieId, secondId);

    });

}

 

<내용 localstorage 등록>

function storageUpdate(movieId, secondId) {

    let tempObject = getReviewObject();

    let userObject = madeObject(secondId);

    if (userObject === 8792) {

        setReviewObject(tempObject)

    } else {

        tempObject[movieId].push(userObject); // 234: [{name: "input", ...}]

        setReviewObject(tempObject);

    };

}

 

<input 내용으로 객체 생성, 유효성 검사 alert경고문 발생 로직>

function madeObject(secondinputId) {

    let catchError = 0

    const firstinputId = ["id", "pw", "text"]; //firstId 값\ reset 가능 but, 하위 변수도 동일 개수로 수정

    const objectKey = ["name", "password", "text"]; //key 값\ reset 가능 but, 상위 변수도 동일 개수로 수정

    let pullinputId = []; //idInput, ...

    let answerObject = {};//name: "input", ...

    firstinputId.forEach((first) => {

        pullinputId.push(first+secondinputId); //결과 : idInput

    })

    for (let i = 0; i < firstinputId.length; i++) {

        let pull = pullinputId[i];

        answerObject[objectKey[i]] = inputReview(pull);

    }

    for (let j = 0; j < firstinputId.length; j++) {

        let catchValue = answerObject[objectKey[j]]

        if (catchValue === "defind8792") {

            alert(`${objectKey[j]} 입력해주세요.`)

            catchError = 8792

            break

        }

    }

    if (catchError === 8792) {

        return 8792

    } else {

        return answerObject //name: "input", ...

    }

}

 

<input 정보 받아오기, 공백시 defind8792를 반환>

function inputReview(inputId) { //idInput

    const $inputId = document.getElementById(inputId);

    const madevalue = $inputId.value;//input 내용

    if (madevalue.trim() !== "") {

        return madevalue;

    } else {

        return "defind8792";

    };

}

 

<살펴 보던 도중 이과정에서 문제가 일어남>

function storageUpdate(movieId, secondId) {

    let tempObject = getReviewObject();

    let userObject = madeObject(secondId);

    console.log("==>", userObject);

    if (userObject === 8792) {

        setReviewObject(tempObject)

    } else {

        tempObject[movieId].push(userObject); // 234: [{name: "input", ...}]

        setReviewObject(tempObject);

    };

}

console.log를 찍어봄 객체가 정상적으로 도달해서 오는걸 알 수 있었다.

살펴본 결과 else 부분 에서 에러 발생

    } else {

        tempObject[movieId].push(userObject); // 234: [{name: "input", ...}]

        setReviewObject(tempObject);

    };

이부분이 문제가 있다고 볼수 있음.

지속적으로 살펴 보니 

 

내가 작성하고 있는 리뷰 창인 영화 카드의 해당 id(278) 이 누락되어있는 것을 확인하였다.

그래서 해당 movieId 가 없기 때문에 push를 성립 시킬 수 없는 것이다.

근본적인 부분으로 이동을 해보자면

async function getDocs(start, end) {

    try {

        for (let i = start; i <= end; i++) {

            const fetchDocs = await fetch(`https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=${i}`, options);

            const response = await fetchDocs.json();

            response['results'].forEach((doc) => {

                console.log(doc); //MD 확인중

                docs.push({

                    backdropImage: "https://image.tmdb.org/t/p/w400" + doc['backdrop_path'],

                    posterImage: "https://image.tmdb.org/t/p/w400" + doc['poster_path'],

                    originalTitle: doc['original_title'],

                    title: doc['title'],

                    releaseDate: doc['release_date'],

                    movieId: doc['id'],

                    voteAverage: doc['vote_average'],

                    voteCount: doc['vote_count'],

                    overview: doc['overview'],

                });

                makeReviewObjectInLocalStorage(doc['id']);

            });

        }

    }

    catch (err) { console.error(err) };

}

이 부분인데 그중에

사실상 id가 누락 할수 없는 것이다.

makeReviewObjectInLocalStorage(doc['id'])  이 코드에서 아이디를 수집해

localstorage 에 영화 id란 까지 만들어 주는 것인데.

이렇게 되면 분명 doc에서 누락되지 않는 이상 영화 id가 정상적으로 수집되어야 한다.

그래서 console.log로 doc 이 받아온 내용을 살펴 보았는데...

 

아주 정상적으로 잘 들어가 있는걸 확인 할 수 있었다. 대체 어디가 문제일까...

문제를 계속 지속적으로 살피는데 오늘 하루가 넘어갈 것 같아서 일단 오늘 TIL을 제출하고

내일 다시 이어서 작성을 해보도록 하겠다.