My Boundary As Much As I Experienced

컨셉포트폴리오, 블로그, 아트워크 갤러리 등 모든 것을 종합한 내 개인 사이트를 만들고 있다.이니셜은 BB다. BumangBoard, BumangBackground, BumangBunker, BumangBetter 등...여러 이름으로 대응될 수 있다는 컨셉. 좌측 상단 로고에 호버할때마다 제목이 계속 바뀌게 해야지~ 구조에 대해 매우매우 고민을 많이 했다.사실 대부분의 개발문서나 테크 블로그들은 사이드바가 존재하는 디자인이지만...나는 헤더-탭바 등이 상단에 배치되는 형식에 컨텐츠 중앙정렬 컨셉으로 만들기로 했다. 본문 width를 넓게 쓰는게 인터랙티브나 스크롤 모션 등을 넣었을 때 임팩트가 셀 것이기 때문!그래서 최종 구조는 아래처럼 잡을거다. - 헤더- 배너 (Collapsible)- 탭바 (i..

타로를 왜?이 세상에서 몇 천년 동안 이어져 온 킬러 콘텐츠, 바로 운세다.특히 타로카드의 형식은 랜덤 가챠(?)와 운명을 결부시키는 매우 중독적인 포맷이다.사실 본질적으론 78장의 그림카드 중에 몇 개를 뒤집는 거에 불과하지 않나?그런데도 다들 카드를 뽑을 때 진짜 자신의 운을 결정짓는 느낌으로 진지하게 임하는걸 볼 수 있다..(+그리고 오늘의 운세를 보러 하루에 한 번 씩은 다시 방문한다. 이런 리텐션 깡패가 없다..!!!) 그래서 왜 챗봇?타로마스터와 내담자 간의 대화로 진행되는데,이 포맷을 가장 잘 살린게 채팅 형식의 타로앱인 헬로우톡인거 같다.'라마마'라는 라마 캐릭터가 각종 테마와 카드에 대한 멋들여진 해석을 제공해준다. 그런데 라마마가 각각의 카드에 대한 아주 잘 짜여진 스크립트를 제공해주고..

이전 포스팅에선 게임 플레이 시 어떻게 타일의 일반 상태 -> 깃발 상태 -> 물음표 상태로 전환하는지와 어떻게 빈 타일들을 모두 열고, 지뢰 근처의 타일에서 탐색을 멈추게 했는지를 설명했다. 이번엔 게임의 부수적인 요소인 게임 타이머, 리셋버튼 얼굴 전환, 사운드 구현 등을 어떻게 했는지에 대해 설명하겠다. 레벨, 게임플레이 상태와 게임 플레이같은 뼈대가 되는 요소들이 모두 구현된 상태에선 이런 부수적인 요소는 쉽게쉽게 처리할 수 있다. 게임 타이머 구현 로직 아래 코드는 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..

팀 문화 만들기이번 파이널 프로젝트를 통해 야놀자 부트캠프에서 두 번째 팀장 경험을 하게 되었다.다들 극 I밖에 없는 팀에서 그나마 사회자 역할을 자처할 수 있는게 나밖에 없었기 때문이다.팀장으로서 엄청나게 책임감이 막중해야되는 일은 많이 발생하진 않았지만,팀이 잘 굴러가도록 소소하게 지켰던 룰들을 소개해보도록 하겠다.  매일 데일리 스크럼으로 작업 내역 공유12시 반에 모든 직군 간 데일리 스크럼이 있기 때문에, 그 전에 프론트끼리 데일리 스크럼을 해서 얼라인을 맞추려고 했다.일단 예전 회사에서 했던 대로 매일 아침 10시 데일리 스크럼을 하며 서로의 작업 내역을 파악하는 시간을 가지려고 했으나,이번 팀은 올빼미들이 많아서 아침 스크럼 참여율이 너무 낮았다.. 추후 12시 반 전체 스크럼이 끝난 다음에..

React의 SEO 문제 해결을 위한 라이브러리 리액트는 SEO 점수를 잘 받기 힘들다고 보편적으로 인식되고 있다. 그 이유는 SPA 특유의 동작 방식 때문인데, 웹 크롤러가 크롤링해갈 HTML 파일이 비어있고, 라우팅을 모두 React router dom 같은 자바스크립트 라이브러리로 히스토리 객체에 동적으로 추가하여 이동한 것처럼 느껴지게 할 뿐이지 실제 html파일은 index.html 하나 뿐이기 때문이다. (그러므로 페이지 별 메타 태그를 설정할 수 없다. 하나밖에 없으니..) 이를 해결하기 위해 여러가지 방법들이 고안 되었는데 그 중 가장 유명한 것이 react-helmet-async와 react-snap이다. 리액트 헬멧 라이브러리란? 리액트 헬멧은 리액트 앱에 jsx 컴포넌트 형식으로 채워..

안드로이드 체크 안내 아이폰 판매 완료 알림 프로젝트 막판 스퍼트, 푸시 알림 구현 약 프로젝트 마감이 5일 남은 시점, 기존 페이지들 QA 테스트 결과 고쳐야할 버그들이 많이 남은 상황에서 '알림 기능', 'pwa 기능', 'SEO 최적화' 등 처리해야될 일들이 너무 많아진 상황이었다.. 사실 알림 기능과 pwa는 시간 없으면 포기하자고 PM팀이 이야기했다. 사실 이 기능들을 전에 구현해본 경험이 없어서 이게 얼마나 걸릴지 계산이 안 됐지만, '모바일 앱의 존재 이유는 알림이다. 사실 모바일 앱은 푸시알림 머신이다.' 등 푸시 알림의 중요성을 강조하는 말들을 들어왔기 때문에 선뜻 포기하고 싶지는 않았다. pwa는 전에 구현해본 경험이 있는 팀원분께 맡기고, 나는 fcm을 이용한 푸시 알림 기능을 구현해..