javascript16 prettier 설정하기. prettier란 js는 생각보다 정렬에 자유도가 높다. 누구는 tab를 사용할 수도, 누구는 space를 사용할 수도, 너비가 2칸일 수도, 한 줄에 최대 80자까지 등등 사람마다 코딩 스타일이 모두 다르다. 본인의 코딩 스타일이 일관되지 않을 때도 있다. 이런 경우에 강제적으로 정해놓은 규칙에 맞게 정렬을 도와주는 프로그램이 prettier이다. 세팅 각설하고 세팅을 시작해보자. prettier를 받는 방법에는 두가지 방법이 있다. 1. npm으로 설치하는 방법 2. vscode의 익스텐션으로 설치하는 방법 여기서 우리는 vscode 익스텐션으로 편하게 설치해보려고 한다. prettier 익스텐션 설치 1. 왼쪽의 extension, 한글로 확장을 클릭한다. 2. prettier를 검색한다. 3. P.. 2021. 7. 26. 배열 렌더링 (key값이 필수인 이유) 배열 렌더링 리액트에서 배열을 렌더링할 때에 굳이 하나하나 렌더링하지 않고 map을 통하여 한번에 렌더링할 수 있다. 하지만 비교를 위해 먼저 하나하나 렌더링 해보자. import React from 'react' function User({user}) { return ( {user.name} ) } function Test() { const arr = [ { id: 1, name: 'mijeong', }, { id: 2, name: 'hyeonkim', }, { id: 3, name: 'kilee', } ] return ( ) } export default Test 하나하나 렌더링하는 것에 대한 불편함을 느껴 보았으니 map을 사용하여 렌더링해보자. map은 배열의 요소를 바꾸고 새롭게 복사한 배열을 .. 2021. 7. 25. 개발자 Velopert의 교습서 보고 따라하기 지인의 추천으로 velopert라는 사람을 알게 되었고 이 분의 교육 리액트 튜토리얼을 보고 따라하기로 하였다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 리액트를 공부하려는 사람은 함께 공부해보도록 하자. 사실 시작한지는 꽤 되었지만 이제야 블로그에 시작한다고 올린다. ㅎㅎ 2021. 7. 25. Canvas을 사용하여 벽돌깨기 게임 만들기9 (마우스로 패들 조종하기) 마우스로 paddle을 컨트롤 해보자 먼저 마우스의 움직임을 감지하기 위해 addEventListener()를 사용하자. document.addEventListener("mousemove", mouseMoveHandler, false) 위에서 사용한 mouseMoveHandler()를 정의해주자. function mouseMoveHandler(event) { let relativeX = event.clientX - canvas.offsetLeft if (relativeX > 0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth / 2 } } event.clinetX에는 전체 뷰포트를 기준으로 x값을 반환한다. 따라서 canvas의 좌측끝이.. 2021. 7. 18. 이전 1 2 3 4 다음
