전체 글 (65) 썸네일형 리스트형 Daum 우편번호 검색 서비스 방법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.. vanilla-extract/css 사용하기 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 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 초기세팅 로그인 여부를 원하는 컴포넌트에서 사용할 수 있게 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 이벤트를 걸면 클릭이벤트가 잘 작동이 된다. redux toolkit example (js version) 🍀 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 실습해보기 (백엔드 방식과 vite 개발환경의 방식) CORS 오류는 다른 출처의 리소스를 요청할 때 발생할 수 있다.자신의 출처(도메인, 프로토콜, 포트)와 다른 서버에 요청을 보낼 때 CORS 오류를 발생시키지 않으려면 별도의 세팅을 해야한다.정석적으로는 백엔드에서 처리하지만 백엔드와 소통이 안되는 경우 혹은 공공 API를 사용하는 경우에 프록시 서버를 통해 클라이언트에서도 처리할 수 있다.⭐ 원리 설명1. 웹 브라우저가 서버에 리소스를 요청할 경우 자동적으로 요청 헤더의 Origin에 출처를 담아서 보낸다.2. 서버에서는 모든 요청에 대해 환영하고 응답을 보내는 데 응답 헤더의 Access-Control-Allow-Origin에 허용할 출처를 담아서 응답한다.3. 웹 브라우저가 응답을 받기 전에 요청 헤더의 Origin과 응답 헤더의 Access-Co.. netlify 배포 시 주의 사항 상황로컬에서 실행할 때는 warning인 것들이 배포 시에는 오류가 되어 빌드가 안되는 문제가 발생한다.Building에서 실패하여 다른 단계로 넘어가지 못한 것을 확인했다. 원인빌드 시에 문제가 생겼을 때 로그를 확인할 수 있다.아래 로그를 보면 사용하지 않는 useState, React 를 선언하여 문제가 발생했다. 해결 방법1. 모든 warning을 해결한다. ⭐2. CI = false로 비활성화 첫번째 방법수정 후 다시 push 하면 빌드가 성공적으로 마치고 정상 배포된 것을 확인할 수 있다. 두번째 방법이 방법은 정석적인 방법은 아니지만 Bulid command를 CI = false npm run build 로 변경하여 해결할 수도 있다.CI 환경에서 빌드를 하면 일부 라이브러리가 이전에는 단지.. 이전 1 ··· 5 6 7 8 9 다음
