KEEP CODING

동기식과 비동기식 동기식(Synchronous) 하나의 작업이 시작하면, 마칠 때 까지 기다렸다가 다음 작업을 수행하는 방식 작업의 순서가 정해져있다 비동기식(Asynchronous) 하나의 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식 보통 위에서 아래로 코드를 읽어나가지만 늦게 시작한 작업이 먼저 마칠 수 있다 우리는 코드를 작성하고, 읽어나갈 때 작업이 당연히 동기식으로 이루어질 것이라고 생각한다. 하지만 프로그램은 이전 작업이 오래 걸린다고 기다려주지 않고, 다음 작업을 시작한다. 이런 방식때문에 시간이 오래 걸리는 작업을 프로그램 중간에 수행할 경우, 오류가 생기기 쉽다. 시간이 오래 걸리는 작업의 경우 주로 온라인상으로 통신해 작업을 수행하거나, 자료를 가져오는 경우이다. 가져온 ..

공부하는데 아래와 같이 작성된 코드가 있었다. const { user } = await signInWithEmailAndPassword(auth, email, password); 뒤의 signIn...을 통해 반환되는 것은 userCredential이라는 객체였다. 그 중에서 다른 정보는 필요없고 user만 필요했다. 이런 경우, { user } 에 userCredential을 할당하면 userCredential 내의 user항목만 user에 저장된다. 분해할당 이와 같이 객체나 배열의 값을 추출할 때 쉽게 사용할 수 있는 것이 분해할당이다. 객체의 분해할당 const { 프로퍼티명 } = 전체객체 여기에서 주의할 점은 좌항의 변수 이름은 우항의 전체 객체 내에 존재하는 프로퍼티명을 사용해야 한다는 것이..

Javascript에서 물음표를 사용하는데 왜 사용하는지 몰라서 전체적인 사용법에 대해 찾아봤다. Javascript에서의 ?(물음표) 1. 삼항 연산자 (Ternary Operator) 2. 선택적 연결 (Optional Chaining) 3. 무효화 합체 (Nullish Coalescing) 1. 삼항 연산자 (Ternary Operator / ? : ) 삼항 연산자는 if ... else를 대체하는 연산자이다. 첫 번째 항의 Condition이 True이면 두 번째 항을 실행하고, False이면 세 번째 항을 실행한다. if ... else로 작성한다면 아래와 같다. 1 2 3 4 5 if(Condition) { // True일 경우 실행 } else { // False일 경우 실행 } cs 삼항연..

Todo app을 만드는데 자료를 삭제하는 방법을 새롭게 알게되어 정리해봤다. 1. Array에 자료를 관리하는 방법 기존에 목록을 추가/삭제하는 방법은 아래와 같았다. 주로 Array형태로 자료를 저장/삭제했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Array 형태의 자료관리 // selectedKeywords = ['A', 'B', 'C'] // 체크박스에 체크한 항목 추가/해제한 항목 삭제 function handleClick(e) { const value = e.target.value; const checked = e.target.checked; if(checked) { // 키워드를 추가한 경우 props.onChange([...selectedKeywords, valu..

모바일 기기는 화면 크기가 천차만별이다. 그렇기 때문에 어떤 요소의 크기를 수치로 정해두면 기기별로 크기가 달라보일 수 있다. 이러한 문제점을 해결하기 위해 react-native에서는 Dimensions라는 API를 기본적으로 제공해준다. 1 2 3 4 5 import { Dimensions } from 'react-native'; // 화면 너비, 높이 구하는 방법 const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; cs Dimensions를 통해 현재 기기의 화면 크기를 알 수 있다. Input 양 쪽에 20px의 마진을 두고싶다면 아래와 같이 설정하면 된다. $..

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

페이지를 모바일에서도 사용할 수 있도록 레이아웃도 바꿨는데 터치가 안된다...! 알아봤더니 터치 이벤트는 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라는 배열에 다시 저장한다. 맨 마지막에..