개발자 지망생의 블로그

[JS, Phaser 3] 자바스크립트로 게임 개발하기 | 뱀파이어 서바이벌 클론코딩 2022 제주 웹 컨퍼런스에서 발표한 내용을 포스팅으로 정리합니다. 발표 자료는 해당 링크에서 확인하실 수 있습니다. 해당 컨퍼런스는 2022년 6월 2일~4일 동안 진행되었습니다. 저는 'JavaScript로 게임 만들어서 부자되기'라는 세션을 다음과 같은 내용으로 진행했습니다. 개발로 부수입 창출하기 Phaser 3 소개 및 주요 개념 뱀파이어 서바이벌(Vampire Survivors) 클론코딩 앞의 내용은 생략하고, 뱀파이어 서바이벌 클론코딩에 대해 자세히 정리해보려고 합니다. 뱀파이어 서바이벌 클론코딩 일단 제가 클론코딩해서 개발한 Meow Meow Fuzzyface를 한번 플레이해보고 오시면 좋을 것 같습니다...

[React] Side effect(사이드 이펙트)란? | useEffect React 공식 문서를 읽다가 사이드 이펙트(side effect)라는 표현을 처음 봐서 무엇인지 찾아보았다. 찾아보다 좋은 영어 글을 발견해서 번역하며 공부해보았다. 영어 원문을 읽고 싶으신 분은 맨 밑 reference에 있는 주소를 참고하시면 된다. 1. 왜 "useEffect"인가? 2018년에 코어 React hooks가 추가되었을 때, 많은 개발자들이 "useEffect"라는 이름에 혼란스러워했다. useEffect에서 "effect"가 의미하는 바는 무엇일까? effect는 "side effect"라는 함수형 프로그래밍 용어를 나타낸다. side effect가 무엇인지 이해하려면 먼저 순수 함수의 개념을 이해해야 한..

[React] 여러 개의 input의 onChange 한 번에 관리하기 로그인, 회원가입 페이지를 구현하면 여러 개의 input을 관리해야 한다. 회원가입 페이지에서 아이디, 비밀번호, 비밀번호 확인, 닉네임, ... 등등 여러 개의 input을 입력받는다고 생각할 때, 이를 모두 다른 state로 관리하는 것은 생각만 해도 코드가 지저분하다. // BEFORE function App() { const [id, setId] = useState(''); const [pw1, setPw1] = useState(''); const [pw2, setPw2] = useState(''); const [nickname, setNickname] = useState(''); const handleIdChange = (e..

[오픈소스] MDN 번역 기여하는 법 | 나도 이제 MDN Contributor! 🥳 MDN 문서 중 한국어 번역이 없는 페이지를 번역해서 Pull Request를 올렸는데, Merge 되어 해당 페이지의 한국어 페이지가 생겼다! 🙂👏 MDN 번역은 처음 해봤는데 가이드를 읽어봐도 좀 어려웠다. 까먹을 것 같아서 기록할 겸, 번역을 하고 싶은 다른 분들께 도움도 드릴 겸 포스팅으로 남겨둔다. 공식적인 가이드 링크는 다음과 같다. 1. https://github.com/mdn/translated-content/blob/main/docs/ko/guides/translation-guide.md 2. https://github.com/mdn/translated-content/issues/827 나는 거의 2번 ..

[React] useNavigate 슬래시 유무에 따른 차이 (React Router v6) 개인 프로젝트를 하다가 발견한 useNavigate 슬래시 유무에 따른 차이를 기록해보려 한다. 로그인 페이지에서 '회원가입' 버튼을 누르면 회원가입 페이지로 이동하도록 구현해야 했다. 로그인 페이지는 /login, 회원가입 페이지는 /join에 존재했다. function LoginPage() { const navigate = useNavigate(); return ( ... navigate('join')} /> {/* 1 */} navigate('/join')} /> {/* 2 */} ); } 1번과 같이 설정할 경우 도메인 뒤에 '/join'이 추가로 붙는다. 2번과 같이 설정할 경우 도메인 뒤에 있던 fil..

