072DATA

프로젝트를 진행하면서 간단하게 모달창을 구현해 보았다 라이브러리를 설치하여 모달 창을 만드는 방법도 있었지만 직접 만들어 보고 싶었다! 모달 컴포넌트import { ModalTypeC } from "@/types/modal";import React from "react";import styled from "styled-components";const Modal: React.FC = ({ isModalOpen, closeModal, children }) => { if (!isModalOpen) return null; return ( e.stopPropagation()}> {children} );};export default Modal; 먼저 Modal ..

오늘은 TypeScript를 학습하는 과정에서 TodoList를 만들었으며 그 과정을 기록해도록 하겠습니다. 프로젝트 세팅 TypeSript 프로젝트 생성은 생략하며, 먼저 API 요청을 하기위해서 JSON 서버를 Install 합니다npm install json-server  설치를 완료한 뒤 root 경로에 db.json 파일을 추가하여 키와 값을 입력합니다, 형식은 아래와 같습니다!{ "todos": [ { "id": "1", "text": "할 일 1", "completed": false } ]}  또 원할한 프로젝트 구현을 위하여 json-server 명령어를 .pakage.json의 scripts에 추가합니다 "scripts": { //... ..

타입이란?타입은 값의 속성이나 메서드를 참조하는 방법 주요 타입boolean: 참/거짓을 표현number: 숫자 값string: 문자열 값Array: 배열object: 객체any: 아무거나 -> 치트키 같은 존재 사용하면 사실상 js가 되어버림커스텀 타입 선언타입은 기본 제공 타입 외에도 사용자 정의 타입을 선언할 수 있음 type Profile = { id: string; name: string; age: number; isMarried: boolean;} 함수의 타입 선언함수의 매개변수와 반환 값에도 타입을 선언할 수 있음 function add(a: number, b: number): number { return a + b;}const sum: number = add(1, 2);  타입 별..

타입스크립트란?타입스크립트 -> 자바스크립트를 기반으로 한 정적 타입 언어  타입스크립트의 주요 특징  정적 타입 시스템 -> 프로그램이 실행되기 전에 모든 변수와 함수의 타입을 확인하고 고정하는 방식 컴파일 타임에 모든 변수와 표현식의 타입을 확인하고 고정하여 런타임 오류를 방지함함수의 매개변수와 반환 값에 타입을 명시하여 잘못된 타입의 데이터가 전달될 경우 컴파일러가 이를 감지하고 오류를 발생시킴자바스크립트의 상위 집합:자바스크립트의 모든 기능을 포함하고 있기에 자바스크립트 코드가 타입스크립트에서 그대로 동작함자바스크립트로 트랜스파일되며 모든 브라우저에서 실행될 수 있는 자바스크립트 파일을 생성함향상된 개발 경험:코드 자동 완성, 실시간 오류 감지, 리팩토링 지원 등 다양한 도구를 통해 개발 경험을 ..