HTML5, CSS3, 자바스크립트 Javascript 등
자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) trail, tailLength 변수 만들기 뱀의 몸은 여러 개의 블럭으로 이루어져 있습니다. 뱀이 상하좌우로 움직일 때 이전의 위치들을 추적하는 것이 더보기…
자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) velocity 변수 추가 let positionX = 10, positionY = 10 const gridSize = 20, tileCount = 20 let velocityX 더보기…
자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) 스네이크 게임이란 고전게임으로 뱀이 여기저기를 돌아다니면서 사과(먹이)를 먹으면 뱀의 길이가 점점 늘어나고, 뱀이 꼬여서 몸이 부딪히면 게임 오버되는 더보기…
현재 주소(URL)의 쿼리 파라미터 알아내기 URL의 쿼리 파라미터란 아래 빨간색 박스처럼 ? 뒤에 지정하는 파라미터를 뜻합니다. 여러 개를 연결할 때는 & 를 씁니다. 여기서 uwasaKeyword 의 쿼리 파라미터는 무슨 값을 가지고 있는지 알고 싶다면 다음과 같이 입력합니다. // this.$route.query.[키이름] const uwasaKeyword = this.$route.query.uwasaKeyword 저 값을 콘솔로 출력하면 "미술" 이라는 결과가 나옵니다. 더보기…
https://github.com/ayaysir/movie-reactjs React(리액트)의 functional hook + Material UI 를 이용한 영화 정보 제공 사이트입니다. (주의: 입사용 과제테스트로 수행되었으며 불합격 통지를 받은 결과물입니다. 요구사항은 대부분 구현되어 있습니다.) 사용 기술 ReactJS React Hooks API Axios ES6+ JavaScript HTML CSS Material-UI 주요 기능 외부 API를 통해 영화 정보를 보여줌 무한 스크롤 (Infinite 더보기…
타입스크립트는 동적 자료형인 일반 자바스크립트를 자바(Java)같은 객체지향 언어에서 사용하는 정적 자료형을 사용할 수 있도록 도와주는 프로그래밍 언어입니다. 장점으로는 마이크로소프트가 관리하고 있기 때문에 점유율이 높고 안정적입니다. 협업에 있어 형변환 충돌로 인한 문제가 없어진다는 점도 있다고 합니다. 일반 웹 브라우저나 Node.js에서는 원래 지원을 하지 않으며, tsc 라는 타입스크립트용 컴파일러를 설치해야 합니다. 더보기…
1) 터미널에서 프로젝트 폴더로 이동한 뒤 npm에서 react-router-dom을 설치합니다. npm i react-router-dom –save 2) App.jsx 에서 <BrowserRouter> 태그쌍을 작성한 뒤 안에 라우팅 관련 정보를 작성합니다. <Route> 태그는 주소를 입력받으면 특정 컴포넌트로 이동합니다. exact는 정확히 이 path만 받아들인다는 의미이며 다른 주소는 적용되지 않습니다. 만약 exact를 사용하지 않는다면 /anyurl 등 모든 더보기…
이벤트 버블링 하위 요소의 이벤트가 상위까지 전달되는 현상입니다. 예를 들어 위의 그림에서 <a> 태그를 클릭했는데 <a> 태그에 걸려있는 이벤트가 실행되는 것에 더해 상위 요소 <li>, <ul> 에 걸려있는 이벤트까지 같이 실행되는 현상을 말합니다. 자바스크립트에서 이것을 방지하려면 event.stopPropagation()를 사용합니다. 아래는 이벤트 버블링이 적용되는 코드입니다. <a> 만 클릭해도 모든 이벤트가 발동됩니다. const 더보기…
먼저 상위(부모) 컴포넌트의 이름은 Topic, 하위(자식) 컴포넌트의 이름은 TopicSearch라고 가정합니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. Topic.vue (일부) <template> <div class=”topic”> <TopicSearch v-on:search=”doSearch” v-on:allOrder=”doAllOrder”/> </div> </template> 여기서 search. allOrder 는 나중에 this.$emit에서 사용할 이벤트 이름이며. doSearch, doAllOrder는 상위 컴포넌트에 있는 메소드 이름입니다. 왼쪽이 더보기…
자바스크립트 npm으로 만든 프로젝트에서 package.json의 정보 가져와 웹 페이지에 보여주는 방법입니다. package.json을 import문을 사용하여 불러오면 객체로 사용할 수 있습니다. 다른 json 파일도 마찬가지입니다. import React from ‘react’; import Container from ‘@material-ui/core/Container’; import packageJson from ‘./../../package.json’ const Home = () => { const dependencies = packageJson.dependencies const depElements = [] for(let 더보기…