GYEJOONG'S INDEX
Frontend engineer. 웹을 만들며 배운 것과 오래 남기고 싶은 생각을 기록합니다.
MOST READ
INDEX
Frontend engineer. 웹을 만들며 배운 것과 오래 남기고 싶은 생각을 기록합니다.
83 posts
2026년 3월부터 4월까지 약 한 달 동안 모바일 타워 디펜스 게임을 만들었던 내용을 기록하고, 회고 느낌으로 작성해봤어요.어릴 때부터 디펜스 장르의 게임을 좋아했고, 제가 재미있게 했던 게임의 요소를 세로형 모바일 게임으로 구현해보고 싶었어요. 동시에 AI를 활용하면 게임 기획부터 디자인, 코딩, 테스트까지 혼자서 진행할 수 있을지도 궁금했어요.그렇게 시작한 프로젝트가 castle-wall-tower-defense예요.현재 저장소는 Castle Wall Tower Defense라는 이름의 랜덤 합성 타워 디펜스 형태로 정리되어 있어요. 소환, 합성, 보스, 메타 강화로 이어지는 코어 루프를 구현했어요. 처음 세운 가설처음에는 세 가지 가설을 세웠어요. 제가 좋아했던 디펜스 게임을 세로형 모바일 게임으..
React Hook Form 시리즈 포스팅 가장 첫 번째, React Hook Form 시작하기입니다. 이번 포스팅은 아래 순서로 진행이 됩니다. 설치 기본 사용법 설명 DevTool 사용하기 UI 라이브러리와 함께 사용하기 에러 처리 설치 현재 진행 중인 프로젝트에 아래와 같은 명령어를 입력합니다. npm install react-hook-form yarn을 사용한다면 아래와 같이 입력합니다. yarn add react-hook-form 기본 사용법 설명 기본 예제 import React from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; type Inputs = { example: string; exampleRequired:..
지은이: 최인철 출판사: 21세기 북스 읽은 날: 2022-03-20 세상을 바라보는 관점이 어떤지에 따라서 불행할 수도, 행복할 수도 있다는 것을 일깨워주는 책이었다. 이 세상이 애매하다는 것을 인정하고 그 자체가 세상의 법칙이라고 생각하는 것부터가 시작이라고 생각이 되었다. 특히 이 책에서 가장 기억에 남은 부분은 ‘자기중심적 프레임’ 이었다. 본인 스스로도 ‘자기 중심적 프레임’에 갖춰 나는 너를 아는데, 너는 나를 모른다라는 착각에 빠져 살았던 것 같다. 그래서 남을 스스로 쉽게 평가하고 결론을 지었던 지난 일에 반성하게 되었다. 또한, ‘자기중심적 프레임’이 본인 스스로가 내린 결정이 합리적인 선택이었다는 착각을 하게 만든다고 한다. 사실 본인의 결정은 본인이 책임을 져야 하는 것이므로 그 선택..
React Hook Form은 Hooks 기능을 활용하여 쉽고 빠르고 간단하게 Form Validation을 처리하는데 최적화된 라이브러리입니다. 다른 많은 라이브러리도 있지만 성능, 업데이트 빈도수, 프로젝트 생성일자 등을 고려해봤을 때 가장 신뢰성 있는 프로젝트라고 생각됩니다. Formik vs React Hook Form vs Redux Form 트렌드 비교 Stars만 보면 formik이 조금 우세하긴 하지만, 이슈 개수와 마지막 Updated 날짜를 보면 react-hook-form이 관리를 더 잘한다고 보입니다. 번들 사이즈도 보게 되면 formik이 react-hook-form보다 60% 이상 높습니다. 이러한 기준으로 react-hook-form을 선정하게 되었으며, 시리즈물 포스팅을 작성..
안녕하세요. 최근에 Gatsby를 공부할겸 포트폴리오 사이트를 만들어보기 위해 해당 포스팅을 작성하게 되었습니다. Gatsby란? Gatsby는 React 기반의 오픈소스 프레임워크 이며, 정적 웹사이트를 만들때 빠르게 만들 수 있습니다. Gatsby를 사용하기 좋은 케이스 Gatsby는 React기반인데, 왜 별도의 툴이 존재할까 라는 생각이 들기도 합니다. 하지만, Gatsby는 다음과 같은 상황에서 확실하게 장점으로 작용됩니다. 별도의 서버 없이 운영하고 싶은 경우 React를 사용하여 정적 사이트를 만들고 싶지만, SEO (검색엔진 최적화)가 문제가 되는경우 아무래도 React 기반이기 때문에 React의 사전지식이 필요하며, GraphQL를 사용하므로 해당 관련 지식이 필요 할 수 있습니다. 해..
요즘 취미로 앱개발을 하고 싶어서, 어떤 것을 공부해서 해볼까 하던참에, 마침 React를 공부하고 있던 터라, React Native를 이용하여 개발 하면 어떨까 싶어서 React Native에 대해서 공부하게 되었습니다. React Native를 간단하게 설명하면, 기존 프론트엔드 라이브러리인, React의 기술을 활용할 수 있고, Android/IOS 크로스플랫폼을 지원하는 프레임워크입니다. 이 포스팅에서는 React Native를 사용하기 위한 개발환경 셋업에 대해서 소개합니다. (MacOS 기준) 개발환경 셋업은 크게 3가지 챕터로 이루어져 있습니다. 기본 개발 환경 셋업 Android & IOS 환경 셋업 react-native CLI 기본 개발 환경 셋업 Home brew install (H..
개요 기본적으로 AWS EC2 Instance를 생성하면, 최초 접속시에는 KeyPair를 이용하여 접속하게 됩니다. 이 포스팅에서는 최초 KeyPair 접속 이후 Username과 Password를 이용하여 로그인 하는 방법에 대해서 소개합니다. 계정 생성하기 sudo useradd test sudo passwd testsshd_config 수정하기 sudo vi /etc/ssh/sshd_config PasswordAuthentication no -> yessshd 재시작 sudo service sshd restartsudo 권한 추가 vi /etc/sudoers # User privilege specification root ALL=(ALL:ALL) ALL (유저명) ALL=(ALL:ALL) ALLs..
안녕하세요 Spring Intializer를 이용하여 프로젝트를 세팅하는 방법에 대해서 포스팅 하겠습니다. 우선, Spring Initializer 사이트에 접속합니다. https://start.spring.io/ * 세팅해야 하는 순서입니다. 1. Group 2. Artifact3. Depedencies 위와 같이 세팅하고 Generate Project를 누르면 zip 파일이 다운로드 됩니다. 이 다운로드된 zip 파일을 압축해제 하여 원하는 디렉토리에 위치합니다. IntelliJ를 실행하고 File -> Open를 클릭합니다. 압축해제한 프로젝트를 클릭하고 OK를 선택합니다. * 유의할 점은 디렉터리 아이콘에 IntelliJ가 마크가 표시 되어있는 디렉터리를 클릭해야합니다. 위와 같이 상당히 빠르게 ..
Git을 사용하던 중 마스터 브랜치에 문제가 생겼을 경우 대처법을 소개한다. # 마스터 브랜치를 이전 마스터로, 현재 브랜치를 마스터로 변경 $ (staging) git checkout master $ (master) git branch -m old-master $ (old-master) git checkout staging $ (staging) git branch -m master # 현재 브랜치에(마스터) 강제로 푸시한다. $ (master) git push origin master -f # 브랜치의 이름을 다시 원상태로 복구한다. $ (master) git branch -m staging $ (staging) git checkout old-master $ (old-master) git branch ..