일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 프론트엔드개발자
- BFS
- 백준
- 코딩테스트
- 국비지원취업
- LinkSnap
- 그리디
- KAKAO
- js
- DFS
- git
- computerscience
- 알고리즘
- 패스트캠퍼스
- html/css/js
- 부트캠프
- CS
- Javascript
- CSS
- 호이스팅
- github
- 컴퓨터과학
- 너비우선탐색
- nodejs
- 야놀자
- 컴퓨터공학
- 국비지원
- cpu
- 코테
- 자바스크립트
- Today
- Total
목록전체 글 (277)
My Boundary As Much As I Experienced
MVVM의 탄생기 2004년 마틴 파울러의 프레젠테이션 모델(PM) 패턴 발표 - 프레젠테이션 모델 = 뷰의 추상화 - 뷰는 단지 프레젠테이션 모델의 렌더링에 불과 - 프레젠테이션 모델은 뷰를 자주 업데이트하여 동기화 상태 유지 - 동기화 로직은 프레젠테이션 모델 클래스에 코드로 존재 2005년 - MS사는 마틴 파울러의 아이디어를 수용하여 MVVM 체계화 및 도입 - 두 패턴 모두 뷰의 상태와 동작을 포함해 추상화 - PM 패턴을 WPF 및 Silverlight 플랫폼에 맞게 특화시킨 것 MVVM의 특징 - 과거와 다른 애플리케이션의 UI 개발 환경의 변화 - 코딩을 덜 필요로 하며, 다양한 툴, 언어, 사람, 로직 등에 의해 이루어짐 - 하나의 환경 혹은 하나의 언어를 사용하던 과거와 달리, 현재 트..
최근 '리액트 교과서'를 읽다가 '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)'을 점수로써 해당 참가자에게 주어진다. (*맞춘 다음 다시 푼다고 하면 첫 풀이만 인정된다. 중복 반영은 안 된다.) 순위를 정할 땐 푼 문제 수가 많은 순으로 등수가 높고, 푼 문제 수가 같은 경우엔 점수가 낮은 쪽이 높다 (그렇다면 점수가 아니라 패널티 아닌가..) 이 테스트기를 구현하시오. 입출력 예 (입력 / 출력): 문제 풀이 전략: 뭐랄까. 점수라는건 사실 패널티라고 봐야할거 같다. 틀릴수록 점수가 오른다는 것이 직관적으로 안 받아들여지고, 점..