[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

[React/Vite] 카카오맵 API 사용 설정하기

초기 설정1. 카카오 개발자사이트에 접속해 개발자 등록 및 앱 생성2. 앱 설정 - 플랫폼 - Web 플랫폼 등록으로 사이트 도메인 등록 (지도API를 사용할 도메인이 어디인지 등록! http://localhost:3000/ 으로 등록함3. 앱 설정 - 앱 키 - JavaScript 키 복사하여 .evn.local에 저장 -> 변수명 VITE_KAKAO_MAP_API_KEY (VITE_로 시작하면 상관없음!)  간단 테스트 - 지도 띄우기 (API 연결 확인)// index.htmlimport { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = documen..

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