수업

[ study ] 웹 게임을 만들며 배우는 react

내가 기억하려고 올리는거라 내용이 조금 빈약할 수 있음 #2.8 ~ 3.7 학습 내용 바벨을 설치해서 react 파일을 웹이 읽을 수 있도록 만드는 과정 terminal에 babel/core을 설치 : 기본적인 바벨. 최신 문법을 바꿔주는 것. babel/preset-env : 우리 문법을 환경에 맞게 바꿔주는 것 babel/preset-react : jsx를 지원해줌 babel/babel-loader : 바벨과 웹펙을 연결해준다. reloading: 새로고침. 기존 데이터가 사라짐 hot-reloading : 기존 데이터를 유지하면서 화면을 새로고쳐주는 것 react에서 map을 돌릴 때는 유니크한 key가 항상 필요하다 key에 i를 넣고 숫자를 하나씩 올리며 주입해주면 다음에 성능 최적화를 할 때 ..

[드림코딩 : browser101] 게임 만들기 실전 2 🎇

새로운 js 파일을 만들어서 스파게티 코드 탈출을 노렸다 수업을 한번 듣고 다시 만들어본 파일이라서 엘리님의 코드를 많이 참고했다. 역시 나 혼자 한번 해보고 수업을 들으니까 코드 전개가 더 쉽게 이해되고 이런 방법이 있었구나! 놀라기도 한다. 동생이 흉작이라고 이름지어준 사진 밑으로는 새로운 js 파일 * 깃허브 링크를 올리기에는 아직 부끄러워서 내용만 복붙 "use strict"; const gameStartBtn = document.querySelector(".game__startBtn"); const playShape = ``; const stopShape = ``; const gameTime = document.querySelector(".game__time"); const ground = do..

[드림코딩 : browser101] 게임 만들기 실전 1 🍝

HTML 일단 게임 화면이 보이는 창과 시작 버튼. 시간 버튼. 남은 당근의 개수 가 필요할 것이다. HTML 0:10 10 + .game 안에 bug와 carrot이 나올 공간 박스를 마련해주었다( 아래 삽입) CSS background-position: center; background-size: cover; background-repeat: no-repeat; 이렇게 하나하나 쓸 필요 없다 background: url(img/background.png) center/cover no-repeat; background를 이렇게 편하게 모아서 쓸 수 있다. 편의를 위해 ground에 background color을 주고 진행했다. JS 해야 할 일 1. 시작 버튼 - 버튼을 누르면 버튼의 모양이 바뀐다 ..