전체 글

`@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

서버 컴포넌트란?서버 컴포넌트는 서버 측에서 렌더링되는 컴포넌트입니다.주로 서버에서 직접 데이터를 가져오거나, 비동기 작업을 수행한 후 HTML을 생성하여 클라이언트로 전달합니다.필자의 주관적 이해 : 주문이 들어오면(페이지 입장) 망치(JS)로 작업(데이터 가져오기 등) 후 작업물(완성된 HTML)만 보내줌렌더링 위치서버주요 특징클라이언트에 전달되는 HTML을 서버에서 미리 생성하기 때문에 클라이언트에서 실행되는 JavaScript 코드가 필요하지 않습니다.데이터 가져오기와 같은 무거운 작업을 서버에서 처리하여 클라이언트의 부하를 줄입니다.클라이언트 측의 초기 로딩 시간을 줄일 수 있습니다.서버에서만 접근 가능한 리소스나 환경 변수 등을 안전하게 사용할 수 있습니다.사용자가 자주 변화하지 않는 정적 콘..