[React] GitHub Pages 배포 시 빈 화면만 뜨는 에러 | BrowserRouter, HashRouter - React Router renders a blank page - GitHub pages show blank page - BrowserRouter blank page 일주일 넘게 나를 괴롭힌 에러에 대해 기록해보려고 한다. 이 에러는 제목에 서술돼 있듯 React 프로젝트를 GitHub Pages로 배포할 때 겪은 에러이다. 나는 React 프로젝트를 처음 구축할 때 create-react-app을 사용하지 않고 babel, webpack 등을 직접 설치하여 프로젝트를 구성했다. 또한, GitHub Pages 배포 자동화를 적용해 GitHub에 push 할 때마다 배포가 자동으로 이루어..

[JS] 객체 프로퍼티 접근법과 식별자 네이밍 규칙 객체 프로퍼티 접근법과 식별자 네이밍 규칙에 대해 정리하려고 한다. 객체object는 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티property란 객체의 상태를 나타내는 값(data)이고, 메서드method는 프로퍼티를 참조 및 조작할 수 있는 동작(behavior)이다. 메서드도 결국 프로퍼티인데, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위하여 메서드라고 일컫는다. 객체 프로퍼티에 접근하는 방법은 크게 두 가지가 있다. 1. 마침표 표기법dot notation : 마침표 프로퍼티 접근 연산자(.) 사용 2. 대괄호 표기법bracket notation : 대괄호 프로퍼티 접근 연산자([ ... ]) 사용 오늘은 이 중 대괄호 표기법에 대해 ..

[CSS] 스크롤바 커스텀 | 스크롤바에 padding, margin 넣기 CSS로 웹페이지의 스크롤바를 커스텀하는 방법에 대해 알아보자. 사실 스크롤바에 padding, margin을 넣는 방법은 존재하지 않는다. 하지만 border를 사용해 padding, margin을 넣은 것처럼 보이게 만들 수 있다. 일단, 스크롤바는 위 같이 크게 막대와 배경 두 개의 요소로 이루어져 있다. 막대 부분은 thumb, 배경 부분은 track이다. 요소마다 스크롤바 디자인을 다르게 설정할 수 있다. -webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb의 3가지 가상 요소를 이용하면 해당 요소의 스크롤바를 스타일링할 수 있다. 3가지 가상 요소 이외..

[JS] 이벤트 객체의 target, currentTarget 차이 자바스크립트 Event 객체의 프로퍼티인 target, currentTarget의 차이에 대해 알아보자. target은 이벤트가 처음 발생한 DOM 요소, currentTarget은 발생한 이벤트가 등록된(이벤트 핸들러가 바인딩된) DOM 요소를 가리킨다. 가장 쉬운 click 이벤트를 예로 들면, target은 클릭이 일어난 바로 그 요소를 가리키며 currentTarget은 클릭이 일어난 요소부터 상위로 올라가며 이벤트 핸들러가 등록된 요소를 찾아 가리킨다. 이해를 돕기 위해 간단한 HTML 문서를 작성해보았다. 실행 화면과 코드는 다음과 같다. item1 item2two item3 ul { background-color: pink;..

[JS] 얕은 복사, 깊은 복사 차이 쉽게 이해하기 자바스크립트의 얕은 복사(shallow copy), 깊은 복사(deep copy)에 대해 쉽게 이해해보자. 이에 대해 이해하려면 먼저 자바스크립트의 원시 타입(primitive type)과 객체 타입(object/reference type)에 대해 이해해야 한다. 자바스크립트에서 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉜다. 원시 타입에는 Number, BigInt, String, Boolean, Null, Undefined, Symbol 7개의 타입이 있고, 그 외 모든 데이터는 객체 타입이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 반면에, 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값..