JavaScript 쿠키 · Canvas 폼 원호 완전 정리

 

 

HTML Canvas

JavaScript 쿠키 · Canvas 폼 원호 완전 정리

방문 카운트 쿠키와 폼 입력 기반 Canvas 원호 그리기를 데이터 변환 관점에서 정리합니다.

0 오늘 분석할 코드

<script>
function GetCookie(name) {
  let pairs = document.cookie.split(";");
  for (let i = 0; i < pairs.length; i++) {
    let pair = pairs[i].trim();
    let unit = pair.split("=");
    if (unit[0] == name) return unescape(unit[1]);
  }
  return null;
}

function SetCookie(name, value, expireDate) {
  let cookieStr = name + "=" + escape(value) +
    ((expireDate == null) ? "" : ("; expires=" + expireDate.toUTCString()));
  document.cookie = cookieStr;
}

function draw() {
  let startAngle = document.getElementById("startAngle").value;
  startAngle = Math.PI * parseInt(startAngle) / 180;
  let endAngle = document.getElementById("endAngle").value;
  endAngle = Math.PI * parseInt(endAngle) / 180;
  context.arc(x, y, radius, startAngle, endAngle, orientation);
  context.stroke();
}
</script>

document.cookie브라우저 쿠키 문자열을 읽거나 저장하는 API입니다.

split()문자열을 기준 문자로 나누어 배열로 만듭니다.

trim()문자열 앞뒤 공백을 제거합니다.

Date현재 시간과 만료 시간을 계산하는 객체입니다.

toUTCString()쿠키 expires에 넣을 날짜 문자열을 만듭니다.

prompt()사용자에게 문자열 입력을 받는 대화상자입니다.

arc()캔버스에 원 또는 원호 경로를 추가합니다.

parseInt()문자열을 정수로 변환합니다.

---

1 두 예제의 연결점

방문 카운트 쿠키 예제는 브라우저에 값을 저장하고 다시 읽는 흐름을 보여줍니다. 폼으로 원호 그리기 예제는 사용자가 입력한 값을 Canvas API의 인수로 바꾸는 흐름을 보여줍니다.

• 쿠키 예제는 name과 count 값을 저장합니다.
• 원호 예제는 x, y, radius, angle, orientation 값을 읽습니다.
• 둘 다 문자열 입력을 필요한 형태로 해석하는 과정이 중요합니다.
• 쿠키는 document.cookie, 원호는 context.arc가 핵심 API입니다.

---

2 GetCookie 함수

document.cookie는 여러 쿠키를 세미콜론으로 이어 붙인 문자열입니다. GetCookie는 이 문자열을 split(';')로 나눈 뒤 이름이 일치하는 값을 찾아 반환합니다.

1. document.cookie를 세미콜론 기준으로 분리합니다.
2. 각 조각의 앞뒤 공백을 trim으로 제거합니다.
3. 이름과 값을 = 기준으로 분리합니다.
4. 찾는 이름이면 값을 반환하고, 없으면 null을 반환합니다.

---

3 SetCookie 함수

SetCookie는 name=value 문자열을 만들고, 만료 날짜가 있으면 expires 속성을 덧붙입니다. 마지막에 document.cookie에 대입하면 브라우저가 쿠키를 저장합니다.

구성	의미	예시
name	쿠키 이름	username
value	저장할 값	kim
expires	만료 날짜	1년 뒤
document.cookie	쿠키 저장 API	name=value; expires=...

---

 

반응형

 

4 방문 카운트 로직

처음 방문하면 username 쿠키가 없으므로 prompt로 이름을 받습니다. 이후 count를 증가시키고, username과 count를 다시 1년 만료 쿠키로 저장합니다.

• username이 null이면 첫 방문으로 봅니다.
• 이름 입력이 취소되면 기본 이름을 사용합니다.
• count는 매 방문마다 1씩 증가합니다.
• expire.setTime으로 1년 뒤 만료 시간을 계산합니다.

---

5 쿠키 API 주의점

주의점	설명
로컬 파일 실행	브라우저 정책에 따라 쿠키 동작이 제한될 수 있습니다.
escape/unescape	오래된 함수라 encodeURIComponent가 더 권장됩니다.
경로 path	지정하지 않으면 현재 경로 기준으로 저장됩니다.
개인정보	민감한 값은 일반 쿠키에 그대로 저장하지 않습니다.

---

6 폼으로 원호 그리기

