문제 설명 △△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습니다. 만약 1번↔2번 끼리 겨루는 게임에서 2번이 승리했다면 다음 라운드에서 1번을 부여받고, 3번↔4번에서 겨루는 게임에서 3번이 승리했다면 다음 라운드에서 2번을 부여받게 됩니다. 게임은 최종 한 명이 남을 때까지 진행됩니다. 이때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 ..

문제 설명 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며, 게임 맵을 벗어난 길은 갈 수 없습니다. 아래 예시는 캐릭터가 상대 팀 진영으로 가는 두 가지 방법을 나타내고 있습니다. 첫 번째 방법은 11..

들어가며 폭풍과 같은 1주 차가 끝났다.... 과제가 어려우면 얼마나 어렵겠냐고 생각했는데 생각보다 많이 어려웠다. 혼자 과제를 끝내려고 했다면 절대로 못했을 것 같고, 많은 동료 캠퍼분들에게 도움을 받아서 과제를 마무리했다. 월요일 첫날 과제가 생각보다 쉬워서 방심했던 것 같다. 네이버 측에서 첫 과제라서 몸풀기 느낌으로 낸 문제라고 생각한다. 간단하게 과제를 해결하고 마음 편하게 놀았던 것 같다. 앞으로 다가올 미래는 생각도 못한 체... 화요일 동료 캠퍼들과 서로의 코드를 피드백을 했는데, 내가 생각하지도 못했던 부분에서 피드백이 나와서 놀랐다. 처음에는 " 개발하면서 이런 것도 신경 써야 하나? "라고 생각했는데, 협업을 하고 다른 사람이 나의 코드를 봤을 때 이런 의문이 들 수 있겠다고 생각했고..

0. 들어가며, 기본적으로 Redux와 Redux - Toolkit에 대한 이론을 공부한 뒤, 작성하였습니다. [React] Redux - 기본편 [React] Redux - toolkit편 1. 프로젝트 세팅 yarn add @reduxjs/toolkit react-redux redux를 사용하기 위해서 toolkit과 react-redux만 추가로 설치해준다. 2. 개발 1. Todos Reducer import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todoSlice = createSlice({ name: "todos", initialState, reducers: { addTo..

Redux Toolkit? Redux Toolkit은 Redux 팀에서 세 가지 걱정을 해결하기 위해서 등장했다. 1. Redux 스토어 환경 설정이 너무 복잡하다. 2. Redux를 쉽게 사용하기 위해선 추가로 패키지들을 설치해야 한다. 3. Redux는 많은 보일러플레이트 코드를 요구한다. 즉, Redux Toolkit은 Redux로 개발하는 과정을 단순화하여 흔한 실수를 방지할 수 있게 해 준다. ※ 보일러플레이트 코드? 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. Redux Toolkit 사용법 Redux Toolkit API는 크게 7가지가 있다. 1. configureStore Redux의 createStore 함수와 유사한 함수이다. Reducer..

Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. Redux의 주요 개념들 1. Action ( 액션 ) 상태가 변화가 필요할 때, 액션이 발생된다. { type: 'TOGGLE_MODAL', data: { // ... } } 객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 2. Action Creator ( 액션 생성 함수 ) 액션 객체를 만들어주는 함수이다. export const toggleModal = (data) => { return { type: "TOGGLE_MODAL", data, } } 액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌..

들어가며. Todo 앱 - Context & AsyncStorage_1편과 이어지는 내용입니다. 앞선 부분을 보지 않으셨다면 확인하시는 것을 추천드립니다. 4. 개발 10. AddTodo 컴포넌트 import React, {useState} from 'react'; import AddButton from './AddButton'; import TodoInput from './TodoInput'; interface Props {} const AddTodo = ({}: Props) => { const [showInput, setShowInput] = useState(false); return ( setShowInput(true)} /> {showInput && setShowInput(false)} />} )..

0. Context API & AsyncStorage? Context API React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 즉, 부모 컴포넌트에서 자식 컴포넌트로, 위에서 아래로 한 방향으로만 데이터가 흐르게 된다. 하지만 Context API는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이, 전역으로 사용되는 데이터를 다룬다. 전역 데이터를 저장한 후, 컴포넌트에서 필요한 데이터를 불어와 사용한다. AsyncStorage React에서 Props와 State, Context는 모두 휘발성으로 데이터가 메모리에만 존재하며, 물리적으로 데이터를 저장하지는 않는다. AsyncStorage는 앱 내에서 키 값 ..