복잡한뇌구조마냥

📌 개요지난 글에서는 Supabase에 댓글 테이블을 만들고 인증 유저와의 외래 키도 연결해보았습니다.이번 글에서는 Next.js에서 Supabase를 연동해 데이터 정보를 조회하는 방법을 소개합니다.1️⃣ Supabase JS SDK 설치npm install @supabase/supabase-js2️⃣ 환경 변수 설정 (.env.local)// .env.localNEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.coNEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key🔐 주의NEXT_PUBLIC_ prefix는 브라우저에서 사용 가능함**서비스 키(service_role)**는 절대 클라이언트에 쓰지 말 것 (노출 안되게 ..

Web에서 PDF 생성 방법Native CSS print rule 활용방법: media query의 print 를 활용해서 pdf 생성장점: 외부 라이브러리 필요없이 간단하게 pdf를 생성단점: 인쇄 버튼을 눌러 저장한 후 pdf를 생성하는 방식으로, 업로드에 필요한 url을 생성할 수 없음. 프린트 화면에서 그 다음 단계로 넘어가야 하는 것이 단점.DOM Screenshot방법: 현재 보이는 화면에 대한 스크린샷을 찍어서 이를 pdf로 변환 (html ⇒ html2canvas ⇒ canvas 에 html의 스냅샷 추가 ⇒ jspdf ⇒ pdf)장점: 화면에 보이는 그대로 pdf를 찍어낼 수 있음. 사이즈가 고정되어 있고 어느 정도의 양식이 정해져 있는 문서를 생성하기에 유용단점: 화면 사이즈에 의존하고..

1. XSS ( Cross - Site Scripting [ 교차 사이트 스크립팅 ] )공격자가 웹 페이지에 악성 코드를 삽입하여 공격하는 방법ex) script 문구 삽입 ( ) 2. Angular의 XSS 보안 모델XSS 버그를 체계적으로 차단하기 위해 Angular는 기본적으로 모든 값을 신뢰할 수 없는 것으로 취급기본값으로 위험요소를 삭제하고 escape 처리가 되도록 되어 있음. 1) escape 자바스크립트의 escape() 함수는 알파벳과 숫자, 특수문자(*, @, -, _, +, ., /)를 제외한 모든 문자를 16진수로 인코딩하는 함수1바이트 문자는 %XX형태로 변환되며, 2바이트 문자는 %uXXXX형태로 변환됨ex) 공백문자 : %20 등등HTML에서는 HTML 엔티티로 escape됨..

웹페이지의 정보를 브라우저와 검색 엔진에 전달하는 중요한 수단이 바로 **메타 태그(meta tag)**입니다. 영역에 위치하며, 눈에 보이지 않지만 웹사이트 품질과 검색 노출에 큰 영향을 줍니다.📌 메타 태그란?는 HTML 문서의 메타데이터(문서 자체에 대한 정보)를 정의합니다.대부분 태그 안에 위치합니다.브라우저 설정, 검색 엔진 최적화(SEO), 소셜 공유 정보 등 다양한 용도로 사용됩니다.✅ 자주 쓰이는 메타 태그 종류1️⃣ 페이지 문자 인코딩 설정 페이지의 문자셋을 UTF-8로 설정 (한글 포함 다국어 호환)가장 먼저 작성해야 함 2️⃣ 반응형 뷰포트 설정모바일 대응에 필수화면 크기에 맞게 콘텐츠를 스케일 조정3️⃣ 페이지 설명 (SEO)검색 결과에 표시되는 페이지 설명 문구길이: 150자..

강의를 듣고 패턴을 각각 내 나름대로 해석해서 한줄 요약정리한 내용임.확실히 설계 단계에 고려해서 작성하면 코드가 효율적으로 작성될 수 있을 것 같다는 생각이 들었습니다.생성패턴 - 싱글톤 패턴 -- 한가지 기능을 수행하는 함수 - 추상 팩토리 패턴 -- 여러가지 방향을 가지고 있는 패턴 (특정 값에 따라 가지고 있는 기능을 수행 ex) 조건문에 따라 동작) - 팩토리 메소드 패턴 -- 특정 기능을 기반으로 동작하는 메소드를 타고 타고 동작하도록 만드는 패턴 (c -> b -> a 수행) - 빌더 패턴 -- 특정 기능을 위해 여러가지 동작을 나눠놓고 필요에 따라 추가해서 쌓아가는 패턴 (A.b-> A.c ->A.c 를 통해 A를 쌓아서 빌드업) 구조패턴 - 어댑터 패턴 -- 외부 요소를 거쳐서 특정 기능..

내가 QA는 아니지만 업무를 하다보면 QA를 맡게되기도하고 퍼블리싱도 하게되고.. 기획에도 일부 참여를 하게되는데, 다들 만들때마다 용어가 제각각이라서 UI에 맞는 명칭이 있는데 공통적으로 사용하면 좋을 것 같아서 정리를한다. 디자이너랑 협업할 때도 웹디자인을 메인으로 하는 디자이너아니여서 명칭이 얘기할 때마다 꼬이기도 하더라.. ㅠ 버튼사용자가 클릭할 수 있는 상호작용 요소입니다. 기능 실행, 화면 전환, 폼 제출 등에 사용됩니다.제출 GNB(Global Navigation Bar)사이트 전체를 아우르는 최상단 내비게이션 바입니다. 로고, 주요 메뉴 등이 포함됩니다. 홈 서비스 문의 LNB(Local Navigation Bar)특정 페이지나 섹션 내에서 세부 메뉴를 안내하는 내비..

PDF 파일 생성을 하다가, 특정 페이지만 바꿔서 사용해야하는 경우가 생겼다.파일로 생성된 2개의 파일을 어떻게 코드를 통해서 합치지라는 생각에 여러 시도를 해보았다. PDF파일을 Array Buffer로 변환하여, 각 파일의 페이지를 불러와서 필요한 페이지를 기존 PDF파일에 추가하는 방식으로 구현했는데 아래의 코드를 참고하면 좋을 것 같다./** * PDF Merge * 원본 PDF에 추가 PDF를 뒷페이지로 추가하는 로직 * @param pdfArrayBuffer1 원본 PDF * @param pdfArrayBuffer2 추가할 PDF */ async mergePDFs(pdfArrayBuffer1: ArrayBuffer, pdfArrayBuffer2: ArrayBuffer): P..

UI를 개발하다 보면 긴 텍스트가 요소를 넘치는 경우가 생깁니다.이때 깔끔하게 "..." 말줄임표로 표시하려면 CSS의 text-overflow 속성을 사용합니다. text-overflow란?요소 안의 텍스트가 박스(컨테이너) 너비를 초과할 때, 어떻게 보여줄지를 결정하는 속성입니다.ellipsis 옵션을 사용하면 넘친 텍스트를 "..."으로 대체할 수 있습니다.기본 사용법 (한 줄 말줄임표).ellipsis { white-space: nowrap; /* 줄바꿈 없이 한 줄로 표시 */ overflow: hidden; /* 넘치는 부분 숨기기 */ text-overflow: ellipsis; /* 넘치는 부분을 "..."으로 표시 */}예시 HTML 이 텍스트는 너무 ..