KEEP CODING

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. JAX, 컴포넌트 생성, Props https://joylee-developer.tistory.com/106 생활코딩 React 강의 (3) - 컴포넌트, 다른 파일로 컴포넌트 분리하기 리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다. 이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수 joylee-developer.tistory.com 함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하..

Expo 다양한 기능을 제공해 리액트 네이티브 개발을 도와주는 도구이다. 장점 : 개발자의 편의를 돕는 도구를 사용할 수 있다. 단점 : expo에서 제공하는 기능 외의 네이티브 모듈을 추가로 사용할 수 없다. 리액트 네이티브 버전이 업그레이드 되도 expo가 업그레이드 되기 전까지는 그 기능을 사용할 수 없다. https://expo.canny.io/ Expo Feedback Give feedback to the Expo team so we can make more informed product decisions. Powered by Canny. expo.canny.io 위의 사이트에서 엑스포 로드맵과 피드백 내용을 확인할 수 있다. expo 프로젝트 만들기 * 원하는 운영체제의 모바일 디바이스가 있는..

리액트 네이티브란? 기본적으로 iOS 어플과 Android 어플은 다른 프로그래밍 언어로 만들어진다. 그래서 같은 어플인 것 같아 보이지만 따로 만들어야 했다. 그런데 React Native는 Javascript로 작성한 어플을 iOS와 Android에서 모두 사용할 수 있도록 변환해주는 프레임워크로 한 번의 개발로 두 운영체제에서 사용할 수 있는 어플을 만들 수 있다. 리액트 네이티브는 중간에서 Bridge(다리)역할을 한다. Native Thread Bridge(React Native) Javascript Thread iOS 혹은 Android UI 랜더링이 이뤄짐 두 Thread 사이에서 통신을 담당 Javascript 가 실행되는 공간 참고한 사이트 https://www.reactnative.gu..

처음 캔버스에 마우스로 그림을 그릴 땐 괜찮아보였다. 그런데 선의 굵기를 굵게해서 그리니까 선이 갈라져 있는 것 처럼 보였다. 곡선일 때 더심해보였는데, 이유를 몰라서 여러가지 캔버스 line의 설정에 대해 알아보았다. 그러다가 선 모양 (line style) 설정에 대해 알게됐다 lineWidth 선 두께 lineCap 선 끝 부분의 스타일 lineJoin 선이 만나는 모서리 스타일 lineCap의 기본값은 "butt"이고, lineJoin의 기본값은 "miter"이다 lineCap 설정값 lineJoin 설정값 그래서 이 두 가지 설정값을 변경시켜보았다. ctx.lineJoin = "round"만 설정해줘도 훨씬 선이 부드러워진다. 내가 만든 캔버스에는 혹시 몰라서 둘 다 "round"로 설정해줬다...

데스크탑 페이지에서는 아무런 문제가 없었는데 모바일 페이지에서는 키워드를 추가/제거하는 과정에서 이상한 점이 발견됐다. hover는 마우스가 개채 위에 올라갔을 때 적용되는 클래스이다. 데스크톱 사이트에서는 마우스 포인터를 따라 hover를 판단할 수있다. 모바일에서는 터치가 포인터 역할을 한다. 그런데 터치는 마우스가 클릭한 것 처럼 터치 이벤트는 전달되는데, 다른 터치 이벤트가 발생하지 않으면 그 위치에 있는 것으로 간주한다. 그래서 터치 후에 잘못된 hover 요소가 생기는 것이다. 모바일에서 잘못된 hover를 제거하기 위해서 미디어쿼리를 사용했다. 1 2 3 4 5 6 7 8 9 10 @media (min-width: 860px) { .keywordDeleteBtn:hover { backgrou..

github repository에 자료가 연동되어 있을 때 배포하는 방법이다! 1. gh-pages 패키지 다운로드 npm install gh-pages --save-dev 현재 위치가 react project 파일들이 있는 폴더인지 확인한 후 설치한다. 2. package.json 파일에 정보 입력 homepage property 추가 "homepage": "https://{github id}.github.io/{repository 이름}" script property에 predeploy, deploy 추가 "scripts": { ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } 모두 추가하고 나면 package.json파일이 이렇게 ..

페이지를 모바일에서도 사용할 수 있도록 레이아웃도 바꿨는데 터치가 안된다...! 알아봤더니 터치 이벤트는 mouse이벤트랑 다르다고 한다. 캔버스를 모바일 기기에서도 사용할 수 있도록 코드를 추가했다. 목표 핸드폰에서도 캔버스 사용하기 터치이벤트 터치 이벤트는 세 가지 종류가 있다. touchstart 화면에서 터치가 일어났을 때 발생하는 이벤트 touchmove 터치한 곳이 이동할 때 발생하는 이벤트 touchend 사용자가 화면에서 터치를 떼서 터치한 곳이 사라질 때 발생하는 이벤트 이 이벤트들을 mouse이벤트와 같이 addEventListener로 연결해야 한다. 1 2 3 canvas.addEventListener("touchmove", touchMove, false); canvas.addEve..

목표 지우개, 전체지우기, 저장하기 버튼 만들기 지우개 버튼 - 선의 색을 흰색(배경색)으로 바꾼다. 전체지우기 - 그려져 있던 모든 선을 지운다. 양말모양으로 자른 것은 남겨두어야 한다. 저장하기 - 캔버스에 그린 그림을 파일로 다운로드한다. HTML 캔버스 아래 버튼을 만들고, 적당한 id를 부여한다. 1 2 3 4 5 6 7 지우개 전체지우기 두짝그리기 저장하기 Colored by Color Scripter cs Javascript 지우개 버튼 1 2 // 지우개 버튼 eraserBtn.addEventListener("click", () => ctx.strokeStyle = "white"); cs 지우개버튼은 클릭했을 때 선의 색만 바꿔주는 것으로 쉽게 만들 수 있었다. 화살표 함수를 사용했는데, ..

목표 크기 부분에 있는 슬라이더 객체를 이용해 선의 굵기를 조절한다. 요소 만들기 1 2 3 4 크기 Colored by Color Scripter cs 원하는 부분에 를 만들어준다. event 연결하기 1 2 3 4 5 6 7 8 9 const rangeInput = document.querySelector("#rangeInput"); // rangeInput rangeInput.min = 1; rangeInput.max = 20; rangeInput.step = 1; rangeInput.value = 5; rangeInput.addEventListener("change", e => ctx.lineWidth = e.target.value); cs rangeInput에 대한 기본적인 설정을 한다. 최소,..

사용할 수 있는 실 색깔을 늘여놓고 마음대로 조합하려고 한다. 그런데 색의 종류가 너무 많아서 어떻게 할까 고민하다가 일일이 body영역에서 만들지 말고, script영역에서 함수를 이용해 만들어주었다. 일단 색들을 넣을 를 만들고, querySelector로 선택해둔다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 울소프트 겨울정원 럭스체크 나만의디자인 const paletteSets = document.querySelectorAll(".palette"); Colored by Color Scripter cs 색상 코드를 모두 colorSet(숫자) 배열에 저장해두고, 그 배열들을 colorSets라는 배열에 다시 저장한다. 맨 마지막에..