My Boundary As Much As I Experienced

이전 포스팅엔 레벨 정보와 플레이 상태 정보를 어떻게 전역 상태로 구성하였는지에 대해 설명했다.이번 포스팅에선 타일맵을 생성하고, 지뢰를 초기화(게임 시작)하는 로직에 대해서 설명하겠다. 타일맵 생성을 어떻게 할 것인가?게임 영역의 구조는 아래 폴더구조와 같다.TileMapPanel이 실제 지뢰찾기 맵이 있는 부분이며레벨 별 X길이, Y길이, 지뢰 갯수들을 state로 가지고 있는 부분이기도 하다.이 정보들을 활용하여 Tile 컴포넌트를 map 메소드로 전개해준다.  레벨과 플레이 상태에 따라 타일 맵 정의이어서1. 레벨과 그에 따른 지뢰 갯수, 타일 갯수들을 (유저의 선택에 따라) 어떻게 변하게 했는지2. 게임을 시작할 때 랜덤으로 지뢰를 타일 곳곳에 매립했는지에 대해 설명하겠..

과제 요구 사항에서 지켜야 할 부분들 중 아래 부분에 대한 구현 과정이다. ◆ 난이도 변경이 가능해야 합니다.    ◆ Beginner (8X8) 지뢰 10개    ◆ Intermediate (16X16) 지뢰 40개    ◆ Expert (32X16) 지뢰 100개    ◆ Custom (가로, 세로, 지뢰 수 조정 가능)◆ 설정 가능한 가로, 세로는 최대 100 x 100이며, 지뢰수는 격자칸 수의 1/3 이하로 설정 가능합니다.◆ 전역상태관리로는 redux-toolkit을 사용합니다. 일단 요구 조건 대로라면,레벨에 따라 타일 맵 X, Y 크기와 지뢰의 갯수가 바뀌어야 하고,커스텀에선 아예 사용자 입력값을 받아 타일맵 크기를 동적으로 변경할 수 있어야 했다.이를 위해..

들어가며 최근에 구현 과제로 지뢰찾기를 리액트로 제작해보았다. 근래 가장 힘들었던 구현과제이다. 왜 이런 과제를 냈을까? (일단 게임과 관련된 회사는 아니다.) 내가 생각하기엔 고난이도 알고리즘으로 여겨지는 '2차원 배열 안을 DFS/BFS로 탐색하기'를 실제 프로덕트에 자바스크립트를 활용해서 구현할 수 있는지를 테스트해보는 것 같았다. ...하여튼 예전에 백준에서 뿌요뿌요 구현하기 문제를 풀어본 적이 있는데, 이것도 2차원 배열 속을 bfs로 탐색하는 문제여서 이때의 기억이 많은 참고가 되었다. 뿌요뿌요 문제를 안 풀어봤다면 이걸 제시간 안에 구현 가능했었을까? 글쎄.. 결론은, 역시 코테는 쓸모가 있다. 관련 링크: 깃허브 링크: https://github.com/Bumang-Cyber/webgame..

https://www.acmicpc.net/problem/2740 문제 수준: 실버5 문제 요약: 행렬 A와 B가 주어졌을 때 행렬곱셈 값을 구하여라. 입출력 예 (입력 / 출력): 문제 풀이 전략: 행렬과 행렬의 곱셈을 어떻게 구하는지 몰라서 일단 아래 블로그와 영상을 참고했다. 수1에 나오는 내용이라고 한다. 지금 중등 수학 복습 중인데 조만간 따라잡아야겠다. 참고한 블로그: https://blog.naver.com/cindyvelyn/222136360080 참고한 영상: https://www.youtube.com/watch?v=JpSe38UHaos 일단 입력값이 조금 불친절하다. 행렬에 대한 메타데이터 형식이 실제데이터와 동일할 가능성이 있기 때문이다. 그래서 메타데이터의 문자열만 집어내서 이를 기..

프록시(Proxy)란? 클라이언트와 서버 사이에서 데이터를 전달해 주는 서버. 웹 캐시 기능이 있는 경우가 많으며, 방식에 따라 프론트의 IP주소를 숨기거나(포워드 프록시), 서버의 IP주소를 숨기거나(리버스 프록시) 할 수 있다고 한다. 공부하게 된 계기 이번 기술면접에서 CORS에러가 날 때 어떻게 해결할거냐는 질문을 받았다. 예전에 '빨리 잡아'라는 숙박 어플 만들 때 나를 고생시켰던 CORS에러.. 그 당시 백엔드 개발자가 프론트 origin을 whitelist에 추가하면서 해결했던 경험이 기억이 났다. '이를 해결하려면 클라이언트와 서버가 기본적으로 동일한 오리진이거나 아니면 허용된 오리진을 설정해야됩니다. 그러니 서버개발자에게 화이트리스트에 프론트엔드 오리진을 추가해달라고 요청할 것입니다.' ..

