📒개발 공부 노트

codepen.io 사이트에는 정말 대단한 사람들이 많은것같다...! 보다가 나도 만들어봐야징 하고 생각된것들이 있는데https://codepen.io/isladjan/pen/abdyPBw Parallax scroll animationThis was one of my earliest attempts at SVG parallax animation on CodePen, created for a GSAP competition. By using ScrollTrigger, I added layers of de...codepen.io이거랑 다른하나가 더있었는데 뭔지 못찾겠다 ㅠㅠ아무튼 요런 느낌으로다가svg에 이벤트를 줘서 스르륵 나타나게 해보려고 무료 이미지를 찾아서 받았다.. 무료 이미지는 역시 freepik이..

jQuery로 팝업 닫기 버튼에 .click()을 걸었는데, 아무 반응이 없다?분명 $("#btnClose").click() 이렇게 했는데 왜 안 되지? 버튼에 click() 이벤트를 등록했지만 동작하지 않음버튼은 Ajax 이후 동적으로 생성된 요소$("#btnClose").click(function () { $(".popup").removeClass("on");}); 원인 분석.click()은 문서 로딩 시점에 존재하는 요소에만 이벤트를 바인딩한다. 해결 방법 : 이벤트 위임 사용$(document).on("click", "#btnClose", function () {...})처럼 이벤트를 위임하면 해결된다.$(document).on("click", "#btnClose", function ()..

상황별 정리상황자식창에서 부모창 제어방법iframe 안에서window.parent.location.href = '/member/login';새 창 (window.open)window.opener.location.href = '/member/login'; 사용 예제 : 새 창에서 부모 로그인 페이지로 보내기if (window.opener) { // 새 창을 띄운 부모창이 존재할 때 window.opener.location.href = '/member/login'; window.close(); // 필요하면 자식창도 닫기} else { // 부모창이 없으면 자기 자신 이동 window.location.href = '/member/login';} 서버단 인터셉터에서 응답 내보낼땐 이..

npx create-next-app my-app 옵션 없이 실행하면 이렇게 묻는 질문들:TypeScript 쓸래?ESLint 적용할래?Tailwind CSS 쓸래?App Router (app 디렉토리 기반) 쓸래?src/ 디렉토리 구조로 할래?추가로 많이 설치하는 패키지mongoDBnpm install mongoose 환경변수파일.env.local 자주 쓰는 실행/빌드 명령어개발 서버 실행npm run dev프로덕션 빌드npm run build빌드 후 실행npm start타입 검사 (TS 사용 시)npm run type-check코드 린트 검사npm run lint 프로젝트 구조 예시 (App Router 기준)my-app/├── app/│ ├── page.tsx│ └── api/│ └..

if(code == 27){ $().removeClass();}를 적용하려고 하니 iframe에서 모달창을 부모로 띄웠을 때 ESC를 눌러도 사라지지 않고,한번 아무곳이나 클릭하면 사라지는 버그가 있었다. 곰곰히 생각해보니 iframe과 부모간의 문제라고 생각되서 gpt한테 물어봤더니역시나 focus가 어디에 되어있는지의 문제였다. 그래서 iframe이 불러오는 함수 가장 아랫부분에setTimeout(function () { window.focus(); document.activeElement?.blur();}, 50); 를 추가해 부모창으로 focus를 바꿔주니 정상적으로 동작했다. 😁

fetchfetch API를 사용하여 데이터를 비동기적으로 가져오는 코드AJAX와 같은 역할을 하지만, XMLHttpRequest 객체를 사용하는 기존의 AJAX 방식보다 더 간단하고 직관적인 방식 AJAX와 유사한 방식으로 데이터를 가져오지만, fetch는 최신 API로, Promise 기반으로 작동한다.# Promise는 비동기 작업을 반환값 으로 처리 fetch와 기존 AJAX 차이점 1. AJAX (XMLHttpRequest 사용):비동기적으로 데이터를 요청하고 받아옴.콜백 방식(비동기 처리가 콜백 함수로 이루어짐).// 콜백 방식으로 처리fetchData(function(err, data1) { if (err) return console.error(err); processData(data1,..