[Project_StepByStep]

과거 프로젝트

첫날에는 프로젝트 구성과 첫 번째 HTML & CSS 작업이 완료되었습니다.

이제 JavaScript를 사용하여 기능을 하나씩 구현해 보겠습니다.

1. 더미 데이터 생성

요구 사항에서 알 수 있듯이

지금 필요한 예비 데이터는 바르셀로나 선수들의 데이터였습니다.

하지만 구글 검색 결과에서 최신 축구 선수 API를 찾기가 어려웠습니다.

바르셀로나 선수들과 관련된 어떤 것도 찾기가 더 어려웠다.

그러고 나서 나는 무엇을 해야할지 생각했다.

그냥 썼어요… ㅜ ㅜ

단순한 파일 유형 세트로 작업하려는 경우,

또는 실제 API를 json 형식으로 사용하는 것처럼 작업을 고민하다가,

내 기술을 향상시키기 위해 json 형식으로 작성하고 나중에 검색하기로 결정했습니다.

22/23시즌 바르셀로나 1군 선수들을 기준으로 작성하였으며 이미지는 나무위키에 링크하였습니다.

2. 선수 렌더링_Our Team

이제 이 데이터를 렌더링에 사용하겠습니다.

https://joseph0926.40#4.%20%EC%B4%88%EA%B8%B0%20%ED%99%94%EB%A9%B4-1 현재 스쿼드의 일부는 그림을 렌더링해야 하나요…

그전에 공들여 작성했던 DUMMY_API를 호출해보자.

const url = "../../../DUMMY_API.json";

let DUMMY_DATA = ();

// ....

try {
    const response = await fetch(url);
    const data = await response.json();
    DUMMY_DATA.push(data.DUMMY_DATA);
  } catch (error) {
    console.log(error);
  }

위의 요구 사항에 명시된 바와 같이 fetch()는 fetch() 및 axios 중에 사용되었습니다.

또한 async/await를 사용하여 코드 가독성을 높였습니다.

이제 데이터가 있으므로 렌더링을 위한 논리를 작성해 보겠습니다.

CurrentTeam.js

export const renderCurrPlayer = async () => {
  const currPlayerList = document.querySelector(".cu");

  try {
    const response = await fetch(url);
    const data = await response.json();
    DUMMY_DATA.push(data.DUMMY_DATA);
  } catch (error) {
    console.log(error);
  }

  for (const data of DUMMY_DATA) {
    for (const cu of data) {
      const currPlayerEl = document.createElement("li");
      currPlayerEl.className = "player";
      currPlayerEl.innerHTML = `
      <div>
        <h2>${cu.name}</h2>
        <h3>price: <span>0억</span></h3>
        <button class="alt">More Info</button>
        <button>방출</button>
      </div>
      <div class="img">
        <img
         src=${cu.imgUrl}
      />
      </div>
      `;
      currPlayerList.append(currPlayerEl);
    }
  }
};

렌더링하려는 요소에 액세스한 후

검색된 데이터를 렌더링합니다.

여기에 중첩된 for 문이 있는 이유는 다음과 같습니다.

모든 데이터(플레이어)를 렌더링해야 함 -> 플레이어별 요소 생성 / 클래스명 지정 / HTML 생성 / 추가

왜냐하면.

그 외에는 볼 코드가 없는 것 같습니다.

다만, 외부 for문의 변수명이 data로 설정되어 있기 때문에 저 외에 다른 사람이 보면 fetch에 있는 data와 혼동될 수 있어 개선이 필요합니다. (블럭 영역을 자세히 보시면 다 이해가 되실 텐데, 그래도 바꿔주시면 좋을 것 같습니다.)

3. 사용자 입력 받기

FA 선수 목록을 통해 사용자가 원하는 선수를 직접 입력할 수 있습니다.

이를 위해서는 사용자 입력이 필요합니다.

따라서 HTML 요소 아래의 입력에 접근한 후 처리할 수 있습니다.

UserInput.js

const userInputs = document.querySelectorAll("input");

export const addPlayerHandler = (event) => {
  event.preventDefault();

  const enteredName = userInputs(0).value;
  const enteredImgUrl = userInputs(1).value;
  const enteredDesc = userInputs(2).value;

  if (enteredName.trim() === "" || enteredImgUrl.trim() === "" || enteredDesc.trim() === "") {
    alert("유효하지 않은 입력값입니다.");
    return;
  }

  const newPlayer = {
    id: Math.random().toString(),
    name: enteredName,
    imgUrl: enteredImgUrl,
    desc: enteredDesc,
  };

  faPlayers.push(newPlayer);

3개의 값을 입력해야 하므로 당연히 3개의 입력 요소가 있고,

이것을 querySelectorAll로 가져오십시오.

노드 목록을 반환하므로 인덱스로 노드에 액세스하고 각각을 상수에 저장하여 값을 얻습니다.

이후 간단한 검증을 거치게 되는데,

이 값을 faPlayers 배열에 넣습니다.

(위의 코드는 잘렸지만 위에 코드 const faPlayers = ()가 존재합니다)

이제 사용자 입력을 받아 배열에 넣었으므로 렌더링할 준비가 되었습니다.

이제 렌더링을 해보자

4. 플레이어-렌더링_FA-플레이어

UserInput.js

const renderFaPlayer = () => {
  const faPlayerList = document.querySelector(".fa");

  for (const fa of faPlayers) {
    const faPlayerEl = document.createElement("li");
    faPlayerEl.className = "player";
    faPlayerEl.innerHTML = `
                  <div>
                    <h2>${fa.name}</h2>
                    <h3>price: <span>0억</span></h3>
                    <button class="alt">More Info</button>
                    <button>영입</button>
                  </div>
                  <div class="img">
                    <img
                      src=${fa.imgUrl}
                    />
                  </div>
    `;
    faPlayerList.append(faPlayerEl);
  }
};

3번과 거의 같은 코드이고 같은 개념입니다.

사용자 입력 -> 플레이어 렌더링 순서부터,

addPlayerHandler() 함수 끝에서 renderFaPlayer() 함수를 호출합니다.

그런 다음 2단계와 4단계에서 정의한 CurrentTeam.js 및 UserInput.js를 app.js로 가져옵니다.

import { renderCurrPlayer } from "./user/CurrentTeam.js";
import { addPlayerHandler } from "./user/UserInput.js";

const addPlayerForm = document.querySelector("form");

renderCurrPlayer();

addPlayerForm.addEventListener("submit", addPlayerHandler);

5. 결과 검토

잘 작동합니다!

다음에는 드래그 앤 드롭과 로그인 모달을 작업해야 합니다.

작업 코드: https://github.com/joseph0926/Project_StepByStep_Javascript.git