DOG FOOT

[git] branch 명령어로 로컬 브랜치 한 번에 정리하기

퀸디 — Fri, 10 Jan 2025 21:54:17 +0900

가끔 개발을 하다보면 로컬 브랜치가 손쓸 수 없을만큼 많아지는 경험, 해본 적 있으신가요?

로컬 브랜치 상태를 원격과 동일하게 늘 맞춰주지 않으면 로컬에 이미 병합되어버린 브랜치들이 남아있는데요.

저는 귀찮을 때마다 아래 명령어로 브랜치를 정리합니다.

TL;DR

로컬에 있는 모든 브랜치를 제거하고 싶다면 아래 커맨드를 입력해주세요.

*주의) force는 병합되지 않은 브랜치도 지워버리므로 조심히 사용하세요.

git branch | grep -v '^*' | xargs git branch -d --force

커맨드 자세히 알아보기

먼저 git branch 커맨드입니다.

git branch

// 예시 출력
// * main
// feature-1
// feature-2

현재 Git 저장소에 존재하는 모든 로컬 브랜치의 목록을 출력합니다.

체크아웃된 브랜치 앞에는 *로 표시됩니다.

하지만 현재 체크아웃된 브랜치를 지워버리면 문제가 되겠죠?

grep -v '^*'

// feature-1
// feature-2

그래서 grep 을 사용합니다.

grep은 주어진 패턴과 일치하는 텍스트를 필터링하는 명령입니다.

-v 옵션은 패턴과 일치하지 않는 행만 출력합니다.
'^*'는 정규식으로, 줄의 시작(^)에 *가 있는 경우를 의미합니다. 즉, 현재 체크아웃된 브랜치입니다.
즉, 체크아웃된 브랜치를 제외한 브랜치 이름만 출력하게 됩니다.

xargs

xargs는 이전 명령의 출력 결과를 인수로 전달해서 이후 커맨드를 실행합니다.

git branch -d

git branch 커맨드에 -d 옵션을 주게 되면 브랜치를 삭제합니다.

이 때, 병합되지 않은 브랜치는 삭제할 수 없기 때문에 로컬의 모든 브랜치를 정리하고 싶다면 --force 옵션을 추가합니다.

모든 명령어를 조합하면 로컬 브랜치를 정리할 수 있게 됩니다.

git branch | grep -v '^*' | xargs git branch -d

// 로컬에 main(체크아웃), feature-1, feature-2 브랜치가 있는 경우
// 아래 커맨드를 직접 입력하는 것과 같은 효과
// git branch -d --force feature-1
// git branch -d --force feature-2

실수로 중요한 브랜치를 삭제하지 않도록 삭제 전에 브랜치 상태를 확인하며 force 옵션을 적절히 사용하면 좋아요.

끝!

[git] 날려버린 스태시를 찾아서

퀸디 — Tue, 6 Dec 2022 01:39:04 +0900

[problem]

VSCode로 작업하다가 잘못된 스태시를 드랍해버린 걸 깨달았다.

깨달았을 때는 이미 드랍하고도 한참 지나서 커밋해시는 기억도 안나고... 근데 생각보다 작업은 많이 했었음.

[solution]

1. 명령창에 아래 명령어 입력

git fsck --no-reflog | awk '/dangling commit/ {print $3}' | xargs -L 1 git --no-pager show -s --format="%ci %H" | sort

2. 목록에 있는 커밋 해시를 검색해서 찾기 (gitLens 확장프로그램 쓰면 편함)

결과

3. 이제 살릴 수 있다!

git stash apply <hash>

[회고]

일단 스태시는 영원하지 않고, 휴먼에러로 날려버리기 딱 좋다.

앞으로 중요한 작업물은 꼭 꼭 commit 해놓기로...

근데 이래놓고 또 스태시 쓸듯 ㅠㅠ 스태시 찬양론자라

[스코페 2021] 스코페 2021 1차 코테 참가 후기

퀸디 — Tue, 23 Mar 2021 14:25:21 +0900

안녕하세요, 김선진입니다.

vrn68.app.goo.gl/scofe2021

이번에 2021 스코페가 열렸는데,

상품이 너무 빵빵해서 도전하지 않을 수 없었습니다.

1차는 4시간 동안 총 6문제가 나왔습니다.

문제 유형은 dp, dfs, 소팅, 완탐 등 그냥 구현문제였습니다.

난이도가 너무 어려워서 도저히 못풀겠다! 시도도 못하겠다! 이런 문제는 없었습니다.

중간에 구름이 터진건지 뭔지 제출이 안 되는 구간이 있었는데 새로고침 하니 잘 제출됐습니다.

좀 화났던 점은 저장하지 않으면 코드가 날아가버린다는 점? 문제 옮길 때는 알람 잘 띄워주던데

뒤로가기 할 때는 그냥 휙 넘어가서 코드를 몇 번 날려먹었습니다.

4.5문제 풀어서 그닥 기대 안 하고 있었는데 2차 합격 메일이 왔네요?

커트라인이 3문제 +조금 더 였나 봅니다.

생각보다 다들 설렁설렁 풀었나봐요.

