Peer Dependencies란 무엇인가? Peer dependencies는 특정 패키지가 정상적으로 동작하기 위해 다른 패키지의 특정 버전이 프로젝트에 존재해야 하는 경우에 사용됩니다. 보통 라이브러리나 플러그인이 **호스트 패키지**(예: React)와 긴밀하게 연결되어 있을 때 필요합니다.Peer dependencies는 해당 패키지가 독립적으로 설치되지 않고, **호스트 패키지와의 버전 호환성을 사용자에게 맡기는 것**이 특징입니다. 예시로 이해하기: `custom-cursor-react`라는 패키지가 있다고 가정해 봅시다. 이 패키지는 React를 기반으로 작동하므로, 개발자는 프로젝트에 React가 설치되어 있어야 한다고 가정합니다.이때, `custom-cursor-react`는 자신이 **..
분류 전체보기
`@extend`와 `@mixin`은 SCSS에서 스타일을 재사용하기 위한 두 가지 주요 방법입니다. 이 두 가지 방법은 스타일 코드의 유지보수와 재사용성을 높여주지만, 각각의 사용 방식과 성능에 차이가 있습니다. 아래에서 두 방법의 실제 성능 차이와 사용상의 장단점을 비교해 보겠습니다. ### 1. **`@extend`의 특성 및 성능** `@extend`는 선택자 간에 **스타일을 공유**하도록 해줍니다. 이를 통해 중복 코드를 제거할 수 있지만, **CSS의 구조**에 영향을 미칩니다. - **장점**: - **코드 중복 제거**: 여러 클래스가 동일한 스타일을 공유할 때 중복된 스타일 정의를 피할 수 있습니다. - **간결한 코드**: `@extend`를 사용하면 특정 스타일을 다른 셀렉터..
1. 세션(Session)이란?정의세션은 사용자가 웹사이트를 방문하고 있는 동안 서버에서 사용자 정보를 저장하는 방법입니다.세션은 서버에 저장되며 사용자가 로그인하거나 특정 동작을 수행할 때, 서버는 세션을 사용해 사용자를 식별하고 유지합니다.특징서버 측 저장 : 세션 정보는 서버에 저장되므로 보안성이 높습니다.유효 시간: 세션은 일정 시간이 지나면 만료됩니다. 이 유효 기간은 서버 설정에 따라 다릅니다.식별자 : 세션 ID는 클라이언트 측(브라우저)에 저장되고, 이 세션 ID를 통해 서버는 클라이언트의 세션 정보를 조회합니다.로그인 상태 유지 : 주로 로그인 상태 유지와 같은 사용자 상태를 관리하는 데 사용됩니다.작동 과정 1. 사용자가 웹사이트에 접속하여 로그인 시도. 2. 서버는 사용자를 인증..
코드HTML 1 2 3 4CSS.scroll-container { height: 100vh; /* 부모 컨테이너가 화면 전체의 높이를 차지하도록 설정 */ overflow: auto; /* 스크롤이 가능하도록 설정 (세로 방향 스크롤) */ scroll-snap-type: y mandatory; /* 세로 방향(y축)으로 스냅 효과를 강제 적용 (페이지처럼 넘기기) */}.scroll-area { scroll-snap-align: start; /* 각 스크롤 섹션이 스냅될 때 시작 지점에서 정렬되도록 설정 */} 참고문서 🎨 스크롤을 부드럽게 - Scroll Snap 속성CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치..
아래 내용은 Mysql 설치 및 데이터베이스 생성이 완료되었다는 가정하에 진행합니다. 시퀄라이즈란?Sequelize는 Node.js의 ORM(Object-Relational Mapping) 라이브러리로, SQL 쿼리를 작성하지 않고 JavaScript 코드로 데이터베이스 작업을 수행할 수 있습니다. Sequelize 설정패키지 설치npm install sequelize sequelize-cli mysql2 Sequelize 초기화Sequelize CLI를 사용하여 프로젝트를 초기화합니다.이 명령어는 config, models, migrations, seeders 폴더를 생성합니다.npx sequelize-cli init 데이터베이스 설정config/config.js 파일에서 데이터베이스 설정을 변경..
https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EC%9B%90%EC%8B%9C-%ED%83%80%EC%9E%85--string-number-%EA%B7%B8%EB%A6%AC%EA%B3%A0-boolean Documentation - Everyday Types언어의 원시 타입들.www.typescriptlang.org 원시 타입stringnumberboolean 배열ex) [1,2,3]=> number[] 모든 타입any 사용법변수에 대한 타입 표기let myName: string = "Alice";하지만 대부분의 경우, 타입 표기는 필요하지 않습니다.가능하다면 TypeScript는 자동으로 코드 내의 있는 타입들을 추론하고자..
https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html Documentation - The BasicsTypeScript를 배우는 첫 걸음: 기본 타입.www.typescriptlang.org 그래서 JS보다 TS가 좋은 점이 뭔데?1. 실행 전에 오류를 잡아줌예를 들어 JS에서는 직접 기능들을 테스트하는 과정에서 발견할 수 있는 오류들(ex) 버튼 클릭시 데이터 관련 오류 발생)을 컴파일 과정에서 미리 발견할 수 있다.2. 타입을 지정함으로써 해당 타입의 자동완성 기능을 제공한다.위 이미지들에서 볼 수 있듯이 타입을 설정하면 TS가 해당 인수의 자료형을 알 수 있기 때문에 Date 객체에 맞는 자동완성 기능을 제공한다. 느낀점위 2가지만 ..
https://inpa.tistory.com/entry/VScode-%E2%8F%B1%EF%B8%8F-%EC%83%88%ED%8C%8C%EC%9D%BC-%EC%83%88%ED%8F%B4%EB%8D%94-%EB%8B%A8%EC%B6%95%ED%82%A4-%EC%84%A4%EC%A0%95