원호 폼 예제는 x, y, radius, startAngle, endAngle, orientation, lineWidth, strokeStyle 값을 읽어 context.arc에 전달합니다. 각도는 사람이 입력하기 쉬운 degree에서 Canvas가 쓰는 radian으로 변환합니다.

startAngle = Math.PI * parseInt(startAngle) / 180;
endAngle = Math.PI * parseInt(endAngle) / 180;

---

7 arc 인수 정리

인수	폼 값	설명
x	x input	중심 x좌표
y	y input	중심 y좌표
radius	radius input	반지름
startAngle	시작각도	radian으로 변환
endAngle	끝각도	radian으로 변환
orientation	select	반시계 방향 여부

---

8 select 값을 boolean으로 바꾸기

select의 option value는 문자열입니다. 원문은 orientation == "true" 비교로 실제 boolean true 또는 false로 바꿉니다.

let orientation = ori.options[index].value;
orientation = (orientation == "true") ? true : false;

이 변환을 하지 않으면 문자열 "false"도 조건식에서 참처럼 취급될 수 있어 방향 판단이 헷갈릴 수 있습니다.

---

9 degree와 radian

사용자는 0도, 90도, 180도처럼 degree가 익숙하지만 Canvas arc는 radian을 사용합니다. 그래서 입력값에 Math.PI를 곱하고 180으로 나눕니다.

degree	radian	의미
0	0	오른쪽 방향
90	Math.PI / 2	아래쪽 방향
180	Math.PI	왼쪽 방향
270	1.5 * Math.PI	위쪽 방향
360	2 * Math.PI	한 바퀴

---

10 erase 함수

erase는 clearRect로 캔버스 전체를 지웁니다. 원호를 여러 번 그려 비교하고 싶으면 지우지 않고 계속 그릴 수 있고, 하나만 보이게 하려면 draw 시작 부분에서 clearRect를 먼저 호출하면 됩니다.

• 전체 지우기는 0, 0, canvas.width, canvas.height를 사용합니다.
• 배경색은 CSS 배경으로 다시 보입니다.
• 지우기 전 상태를 저장하려면 별도 배열이나 이미지 데이터를 사용해야 합니다.
• 여러 원호를 누적하려면 erase를 수동 버튼으로만 둡니다.

---

11 HTML 구조 개선

원문 폼 예제에는 body를 닫은 뒤 h3, form, canvas가 이어지는 구조가 있습니다. 브라우저가 어느 정도 보정하지만, 실제 작성할 때는 화면 요소를 body 내부에 배치해야 합니다.

학습용 예제에서는 동작하더라도, 정리 문서에서는 유효한 HTML 구조로 바꿔 이해하는 편이 좋습니다.

---

12 실전 개선 과제

과제	목표
쿠키 인코딩 교체	escape 대신 encodeURIComponent를 사용합니다.
path 추가	쿠키 저장 범위를 명확히 합니다.
원호 미리보기	입력 변경 시 자동으로 draw를 호출합니다.
채우기 옵션	fillStyle과 fill을 추가합니다.
각도 가이드	0, 90, 180, 270 버튼을 제공합니다.

---

M 자주 하는 실수

실수	문제	해결
쿠키 문자열을 그대로 비교	공백 때문에 이름 비교가 실패할 수 있습니다.	trim 후 name과 비교합니다.
만료일을 문자열로 직접 작성	브라우저가 해석하지 못할 수 있습니다.	Date와 toUTCString을 사용합니다.
degree를 arc에 바로 넣음	Canvas는 radian 단위를 사용합니다.	Math.PI * degree / 180으로 변환합니다.
select value를 boolean처럼 사용	문자열 false도 참처럼 취급될 수 있습니다.	"true" 비교로 boolean으로 바꿉니다.
body 밖에 폼을 둠	HTML 구조가 유효하지 않습니다.	폼과 캔버스를 body 내부에 배치합니다.

핵심 한 줄 요약

cookiedocument.cookie는 문자열이므로 분리, 공백 제거, 이름 비교 과정이 필요합니다.

arc폼의 degree 입력값은 radian으로 바꿔 context.arc에 전달합니다.

forminput과 select 값은 문자열이므로 숫자와 boolean 변환 지점을 명확히 둡니다.

Tags

#JavaScript#Cookie#document.cookie#Canvas#arc#form#Date#prompt#parseInt#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, Cookie, document.cookie, Canvas, arc, form, Date, prompt, parseInt, 티스토리