어쨌든 2차도 풀게 됐으니 추첨 100명에 뽑히기를 기대해 봅니다. 하핫

[Git] Git History 정리를 위한 rebase -i 명령어 알아보기

퀸디 — Sun, 6 Dec 2020 23:51:46 +0900

안녕하세요, 김선진입니다.

이번에 개발서버에 배포를 줄기차게 하는 프로젝트(모바일 웹뷰 테스트...) 개발을 진행하면서,

커밋로그를 신경쓰지 않고 작업했더니 로컬 브랜치의 깃 히스토리가 살짝 보기싫어졌습니다.

비슷한 커밋로그의 반복... 그래서 마스터 브랜치에 푸시하기 전에 커밋을 하나로 합쳐버릴 생각입니다.

그럼 어떻게 하면 커밋을 하나로 만들 수 있는지 알아볼까요?

0. 서론

However, once you push your work, it is a different story entirely, and you should consider pushed work as final unless you have good reason to change it. In short, you should avoid pushing your work until you’re happy with it and ready to share it with the rest of the world.

먼저, 깃이 자유로워도 이미 커밋한 내용을 물리기는 불가능하기 때문에

PUSH하지 않은 로컬 저장소에서만 가능하다는 사실을 잊지 말아야 한다.

* rebase 명령어를 쓰기 때문에 이미 공용 브랜치에 커밋한 경우라면 다른 작업자들을 위해서라도

커밋 합치기 같은 짓을 하면 안 된다.

1. 마지막 커밋 수정

마지막 커밋 메시지를 단순히 수정할 경우라면 다음 명령어를 사용할 수 있다.

git commit --amend
git commit --amend --no-edit

저장소에서 위 명령을 터미널에 입력하면 편집기로 들어갈 수 있는데, 여기서 커밋 로그를 수정하면 된다.

만약 커밋을 수정할 필요가 없다면 --no-edit을 같이 추가해주면 됨.

하지만 이건 마지막 커밋에 대해서만 쓸 수 있는 방법이다.

나처럼 이미 28301580개의 커밋을 했다면 다른 명령어를 찾아야 한다.

(아무 숫자나 쓴 거지만 실제로 수십개의 테스트 및 오타수정 등의 커밋을 했다.)

그럼 여러 커밋을 변경하는 명령어는 뭘까? 바로 rebase 명령어에 -i옵션을 추가해서 쓴다.

2. 커밋 합치기

git rebase -i HEAD~3

HEAD~3은 HEAD(현재 위치)부터 그 위로 3개의 커밋을 수정한다는 뜻이고,

HEAD까지 4개의 커밋이 수정된다.

pick f7f3f6d Change my name a bit
pick 310154e Update README formatting and add blame
pick a5f4a0d Add cat-file

# Rebase 710f0f8..a5f4a0d onto 710f0f8
#
# Commands:
# p, pick <commit> = use commit
# r, reword <commit> = use commit, but edit the commit message
# e, edit <commit> = use commit, but stop for amending
# s, squash <commit> = use commit, but meld into previous commit
# f, fixup <commit> = like "squash", but discard this commit's log message
# x, exec <command> = run command (the rest of the line) using shell
# b, break = stop here (continue rebase later with 'git rebase --continue')
# d, drop <commit> = remove commit
# l, label <label> = label current HEAD with a name
# t, reset <label> = reset HEAD to a label
# m, merge [-C <commit> | -c <commit>] <label> [# <oneline>]
# .       create a merge commit using the original merge commit's
# .       message (or the oneline, if no original merge commit was
# .       specified). Use -c <commit> to reword the commit message.
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

터미널에서 명령을 실행하면 위와 같은 화면을 볼 수 있다.

사용할 수 있는 명령어가 주루룩 나열되는데,

내가 원하는 건 커밋 합치기이기 때문에 squash 명령어를 사용한다.

pick f7f3f6d Change my name a bit
squash 310154e Update README formatting and add blame
squash a5f4a0d Add cat-file

이 명령을 수행하고 나면 이전 커밋이 모두 변경된다.

로컬 브랜치를 사용하면서 git 히스토리가 더럽혀지는 게 싫었는데,

깃에서 편리한 기능을 제공해줘서 안심할 수 있었다.

집에서는 깃을 안쓰기 때문에... 모든 예시는 깃에서 퍼왔다.

그럼 이만~

Referances

https://book.git-scm.com/book/en/v2/Git-Tools-Rewriting-History

[CSS3] pure CSS로 parallax scrolling 구현하기

퀸디 — Sun, 22 Nov 2020 22:00:54 +0900

안녕하세요, 김선진입니다.

이번에 회사에서 기능 소개 랜딩 페이지를 만들면서,

디자이너 분께 parallax scrolling으로 해줬으면 한다는 부탁을 받았는데요!

솔직히 처음 들어본 이름이라 생소했는데, (14년도 쯤에는 유행이었다고 합니다.)

애플의 제품소개 페이지에서 사용된 기능을 parallax라고 칭한다는 걸 알았습니다.

어쨌든, 이번에는 이 parallax scrolling을 pure css로 구현하는 방법에 대해 써보겠습니다.