https://www.acmicpc.net/problem/5179 문제 수준: 실버3 문제 요약: 문제 풀이 대회를 했는데, N명의 참가자가 M개의 문제를 풀게 됐다. 이때 점수가 존재하는데, 문제를 맞히면 '문제를 맞힌 시각 + (틀린 횟수 x 20)'을 점수로써 해당 참가자에게 주어진다. (*맞춘 다음 다시 푼다고 하면 첫 풀이만 인정된다. 중복 반영은 안 된다.) 순위를 정할 땐 푼 문제 수가 많은 순으로 등수가 높고, 푼 문제 수가 같은 경우엔 점수가 낮은 쪽이 높다 (그렇다면 점수가 아니라 패널티 아닌가..) 이 테스트기를 구현하시오. 입출력 예 (입력 / 출력): 문제 풀이 전략: 뭐랄까. 점수라는건 사실 패널티라고 봐야할거 같다. 틀릴수록 점수가 오른다는 것이 직관적으로 안 받아들여지고, 점..

Queue란? "Oh, I'll put this in my watch later queue!" 플레이리스트 큐, 입장 대기 큐 등.. 우리가 직관적으로 아는 그 큐 맞다. 선입선출, 들어온 대로 나가는 리스트인 queue이다. 자바스크립트에서 배열과 shift메소드를 Queue 대용으로 쓰면 안 좋은 이유 자바스크립트 배열을 shift 메소드를 쓰며 queue같이 쓰는 것도 가능하긴 하지만 대규모 데이터를 queue로 처리해야될 때 자바스크립트 배열은 좋은 선택지가 아니다. 왜냐하면 shift()메소드로 특정 인덱스 인자를 제거했을 때, 다음 인덱스에 있는 인자를 해당 빈 인덱스에 끌어오고, 또 다다음것을 다음으로 끌어오고... 이런 O(n)시간복잡도의 재배치가 발생하기 때문이다. 얼마 안 되는 데이터면..

연결 리스트란? 배열과 다르게 Node와 Node의 연결을 이용해서 리스트를 만드는 자료구조. 자바스크립트에 익숙한 사람은 원래 배열이라는 자료형에 갯수 제한 없이 원하는 만큼 다 집어넣을 수 있는 줄 아는데 (그것도 자료형에도 구애받지 않고 넣을 수 있는 줄 안다.. 자료형도 정해야 한다. 기본이 any[]가 아니다.) 원래 배열은 몇 개까지 수납할지 선언할 때 그 갯수를 한정해야 한다. 이러한 배열의 단점을 보안하기 위해 추가나 삭제가 자유로운 리스트를 만들고 싶은 니즈가 있었는데 이를 구현한게 연결 리스트이다. 기본 구조 기본적으로 HEAD와 TAIL 등의 순서가 존재한다. Node라는 유닛으로 구성되어 있고, Node는 실제 데이터 값와 다음 데이터의 참조를 가지고 있다. 아래는 삭제 시의 모습이..

일단 긴 얘기부터 해보겠다. 수학공부를 하고싶게 된 이유에 대한 얘기다. 코테를 풀다보면 수학적인 개념이 나올 때가 종종 있다. 어제는 어린 왕자라는 문제를 풀었는데, '이게 실버3이야?' 할 정도로 고난이도의 문제로 느껴졌다. '최소 골드 하위 문제 같은데..'라는 생각이 들었다. 문제를 보자면, - 어린 왕자의 위치와 장미의 위치, 그리고 행성계의 좌표가 주어진다. - 위 사진에서 자유곡선의 왼쪽 끝이 어린왕자의 위치고 오른쪽 끝이 장미이다. - 위 사진에서 동심원들로 표시된게 행성계이다. - 행성계는 중첩되어 있을 수 있다. 그러나 애매하게 일부 교집합이 있는채로 있다거나 하진 않는다. 이때, '어린왕자가 장미를 만나러 가려면 얼마나 많은 행성계를 가로질러야하는가?' 가 문제였다. 좌표는 -1000..

https://www.acmicpc.net/problem/17249 문제 수준: 브론즈2 문제 요약: 마구 주먹을 날리는 이모티콘의 '왼쪽 주먹의 잔상 수', '오른쪽 주먹의 잔상 수'를 찍어라. 주먹은 참고로 @이다. 얼굴 '(^0^)' 기준으로 왼쪽에 있는 건 왼쪽 주먹, 오른쪽에 있는 건 오른쪽 주먹이다. 입출력 예 (입력 / 출력): 문제 풀이 전략: 1분 안에 풀리는 문제를 풀고 싶어서 푼 문제.. 이걸 푸는 여러 방법이 있겠지만, 나는 split()메소드를 적극 활용했다. 문자열 없애는 가장 좋은 방법 중 하나가 split()과 join()의 체이닝이므로.. 내 풀이: // 17219 비밀번호 찾기 let fs = require("fs"); let input = fs.readFileSync("..