텍스트를 치면 유니코드가 변하는 작업

Question

텍스트를 치면 유니코드가 변하는 작업

조회수 367회

unicode

1

싫어요

안녕하세요. 코린이, 디자이너, 생활코딩 독학 4주차 질문자 입니다.

먼저 질문에 명쾌한 도움을 받고, 부끄럽지만 다른 문제를 해결하기 위해 질문합니다.

현재 저는

텍스트를 쳤을때 유니코드 값이 마구 변하는 html을 만드는 작업을 하고 있습니다. (https://github.com/HinnnaHinnna/my-first-website/blob/main/con6.html) (https://hinnnahinnna.github.io/my-first-website/con6)

교수님께서 샘플로 p5에디터에서 코드를 짜주시고 공유해 주셨는데요. (https://editor.p5js.org/yangminha/sketches/VXKDgyAMF)

문제가 되는 것은

교수님이 짜주신 샘플코딩이 p5 에디터에서는 작동이 되는 것이 데스크탑 경로로 가져오면 loading.. 이라는 문구만 뜨고 작동이 되지 않습니다. 교수님이 짜주신 코딩을 데스크탑에서 각각의 파일로 만들어도 똑같이 loading.. 이라고 뜹니다..(전에 경우에는 샘플코드를 데스크탑에서 복사해서 파일을 열면 샘플은 그대로 작동했는데요.이번에는 샘플도 작동하지 않습니다..) 서체 때문인것 같은데.. 해결 방법을 모르겠습니다. (github.com에 NanumGothic.ttf 폰트가 올라가지를 않는데.. 폰트 파일이라서 인가요? 아니면 잠깐 오류인건지..)
교수님이 짜주신 코드를 불러오는 함수값을 정확히 몰라서 인것 같습니다. 아래는 제가 짠 코드에 교수님이 짜신 코드중에 맞는게 아닐까 생각한 함수값을 넣었는데요.

<div id= "article" onfocus="draw(i);">야

이게 맞는 함수를 썼는지도 모르겠고.. 이상하게도 저 article 에 자바스크립트가 적용이 되어야 하는데 다음줄에 자바 스크립트가 따로 적용이 되어 나와서요..

보시고 정말 정말 .. 부탁드리겠습니다..

HinnnaHinnna 20 points

2022-05-19 21:53:02에 작성됨

댓글 입력

score 2 · Accepted Answer

안 맞는 것을 지적하자면 한둘이 아니니, 맞는 것을 이야기해 보겠습니다. 왜 내 코드는 안 되고 빌어먹을 교수님 코드는 될까요? 교수님의 sketch.js에서 이것저것 다 지우고 핵심만 보겠습니다.

let str = '헬로우'; // 총 3글자
function draw() {       // 어떤 인자도 받지 않는 draw() 함수는 다음 일을 합니다.
  let unicode = '';     // 화면에 새로 그릴 텍스트를 공갈로 하나 만들어 둡니다.
  for (var i = 0; i < str.length; i++) {
    // 이 시점에서 str[i]는 '헬', '로', '우' 각 글자에 해당합니다. 왜 그런지 모른다면... javascript for라고 구글에 쳐서 반드시 공부해 주세요.
    let unitmp = str[i].charCodeAt(0).toString(16); // 각 글자의 유니코드 고유값을 얻습니다.
    let uniint = parseInt(unitmp,16) + 1;           // 그 고유값에 1을 더해서, 다음 글자의 유니코드 고유값을 알아냅니다.
    unicode += String.fromCharCode(uniint);         // 방금 알아낸 uniint를 가지고 다음 글자를 얻어서, 화면에 새로 그릴 텍스트에 덧붙입니다.
  }
  // 이 시점에서 '헬로우'는 '헭록욱'으로 바뀌었을 것입니다.
  str = unicode;       // 새로 그릴 텍스트가 결정되었으니 그걸 가지고 현재 글자를 대체합니다.
  text(str, 100, 240); // 글자를 화면에 그립니다.
}

자 이제 역으로 질문 드릴께요.
교수님의 코드는 해야 할 일을 제대로 하고 있는데, 질문자님의 코드는 어떤가요? 해야 할 일은 하고, 그밖의 일은 전혀 안 하는, 그런 코드가 맞나요?

장얼의 "부럽지가 않어" 가사 전체에 이 짓을 하려면, str은 '#article'이어야 할까요 아니면 (div#article.innerText인) "야 너네~" 일까요? "나눔고딕 폰트"는 이 일을 하는 데 있어서 얼마나 반드시 꼭 필요한/영향을끼치는 요소인가요? (혹시 '유니코드 조작하기'라는 일과는 사실 별 관계 없는 요소 아닌지요?) draw(i)를 했을 때 i는 draw() 실행 과정에서 쓸모가 있을까요 없을까요? 애초에 교수님의 index.html에 body 태그는 1개이고 이 사이트 소스보기를 해봐도 body 태그는 1개인데 질문자님의 index.html에 body가 2개인 건 좀 이상하지 않나요?

응용 진도가 너무 빠르기는 한데 아무튼 양민하 교수님의 샘플 위주로 연구하면서 천천히 하나씩 다시 해보세요! 건투를 빕니다.