(opacity가 변경되는 trigger 형식의 애니메이션 같은 경우는... 따로 구현했습니다)

0. 서론

먼저, Parallax란? 직역하면 '시차'다.

천문학에서 가까이 있으면 빠르게 움직이고 멀리있으면 느리게 움직인다고 하는 그 개념이다.

시차
(Parallax)는 고정된 먼 배경이 존재하는 상황에서 한 물체를 서로 다른 위치에 있는 두 관측자가 관측했을 때 발생하는 겉보기 위치의 차이 또는 변위이다.

고전게임을 생각하면 쉽다. 마리오 같은 게임은 배경을 고정하고 다른 사물의 움직이는 속도를 설정해서 시차 스크롤링을 하고 있다. 어쨌든, 우리는 이미 시차 스크롤링이 뭔지 알고 있었다. (정확히 무슨 개념인지 몰랐을 뿐이다.)

1. background 로 parallax 구현하기

위의 정의에서 알 수 있듯, parallax의 기본 원리는 '고정된 먼 배경'이다.

즉, 우리는 css에서 background 속성을 이용해 고정된 먼 배경을 만들어줄 수 있다.

그리고 이걸 하면 스크롤 할 때 파워포인트에서 닦아내기 한 효과 비슷한 걸 줄 수 있다.

이건 그냥 CSS 프로퍼티만으로 설정이 가능하다.

.parallax-background{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

2. transform으로 parallax 구현하기

근데, 배경만 고정해서는 내가 원한 느낌과는 다르다.

좀 더 가까이에 있는 녀석은 빨리 움직이는 효과를 줘야한다.

그렇다면 CSS만으로 어떻게 원근을 줄까?

답은 간단하다. z축을 이용하면 된다.

z축이 모니터쪽으로 튀어나오는 방향이다.

이 그림을 보면 알 수 있다시피, z축으로 가까워 질수록 점점 크기가 커질 것을 예상해볼 수 있다.

그럼 transform을 써보자! 아래 두 개 코드를 예시로 쓴다.

.element {
  height: 100px;
  width: 100px;
  background: pink;
  transform: translateZ(0px);
}

<body>
<div class="element">커져라 네모네모!</div>
</body>

translateZ 값을 바꿔도 동일.

CSS에서 translateZ를 바꿔서 앞으로 밀어보자. 결과는?

무엇이 바뀌었는지 확인해보면 아무것도 일어나지 않는다.

perspective속성이 빠졌기 때문이다.

원근 속성을 주지 않으면 아무리 Z축으로 움직여도 아무 일도 일어나지 않는다는 점을 명심해야 한다.

perspective는 사용자의 시점 위치를 말한다.

값이 커질수록 사용자가 멀리 있음을 의미한다.

주의할 점은 값을 잘 생각해서 결정해야 하는 것이다.

예를 들어 perspective: 4px로 주고 z축 4px 이상을 이동해버리면 사용자를 지나쳐 가버렸기 때문에 더이상 물체가 보이지 않는 상태가 된다. 당연한 얘기겠지만 음수로 주면 멀어진다.

이런 것을 염두에 두고 잘 설정하도록 하자.

더불어 알면 좋은 것은 perspective-origin이다.

이 속성의 기본값은 50%50%지만, center로 주면 보통 원하는 위치로 이동한다고 보면 된다. 투시 원점을 나타낸다.

마지막으로, backface-visibility 속성으로 뒷면도 보여줄지 말지 정할 수 있다.

그럼 위 코드를 수정해보자.

<body>
<div class="parallax container">
  <div class="background">
  <div>
    <div class="foreground">
  		빨라...
    </div>
    <div class="foreground fast">
  		더빨라...
    </div>
    </div>
  </div>
</div>
</body>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.parallax.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
}
.parallax: {
  position: absolute;
  transform-origin: 0 50%;
  width: 420px;
  height: 420px;
}
.background:before {
  position: relative;
  content: '느려';
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0px) scale(1);
  background: red;
  height: 800px;
  width: 100%;
}

.foreground {
  position: absolute;
  height: 100px;
  width: 100px;
  background: pink;
  top: 300px;
  transform: translateZ(4px) scale(0.5);
}
.foreground.fast {
background: yellow;
top: 250px;
transform: translateZ(6px) scale(0.25);
}

위 코드를 실행 해 보면 배경은 느리고, 빠른 놈은 빠르고,

더 빠른 놈은 더 빠르게 움직이는 것을 확인할 수 있다.

계산은 귀찮으면 따로 css함수로 빼도 된다.

그리고 z축을 움직일 때는 크기가 커지는 것을 감안해서 스케일 작업을 잊지 말고 해줘야 한다.

스케일 식은 다음과 같다.

스케일 = 1 - (z축 깊이/원근 시야)

보시다시피 빠른녀석은 0.5, 더 빠른 녀석은 0.25로 크기를 조절해주고 있는데,

위 식에 따른 것이다.

빠른 녀석 스케일(0.5) = 1 - (z축 깊이(4)/원근 시야(8))

더 빠른 녀석 스케일(0.25) = 1 - (z축 깊이(6)/원근 시야(8))

그럼 이만~.

