구름 풀스택 과정
이번주 부터 내가 한 것들을 좀 돌이켜 보겠다..
퍼즐게임
가장 먼저 월요일에는 예전부터 하고 싶었던 타입스크립트로 만드는 퍼즐게임 제작을 했다
- 좌 우 사이드에 각각 4개, 5개의 퍼즐 조각이 있음
- 가운데에는 퍼즐을 맞추는 컨테이너가 있는데 3X3의 형식을 갖고있음
- 퍼즐을 옮기면 기존 칸은 하얀 배경으로 바뀜
- 기존에 이미지가 있는 곳에 드래그를 하면 기존 이미지와 드래그 해서 옮긴 이미지의 위치가 바뀜
- 사이드 퍼즐의 위치는 새로고침을 하거나 가운데 하단에 있는 다시하기 버튼을 누를때 마다 매번 랜덤으로 지정됨
- 퍼즐을 모두 맞추게 될 경우 모든 퍼즐조각의 드래그가 비활성화됨
- 다시하기를 눌러서 재 실행이 가능함
- 모바일 반응형을 적용하여 width가 792px 이하로 내려갈 경우 상 5개 하 4개의 퍼즐로 재배치됨
웹에서의 기본 레이아웃
모바일 반응형 레이아웃
웹에서의 정답화면
모바일에서의 정답화면
개선할 점을 돌아보겠다
- 함수와 변수에 타입지정을 해주려 애썻으나 작은 프로젝트인 만큼 그 덕을 본건 아니였다.
그냥 타입스크립트 사용 방법에 익숙해 졌다는 점 그리고 그게 타입스크립트를 쓴 이유의 전부라는 점이 아쉬웠다 살에 닿을 정도로 쓸만한 이유를 아직 못찾았다는 것이다- live서버를 이용해서 홈메이지를 구동시켜서 일까? index.html을 그냥 실행해서는 이미지가 보이지 않는다.
나의 경우 img태그의 src속성에 있는 값을 비교하여 정답을 판별하는 방식으로 진행했는데 만약 이 게임을 배포하게 된다면 이미지 경로 부분을 손봐야 할 것이다- 기능적으로는 체크를 많이 해본결과 이상한 현상이 생기지 않았다
1차 스터디가 끝난 후 새로운 스터디에 참여
이게 나의 이번주의 전부였다 봐도 무방하다
나도 기록에 보면 알 수 있듯이 javascript를 이용하여 문제를 풀어왔고 이 정도면 알고리즘 공부를 시작해도 되겠는데? 라는 자만에 빠졌 던 것 하지만 그는 호락호락하지 않았다
하루 이틀이 지날 때 마다 시간은 숭덩숭덩 지나가고 문제를 푼 갯수는 현저히 적었다 ..
스택과 큐 재귀함수를 위주로 공부해보라는 팀원분 들의 말씀을 들어 그렇게 진행했고
프로그래머스에서 고득점 kit를 풀면서 스택과 큐에 대한 이해는 확실히 생겼다
DFS는 스택과 재귀를 주로 이용한다는 것
BFS는 큐를 주로 이용한다는 것
너비, 깊이로 노드들을 탐색하는 과정
문제를 풀기 위해 인접리스트로 입력을 정제하는 방법
그리고 어떤 과정을 통해 노드들에 방문하고 그 값을 처리할 지에 대해 많이 생각해 봤다 ..
정작 문제를 풀어보려 하면 생각대로 안되기는 했지만은
역시 내가 할수 있는건 많이 접하고 익숙해지는 것 뿐
다른 분들의 풀이를 보며 내가 직접 작성할 수 있도록 나만의 템플릿도 만들고
그 템플릿을 활용하여 문제를 풀어보는 수 밖에는 없어보인다
문제 정리도 차근차근 해보겠다 다들 그림앱을 잘 이용하시던데
나도 그만큼 깊게 이해해서 나의 설명을 그림으로 풀어서도 할 수 있도록 노력해야지
const fs = require("fs");
// let input = fs.readFileSync("/dev/stdin", "utf8").toString().split('\n');
let input = fs.readFileSync("example.txt", "utf8").toString().split('\n');
const [Node, Eege, Start_Node] = input.shift().split(' ').map(Number);
//이 문제에서는 첫째줄에 노드의 수, 간선의 수, 먼저 탐색할 노드가 주어져서 첫째줄의 각각 값을 지정해주었다
const Nodes = input.map(el => el.split(' ').map(Number))
/*
노드의 연결부분을 from, to 형식으로 받아서 각각 배열로 만들어주고 정수로 변환
[ [ 5, 4 ], [ 5, 2 ], [ 1, 2 ], [ 3, 4 ], [ 3, 1 ] ]
*/
const graph = Array.from({ length: Node + 1 }, () => [])
Nodes.forEach(([from, to]) => {
graph[from].push(to)
graph[to].push(from)
})
/*
인덱스로 각각 노드가 몇번째의 노드인지 지정해 주기 위하여 0번째 인덱스의 배열은 비어져있고
각 노드가 몇번 노드와 연결되어 있는지를 표현해 줄 수 있도록 정재해 주었다
배열메서드인 from을 이용하여 주어진 Node의 수보다 1을 더해서 빈 배열을 생성해주었다.
[[],[],[],[],[]] (Node가 4 인 경우)
다음 forEach 를 보자
5 4 (from, to)
5 2
1 2
3 4
3 1
graph[5].push(4)
graph[4].push(5)
다음
graph[5].push(2)
graph[2].push(5)
이런 과정을 반복해준다 그렇게 빈 배열이였던 graph는
[ [], [ 2, 3 ], [ 5, 1 ], [ 4, 1 ], [ 5, 3 ], [ 4, 2 ] ]
이렇게 인접리스트 형식을 갖추게 된다.
이렇게 정제한 데이터로 DFS를 하던 BFS를 하던 지지던 볶던 알아서하쇼
*/이렇게 금방 지나가는 일주일은 또 처음인가...
완전 초창기 손가는대로 만들고 싶던걸 만들던 때와 비교해 스스로 느껴지는 성장 그래프가 처참하게 낮아졌다..
눈에 보이지 않는 무언가와 싸우는 기분 그래도 의미없는 것들만 아니길 바라며 문제도 풀고 프로젝트도 시작해야지 암~~~
