TIL

오늘은 JobFit이라는 웹사이트를 만들어보려고 기획하고 있었다.
역할분담으로 더 좋은 아이디어를 주셨다.
웹 크롤링, 분류, 템플릿 & 이력서, 지원 담당을 정해서 구성을 하라고 하셔서
처음으로 웹 크롤링을 하게되었다...아직 시작은 안 했지만 쫌 걱정이 많이된다. 가장 쉽다는데 난 잘 모르겟다....

소스 해석

document.addEventListener('DOMContentLoaded', () => {

HTML 문서가 다 로드된 뒤에 코드 실행

const container = document.getElementById('imageContainer');

imageContainer라는 id를 가진 요소(이미지 영역)를 가져옴

container.addEventListener('click', (e) => {

컨테이너를 클릭하면 아래 로직 실행

if (e.target.classList.contains('placed-sticker') ||
    e.target.classList.contains('resize-handle')) {
  return;
}

이미 배치된 스티커(placed-sticker)
또는 크기 조절 핸들(resize-handle)
👉 이걸 클릭한 경우는 스티커 추가를 하지 않고 종료

but!! if는 사용자가 스티커를 선택하지 않았다면? alert로 경고표시하기

const rect = container.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;

rect = 컨테이너의 위치와 크기 정보
clientX, clientY = 클릭한 화면 좌표
(좌표 - 컨테이너 시작점) / 크기
👉 클릭 위치를 0~100% 비율 값으로 변환

addSticker(selectedSticker, x, y, 1.0);

선택된 스티커를
(x, y) 위치에
크기 1.0으로 추가

=> 정리
스티커를 선택하고
이미지 영역을 클릭하면
클릭 위치에 스티커가 추가됨

프로젝트와 더 다양한 소스가 궁금하다면?
=> https://github.com/Yeseo0502/np_mypic