오래전부터 개인적으로 만들고 싶은 게임을 만들어 봤습니다. 이번 영상은 스도쿠의 틀을 만드는 영상입니다. 버튼을 누르면 아래 숫자를 선택할 수 있는 모달이 나오고 숫자를 클릭하면 해당 칸의 숫자가 변합니다. 스도쿠의 특징인 9x9의 숫자 칸을 만들었고 이 칸을 9개로 나눠 노란색 선으로 구분지었습니다. .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .boxContainer { display: grid; grid-template-columns: repeat(9, 1fr); } 각각의 숫자 칸들은 grid를 통해 나눠져 있으며 한 행에 9개의 열이 있..
이번 리따배 프로젝트는 react+typescript를 이용한 로그인 프로젝트입니다. id: admin pw: admin 으로 로그인하면 main페이지로 이동합니다. 만약 로그인을 안한 상태로 main page로 이동을 한다면 sessionStorage에서 isLoggedin이 false인 상태이므로 모자이크 된 화면으로 보입니다. 보통 로그인하지 않은 유저가 유효한 페이지로 이동할 경우 login page로 리다이렉트 시켜 main페이지로의 이동을 막지만 잡플래닛에서 로그인 하지 않은 사용자의 리뷰 서칭을 막는 화면을 보고 따라 만들어봤습니다. 하지만 위 프로젝트의 문제는 main페이지에서 개발자도구로 들어가 모자이크를 해주는 css를 없애면 본문이 보인다는 것 입니다. 이는 로그인 하지 않은 사용자는..
이 곳에 적힐 글들은 제가 사용하거나 이후에 사용할 모든 라이브러리 프로그래밍 언어 또는 컴퓨터와 관련된 모든 것들의 본질에 대한 것들 입니다. 컴퓨터 프로그래밍에서 내가 사용하는 무언가(예를들어 React)는 모두 개발된 이유가 있습니다. 하지만 누군가 나에게 내가 사용하는 무언가에 대해 물어보면 배부분의 대답은 이러할 것입니다. '요즘 트랜드니까' 올바른 대답이 될 때도 있지만(?) 대부분의 경우 올바른 대답이 아닐 것입니다. 무엇보다 제가 하는 말에 힘이 실리지 않습니다. 제가 주장하는 어떤 것이든 이런 가벼운 근거로 주장을 한다면 그 말에 누구도 귀를 기울이지 않을 것입니다. 이 카테고리는 이런 저의 약점을 보안하기 위해 만들어졌습니다. 최근 chat gpt를 사용하면서 깨달은 점은 목표하는 것을..
리액트 전역상태관리 라이브러리 Redux를 알아보고 사용해보자 리액트를 사용하면서 위와 같은 수많은 Props를 하위컴포넌트로 전달해야하는 경우를 경험했을 것입니다. 간단히 만든 제 리따배 프로젝트에도 많이 볼 수 있는 상황인데요. 제가 진행하는 프로 blog.doyeonism.com 위 글에서 우리는 Redux의 상태관리에 대해 알아보았습니다. If you are writing any Redux logic today, you should be using Redux Toolkit to write that code! RTK includes utilities that help simplify many common use cases, including store setup, creating reducers a..
