Never give up

이번에 포트폴리오를 새로 만들면서 다국어 처리를 할 필요가 있었는데 라이브러리 없이 간단하게 만들어 봤습니다 상태관리 라이브러리를 사용하면 조금 더 코드가 간단해지는데 각각 사용하는 라이브러리가 다를테니 공용으로 사용할 수 있는 context api를 사용해서 해봤습니다 (ps. 필자는 zustand를 좋아합니다) src/localization/provider.tsx import React, { createContext, useState } from "react"; import { CONTEXT_TYPE, LANG_CODE, LANG_TYPE } from "src/utils/constants"; export const LocalizationContext = createContext( undefined )..

axios는 fetch에 비해 여러가지 장점이 있습니다 response timeout 구형 브라우저 지원 json 변환과정 생략 가능 기타 등등 그래서 아마 대부분의 개발자분들이 사용하실텐데 공통적으로 셋팅하면 좋은 부분들을 예제와 함께 준비해봤습니다 src/service/api.ts import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; export default class Api { private instance: AxiosInstance; constructor(baseURL = '', timeout = 30000) { this.instance = axios.create({ baseURL, timeout, }); this.instance...

web은 svelte로 개발하고 react로 옮겨서 다시 작업을 했습니다 하다보니 svelte가 정말 편하구나.. 싶었던 순간이 많았던것 같습니다 상태관리 라이브러리는 사용하지 않았고 socket io로 소켓 통신을 처리했습니다 src/main/index.tsx import React from "react"; import useWebRTCHook from "src/hooks/useWebRTCHook"; import BtnArea from "./BtnArea"; import CallPopup from "./CallPopup"; import UserListArea from "./UserListArea"; import VideoArea from "./VideoArea"; import styles from '...

이번에는 리액트로 파일 드래그 앤 드롭을 구현해봤습니다 계속 js만 써왔는데, 나중에 ts도 필요할 수도 있을거 같아서 일단 한번 사용해봤습니다 drag_drop.css /* 드래그 앤 드롭 */ .div_images { padding: 10px; font-size: 0.8em; color: grey; margin: 10px 0 10px 30px; box-shadow: 0 0 5px #cccccc; display: flex; flex-direction: column; justify-content: center; align-items: center; } .div_preview { display: flex; flex-direction: row; justify-content: center; padding: 1..