전체 글74 Firebase로 로그인 코드 Vercel로 배포중 오류들 메모 1. Application error: a client-side exception has occurred while loading webtoonnet-n4bh2y2oh-zermzerms-projects.vercel.app (see the browser console for more information). 원인 : 이건 배포는 성공했는데 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).배포된 환경에서 api키가 유효하지 않아서 발생해결 : → Vercel → Project → Settings → Environment Variables에서 key value 기입 2.Error occurred prerendering page "/_not-fo.. 2025. 12. 13. Framer-motion 애니메이션 몇개 메모 속성들initial={{opacity: 0, y: -100}}처음엔 안보이고(opacity : 0) 화면 위쪽에서 시작(y:-100)initial={{opacity: 0, y: 100}}처음엔 안보이고(opacity : 0) 화면 아래에서 시작(y:100)initial={{opacity: 0, x: -100}}처음엔 안보이고(opacity : 0) 화면 왼쪽에서 시작(x:-100)animate={{opacity:1, y:0 또는 x:0}}완전히 보이고(opacity:1) 원래 위치로 이동(y:0 또는 x:0)whileInView={{ opacity: 1, y: 0 }}화면에 요소가 보일 때 애니메이션 실행exit={{ opacity: 0, y: -100 }}컴포넌트 사라질 때 위로 사라지는 애니메이션vi.. 2025. 12. 10. Tailwind 메모 정리2 flex 부분flex-col세로로 정렬justify-center items-center중앙 정렬flex-wrap공간 부족시 줄바꿈justify-start주축 시작 부분에 정렬justify-end주축 끝 부분에 정렬justify-between동일한 간격으로 정렬(양 끝에 붙임)justify-around동일한 간격으로 정렬(양쪽에 동일한 간격 뛰움)justify-evenly동일한 간격으로 정렬(양쪽 간격과 내용간격 같이 뛰움) text 부분text-center글 중앙정려font-boldfont 굵게leading-몇line-height 모서리 둥굴게: rounded-몇 padding : p-몇 / pt=padding-top / pb=padding-bottom / pr, pl / py(padding-to.. 2025. 12. 10. Cross Site Scripting(XSS) XSS란 무엇인가?공격자가 웹 페이지에 악성 스크립트(주로 자바스크립트)를 주입해서 피해자(브라우저)에서 실행되도록 하는 취약점이다. 이 스크립트는 공격자가 의도한 동작(세션 탈취, 페이지 변조, 피싱, 키로깅 등)을 수행할 수 있다. 중요한 점은 스크립트가 피해자 브라우저에서 해당 웹사이트의 출처(origin) 로 실행된다. 그래서 쿠키·로컬스토리지·DOM 접근 권한을 가진다(단, HttpOnly로 설정된 쿠키는 JS에서 읽을 수 없다). 공격 종류 및 방법 1. Stored (Persistent) XSS 말 그대로 지속적으로 피해를 입히는 XSS 공격이다. 위의 그림을 보면, 해커는 웹 애플리케이션에서 XSS 취약점이 있는 곳을 파악하고, 악성스크립트를 삽입한다. 삽입된 스크립트는 데이터베이스에 .. 2025. 9. 22. Find, indexOf, FindIndex 차이 배열 요소의 위치를 찾고자 하는 경우 인덱스를 반환하는 Array.prototype.indexOf(element)배열 요소의 내부 객체 내용물과 일치하는 위치를 찾고자 하는 경우는 인덱스를 반환하는 findIndex(callback) 배열 요소의 내부 객체 내용물과 일치하는 값을 찾고자 하는 경우 첫번째 값을 반환하는 find(callback) 2025. 9. 19. 콜백함수, Promise, Async/await / Ajax, Fetch, Axios 콜백함수함수에 매개변수로 전달되는 함수주로 비동기 작업의 결과를 처리할 때 사용function fetchData(callback) { setTimeout(() => { const data = '데이터 도착'; callback(data); }, 1000);}fetchData((result) => { console.log(result); // "데이터 도착"});단점콜백 함수 안에 콜백 함수가 들어가 콜백 지옥에 빠질 수 있음복잡함, 가독성 떨어짐 Promise비동기 작업의 성공과 실패를 작업하는 객체콜백 지옥을 해결하기 위해 나옴then, catch, finally 를 사용해 결과를 처리const fetchData = () => { return new Promise((resolve, re.. 2025. 9. 9. 이전 1 2 3 4 ··· 13 다음