전체 글
-
nextjs에서 svg 컴포넌트로 사용하는 방법Language/React 2024. 4. 4. 09:34
컴포넌트 형태로 svg를 사용하려면? 설치$ yarn add url-loader$ yarn add @svgr/webpack custom.d.tsdeclare module '*.mdx';declare module '*.svg' { const ReactComponent: React.FC>; const content: string; export { ReactComponent }; export default content;} next.config.js/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, eslint: { // Warning: This allows production builds to..
-
Rancher - react build html nginx로 띄워보기ETC/MacOS,Rancher 2024. 3. 15. 14:44
react로 개발되고 빌드된 html를 로컬에서 nginx로 띄워볼 일이 생겼다, 간단하지만 정리는 해두자. custom.conf 생성$ vi /Users/deokjoonkang/dev/opt/nginx/config/custom.confserver { listen 80; server_name example.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; }} 컨테이너 실행$ nerdctl run -d -p 8090:80 \ -v /Users/deokjoonkang/dev/opt/nginx/config/custom.conf:/etc/n..
-
SNS 계정 관리 및 연결 끊기Language/기타 2024. 3. 6. 09:48
SNS로 로그인 후 앱에서 연결을 끊고 테스트 할 일이 생겼다. 가끔씩 확인할때 마다 까먹으니까.. 이참에 SNS 연결 끊는 방법을 정리해 놓자. 1. Kakao 1.1. 로그인 https://accounts.kakao.com/ https://accounts.kakao.com/ accounts.kakao.com 1.2. 연결 서비스 보기 및 끊기 2. Naver 2.1. 로그인 https://www.naver.com/ 네이버 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 www.naver.com 2.2. 연결 서비스 보기 및 끊기 3. Facebook 3.1. 로그인 https://www.facebook.com/ Facebook - 로그인 또는 가입 www.facebook.com 3.2. 연..
-
Java Enum 적용Language/Java 2024. 1. 15. 11:01
레거시 코드 리팩토링을 진행하면서 상수 부분만 간단히 정리해 놓는다. 상수 public class Constants { public enum Client { GOBANG("10", "고방"), ALGO("20", "알고"), WESTAY("30", "위스테이"); private final String value; private final String text; Client(String value, String text) { this.value = value; this.text = text; } public String getValue() { return value; } public String getText() { return text; } public static Client findByValue(St..
-
react-hook-form typescript로 변환 및 컴포넌트 생성 (antd)Language/React 2023. 12. 27. 17:42
이번 포스팅에서는 react-hook-form을 전체 사이트에 적용하기에 앞서 코드 라인을 줄여서 가독성을 높이고 타입스크립트로 컴포넌트를 제작해 두려고 한다. 현재 javascript 및 typescript가 혼재 되어 있지만.. 시간될때 마다 수정해 나가자! 언젠간.. typescript만 남으리라!! react-hook-form component 적용import { useForm } from 'react-hook-form';import { NInput, NInputNumber, NTextArea, NCheckbox, NSelect, NRadioGroup, NTinyMceEditor, NImageSelector } from 'components/FormControls';const TestPop = (..
-
react에 typescript 적용하기Language/React 2023. 12. 27. 15:33
회사에서 사용중인 오래된 버젼인 리액트 ^16.13.1에서 typescript만 적용해 보려고 한다. React@^16.13.1 버전과 잘 맞는 버전 React@^16.13.1과 잘 맞는 typescript 버전에 대해서 ChatGPT 질의 한 결과를 토대로 진행하려고 한다. 설치 모듈 및 버전 Modules react-hook-form 버전 typescript@^4.1.2 yarn add --dev typescript@^4.1.2 @types/node@^10.17.27 yarn add --dev @types/node@^10.17.27 @types/react@^16.9.0 yarn add --dev @types/react@^16.9.0 @types/react-dom@^16.9.0 yarn add --de..
-
react-hook-form 적용기 (antd)Language/React 2023. 12. 18. 13:18
구 버전의 node 14.17.4 + react 16.13.1 에서 react-hook-form을 적용해보자. react-hook-form은 Node 16.0.0 이상을 권장한다고 하는데 다음 분기때 버전 올릴 계획도 있고 백오피스에 적용하는거라서 큰 문제가 발생하지 않는다고 판단되어 적용하기로 하였다. 이런 저런 핑계로 지금 안하면 나중에도 못한다.! Node버전과 React버전 별 사용가능한 react-hook-form 버전 Node 버전 React 버전 react-hook-form 버전 12.17.0 이상 16.8.0 이상 7.3.0 이상 14.17.0 이상 16.13.0 이상 7.3.0 이상 16.0.0. 이상 17.0.0 이상 7.3.0 이상 17.0.0. 이상 18.0.0 이상 7.3.0 이상..
-
7. 디자인시스템 - svg 및 alias 설정Project/Figma+Storybook 2023. 11. 24. 11:29
1. svg 설정 (Component 형태로 사용가능하게) 1.1. storybook 설정 사전설치 $ yarn add --dev @svgr/webpack $ yarn add --dev url-loader main.ts # .storybook/main.ts import type { StorybookConfig } from '@storybook/react-webpack5'; import path from 'path'; ... const config: StorybookConfig = { ... // webpackFinal을 통해 Webpack 설정을 변경 webpackFinal: async (config) => { if (!config.module || !config.module.rules) { return..