fullstack-study

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: 함수를 정의하기 ..

용어  HTTP 상태코드400 Bad Request: 클라이언트의 잘못된 요청을 나타냄.403 Forbidden: 요청된 자원에 접근 권한이 없음을 의미.404 Not Found: 요청된 리소스를 찾을 수 없음을 의미.500 Internal Server Error: 서버에서 처리 중 에러가 발생함.SMTP Server메일 발송 기능을 담당하는 서버. 클라이언트가 이메일을 송신할 때 사용되는 프로토콜을 제공합니다.DNS Server사람이 읽을 수 있는 도메인 이름을 숫자 IP 주소로 변환해주는 서버입니다. 예: www.example.com을 192.0.2.1로 변환.Node.js 명령어node : Node.js 프로그램을 실행하는 명령어.npm init: 현재 프로젝트 폴더에서 npm 패키지를 초기화하는 ..

DML, DDL, DCL , 정규식 # DML: 데이터 조작 (SELECT, INSERT, UPDATE, DELETE)DML(Data Manipulation Language)은 데이터베이스 테이블의 데이터를 조작하는 데 사용되는 SQL 명령어입니다. 여기서는 DML에 속하는 명령어들의 문법과 예제를 각각 설명하겠습니다.  SELECT: 데이터를 조회하여 결과를 반환 (예: 조회된 직원 목록)INSERT: 새로운 데이터를 테이블에 삽입 (예: 새로운 직원 추가)UPDATE: 기존 데이터를 수정 (예: 특정 직원의 부서 업데이트)DELETE: 데이터를 삭제 (예: 특정 직원 데이터 삭제)  1. SELECT: 데이터 조회SELECT는 테이블에서 데이터를 조회하는 명령어입니다. 데이터를 선택해서 보여주며, 다..