느려 빨라 더빨라...

Referances

https://ko.wikipedia.org/wiki/%EC%8B%9C%EC%B0%A8_(%EC%B2%9C%EB%AC%B8%ED%95%99)

시차 (천문학) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 시차에 대한 간단한 개념도. 관측자는 같은 물체를 보지만 충분히 멀어 고정된 배경에 대해 A에서의 관측자는 물체가 청색 영역 위에 존재하는 것처럼 관측될

ko.wikipedia.org

https://www.w3schools.com/howto/howto_css_parallax.asp

How To Create a Parallax Scrolling Effect

How TO - Parallax Scrolling Learn how to create a "parallax" scrolling effect with CSS. Parallax Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

www.w3schools.com

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

perspective

The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

developer.mozilla.org

[Typescript] Interface

퀸디 — Sun, 8 Nov 2020 22:12:24 +0900

안녕하세요, 김선진입니다.

회사에서 모바일-웹 통신 인터페이스를 정의했고,

코드를 정리하는 과정에서 typescript interface를 사용했습니다.

그리고 매번 프로젝트성 글만 썼었는데, 개념글을 쓰면 블로그 유입량이 늘어날까? 하는 실험도 있음.

0. 서론

아시다시피 타입스크립트는 자바스크립트의 슈퍼셋으로,

자바스크립트의 요상한(?) this와 함수를 1급 객체로 취급하는 부분이 동일하다.

이번에 어떤 문제를 해결하는 과정에서 유틸 펑션을 만들어야 하는 부분이 있었는데,

위 언급한 특성 덕분에 타입스크립트에서는 클래스 대신 함수에도 interface 적용이 가능하다.

MDN에서도 class의 첫 소개에 이렇게 적혀있다.

"클래스는 사실 함수입니다."

1. Duck typing

인터페이스는 타입스크립트의 핵심 근간인 덕 타이핑에서 비롯된다.

"만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다."

class Duck{
	quack() { console.log('꽥'); }
    fly() { console.log('파닥파닥'); }
}

class Person {
	quack() { console.log('꽦!!!'); }
    fly() { console.log('인간은 비행기를 탔다.'); }
}


function duckHavior(duck){
	duck.quack();
    duck.fly();
}

james = new Duck();
jonh = new Person();
duckHavior(james); //꽥 파닥파닥
duckHavior(jonh); // 꽦!!!  인간은 비행기를 탔다.

Duck 클래스와 Person 클래스는 다른 클래스지만 모양이 같기 때문에 동일한 타입으로 간주해버린다.

quack과 fly함수만 구현되어 있다면 그게 뭐든 간에 duckHavior 내부에서는 오리가 되는 것이다.

2. Interface

이런 덕 타이핑은 매우 편리하지만, 문제가 있다.

duckHavior의 매개변수로 quack(), fly()를 가지고 있지 않은 객체를 넘긴다면 런타임 에러가 발생한다.

그렇다고 함수 내에서 타입 가드를 작성하기엔, 덕 타이핑을 사용하려다 타입가드가 더 복잡해지는 경우가 있다.

타입스크립트에서는 덕타이핑의 문제점을 해소하기 위해 Interface가 등장했다.

Interface는 간단히 말하면 타입에 이름을 지어주는 것이고,

컴파일타임에서 잘못된 타입을 사용했을 때 에러를 뱉어주기 때문에

좀 더 타입 세이프티한 코드를 작성할 수 있다.

인터페이스는 다음과 같이 선언한다.

interface DuckLike{
	quack(): void;
    fly(): void;
}

~~(코드블럭 인덴트가 왜이러는지?)~~

선언한 인터페이스를 활용하면 위에서 작성했던 덕 타이핑 코드를 타입 세이프티하게 만들 수 있다.

class Duck implements DuckLike{
	quack() { console.log('꽥'); }
    fly() { console.log('파닥파닥'); }
}

class Person implements DuckLike{
	quack() { console.log('꽦!!!'); }
    fly() { console.log('인간은 비행기를 탔다.'); }
}


function duckHavior(duck: DuckLike){
	duck.quack();
    duck.fly();
}

james = new Duck();
jonh = new Person();
duckHavior(james); //꽥 파닥파닥
duckHavior(jonh); // 꽦!!!  인간은 비행기를 탔다.
duckHavior('test') // error

2-1. Optional Property

interface Person{
	name: string;
    birth?: string;
    gender: string;
    age: number;
}

?가 붙어있는 birth는 옵셔널 프로퍼티(Optional Property)라 하여, undefined가 될 수 있다.

즉 birth는 string|undefined 타입이 된다.

2-2. Indexable Types

interface Person{
	name: string;
    birth?: string;
    gender: string;
    age: number;
    [indxe: string]: string;
}

인터페이스에서는 인덱스를 정해줄 수 있다.

Person에 인덱스를 선언해주자. 이제 string: string인 어느 프로퍼티를 선언해도 Person 타입이 된다.

2-3. Function Types

interface NumberToString {
  (value: number): string;
}

Typescript에서는 Function용 Interface도 선언 가능하다.

NumberToString을 구현한 함수는 number타입 매개변수를 받아 어떻게든 가공하여 string값을 반환한다.

