My Boundary As Much As I Experienced

최근 '리액트 교과서'를 읽다가 'React는 다른 MVC 프레임워크나 AngularJS의 지시자, Jade, Pug 같은 템플릿 엔진 문법에 비하면 학습 곡선이 얕고 완만하다(React는 MVC가 아니니 이러한 비교는 이쯤에서 그만 두겠다).' 라는 문장을 발견했다. 여기서 MVC가 무엇인가? 그리고 무엇이길래 MVC 프레임워크들이 즐비한가? MVC란? MDN에서 이를 찾아보았다. https://developer.mozilla.org/ko/docs/Glossary/MVC MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더나은 ..

이전 포스팅에선 게임 플레이 시 어떻게 타일의 일반 상태 -> 깃발 상태 -> 물음표 상태로 전환하는지와 어떻게 빈 타일들을 모두 열고, 지뢰 근처의 타일에서 탐색을 멈추게 했는지를 설명했다. 이번엔 게임의 부수적인 요소인 게임 타이머, 리셋버튼 얼굴 전환, 사운드 구현 등을 어떻게 했는지에 대해 설명하겠다. 레벨, 게임플레이 상태와 게임 플레이같은 뼈대가 되는 요소들이 모두 구현된 상태에선 이런 부수적인 요소는 쉽게쉽게 처리할 수 있다. 게임 타이머 구현 로직 아래 코드는 useTimer훅이다. 짧게 기능을 설명하자면 레벨 전역 상태가 playing이면 setTimeout을 시작하고, stale일 때는 0으로 초기화한다. succeess이거나 gameOver일때는 0으로 초기화하지 않고 그냥 멈춘다. ..

이전 포스팅엔 타일맵 생성 로직과 지뢰 뿌리기를 어떻게 구현하였는지에 대해 설명하였다. 이번 포스팅에선 게임 플레이 시 타일의 일반 상태 -> 깃발 상태 -> 물음표 상태로 전환하는지와 어떻게 빈 타일들을 모두 열고, 지뢰 근처의 타일에서 탐색을 멈추게 했는지를 설명하겠다. 타일 상태 바꾸기 로직 (기본 - 깃발 - 물음표 - 게임오버 - ...) 이전 포스팅에서 소개한 바와 같이 아래 코드처럼 각각의 타일들은 TileType의 객체로 구성되어 있으며 2차원 배열을 구성하고 있다. 그리고 이를 Tile컴포넌트로 만들기 위해 map메소드로 전개한다. // TileType { isOpened: false, // 열렸는지 여부 isMined: false, // 지뢰가 있는지 여부 isStaled: true, ..

이전 포스팅엔 레벨 정보와 플레이 상태 정보를 어떻게 전역 상태로 구성하였는지에 대해 설명했다.이번 포스팅에선 타일맵을 생성하고, 지뢰를 초기화(게임 시작)하는 로직에 대해서 설명하겠다. 타일맵 생성을 어떻게 할 것인가?게임 영역의 구조는 아래 폴더구조와 같다.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)시간복잡도의 재배치가 발생하기 때문이다. 얼마 안 되는 데이터면..