SVG 파일을 사용할 때 stoke(외곽선)의 두께를 고정해야 하는 경우가 있다. 예를 들면 지도에서 2px값의 외곽선을 그려넣은 도로가 있는데 사용자가 지도를 zoom 했을 경우, 외곽선도 같이 확대되어 두께가 달라지면 곤란하다. 그림판 같이 도형을 넣고 색상을 바꿀 수 있는 프로그램을 개발하고 있었는데, 외곽선 두께에 대한 이슈가 발생했다. 왼쪽의 도형의 세로 길이를 늘리면 오른쪽 도형과 같이 외곽선의 두께가 일정하지 않게 된다. 이럴때는 'vector-effect'의 속성을 'non-scaling-stroke'으로 변경해주면 된다. 안에 있는 에 style="stroke-width: 5px; vector-effect: non-scaling-stroke;" 스타일 속성을 넣어주었다. 그 결과, 가로로..

상황: 배열을 console.log를 통해 chrome 개발자 도구에서 값을 찍으려고 했다. NodeList라는 배열에 총 두개의 childDiv가 들어간 것을 볼 수 있었는데 '▶'를 눌러 펼쳐보면 length가 1이고, childDiv가 하나만 찍혀있다. 오른쪽 상단의 'i' 네모상자에 마우스로 갖다대면 "value below was evaluated just now" 라고 hover message가 뜬다. 이유: 이렇게 뜨는 이유를 찾아본 결과, 스택오버플로우에 의하면 객체를 console.log를 통해 보는 것은 비동기적으로 실행이 되는데, console은 객체의 레퍼런스를 동기적으로 받지만 해당 객체가 expand되기 전까지는 객체의 속성들을 보여주지 않는다. 만약 객체에 console에 찍히기..

자바스크립트 공부를 하려다가 Lydia의 자바스크립트 시리즈를 우연히 보게 되었고, 공부도 할 겸 영문으로 된 그녀의 글을 하나하나 번역을 했다. https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif ✨♻️ JavaScript Visualized: Event Loop Oh boi the event loop. It’s one of those things that every JavaScript developer has to deal with in o... dev.to 뒤로 갈 수록 글이 점점 더 길어져서 포기할까도 했지만.. 후 오기로 번역을 끝냈다! (최대한 잘 읽히도록 번역했는데 번역오류가 있으면 얘기해주세요😩) 글을 쓰면서 느낀건 자바스트립..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#syntax 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 🖍 Introduction 자바스크립트로 코드 작성을 할 때, 우리는 흔히 다른 작업들에 의존하는 작업들을 처리해야하는 경우가 있다. 이미지를 받아서 압축하고, 필터를 입히고, 저장해야한다고 가정을 해보자. 제일 먼저 해야하는 일은 편집할 이미지를 받는 것이다. getImage 함수로 이를 실행할 수 있다. 이미지가 성공적으로 로트된 후에 이를 resizeimage 함수로 전달할 수 있다. 이미지가 ..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! ES6은 generator functions(제너레이터 함수)를 소개했다. generator functions는 무엇일까? 먼저 기존에 자주 썼었던 함수를 살펴보자. 이 코드에는 확실히 뭔가 특별하지는 않다. 그저 4번 로그를 찍는 평범한 함수일 뿐이다. 이를 호출한다면, 이렇게 나올 것이다. "하지만 왜 당신은 나의 5초의 시간을 이 지루하고 평범한 함수를 보는 것에 낭비하게 만들었나요?"라고 물을 수 있..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 아래의 코드를 보자 : const name = "Lydia" const age = 21 const city = "San Francisco" function getPersonInfo() { const name = "Sarah" const age = 22 return `${name} is ${age} and lives in ${city}` } console.log(getPersonInfo()) 우리는 name, age, city 변수들의..