[TypeScript] 타입 어노테이션과 추론

타입 어노테이션과 타입 추론1) 타입 어노테이션사용하려는 변수, 함수 등 옆에 : 기호와 함께 우리가 배운 선언 가능한 타입을 넣어주는 것어떤 값이 어떤 타입을 참조하고있는지 개발자가 ts에게 알려주는 행동 2) 타입 추론ts는 코드에서 타입을 명시하지 않아도, 컴파일러가 코드의 문맥을 통해 타입을 자동으로 추론한다.  타입 어노테이션의 필요성우리가 명시하지 않아도 ts는 타입을 추론할 수 있는데 왜 타입 어노테이션을 해야 할까? const subtract = (a: number, b: number) => { a - b;}; 위 함수는 아무것도 반환하지 않고, ts도 타입 추론을 통해 반환값이 void라는 것을 추론할 수 있다.하지만 아마도! 원하는 동작이 아닐 것이다. 우리는 a - b가 반환되길 바..

• format_list_bulleted TypeScript
• · 2024. 9. 24.
• textsms

[Typescript] 타입스크립트의 타입 선언

타입스크립트란?타입스크립트 = 자바스크립트 + 타입시스템- 정적 타입 시스템을 가지고있는 언어프로그램이 실행되기 전 컴파일타임에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식이를 이용해 프로그램의 많은 오류를 미리 발견할 수 있음 정적 타입 시스템의 장점1. 오류를 미리 발견할 수 있음- 실행하기 전 오류를 찾기 때문에 프로그램이 더 안정적으로 작동할 수 있음 2. 안정성- 잘못된 타입의 데이터를 사용하는 실수를 줄일 수 있음  JS와의 차이import React from 'react';const App: React.FC = () => { return ( Hello, World! This is a simple React component. );};export de..

• format_list_bulleted TypeScript
• · 2024. 9. 24.
• textsms

[Tanstack-Qeury / json-server] json-server에서 내림차순으로 정렬해 get 응답 받기

json-server를 이용해 프로젝트에 등록된 게시글들의 정보를 관리하기위해 tanstack query를 사용했다.json-server 자체에서 기준을 지정해 내림차순/오름차순으로 정렬한 값을 받을 수 있다는 것도 처음 알았고 tanstack query를 사용할 때마다 사용법이 약간 헷갈려서 간단한 부분부터 조금씩 정리해두고 봐야겠당 postsRequest.jsimport axios from 'axios';const API_URL = 'http://localhost:4000/posts';export const getPosts = async () => { try { const response = await axios.get(API_URL); return response.data; } cat..

• format_list_bulleted React
• · 2024. 9. 20.
• textsms

[Tailwind] tailwind 기본 설정하기

1. 설치yarn add -D tailwindcss postcss autoprefixernpx tailwindcss init -p 2. tailwind 경로 지정 (tailwind.config.js)/** @type {import('tailwindcss').Config} */export default { content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [],}; 3. index.css 수정@tailwind base;@tailwind components;@tailwind utilities;

• format_list_bulleted HTML + CSS
• · 2024. 9. 19.
• textsms

[React] 리액트에서 classList 수정하기, 조건에따라 className 변경하기

문제입력에따라 tailwind 스타일을 적용하기위해 요소의 className을 추가하거나 제거해야하는 상황이 있었는데 class를 조작한다고하니 이전에 바닐라JS로 했던 방법이 떠올라 classList.add, classList.remove등을 사용했다. 그러나 계속 add가 존재하지 않는다거나하는 오류발생했다.. 찾아보니 리액트에선 DOM 요소에 직접적으로 접근하는 것을 권장하지 않는다고 한다!! 사용자 입력에따라 렌더링할 내용, 조건 등을 state로 관리하듯이 JSX 문법을 활용해 조건에 해당하면 currentStep 클래스를 포함시키고 그렇지 않은 경우 포함시키지 않는 방식으로 변경해야한다!!!  기존 방법const handleStepSelection = (e, element) => { pr..

• format_list_bulleted React
• · 2024. 9. 15.
• textsms

[React/Vite] 카카오맵 API 마커 표시, 클러스터 라이브러리 사용해보기

마커 표시한 개import { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = document.getElementById("map"); const options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao.maps.Map(container, options); const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); const ma..

• format_list_bulleted React
• · 2024. 9. 13.
• textsms