오늘도 맑음

img 태그로 svg 아이콘을 화면에 보여준다면 여러 제약사항이 많다.1. 색상이나 크기를 동적으로 변경이 어렵다.2. 너비, 높이 외에는 속성을 변경할 수 없다. 따라서 다른 방법을 찾아야 했는데 지금 사용하는 vite의 vite-plugin-svgr를 사용하기로 결정했다. svgr의 장점은 다음과 같다.1. 색상, 크기를 동적으로 변경하기 쉽다.2. react-icons 처럼 으로 가져올 수 있어 가독성이 향상된다. 우선 설치한다.npm install --save-dev vite-plugin-svgr 초기 설정해야하는 부분이 있는데우선 vite 환경설정 파일인 vite.config.js에 svgr를 추가해준다.// vite.config.jsimport svgr from "vite-plugin-svg..

방법1. react-daum-postcode- Daum 우편번호 검색 서비스를 React환경에서 사용할 수 있도록 만든 라이브러리2. 공식 가이드를 보고 직접 구현이 중에서 2번째 방법을 택하였다.💡 리액트에서 동적으로 이 코드를 작성하기 위해서 단계1. 스크립트 생성2. document.head에 스크립트 삽입3. 버튼을 클릭햇을 대 new daum.Post().open() 실행전체 코드import styled from "styled-components";import Button from "../common/Button";import { useEffect } from "react";interface Props { onCompleted: (address: string) => void;}const SC..

varsVanilla Extract에서는 CSS 변수가 'vars' 객체의 키로 존재해야 한다.vars 객체에서 변수 사용하는 법CSS 변수를 직접 사용const myStyle = style({vars: { '--my-color': 'purple'}});Javascript 변수를 CSS 변수로 사용import { style, createVar } from '@vanilla-extract/css';const myVar = createVar();const myStyle = style({vars: {[myVar]: 'purple' // myVar 변수를 CSS 변수 키로 사용}});즉 CSS 변수를 직접 사용할 때는 대괄호가 필요없다.Javascript 변수를 CSS 변수의 키로 사용할 때는 대괄호를 사용하여..

MIT LICENSE미국 MIT에서 해당 대학의 소프트웨어 공학도를 돕기 위해 개발한 라이선스이다. 요약저작권 표시를 기재한다면 이 오픈 소스를 무료로 사용, 배포해도 된다.이 오픈 소스를 사용하여 너의 프로젝트에 문제가 생겼을 때 오픈 소스 저작권자는 책임지지 않는다.The MIT LicenseCopyright (c) 연도 저작권자Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without lim..

로그인 여부를 원하는 컴포넌트에서 사용할 수 있게 redux-toolkit을 사용하여 isLogin을 전역변수로 뺄 수 있다. 또한 매번 타입을 지정해줘야하는 불편함을 제거하기 위해 custom hook을 만들것이다.설치하기npm install @reduxjs/toolkit react-redux폴더 구조hooks와 store 폴더의 구조를 살펴본다.store 생성하기store는 리덕스 저장소이며 각 리듀서를 저장하는 공간이다.store/index.tsx 파일에 다음과 같이 작성한다.import { configureStore } from "@reduxjs/toolkit";const store = configureStore({ reducer: {} // 객체 내부에는 이 후에 작성한다.});export t..

mouseDown -> blur -> mouseUp -> click💡 활용input 태그에 blur 이벤트를 걸고 버튼에 click 이벤트를 걸면 blur 가 먼저 실행되면서 click 이벤트가 제대로 작동하지 않을 수도 있다. 그럴 경우에는 click 대신에 mouseDown 이벤트를 걸면 클릭이벤트가 잘 작동이 된다.

🍀 Installnpm install @reduxjs/toolkit react-redux🍀 src/store.jsconfigureStore API로 Redux store(리덕스 저장소)를 생성한다.import { configureStore } from '@reduxjs/toolkit'export const store = configureStore({ reducer: {},})🍀 src/index.jsReact에서 Redux store를 사용하려면 react-redux의 로 감싸야 한다.import React from 'react'import ReactDOM from 'react-dom'import './index.css'import App from './App'import { store } fro..

CORS 오류는 다른 출처의 리소스를 요청할 때 발생할 수 있다.자신의 출처(도메인, 프로토콜, 포트)와 다른 서버에 요청을 보낼 때 CORS 오류를 발생시키지 않으려면 별도의 세팅을 해야한다.정석적으로는 백엔드에서 처리하지만 백엔드와 소통이 안되는 경우 혹은 공공 API를 사용하는 경우에 프록시 서버를 통해 클라이언트에서도 처리할 수 있다.⭐ 원리 설명1. 웹 브라우저가 서버에 리소스를 요청할 경우 자동적으로 요청 헤더의 Origin에 출처를 담아서 보낸다.2. 서버에서는 모든 요청에 대해 환영하고 응답을 보내는 데 응답 헤더의 Access-Control-Allow-Origin에 허용할 출처를 담아서 응답한다.3. 웹 브라우저가 응답을 받기 전에 요청 헤더의 Origin과 응답 헤더의 Access-Co..

상황로컬에서 실행할 때는 warning인 것들이 배포 시에는 오류가 되어 빌드가 안되는 문제가 발생한다.Building에서 실패하여 다른 단계로 넘어가지 못한 것을 확인했다. 원인빌드 시에 문제가 생겼을 때 로그를 확인할 수 있다.아래 로그를 보면 사용하지 않는 useState, React 를 선언하여 문제가 발생했다. 해결 방법1. 모든 warning을 해결한다. ⭐2. CI = false로 비활성화 첫번째 방법수정 후 다시 push 하면 빌드가 성공적으로 마치고 정상 배포된 것을 확인할 수 있다. 두번째 방법이 방법은 정석적인 방법은 아니지만 Bulid command를 CI = false npm run build 로 변경하여 해결할 수도 있다.CI 환경에서 빌드를 하면 일부 라이브러리가 이전에는 단지..

CORS 에러란?Cross-Origin Resource Sharing의 약어이다. 한국어로는 교차 출처 리소스 공유이며, 다른 출처(Origin)로 리소스를 요청하는 방식을 일컫는다.CORS는 최신 브라우저의 동일 출처 정책(Same-Origin Policy) 때문에 등장하게 되었으며, 다른 출처일 때도 리소스를 공유하기 위해 프론트와 백엔드는 별도의 설정을 해주어야 한다.CORS 에러는 언제 발생할까?다른 출처(Origin)로 리소스를 요청할 때 발생한다.URL 구조에서 프로토콜과 호스트가 모든 같은 것을 동일 출처라고 한다. 프로토콜, 도메인, 포트번호 중 하나라도 다르면 다른 출처이다.이전에는 동일한 도메인에서 리소스를 받아왔는데, 지금은 클라이언트에서 다른 서버(ex. Backend, Oauth)..