캐러셀 인터랙션 캐러셀은 서비스의 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식 (swiper) 📍 인터랙션 옵션 설정 Trigger > on drag 📍 프로토타입 인터랙션이 연결된 모습 오버플로우 스크로링 인터랙션 오버플로우 스크롤링은 화면 내에서 좌우로 스크롤이 된다. 스...

컴포넌트와 인스턴스 컴포넌트 : 재사용 가능한 UI 요소 인스턴스 : 원본 컴포넌트 복제한 오브젝트 컴포넌트가 바뀌면 인스턴스도 함께 바뀜 인스턴스가 변경되면 컴포넌트와 다른 인스턴스에 영향 없음 원본 컴포넌트의 속성을 변경해도 이미 수정된 속성은 영향 없음...

디자인 토큰 만들기 사용하는 색상, 폰트 등의 스타일 값 저장해두는 토큰 설정한 Style을 다른 Draft에도 적용하기 위해 디자인 토큰 플러그인을 사용 깃허브와 동기화 기능으로 협업에 도움 토큰 만드는 법 바깥 프레임 선택 후, Local styles 클릭 이름 옆에 / 입력하고 옆에 입력하면 그룹화 Token 플러...

일주일동안 프로젝트하느라 밀린 수업 노트를 다시 쓸 예정이다 ! 오늘부터 day34부터 조금씩 쓰면서 지난 프로젝트 회고도 함께하면 좋을거같다. 오늘은 미니 프로젝트끝나고 새로운 강사님이 오셨다 디자인 수업 끝에 포트폴리오 하나가 나올 수 있다고 하셔서 기대가 된다. 아주 직관적인 UI/UX에 대한 설명 UI (User Interfac...

Kakao OAuth를 통한 로그인 시퀀스 준비 카카오 개발자 센터(https://developers.kakao.com/)로 가서 내 애플리케이션에 카카오 로그인 기능을 활성화 하고 REST API 키 가져 오기 카카오 로그인 기능 활성화 방법 1) 내 애플리케이션 > 제품 설정 > 카카오 로그인 : 활성화 설정 => ON...

Hash & Salt Salt : 사용자마다 고유한 난수를 생성하여 해싱할 때 추가 Hashing : 단방향 암호화 방식으로 저장된 비밀번호를 보호 목적: 데이터 무결성 검증 및 보안을 위해 해시 값에 추가적인 무작위 데이터(Salt)를 더하는 것 해시는 주어진 데이터를 고정된 길이의 값으로 변환하는 방식 같은 입력값이면 항상...

📌 장바구니 기능 (로그인 인증이 필요한 기능) 1. DB 테이블 생성 CREATE TABLE cart ( email VARCHAR(50), prodcode INT, quantity INT, PRIMARY KEY (email, prodcode) ); 같은 사용자가 동일한 상품을 여러 번 담을 경우, 수량이 증가 2. Cart...

JSESSIONID가 요청 시 자동으로 포함되지 않는 문제와 해결 방법 프론트엔드 (:5500)에서 백엔드 (:8080)로 로그인 요청을 보낼 때 JSESSIONID를 받아 저장했지만, 이후 요청에서 쿠키가 자동으로 포함되지 않는 문제 발생. 방안 1. 구조 변경 프론트엔드를 백엔드 서버에서 서빙하여 동일한 도메인/포트를 사용하도록 변경. ...

XSS (Cross-Site Scripting) 취약점 XSS(크로스 사이트 스크립팅, Cross-Site Scripting)는 웹 보안 취약점 중 하나로, 공격자가 악성 스크립트를 웹사이트에 삽입하여 사용자의 브라우저에서 실행되도록 만드는 공격 기법 “사용자에게 친절해질수록 해커에게도 친절해질 수 있다!” 👉 보안을 위해 퉁명스러운 에러 ...

Cookie Cookie는 서버와 클라이언트가 지속적으로 데이터를 교환할 수 있도록 만들어진 작은 데이터 조각이다. 서버가 사용자의 웹 브라우저에 Cookie를 전송하면 브라우저는 이를 저장하고, 이후 Backend API 요청 시 자동으로 쿠키 데이터를 함께 전송한다. Cookie의 문제점 트래픽 증가: HTTP Header의 Set-...