본문 바로가기

분류 전체보기

 (101)
[짧은 팁]npm 업데이트 방법 npm 명령어를 사용해서 라이브러리 등을 다운로드하거나 할 때 버전과 관련해서 업데이트를 통해서 버전업을 해달라는 로그가 나옵니다 로그에는 현재 버전과 업데이트 버전을 알려줍니다 6.14.5 버전에서 6.14.8 버전으로 업데이트를 해달라는 로그입니다 "npm install -g npm" 명령어를 사용하면 버전업이 됩니다 성공적으로 패치되었습니다 6.14.8 버전 패치에 대한 상세 정보는 아래 링크로 확인 가능합니다 https://github.com/npm/cli/releases/tag/v6.14.8 Release v6.14.8 · npm/cli 6.14.8 (2020-08-17) BUG FIXES 9262e8c88 #1575 npm install --dev deprecation message (@san..
UI/UX 디자이너들이라면 들어봤다는 피그마 UI/UX 디자인을 할 때 사용하는 프로그램들이 많이 있습니다 이번에 소개할 피그마의 경우 범용성 좋고 템플릿도 많아서 사용자가 사용하기에 매우 편리합니다 구글에서 "피그마"를 검색합니다 첫 번째 상단의 사이트에 접속합니다 아래의 링크를 통해서 바로 피그마의 공식 홈페이지로 이동할 수 있습니다 https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 홈페이지에 접속하면 기본적으로 영어로 되어있습니다 피그마를 이용하는 방법은 두 가지가..
리액트 보일러 프로젝트 - 3 post방식으로 입력한 데이터 처리 만들기 body-parser 회원가입을 할 때 아이디, 비밀번호 등의 정보를 입력하는데 정보를 우리 쪽에서 받기 위해서는 프로젝트에 "body parser"를 설치해야합니다 프로젝트 경로에 열린 cmd창에서 npm install body-parser --save 명령어를 입력합니다 이전에 install을 해서 위와 같은 로그가 나왔습니다 package.json 파일의 dependencies에 body-parser가 생성된 것을 확인할 수 있습니다 index.js 파일에서 app.get('/', (reqm res) => res.send('Hello World!')) 아래에 새로운 코드를 작성합니다 app.post로 post 방식으로 구현합니다 /register 경로에 접속할 경우 실행합니다 {} 안의 코드를 실행..
리액트 보일러 프로젝트 - 2 몽고디비 연결 2020/07/23 - [mongoDB(몽고)] - [mongoDB ] 몽고 DB 가입 및 생성하기 [mongoDB ] 몽고 DB 가입 및 생성하기 nongoDB 사이트 : https://www.mongodb.com/ The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud data.. happycodingdiary.tistory.com 몽고 DB를 연결 mongodb+srv://mongoria:@boilerplate.ggtbp.mongodb.net/?retryWrites=true&w=majo..
리액트 보일러 프로젝트 - 1 노드다운 받기 리액트 보일러 프로젝트를 만들기 전에 Node.js를 설치해야 합니다 설치 방법은 구글에 "nodejs"를 검색하면 사이트가 나옵니다 Node.js 다운로드 Node.js 사이트를 클릭하면 아래와 같은 사이트로 이동합니다 여기서 왼쪽의 LTS 버전을 다운로드합니다 LTS는 오른쪽 현재 버전보다 안정적인 버전이라고 생각하면 됩니다 다운로드한 후 확인하는 방법입니다 윈도우에서 cmd 창을 실행하고 "node -v"을 입력하면 설치된 노드 버전을 확인할 수 있습니다 설치된 것을 확인했습니다 프로젝트의 경로에 폴더부터 만들고 싶은 경우 "mkdir 폴더명" 입력하면 경로에 폴더가 생성됩니다 프로젝트를 만들 폴더의 경로에 들어가서 "npm init" 입력합니다 cmd창에 여러 가지 문구가 뜨지만 엔터로 넘어갑니다..
[벽돌깨기]html 캔버스로 게임 만들기 - 8(점수 추가와 승리 조건) 블록에 대해 점수를 부여하고 블록을 없애면 점수(scroe)가 오르는 것을 구현합니다 점수 점수를 만들기 위해서 변수 score를 만들고 0을 기본값으로 정해줍니다 var score = 0; drawScore() 함수를 만들어서 점수 표시를 만들어줍니다 drawScore는 화면에 점수를 보여주는 함수입니다 function drawScore() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Score: "+score, 8, 20); } font는 css속성과 동일합니다 글씨 크기 16px로 만들고 글씨체를 Arial로 설정합니다 ctx.fillText("Score: "+score, 8, 20); 부분을 통해서 점수가 변경되면 점수가..
[벽돌깨기]html 캔버스로 게임 만들기 - 7(벽돌 충돌감지) 만든 벽돌들 사이로 공이 빠져나가는 모습이 보입니다 공과 캔버스는 충돌처리가 되어있지만 벽돌은 충돌처리가 없습니다 그래서 공이 벽돌들을 그냥 지나치고 있습니다 충돌 감지를 통해서 공과 벽돌(블록)이 부딪히면 벽돌이 사라지는 것을 구현해보겠습니다 블록 충돌 감지 반복문을 통해서 블록들이 공과 충돌했는지 확인해주는 함수를 만듭니다 function collisionDetection() { for(var c=0; c collisionDetection() 함수는 충돌 감지하는 함수로 주석처리된 calculations 부분에서 충돌했을 경우 해당 블록을 어떻게 처리할지 결정합니다 패들(Paddle)때와 마찬가지로 공의 좌표와 블록의 좌표가 겹치는 여부에 따라서 충돌 여부가 결정됩니다 충돌 조건은 아래와 같은 4가지..
[벽돌깨기]html 캔버스로 게임 만들기 - 6(벽돌 만들기) 벽돌깨기란 이름이 무색하게 벽돌이 등장하지 않았습니다 2차원 배열을 통해서 여러 개의 벽돌을 구현할 예정입니다 벽돌 만들기 var brickRowCount = 3; var brickColumnCount = 5; var brickWidth = 75; var brickHeight = 20; var brickPadding = 10; var brickOffsetTop = 30; var brickOffsetLeft = 30; 각각 벽돌 배열 행의 수, 열의 수, 벽돌의 가로길이, 세로 길이, 벽돌이 서로 닿지 않게 하기 위한 패딩 캔버스의 끝 벽에 닿지 않기 위한 오프셋(간격 기능)입니다 벽돌을 for문을 통해서 생성합니다 행과 열에 지정한 수만큼 벽돌이 서로 닿지 않게 일정한 간격을 두고 생성됩니다 var br..
[벽돌깨기]html 캔버스로 게임 만들기 - 5(게임 오버) 게임 오버 기능을 구현하는 방법으로 지금까지 만든 게임은 게임 오버 조건이 없어서 끝이 없습니다 캔버스의 아래 방향에 닿으면 게임 끝나는 것을 조건으로 구현해보겠습니다 게임 오버 기능 구현 게임이 끝날 수 있게 아래 방향에 했던 충돌 처리 로직을 조금 바꿔서 게임 오버 기능을 구현합니다 if(x + dx > canvas.width-ballRadius || x + dx canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } 위, 왼쪽, 오른쪽은 그대로 두고 아래 방향의 조건만 수정합니다 if(y + dy < ballRadius) { dy = -dy; } else if(y + dy..
[벽돌깨기]html 캔버스로 게임 만들기 - 4(패들과 키보드 조작) function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } 공의 움직임의 구현이 끝났습니다 이제는 패들(Paddle)을 통해서 공의 움직임을 바꿀 수 있게 패들을 만들고 만든 패들을 키보드 조작을 통해서 움직일 수 있게 하도록 하겠습니다 패들(Paddle) 만들기 패들은 공의 움직임을 바꿔주는 용도로 크기가 정해져 있습니다 막대기 모양으로 일정한 너비와 높이를 가지고 있습니다 var paddleHeight = 10; var paddleWidth = 75; v..

티스토리툴바