const ageString:NumberToString = (value: number) => {
	return `i am ${value}years old`;
}

이런 식으로 사용한다.

인터페이스 내부에 있는 펑션 시그니처가 길다면 펑션 타입으로 빼내 사용하는 것도 좋아 보인다.

이런 특성들을 이용하여 코드를 정리했더니 보기도 깔끔하고 좋더라.

갓터페이스.

타입스크립트 인터페이스에 대해 알아봤다.

그럼 이만~.

Refernces

https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces

Handbook - Interfaces

How to write an interface with TypeScript

www.typescriptlang.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

Classes

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의

developer.mozilla.org

https://ko.wikipedia.org/wiki/%EB%8D%95_%ED%83%80%EC%9D%B4%ED%95%91

덕 타이핑 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 컴퓨터 프로그래밍 분야에서 덕 타이핑(duck typing)은 동적 타이핑의 한 종류로, 객체의 변수 및 메소드의 집합이 객체의 타입을 결정하는 것을 말한다. 클래스

ko.wikipedia.org

[HTML5/JavaScript] 직소퍼즐 만들기 4(完) : 퍼즐 게임으로 만들기

퀸디 — Mon, 26 Oct 2020 00:00:01 +0900

dog-foooot.tistory.com/22

[HTML5/Javascript] 직소퍼즐 만들기 3: 퍼즐 조각 무작위로 섞기

