개발자 지망생의 블로그

안녕하세요~ 회사 다니느라 오랜만에 포스팅하네요. 준비하던 자바스크립트 게임 개발 강의가 오픈되어 홍보차 글을 씁니다 🥳 여러분은 '뱀파이어 서바이벌'이 자바스크립트로 개발된 게임이라는 것을 아시나요? 심지어 뱀파이어 서바이벌의 경우 게임 개발자는 단 한 분이라는 것..! 유명한 게임 엔진인 유니티, 언리얼을 쓰지 않더라도 충분히 게임을 개발할 수 있습니다! 비전공자에 웹 프론트엔드만 공부하던 저도 일주일만에 뱀파이어 서바이벌을 간단히 클론코딩할 수 있었기 때문이죠 😎 제 강의에서 뱀파이어 서바이벌을 함께 클론해보며 HTML5 게임엔진인 Phaser 3와 JavaScript를 활용해 게임을 개발하는 과정을 배우실 수 있습니다. 웹 프론트엔드, 백엔드 또는 다른 개발 분야를 공부하며 JavaScript(E..

[JS] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (2) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. pure HTML로 짠 내용은 이전 포스팅을 참고하시면 된다. [HTML] 파일과 데이터를 모두 bo..

React 프로젝트를 하다가 다음과 같은 오류가 있었다. 동영상을 재생해보면 사이드바(왼쪽)와 내용(오른쪽)의 연결이 이상한 것을 확인할 수 있다. 페이지 구조는 위와 같다. chosenIndex는 DashBoard 컴포넌트의 state이다. SideBar의 메뉴를 클릭하면 setChosenIndex가 작동하도록 되어 있어, 그 메뉴에 해당하는 내용을 보여주는 getSideBarContent(chosenIndex)의 리턴값이 적절히 바뀌어야 하는데, 적절히 바뀌지 않았다. 맨 처음에만 상품 목록이 제대로 표시되었고, 메뉴 버튼을 누르면 각각에 맞는 내용이 표시되어야 했는데 흰 화면만 떴다. 수정 전 코드를 살펴보자. (관련 있는 코드만 남겨두었다.) // DashBoard.js export const D..

드림코딩 엘리 - 자바스크립트 강의 #6 class (붕어빵틀) template, 청사진 declare once no date in object (팥붕어빵, 슈크림붕어빵, etc.) instance of a class created many times date in Object-oriented programming class: template object: instance of a class JavaScript classes introduce in ES6 syntactical sugar over prototype-base inheritance 1. Class declarations class Person { // constructor constructor(name, age) { // fields this..

드림코딩 엘리 - 자바스크립트 강의 #4 Function fundamental building block in the program subprogram can be use multiple times performs a task or calculates a value 1. Function declaration function name(param1, param2) { body... return; } one function === one thing naming: doSomething, command, verb e.g. createCardAndPoint → createCard, createPoint function is object in JS 2. Parameters primitive parameters: pa..