목록분류 전체보기 (19)
개발일지
Next.js란 뭘까? 서버사이드 렌더링을 효율적으로 개발할 수 있도록 도와주는 프레임워크 현재 내가 가지고 있는 책 '실전 리액트 프로그래밍'에서는 'SSR을 서버에서 리액트 코드를 실행해서 렌더링 하는것' 이라고 설명하고 있다. 이것이 필요한 이유는 대표적으로 검색엔진 최적화(SEO)를 해야한다. 빠른 첫 페이지 렌더링이 중요하다. 이다. Next.js 시작하기 mkdir 폴더이름 cd 폴더이름 npm init -y npm install next react react-dom 여기서 package.json에서 scripts를 이렇게 수정했다. 여기서, React와 달랐던 점은 폴더 구성이 node_modules밖에 안만들어져 있어서 처음 잘못 설치된 것인지 헷갈렸는데, 이것이 정상이다. 여기서, pag..
1. 문제 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. 이번에 나온 맥북을 받고 하루빨리 좋은 노트북으로 개발해야지! 라는 마음으로 이것저것 설치하면서 리액트를 구동하는 도중, 이러한 오류가 나면서 1번부터 7번까지 그대로 따라하라는 내용의 글들이 터미널에 찍히게 되었다... 이것 저것 검색해보니 다음과 같은 방법을 이용하면 구동이 되었다. 이렇게 리액트의 루트폴더에 .env 파일을 만들고, 그 안에 SKIP_PREFLIGHT_CHECK=true 를 넣고 저장하면 위의 경고문이 더 이상 나타나지 않게 된다. ..