dog-foooot.tistory.com/21 [HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기 dog-foooot.tistory.com/20 [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말..

dog-foooot.tistory.com

안녕하세요, 김선진입니다.

직소 퍼즐 마지막 시리즈입니다. 직소 퍼즐을 게임으로 만들자!

1. 퍼즐 조각이 맞춰졌을 때 성공 여부 검사

2. 퍼즐 맞추기 타이머 생성

3. CSS (알아서 하시길)

기존 코드에 이어서 작업합니다.

1. 퍼즐 성공 여부 검사

1-1. td에 index부여하기

저번 코드에서 전역으로 선언해놓은 퍼즐 조각 리스트를 이용하여 퍼즐 성공을 검사하는 로직을 짜보자.

간단하게 4*4 퍼즐을 1중 배열이라 생각하고 인덱싱해서 결과물 배열을 만들고, 초기 리스트와 결과물이 같은 경우 성공 판정을 한다.

먼저 td를 생성할 때 해당 index를 id로 설정한다.

 tableData.id = `piece_${x * numColsToCut + y}`;

2*2로 생성했을 때의 예시 인덱스

1-2. 결과 배열과 기존 배열을 비교하여 성공 판정

성공 판정은 간단하게 구현했다. 배열 두 개를 받아 두 배열이 같은지만 검사한다.

const completePuzzle = (puzzle, result) => puzzle.every((piece, index) =>piece === result[index]);

1-3. drop함수 수정

const index = ev.target.id.replace('piece_', '');
  resultPieces[Number(index)] = data;
  if (completePuzzle(originImagePieces, resultPieces)) window.alert('퍼즐 성공!');

기존 코드 아래에 추가해준다.

이걸로 간단하게 퍼즐을 검증해서 성공 시에는 알람을 준다.

인덱스 대신 id를 긁었다 말았다 하는 이유는 elements만 보고 퍼즐을 맞출 수 없게 하기 위함이다.

그리고, 다시 시작하는 함수에 아래 코드도 추가해준다.

while(resultPieces.length > 0) {
    resultPieces.pop();
}

2. 퍼즐 맞추기 타이머

2-1. setInterval로 타이머 생성하기

const maxTime = 30;
let nowTime = 0;
let timer;
function startTimer() {
timer = window.setInterval(() => {
	if(nowTime === maxTime) {
		window.clearInterval(timer);
		suffleRendering();
		window.alert('시간 종료!');
	}
	nowTime += 1;
	
}, 1000);
}

startTimer라는 함수를 만들어 우리의 maxTime까지 기다려주게 한다.

게임을 시작함과 동시에 timer가 세팅되기 때문에 게임이 종료된 후에는 suffle을 한번 더 돌려줘야 한다.

그리고 처음 퍼즐을 맞추기 시작했을 때 다시 timer를 시작해주면 된다.

  if (resultPieces.length === 0) {
	startTimer();
  }

(아니면 게임 시작, 다시하기 등의 버튼을 제공해줘도 좋다.)

3. 전체 js 코드

전체 변경된 코드는 길어서 접었다.

const numColsToCut = 4;
const numRowsToCut = 4;
const imagePieces = [];
const originImagePieces = [];
const resultPieces = new Array(numColsToCut*numRowsToCut);
function suffleList(array) {
  for (let i = array.length - 1; i > 0; i -= 1) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
function suffleRendering() {
const box = document.getElementById('puzzle-box');
suffleList(imagePieces);
while(resultPieces.length > 0) {
    resultPieces.pop();
}
imagePieces.forEach(img => {
	box.appendChild(img);
	});
}

const maxTime = 30;
let nowTime = 0;
let timer;
function startTimer() {
timer = window.setInterval(() => {
	if(nowTime === maxTime) {
		window.clearInterval(timer);
		suffleRendering();
		window.alert('시간 종료!');
	}
	nowTime += 1;
	
}, 1000);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

const completePuzzle = (puzzle, result) => puzzle.every((piece, index) =>piece === result[index]);

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  const child = document.getElementById(data);
  if (!data) return;
  if (resultPieces.length === 0) {
	startTimer();
  }
  if (ev.target.nodeName !== 'TD') {
    console.log(ev.target.parentNode);
    const currentImage = ev.target;
    const td = ev.target.parentNode;
    td.removeChild(currentImage);
    td.appendChild(child)
    const box = document.getElementById('puzzle-box');
    box.appendChild(currentImage);
    return;
  }
  ev.target.appendChild(document.getElementById(data));
  const index = ev.target.id.replace('piece_', '');
  resultPieces[Number(index)] = data;
  if (completePuzzle(originImagePieces, resultPieces)) window.alert('퍼즐 성공!');
}

function updateImageDisplay() {
  const preview = document.querySelector('.preview');
  const input = document.querySelector('input');
  const board = document.getElementById('puzzle-board');

  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }
  const curFiles = input.files;
    for(const file of curFiles) {
         const para = document.createElement('p');
         const imageItem = document.createElement('div');
           const img = new Image();
           img.onload = function() {
             const widthOfOnePiece = this.width/numColsToCut;
             const heightOfOnePiece = this.height/numRowsToCut;
             para.innerHTML = `${numColsToCut}X${numRowsToCut}로 생성된 퍼즐입니다.`;

              while(board.firstChild) {
                board.removeChild(board.firstChild);
              }
                 for(var x = 0; x < numColsToCut; ++x) {
                    let tableRow = document.createElement('tr');
                     for(var y = 0; y < numRowsToCut; ++y) {
                         var canvas = document.createElement('canvas');
                         canvas.width = widthOfOnePiece;
                         canvas.height = heightOfOnePiece;
                         var context = canvas.getContext('2d');
                         context.drawImage(img, y * widthOfOnePiece, x * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
                         let pieceImage = new Image();
                         pieceImage.src = canvas.toDataURL();
                         pieceImage.id = canvas.toDataURL();
                         pieceImage.draggable = true;
                         pieceImage.ondragstart = drag;
                         let tableData = document.createElement('td');
                         tableData.ondrop = drop;
                         tableData.ondragover = allowDrop;
                         tableData.width = widthOfOnePiece;
                         tableData.height = heightOfOnePiece;
                         tableData.id = `piece_${x * numColsToCut + y}`;
                         tableRow.appendChild(tableData);
		   originImagePieces.push(pieceImage.src);
                         imagePieces.push(pieceImage);
                     }
                     board.appendChild(tableRow);
                 }
	suffleRendering();
	startTimer();
	}	
           img.src = URL.createObjectURL(file);

           imageItem.appendChild(img);
           imageItem.appendChild(para);
           preview.appendChild(imageItem);
     }
}

퍼즐게임 끝.

재미로 만들어본 프로젝트라 코드가 난잡하고 더럽지만,

재미로 하기에는 아주 좋은 프로젝트였다.

그럼 이만~.

[HTML5/Javascript] 직소퍼즐 만들기 3: 퍼즐 조각 무작위로 섞기

퀸디 — Sat, 24 Oct 2020 16:16:51 +0900

dog-foooot.tistory.com/21

[HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기

dog-foooot.tistory.com/20 [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요,

dog-foooot.tistory.com

안녕하세요, 김선진입니다.

저번 시리즈에 이어 이번에는 아래 3가지 기능을 퍼즐에 추가해봅시다.

1. 퍼즐 조각을 랜덤하게 셔플

2. 퍼즐 다시 시작

기존 코드에 이어서 작업합니다.

1. Suffle 알고리즘

1-1. O(N log N)

간단하게 접근해보면 각각의 퍼즐 조각에 난수를 할당하고 난수를 기준으로 정렬하는 방법이 있을 수 있다.

하지만 이 방법은 정렬이 1번 들어가기 때문에 최소 정렬 알고리즘의 시간복잡도를 갖게 된다.

심지어 위 방법으로 구현하면 셔플 빈도가 쏠리는 현상이 나타나게 된다.

빈도 결과표 출처 https://ko.javascript.info/task/shuffle

1-2. O(N)

정렬 없이 구현하려면 어떻게 해야 할까? 피셔 예이츠는 연필과 종이를 이용하여 동등한 확률을 가진 랜덤 알고리즘을 만들었고, 크누스는 그 알고리즘에서 불필요한 고정 부분을 제외한 현대판 알고리즘을 정의했다.

구현은 아주 쉽다. 퍼즐 조각 리스트를 뒤에서부터 1바퀴 돌면서 현재 위치를 무작위로 생성된 index번째의 위치와 swap하면 된다. 그럼 마지막 퍼즐 조각까지 끝났을 때 무작위로 퍼즐 리스트가 섞여 있을 것이다.

sudo 코드는 아래와 같다.

-- To shuffle an array a of n elements (indices 0..n-1):
for i from n−1 downto 1 do
     j ← random integer such that 0 ≤ j ≤ i
     exchange a[j] and a[i]

피셔 예이츠 셔플 순서도 출처 https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#Fisher_and_Yates'_original_method

2. Suffle 적용

2-1. Suffle 코드 작성

function suffleList(array) {
  for (let i = array.length - 1; i > 0; i -= 1) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
function suffleRendering() {
const box = document.getElementById('puzzle-box');
suffleList(imagePieces);
imagePieces.forEach(img => {
	box.appendChild(img);
	});
}

2-2. 퍼즐 게임 시작 시 suffleList 호출

셔플되지 않은 퍼즐조각

셔플된 퍼즐조각

3. 퍼즐 다시 시작

3-1. 셔플 기능을 등록한 버튼 생성

<button onclick="suffleRendering()">다시시작</button>

4. 전체 js 코드

전체 변경된 코드는 길어서 접었다.

const numColsToCut = 4;
const numRowsToCut = 4;
const imagePieces = [];

function suffleList(array) {
  for (let i = array.length - 1; i > 0; i -= 1) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
function suffleRendering() {
const box = document.getElementById('puzzle-box');
suffleList(imagePieces);
imagePieces.forEach(img => {
   box.appendChild(img);
   });
}
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  if (!data) return;
  if (ev.target.nodeName !== 'TD') {
    console.log(ev.target.parentNode);
    const currentImage = ev.target;
    const td = ev.target.parentNode;
    td.removeChild(currentImage);
    td.appendChild(document.getElementById(data))
    const box = document.getElementById('puzzle-box');
    box.appendChild(currentImage);
    return;
  }
  ev.target.appendChild(document.getElementById(data));
}

function updateImageDisplay() {
  const preview = document.querySelector('.preview');
  const input = document.querySelector('input');
  const board = document.getElementById('puzzle-board');

  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }
  const curFiles = input.files;
    for(const file of curFiles) {
         const para = document.createElement('p');
         const imageItem = document.createElement('div');
           const img = new Image();
           img.onload = function() {
             const widthOfOnePiece = this.width/numColsToCut;
             const heightOfOnePiece = this.height/numRowsToCut;
             para.innerHTML = `${numColsToCut}X${numRowsToCut}로 생성된 퍼즐입니다.`;

              while(board.firstChild) {
                board.removeChild(board.firstChild);
              }
                 for(var x = 0; x < numColsToCut; ++x) {
                    let tableRow = document.createElement('tr');
                     for(var y = 0; y < numRowsToCut; ++y) {
                         var canvas = document.createElement('canvas');
                         canvas.width = widthOfOnePiece;
                         canvas.height = heightOfOnePiece;
                         var context = canvas.getContext('2d');
                         context.drawImage(img, y * widthOfOnePiece, x * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
                         let pieceImage = new Image();
                         pieceImage.src = canvas.toDataURL();
                         pieceImage.id = canvas.toDataURL();
                         pieceImage.draggable = true;
                         pieceImage.ondragstart = drag;
                         let tableData = document.createElement('td');
                         tableData.ondrop = drop;
                         tableData.ondragover = allowDrop;
                         tableData.width = widthOfOnePiece;
                         tableData.height = heightOfOnePiece;
                         tableRow.appendChild(tableData);
                         imagePieces.push(pieceImage);
                     }
                     board.appendChild(tableRow);
                 }
   suffleRendering();
   }   
           img.src = URL.createObjectURL(file);

           imageItem.appendChild(img);
           imageItem.appendChild(para);
           preview.appendChild(imageItem);
     }
}

5. References

https://ko.javascript.info/task/shuffle

https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#Fisher_and_Yates'_original_method

다음 포스트에서는 퍼즐을 게임으로 만들고 퍼즐 시리즈를 마치도록 하겠습니다.

오랜만에 아주 열심히 블로그를 썼습니다^^... (자극 받아서)

그럼 이만~.

[HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기

퀸디 — Mon, 28 Sep 2020 10:02:25 +0900

dog-foooot.tistory.com/20

[HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력

안녕하세요, 김선진입니다. 주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요, 코딩하는 동안 스크린샷찍는 걸 까먹어서... 1탄에서는 input과 canva

dog-foooot.tistory.com

const numColsToCut = 4;
const numRowsToCut = 4;
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  if (!data) return;
  if (ev.target.nodeName !== 'TD') {
    console.log(ev.target.parentNode);
    const currentImage = ev.target;
    const td = ev.target.parentNode;
    td.removeChild(currentImage);
    td.appendChild(document.getElementById(data))
    const box = document.getElementById('puzzle-box');
    box.appendChild(currentImage);
    return;
  }
  ev.target.appendChild(document.getElementById(data));
}

function updateImageDisplay() {
  const preview = document.querySelector('.preview');
  const input = document.querySelector('input');
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }
  const curFiles = input.files;
    for(const file of curFiles) {
         const para = document.createElement('p');
         const imageItem = document.createElement('div');
           const img = new Image();
           img.onload = function() {
             const widthOfOnePiece = this.width/numColsToCut;
             const heightOfOnePiece = this.height/numRowsToCut;
             para.innerHTML = `${numColsToCut}X${numRowsToCut}로 생성된 퍼즐입니다.`;

              const imagePieces = [];
              const board = document.getElementById('puzzle-board');
              const box = document.getElementById('puzzle-box');
              while(board.firstChild) {
                board.removeChild(board.firstChild);
              }
                 for(var x = 0; x < numColsToCut; ++x) {
                    let tableRow = document.createElement('tr');
                     for(var y = 0; y < numRowsToCut; ++y) {
                         var canvas = document.createElement('canvas');
                         canvas.width = widthOfOnePiece;
                         canvas.height = heightOfOnePiece;
                         var context = canvas.getContext('2d');
                         context.drawImage(img, y * widthOfOnePiece, x * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
                         let pieceImage = new Image();
                         pieceImage.src = canvas.toDataURL();
                         pieceImage.id = canvas.toDataURL();
                         pieceImage.draggable = true;
                         pieceImage.ondragstart = drag;
                         let tableData = document.createElement('td');
                         tableData.ondrop = drop;
                         tableData.ondragover = allowDrop;
                         tableData.width = widthOfOnePiece;
                         tableData.height = heightOfOnePiece;
                         box.appendChild(pieceImage);
                         tableRow.appendChild(tableData);
                         imagePieces.push(canvas.toDataURL());
                     }
                     board.appendChild(tableRow);
                 }
           }
           img.src = URL.createObjectURL(file);

           imageItem.appendChild(img);
           imageItem.appendChild(para);
           preview.appendChild(imageItem);
     }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="puzzle.js"></script>
    <title>PUZZLE GAME</title>
</head>
<body>
    <div class="puzzle-container">
        <div>
            퍼즐게임
        </div>
        <label for="puzzle-input">
            이미지 선택
            <input onchange="updateImageDisplay()" name="puzzle-input" id="puzzle-input" type="file" accept="image/*">
        </label>
        <div class="preview">
            <p>선택한 이미지로 퍼즐을 만듭니다.</p>
        </div>
        <table id="puzzle-board">

        </table>
        <div id="puzzle-box">

        </div>
    </div>
</body>
</html>

<style>
    input {
    opacity: 0;
    }
    table {
    border: 1px solid black;
    border-spacing: 0;
    box-sizing: border-box;
    }
    td {
    border: 1px solid black;
    padding:0px !important;
    box-sizing: border-box;
    border-spacing: unset;
    border-collapse: collapse;
    }
    td img {
    display: block;
    }
    img:hover {
    box-sizing:border-box;
    outline: solid 2px red;
    }
</style>

[HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력

퀸디 — Mon, 28 Sep 2020 10:01:04 +0900

안녕하세요, 김선진입니다.

주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요,

코딩하는 동안 스크린샷찍는 걸 까먹어서...

1탄에서는 input과 canvas를 이용해서 입력받은 이미지를 4*4로 쪼개서 퍼즐 박스에 넣는 것입니다.

const numColsToCut = 4;
const numRowsToCut = 4;
function allowDrop(ev) {
  ev.preventDefault();
}
function updateImageDisplay() {
  const preview = document.querySelector('.preview');
  const input = document.querySelector('input');
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }
  const curFiles = input.files;
    for(const file of curFiles) {
         const para = document.createElement('p');
         const imageItem = document.createElement('div');
           const img = new Image();
           img.onload = function() {
             const widthOfOnePiece = this.width/numColsToCut;
             const heightOfOnePiece = this.height/numRowsToCut;
             para.innerHTML = `${numColsToCut}X${numRowsToCut}로 생성된 퍼즐입니다.`;

              const box = document.getElementById('puzzle-box');
              while(board.firstChild) {
                board.removeChild(board.firstChild);
              }
                 for(var x = 0; x < numColsToCut; ++x) {
                     for(var y = 0; y < numRowsToCut; ++y) {
                         var canvas = document.createElement('canvas');
                         canvas.width = widthOfOnePiece;
                         canvas.height = heightOfOnePiece;
                         var context = canvas.getContext('2d');
                         context.drawImage(img, y * widthOfOnePiece, x * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
                         let pieceImage = new Image();
                         pieceImage.src = canvas.toDataURL();
                         pieceImage.id = canvas.toDataURL();
                         pieceImage.draggable = true;
                         pieceImage.ondragstart = drag;
                         box.appendChild(pieceImage);
                     }
                 }
           }
           img.src = URL.createObjectURL(file);

           imageItem.appendChild(img);
           imageItem.appendChild(para);
           preview.appendChild(imageItem);
     }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="puzzle.js"></script>
    <title>PUZZLE GAME</title>
</head>
<body>
    <div class="puzzle-container">
        <div>
            퍼즐게임
        </div>
        <label for="puzzle-input">
            이미지 선택
            <input onchange="updateImageDisplay()" name="puzzle-input" id="puzzle-input" type="file" accept="image/*">
        </label>
        <div class="preview">
            <p>선택한 이미지로 퍼즐을 만듭니다.</p>
        </div>
        <div id="puzzle-box">

        </div>
    </div>
</body>
</html>

<style>
    input {
    opacity: 0;
    }
</style>