type="nal"

한명은 말을 이동 시키고 한명은 이를 방해해야 하는 게임이다. 데블스플랜에서 본 벽바둑이 생각나지만 암튼 각자의 목표에 충실하는 게임 https://www.acmicpc.net/problem/32714문제건덕이와 건구스는 N행 2열의 칸으로 이루어진 전장에서 승부를 겨루고 있다. 건덕이는 1행 1열에서 시작하여 말을 N행까지 이동해야 한다. 건구스는 칸과 칸 사이에 방벽을 설치하여 건덕이를 저지할 수 있다.게임은 아래의 순서로 건덕이의 말이 N행에 도달할 때까지 반복된다.건덕이가 말을 상하좌우로 인접한 칸으로 이동한다. 단, 현재 위치한 칸과 이동하려는 칸 사이에 방벽이 있는 경우 해당 칸으로 이동할 수 없다.건구스가 게임판 내에서 가로 또는 세로로 연속하는 두 칸을 선택하여 그 사이에 방벽을 설치한다...

App.tsx 파일에서BrowserRouter, Routes, Route 세가지 모듈을 import해주고App() 함수의 return에 있던 div를 지우고 라우터를 리턴해준다.그리고 가장 기본이 되는 페이지는 index라고 표시해주고 경로를 입력해준다.여기서 경로는 해당 URL. 그냥 "/"는 최초로 해당 URL 자체만 있는 것베이스 URL이 이렇게 있으니까 슬래시 하나면 그냥 이 URL로 접속했을때를 의미함 React Router에서 사용하는 주요 컴포넌트들의 차이는 아래와 같다컴포넌트역할특징라우터 전체를 감싸며, 브라우저의 History API를 사용해 URL 관리애플리케이션 전체를 감싸며, 반드시 필요.들을 감싸며, 현재 URL과 일치하는 하나의 만 렌더링의 대체이며, v6부터 도입됨특정 경로(p..

git 레포지토리에서 리액트 프로젝트를 클론하고, 모듈들을 설치하기 위해 npm install, npm i를 입력해봤는데 npm이 실행되지 않았다,, 우선 node.js는 깔려있고, 프로젝트 디렉토리에서 실행한 거 맞음. PowerShell의 실행 정책이 스크립트를 실행하지 못하도록 설정되어 있기 때문이라고 함 우선 터미널에Get-ExecutionPolicy 로 정책을 확인해보면Restricted로 제한되어있다고 뜬다. 아래 명령어로 실행 정책을 일시적으로 변경한다.Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass -Scope Process를 사용하면 현재 세션에서만 변경되며, PowerShell을 닫으면 원래 상태로 돌아감Bypass는 모든 스크립..

우선 node.js는 지난번에 설치해놓음. https://nodejs.org/ennpm 명령어로 vite를 사용할 것임. https://ko.vite.dev/guide/ 홈페이지에서 시작하기 문서를 읽어보자. node.js와 vite의 간략한 설명은 아래와 같다.Node.jsJavaScript를 브라우저 환경이 아닌 서버 환경에서도 실행할 수 있도록 해주는 런타임 환경. 일반적으로 서버 개발, 명령줄 도구 제작, 파일 시스템 작업 등에 사용됨Vite웹 개발을 위한 차세대 프론트엔드 빌드 도구, 빠른 개발 환경 설정과 빌드를 제공함. 특히 개발 서버의 속도가 빠르고, 최신 브라우저를 지원함. Node.js와 Vite의 관계Vite는 Node.js 환경에서 실행되며, Vite의 설치와 실행을 위해 Node...

제목을 클리하면 상세페이지가 보이도록 -> 모달 창으로 띄울 거임(제대로 된 페이지 전환은 리액트 라우터 배우기..) 글 목록 아래에 이렇게 모달 창을 만들어주는데,HTML을 작성하다보면 div가 너무 많아져서 점점 가독성이 나빠진다.그래서 리액트에서는 이렇게 원하는 블럭을 컴포넌트로 만들 수 있다. 바로 이렇게 컴포넌트 문법 컴포넌트를 만드는 방법은1. function을 만든다.function은 다른 함수 바깥에 만들어야 함. (function App 바깥)그리고 이름 첫글자는 영어 대문자로  2. 함수의 return () 소괄호 안에 축약할 html을 넣어줌이때도 마찬가지로 하나의 태그로 시작하고 끝나야 하며, 병렬로 태그를 작성할 순 없다. 3. 한단어로 축약한 컴포넌트를 사용할 때는 으로   ..

지난 글의 배열 복사의 추가 셜명.,, JS의 array, object 데이터의 특징 let arr = [1, 2, 3]; 이런 배열이 있으면1, 2, 3 데이터가 저장되어있고(RAM에), arr에는 이 데이터가 저장된 주소 정보가 저장되어 있음(어디있는지 가리키는 화살표) 1. 원본 배열 수정 lkes[i]++; setLikes(likes);그래서 그냥 이렇게 배열을 변경하려 한다면likes[i] 안에 있는 내용은 바뀌더라도 likes라는 변수에는 여전히 같은 주소(화살표)가 저장되어 있음따라서 기존 state와 수정된 state는 여전히 같기 때문에 state가 변경되지 않는다. 그렇기 때문에 기존 배열의 복사본을 만들어서 수정해주어야 하는데 2. 참조변수를 복사해 수정const newLi..