Portfolio

터미널로 Git 관리하기

git init : 특정 디렉토리를 git repository로 지정하기.

ls -al : 목록을 보는 방법.

ls -a : 숨긴 파일 보기.

git branch -M main : 브랜치를 생성하는 명령어.

git remote add orgin : 원격저장소 추가.

git remote -v : 로컬 repository와 원격 repository의 연동현황을 조회.

git status : repository의 상태를 보여주는 명령어. 현재 브랜치, 추적 중인 파일, 변경된 파일 목록 등이 표시됨.

git add : Working directory의 파일을 staging area로 옮기는 명령어. 에디터에서 메시지를 입력한 후 저장(esc + :wq)하면 커밋이 됨.

git commit : Staging 영역에 있는 파일을 repository에 저장하는 명령어.

git log : 저장소에 있는 commit 이력을 조회하는 명령어.

git push origin main : 로컬 repository의 내용을 원격 repository로 업로드 하는 명령어.

메모리 카드 게임 만들기

📑 결과보기

classList.add

지정한 클래스 값을 추가함. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시함.

classList.toggle

하나의 인수만 있을 때 - 클래스 값을 토글링 함. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환함.

두번째 인수가 있을 때 - 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거함.

dataset

dataset을 사용하면 사용자 지정 데이터의 값을 매우 쉽게 설정하고 가져올 수 있음.

data-로 시작.

DOM 객체에 data-id 값을 부여하고 JS에서 새로운 상수를 정의하여 사용함.

.dataset을 이용하여 출력시 카멜 케이스로 변환하여 보여짐.


<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>


const el = document.querySelector('#user');

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

setTimeout

지정된 시간 (ms) 후에 함수를 호출하거나 표현식을 평가함.


setTimeout(function(){ alert("Hello"); }, 3000);

math.random()

0 이상 1 미만의 구간에서 사용자가 원하는 범위를 반환함.

math.floor()

주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환함.

IIFE

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function을 말함.

location.reload()

새로고침 버튼처럼 현재 리소스를 다시 불러옴.

중복없는 랜덤값 뽑기


const orderList = [0, 1, 2, 3, 5, 6, 7, 8];

function suffleArray(arr) {
  arr.forEach((_, idx) => {
    const randomIdx = Math.floor(Math.random() * arr.length);
    [arr[randomIdx], arr[idx]] = [arr[idx], arr[randomIdx]];
  });
}

(function shuffle() {
  suffleArray(orderList);
  cards.forEach((card, idx) => (card.style.order = orderList[idx]));
  centerCard.style.order = 4;
})();

배열을 만들어 셔플함수에 매겨변수로 전달.

배열의 길이 내에 랜덤 값을 추출하여 randomIdx에 담음.

배열의 모든 값에 대하여 랜덤값 순서에 위치한 값과 배열의 idx 순서에 위치한 값의 위치를 바꿈.

순서가 뒤바뀐 배열로 새롭게 순서를 정의함.

마치며

처음으로 JS로 게임을 만들어보았다. 게임을 만들면서 두 가지를 가장 신경썼다. 하나는 함수명을 직관적으로 짜는 것이다. true와 false를 자주 사용하기에 함수명이 직관적이어야 헷갈리지 않기 때문이다. 또 하나는 함수를 간결하게 만들어 하나의 함수 내에 많은 기능이 포함되지 않도록 했다. 이도 역시 헷갈리지 않기 위함이다.

처음에 어떻게 똑같은 카드인지 구분할 줄 몰라 걱정이 많았다. 그리고 자잘한 오류도 많았다. 이를 해결하기 위해 HTML에 data-로 각 태그마다 정보를 지정하여 같은 카드임을 알려주었다. 또한 두 개의 카드가 뒤집혀있을 때 다른 카드를 선택하면 flip 효과를 줄 수 없게 하는 등 테스트를 해보며 에러를 잡았다. 마지막엔 카드를 섞어주는 셔플 기능과 모든 카드가 다 맞춰졌을 경우 '그만하기, '다시하기' 팝업창을 띄우며 완성도를 높혔다. 만들다보니 JS랑 조금 친해진 기분이다.