fullstack-study

Grid  mdm바로가기      1. Container 속성Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.속성설명displayGrid 레이아웃 활성화 (grid 또는 inline-grid 설정).grid-template-columns열의 크기와 개수를 정의.grid-template-rows행의 크기와 개수를 정의.grid-template-areasGrid의 영역 이름을 정의.grid-templategrid-template-rows, grid-template-columns, grid-template-areas를 한 번에 설정.gap (또는 grid-gap)열과 행 간의 간격 설정.row-gap행 간의 간격 설정.column-gap열 간의 간격 설정.justify-items모든..

베리어블 프로토타입  # number      # String

nextjs 배포  배포 테스트 https://92dfba48.aaa-9su.pages.dev/ Create Next App 92dfba48.aaa-9su.pages.dev   1. 프로젝트 생성 npx create-next-app@latest  2. 깃 저장소 만들기 ( 테스트용 ) 3. 프로젝트 생성 저장소 올리기  4. cloudflare 가입 https://www.cloudflare.com/ko-kr/ 모든 곳을 연결하고, 보호하며, 구축합니다복잡성과 비용을 줄이면서 직원, 애플리케이션, 네트워크를 어디에서든 더 빠르고 안전하게 만듭니다.www.cloudflare.com  3. Workers 및 Pages  3. Pages  git 연결   4. 계정에서 사이트 배포  5.   6. 발드 설정 및..

기본 타입 1. unknown모든 타입의 슈퍼 타입으로, 모든 값이 할당될 수 있습니다.타입이 명확하지 않을 때 사용하지만, any와 달리 제한적입니다. 사용하기 전 명확한 타입으로 좁히는 타입 가드가 필요합니다. 2. any모든 타입을 허용하는 타입으로, 타입 검사를 건너뛰는 역할을 합니다.타입 안정성을 낮출 수 있으므로 가능한 사용을 자제하는 것이 좋습니다. 3. 기본 타입들null: null 값만 가질 수 있는 타입입니다.void: 함수가 값을 반환하지 않을 때 주로 사용되는 타입입니다.number: 숫자 타입이며, Number Enum을 포함합니다.bigint: 큰 정수를 표현하는 타입으로, 일반 숫자보다 큰 정수를 다룰 때 사용됩니다.boolean: true 또는 false의 불리언 값을 가지는..

TypeScript란? TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합(Superset) 입니다. TypeScript는 JavaScript의 모든 기능을 포함하며, 여기에 정적 타입 지정(Static Typing)과 향상된 도구 지원 등의 기능을 추가하여 더 강력하고 안전한 코드 작성이 가능하게 합니다.   TypeScript의  특징 정적 타입 지정 (Static Typing)TypeScript의 가장 큰 특징은 정적 타입을 지원한다는 것입니다. 변수, 함수의 매개변수, 반환 값 등에 타입을 명시하여 컴파일 시점에 타입 오류를 확인할 수 있습니다.예를 들어, 숫자만 받아야 하는 함수에 문자열을 전달하는 실수를 컴파일러가 미리 잡아주기 때문..

Next.js 란 Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등을 손쉽게 구현할 수 있도록 돕는 도구입니다. Next.js는 다양한 기능을 통해 웹 애플리케이션의 성능 최적화와 개발자 경험을 향상시키며, React를 확장하여 SEO 최적화, 빠른 로딩 속도, 서버와 클라이언트 간의 데이터 통신 간소화 등을 가능하게 합니다. 주요 기능파일 기반 라우팅: pages 폴더 내의 파일 구조만으로 라우팅이 가능해, 별도의 라우터 설정 없이 직관적으로 페이지를 구성할 수 있습니다.서버 사이드 렌더링(SSR): 서버에서 렌더링을 실행하여 초기 페이지 로딩 속도를 빠르게 하고 SEO를 강화합니다.정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 렌더링..

mbti 유형검사  MBTI(Myers-Briggs Type Indicator)는 심리 유형 이론을 기반으로 사람들의 성격을 16가지 유형으로 분류하는 성격 유형 검사입니다.  MBTI의 16가지 성격 유형MBTI 성격 유형은 4개의 차원에서 각 성향을 조합하여 총 16가지로 나눌 수 있습니다:E (외향) vs. I (내향)S (감각) vs. N (직관)T (사고) vs. F (감정)J (판단) vs. P (인식)각 MBTI 유형의 의미E (Extraversion, 외향): 외부 세계와의 상호작용을 중시하고 사람들과 교류하는 것을 좋아합니다.I (Introversion, 내향): 내면 세계에 집중하며 혼자만의 시간을 중요시합니다.S (Sensing, 감각): 현실적이고 사실적인 정보를 중시하며, 경험과 ..

반응형   1. styled폴더  - media.jsconst sizes = { mobile: '480px', tablet: '768px', desktop: '1024px',};export const media = { mobile: `(max-width: ${sizes.mobile})`, tablet: `(max-width: ${sizes.tablet})`, desktop: `(max-width: ${sizes.desktop})`,};  desktop: 2560pxlaptopL: 1440pxlaptop: 1024pxtablet: 768pxmobileL: 425pxmobileM: 375pxmobileS: 320px   2. import styled from 'styled-c..

React , Redux  이해  리액트(React)란?리액트는 페이스북에서 개발한 자바스크립트 라이브러리로, **사용자 인터페이스(UI)**를 구축하는 데 사용됩니다. 주로 단일 페이지 애플리케이션(SPA)을 개발하는 데 활용되며, 컴포넌트 기반 구조로 유지보수와 재사용성을 높입니다. 리액트의 주요 개념1. 컴포넌트(Component)리액트 애플리케이션은 컴포넌트로 구성됩니다. 컴포넌트는 UI의 일부분을 나타내는 독립적인 코드 블록으로, 재사용 가능한 구조입니다. 두 가지 종류의 컴포넌트가 있습니다:함수형 컴포넌트: 단순히 JSX를 반환하는 함수.클래스형 컴포넌트: React.Component를 상속받아 render() 메서드에서 JSX를 반환하는 클래스. (최근에는 함수형 컴포넌트가 더 많이 사용됨)..

리스트(List), 튜플(Tuple), 집합(Set), 딕셔너리(Dictionary)  컨테이너 자료형은 여러 값을 하나의 변수로 묶어서 저장할 수 있는 자료형을 의미합니다. 대표적인 컨테이너 자료형으로는 리스트(List), 튜플(Tuple), 집합(Set), 딕셔너리(Dictionary) 등이 있습니다.  1. 리스트 (List)리스트는 Python에서 가장 많이 사용되는 컨테이너 자료형 중 하나로, 여러 값을 순서대로 저장할 수 있습니다. 리스트는 **가변적(mutable)**이며, 요소를 추가, 삭제, 수정할 수 있습니다.정의: 대괄호 [ ]로 정의하며, 요소들은 쉼표로 구분됩니다.특징:가변형: 리스트의 요소를 변경, 추가, 삭제할 수 있습니다.중복 허용: 리스트 내에 중복된 값을 저장할 수 있습니..