2024.05.02(목) 슈퍼코딩 부트캠프 신입연수원 WEEK 1 Day 4 일일보고

usnim·2024년 5월 2일
Backend개발공부백엔드백엔드개발자백엔드공부슈퍼코딩취준일기
0

super_coding

목록 보기
3/35

📋 TO-DO LIST

신입 연수원 활동 [o]

4일차 강의 [o]

인턴교육 직후 사수 도움 요청 업무 [o]

팀장님 지시 업무 [o]

중간/일일 업무 보고 작성 [o]

정기 팀/동기 스터디 모임 참석 및 성실도 [o]

📍 학습 내용 정리

1. 자바스크립트에서 태그 가져오기

  • document.getElementById()
    해당 ID를 가진 요소를 가져옵니다.

  • document.getElementsByClassName()
    해당 클래스 이름을 가진 모든 요소를 가져옵니다.

  • document.getElementsByTagName()
    해당 태그 이름을 가진 모든 요소를 가져옵니다.

  • document.querySelector()
    css 선택자를 사용해 일치하는 요소를 가져옵니다.

  • document.querySelectorAll()
    css 선택자를 사용해 일치하는 모든 요소를 가져옵니다.

2. 자바스크립트로 html , css 조작하기

  • 텍스트 추가하기
document.getElementById("myElement").innerTEXT = "super-coding";
  • 요소를 생성하기
let newElement = document.createElement("div");
newElement.textContent = "super-coding";
document.body.appendChild(newElement);
css 스타일 적용하기

let element = document.getElementById("myElement");
element.setAttribute("style", "color: red; font-size: 20px;");

//let element = document.getElementById("myElement");
//element.style.color = "blue";
//element.style.fontSize = "16px";

3. 자바스크립트 시간

new Date():현재 시간.날짜

new Date().getHours():현재 시간

new Date().getFullYears():현재 연도

new Date().getMinutes():현재 분

new Date().getSeconds():현재 초

📍 일일보고

부족한 점 :

스스로 시도해본 것들 : 날마다 다른 정답을 설정하는 것 , 물리적 키보드로 같은 동작을 구현하는것 , 정답과 오답을 입력했을 때 각각 다른 애니메이션을 구현해서 화면에 적용하는 것

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <header>
      <div class="header-column">
        <div class="header-icon">
          <img src="assets/menu.svg" alt="" />
        </div>
      </div>
      <div class="header-title">Wordle Game</div>
      <div class="header-column">
        <div class="header-icon">
          <img src="assets/help.svg" alt="" />
        </div>
        <div class="header-icon">
          <img src="assets/chart.svg" alt="" />
        </div>
        <div class="header-icon">
          <img src="assets/setting.svg" alt="" />
        </div>
      </div>
    </header>
    <main>
      <div id="timer">time: 00:00</div>
      <div class="board-row row-0">
        <div class="board-block" data-index="00"></div>
        <div class="board-block" data-index="01"></div>
        <div class="board-block" data-index="02"></div>
        <div class="board-block" data-index="03"></div>
        <div class="board-block" data-index="04"></div>
      </div>
      <div class="board-row row-1">
        <div class="board-block" data-index="10"></div>
        <div class="board-block" data-index="11"></div>
        <div class="board-block" data-index="12"></div>
        <div class="board-block" data-index="13"></div>
        <div class="board-block" data-index="14"></div>
      </div>
      <div class="board-row row-2">
        <div class="board-block" data-index="20"></div>
        <div class="board-block" data-index="21"></div>
        <div class="board-block" data-index="22"></div>
        <div class="board-block" data-index="23"></div>
        <div class="board-block" data-index="24"></div>
      </div>
      <div class="board-row row-3">
        <div class="board-block" data-index="30"></div>
        <div class="board-block" data-index="31"></div>
        <div class="board-block" data-index="32"></div>
        <div class="board-block" data-index="33"></div>
        <div class="board-block" data-index="34"></div>
      </div>
      <div class="board-row row-4">
        <div class="board-block" data-index="40"></div>
        <div class="board-block" data-index="41"></div>
        <div class="board-block" data-index="42"></div>
        <div class="board-block" data-index="43"></div>
        <div class="board-block" data-index="44"></div>
      </div>
      <div class="board-row row-5">
        <div class="board-block" data-index="50"></div>
        <div class="board-block" data-index="51"></div>
        <div class="board-block" data-index="52"></div>
        <div class="board-block" data-index="53"></div>
        <div class="board-block" data-index="54"></div>
      </div>
    </main>
    <footer>
      <div class="keyboard-row row-0">
        <div class="keyboard-column" data-key="Q">Q</div>
        <div class="keyboard-column" data-key="W">W</div>
        <div class="keyboard-column" data-key="E">E</div>
        <div class="keyboard-column" data-key="R">R</div>
        <div class="keyboard-column" data-key="T">T</div>
        <div class="keyboard-column" data-key="Y">Y</div>
        <div class="keyboard-column" data-key="U">U</div>
        <div class="keyboard-column" data-key="I">I</div>
        <div class="keyboard-column" data-key="O">O</div>
        <div class="keyboard-column" data-key="P">P</div>
      </div>
      <div class="keyboard-row row-1">
        <div class="keyboard-column" data-key="A">A</div>
        <div class="keyboard-column" data-key="S">S</div>
        <div class="keyboard-column" data-key="D">D</div>
        <div class="keyboard-column" data-key="F">F</div>
        <div class="keyboard-column" data-key="G">G</div>
        <div class="keyboard-column" data-key="H">H</div>
        <div class="keyboard-column" data-key="J">J</div>
        <div class="keyboard-column" data-key="K">K</div>
        <div class="keyboard-column" data-key="L">L</div>
      </div>
      <div class="keyboard-row row-2">
        <div class="keyboard-column wide" data-key="Enter">ENTER</div>
        <div class="keyboard-column" data-key="Z">Z</div>
        <div class="keyboard-column" data-key="X">X</div>
        <div class="keyboard-column" data-key="C">C</div>
        <div class="keyboard-column" data-key="V">V</div>
        <div class="keyboard-column" data-key="B">B</div>
        <div class="keyboard-column" data-key="N">N</div>
        <div class="keyboard-column" data-key="M">M</div>
        <div class="keyboard-column wide" data-key="Backspace">
          <div class="back-space-icon" id="backspaceIcon">
            <img src="assets/back.svg" alt="" />
          </div>
        </div>
      </div>
    </footer>
    <script src="./js/index.js"></script>
  </body>
