fullstack-study

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)과 향상된 도구 지원 등의 기능을 추가하여 더 강력하고 안전한 코드 작성이 가능하게 합니다. 타입스크립트를 배워야 하는 이유 타입 안정성 → 버그 감소JS의 동적 타입 특성으로 생기는 예기치 못한 에러 방지타입이 명확하니 주니어 개발자의 실수도 줄어듦안정된 코드 작성이 가능 → 생산성 향상협업에 유리자동 완성, 타입 추론, 문서화 없이도 코드 이해 가능VSCode에서 호버만 해도 함수/컴포넌트 정보 확인팀 작업 시 커뮤니케이션 비..

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)**이며, 요소를 추가, 삭제, 수정할 수 있습니다.정의: 대괄호 [ ]로 정의하며, 요소들은 쉼표로 구분됩니다.특징:가변형: 리스트의 요소를 변경, 추가, 삭제할 수 있습니다.중복 허용: 리스트 내에 중복된 값을 저장할 수 있습니..

React로 CRUD 원리 이해 투두 리스트 (To-do list) 애플리케이션을 기준으로 CRUD 작업을 설명. 투두 리스트는 할 일을 관리하는 간단한 애플리케이션으로, 각 작업이 CRUD 작업에 해당하는 방식으로 구현될 수 있습니다. CRUD는 Create, Read, Update, Delete의 약자Create: 새로운 할 일을 추가Read: 추가된 할 일 목록을 화면에 표시Update: 기존 할 일의 완료 상태를 변경 또는 할 일 내용을 수정Delete: 특정 할 일을 삭제 1. Create (생성)할 일을 새롭게 추가하는 작업입니다. 사용자가 새로운 할 일을 입력하면 이를 저장하여 화면에 표시하는 기능입니다. 예사용자가 입력창에 "React 공부하기"라는 할 일을 작성한 후, "추가" 버튼을 클..

함수  하나의 작업을 수행하기 위해 독립적으로 설계된 코드 블록입니다.함수는 재사용 가능하며, 코드를 더 깔끔하고 모듈화된 방식으로 작성할 수 있게 해줍니다.Python에서 함수는 def 키워드를 사용하여 정의됩니다  함수는 코드를 재사용 가능하게 하고, 프로그램을 모듈화하여 가독성을 높입니다.함수는 def 키워드를 사용하여 정의되며, 필요에 따라 매개변수와 반환값을 가질 수 있습니다.기본값을 가진 매개변수, 가변 인수, 그리고 여러 값을 반환하는 등의 다양한 기능을 지원합니다.Docstring을 통해 함수의 목적과 사용 방법을 설명할 수 있습니다.  형식 )def 함수이름(매개변수들): """Docstring: 함수 설명""" 실행할 코드 return 반환값  def: 함수를 정의하기 ..