프로젝트

개발자인 친구(FrontEnd개발자)와 그 친구의 친구(BackEnd 개발자)와 함께 내 생에 첫 외주 프로젝트를 진행했다.이번 글에서는 첫 외주를 진행하며 내가 느낀 경험을 정리하듯이 작성할 예정입니당 프로젝트를 진행하며프로젝트는 온라인 쇼핑몰의 백오피스 웹이며, 사용자가 N 플랫폼의 쇼핑 및 플레이스 서비스에 등록한 목록들의 관리가 주된 목적이였다. 처음 기획안을 봤을때는 "아이 뭐, 어려울줄 알았는데 괜찬네?ㅋ" 라는 반응이였지만, 이러한 생각은 그리 오래가지 못했다. 첫 번째 시련. feat_데이터_차트나는 데이터를 2차원 배열 형식 차트 테이블 컴포넌트를 개발을 담당했다. 단순한 차트 테이블이 아닌 입력할 수 있는 필드가 있는 컴포넌트이며, 입력시 입력한 문자열의 길이만큼 필드의 너비가 넓어져야..

프로젝트에서 2차원 표 형식의 테이블에 input 태그를 이용해 값을 렌더링하는 부분이 있었다. 이 부분에서 수정이 가능해야 한다는 기능 요구가 있었다.그래서 각 input 태그의 onChange 속성에 핸들러 함수를 할당했지만 한번 입력하면 포커스아웃되는 이슈가 있었다.{ tableData.map((data, idx) => { return ( { data.map((info, i) => { if (info.type === 'checkbox') { return ( ) } ..

새로운 프로젝트를 진행하며 웹을 제공해줄 웹 서버를 구축해야했는데, 이전에 같이 프로젝트를 개발했던 팀원이 라즈베리파이를 이용해 웹 서버를 구축한 것을 봤다. 재미있을것 같아 필자도 라즈베리파이를 이용해 웹 서버를 구축할 예정이다.물론 저수준 웹서버이지만, 그래도 서버를 구축을 경험, 서버비 절약(AWS의 프리티어 기간이 끝나 악덕한 비용을 본 경험이....)을 위해 진행할 예정이다.  위의 사진과 같은 흐름으로 통신이 이루어질 것이다. 위 과정에서 라즈베리파이를 웹 서버로 이용하기 때문에 외부 IP로 파일을 내보내는 과정이 필요하다. 이러한 경우 3가지 과정이 필요하다.라즈베리파이의 내부 IP 고정IP 포트포워딩라즈베리파이에서 DB 및 nodejs 등의 설치 및 테스트 내부 IP 고정우선 라즈베리파이를..

Kaplay 라이브러리를 이용해 게임 기능을 구현했습니다. 웹 게임 만들기를 도와주는 Kaplay 라이브러리 사용Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that ma58cjdcns99.tistory.com 개발을 하던 도중 다른 페이지에 갔다가 다시 게임페이지에 돌아오니..... 에러가 발생했다...위의 자료를 보면 페이지 이동후 다시 게임을 플레이할 때, 비이상적인 속도를 갖으며 텍스트가 검은색으로 나타나는 에러가 발생한다. 원인을 두..

Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that makes it easy to create games. Is the successor of KABOOM.JS.kaplayjs.com 기존 코드에 적용const GamePlaying = ({ canvasWidth, canvasHeight }: GamePlayingPropsInterface) => { const canvasRef: RefObject = useCanvas(canvasWidth,..

Canvas API란 Javascript와 HTML의 canvas 엘리먼트를 통해 웹에 그래픽을 그리기 위한 수단이며, 애니메이션, 게임, 그래픽 및 비디오를 처리하기위해 사용됩니다. 이번 프로젝트는 2D 웹 게임을 만드는 프로젝트 이기에 웹에서 그래픽을 구현하고 Javascript를 이용해 그래픽을 조작할 수 있어야 하기 때문에 Canvas API는 중요 기술이였다. 우선 React 기반에서 Typescript를 사용해 컴포넌트 및 기능 개발을 진행할 것이다. 1. useRef() 리액트 훅을 이용해 요소에 접근React의 함수형 컴포넌트에서 요소에 접근하기 위해서는 리액트의 useRef() 훅을 이용해 접근해야 한다.const GamePlaying = ({ canvasWidth, canvasHei..