</html>
let index = 0;
let attempts = 0;
let timer;

// 선택된 정답과 이전날짜를 저장하는 변수선언
let selectedAnswer;
let previousDate;

// 정답을 업데이트 함수
const updateAnswer = () => {
// 정답 목록
  const answers = [
    "Apple", "Chair", "Smile", "Tiger", "Beach", "Angel", "Music", "Lemon", "Earth", "Happy",
    "Grape", "Plant", "Ocean", "Bread", "Dream", "Study", "Child", "Horse", "Rabbit", "Storm",
    "Space", "Fairy", "House", "Maple", "Drink", "Light", "Panda", "Peach", "Snake", "Teeth",
    "Plant", "Mouse", "Pizza", "Water", "Queen", "Clock", "Tiger", "Smile", "Money", "River",
    "Shoes", "Paper", "Mango", "Pearl", "Brain", "Paint", "Fairy", "Tiger", "Sword", "Pizza"
  ];
// 무작위로 정답선택
  const randomIndex = Math.floor(Math.random() * answers.length);
  selectedAnswer = answers[randomIndex];
  console.log(selectedAnswer);
};

// 날짜가 변경되었는지 검증하는 함수
const isDateChanged = () => {
  const currentDate = new Date().toDateString();
// 이전날짜와 현재날짜를 비교하여 변경 여부 확인
  if (currentDate !== previousDate) { // 현재날짜와 이전날짜가 같지않을 경우(즉, 날짜가 변경된 경우)
    previousDate = currentDate; // 이전 날짜를 현재 날짜로 저장
    return true; // 날짜가 변경되었음을 반환
  }
  return false; // 날짜가 변경되지 않았음을 반환
};

// 지정된 정답을 가져오기 , 새로운 정답 설정하기
const getStoredAnswer = () => {
  const storedAnswer = localStorage.getItem("selectedAnswer"); //로컬스토리지에서 'selectedAnswer' 가져오기
  if (storedAnswer) {
    selectedAnswer = storedAnswer; // 지정된 정답 가져오기
  } else {
    updateAnswer(); // 랜덤으로 가져온 정답
    localStorage.setItem("selectedAnswer", selectedAnswer); // 로컬스토리지에 'selectedAnswer' 저장하기
  }
};

const appStart = () => {
  if (isDateChanged()) {
    getStoredAnswer();
  }

  // 나머지 코드
};

appStart();
const handleEnterKey = () => {
    let answerCount = 0;
    let wrongCount = 0;
    const correctBlocks = []; // 정답인 블록의 인덱스를 저장할 배열
    const wrongBlocks = []; // 오답인 블록의 인덱스를 저장할 배열
    for (let i = 0; i < 5; i++) {
      const block = document.querySelector(
        `.board-block[data-index='${attempts}${i}']`
      );
      const letter = block.innerText;
      const answerWord = selectedAnswer[i];
      if (letter === answerWord) {
        answerCount++;
        block.style.background = "#6aaa64";
        correctBlocks.push(i);
      } else if (selectedAnswer.includes(letter))
        block.style.background = "#c9b458";
      else {
        wrongCount++;
        block.style.background = "#787c7e";
        wrongBlocks.push(i);
      }
      block.style.color = "white";
      const physicalKey = document.querySelector(
        `.keyboard-column[data-key='${letter}']`
      );
      if (physicalKey) {
        physicalKey.style.background = block.style.background;
      }
    }
    if (answerCount === 5) {
      correctBlocks.forEach((index) => {
        const block = document.querySelector(
          `.board-block[data-index='${attempts}${index}']`
        );
        block.classList.add("flip-horizontal-animation");
      });
      gameOver();
    } else if (wrongCount === 5) {
      wrongBlocks.forEach((index) => {
        const block = document.querySelector(
          `.board-block[data-index='${attempts}${index}']`
        );
        block.classList.add("shake-animation");
      });
      nextLine();
    } else {
      nextLine();
    }
  };

해결 내용 :

  • 함수를 조각내서 모듈화를 적용해 작업하면 훨씬 수월하게 작업할 수 있었다.

  • 각 정답과 오답 인덱스 추가를 위한 배열을 선언

  • 오답 카운트를 늘릴 변수 선언

  • 정답 카운트가 5와 같을 경우
    flip-horizontal-animation 실행

  • 오답 카운트가 5와 같을 경우
    shake-animation 실행
    오답이지만 게임은 이어가야해서 다음 줄로 이동하는 nextLine() 실행

알게된 점 : setInterval()과 setTimeout()을 활용하는 방법에 대해서 학습

이것을 활용해 힌트를 직접적으로 줄 수 있는 방법을 고안중

사용자에게 div를 보여주고 3초뒤에 없어지도록 구현

  const startTimer = () => {
    const startTime = new Date();

    const setTime = () => {
      const currentTime = new Date();
      const flowTime = new Date(currentTime - startTime);
      const minutes = flowTime.getMinutes().toString().padStart(2, "0");
      const seconds = flowTime.getSeconds().toString().padStart(2, "0");
      const time = document.querySelector("#timer");
      time.innerText = `${minutes}:${seconds}`;
    };

    timer = setInterval(setTime, 1000);

    setTimeout(helpMessage, 60000);
  };
  const helpMessage = () => {
    const div = document.createElement("div");
    div.innerText = "🤔 어려우신가요? 🤔";
    div.style =
      "display:flex; justify-content:center; align-items:center; position:absolute; top:250px; left:755px; background-color:white; width:400px; height:100px; border:1px solid black; border-radius: 15px;font-size: large; font-weight: bold;";
    document.body.appendChild(div);

    setTimeout(() => {
      div.remove();
    }, 3000);
  };

헷갈리거나 실수한 점 : 정답들을 배열에 모아놓는것이 아닌 db를 사용했다면 코드에 직접적으로 작성하지 않았어도 될거 같다는 것

github : https://github.com/jominsu0103/wordle_game

wordle: https://main--comforting-brigadeiros-e61f7a.netlify.app/

회고 : 4일차에 들어서서 자바스크립트로 간단한 프로그램을 구현해보고

본인이 생각한대로 develop해서 구현하는 경험이 정말 값지다고 생각한다.

profile
usnim
🤦‍♂️
이전 포스트

2024.05.01(수) 슈퍼코딩 부트캠프 신입연수원 WEEK 1 Day 3 일일보고

다음 포스트

2024.05.03(금) 슈퍼코딩 부트캠프 신입연수원 WEEK 1 Day 5 일일보고

0개의 댓글

관련 채용 정보