Typescript
-
[ESLint] import/order로 import 순서 정렬하기 (Vite + Typescript)기타 2025. 3. 20. 10:06
eslint에서 import/order 를 적용하기 위해서는 아래 라이브러리 설치가 필요하다.$ npm install eslint-plugin-import --save-dev$ npm install eslint-import-resolver-typescript --save-dev vite 로 react프로젝트를 설치하면 (2025년 3월 `vite: 5.4.10`, `@vitejs/plugin-react: 4.3.3` 버전)tsconfig.app.json, tsconfig.json, tsconfig.node.json 총 세개의 tsconfig 파일이 만들어 지는데, 이 때, tsconfig.json에서 references로 tsconfig.app.json과 tsconfig.node.json을 가지고,in..
-
[ORM] Prisma Schema 작성하여 DB 세팅하기 (with. NextJS)프레임워크/NodeJs 2024. 8. 7. 23:42
ORMObject Relational Mapping 객체 관계 매핑은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 관계 매핑 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 객체 관계 매핑(Object-relational mapping; ORM)은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 지향ko.wikipedia.org 해당 글은 개인 프로젝트를 만들면서 공부하고 적용한 내용을 작성한 글입니다. 그러므로 Prisma의 Schema 모든 기능이 작성되어 있지 않습니다. 모든 기능에 대한 내용은 아래 공식문서 링크에서 확인해 주세요.https://www.pri..
-
[React] React 특정 Element영역 내의 마우스 위치 값 구하기프레임워크/React(NextJs) 2024. 8. 7. 10:22
프로젝트 내에서 Custom Context Menu 를 사용할 일이 있었는데,특정 Element에서만 동작해야 했다. 아래 코드는 마우스 이벤트 객체와 Ref Element 객체로 좌표를 구하는 함수이다.export const getAbsoluteAnchorPoint = ( e: React.MouseEvent, ref: React.RefObject,) => { const refRect = ref.current?.getBoundingClientRect(); const wrapperScrollY = ref.current?.scrollTop ?? 0; const rectTop = refRect?.top ?? 0; const wrapperScrollX = ref.current?.scrollLeft ?..
-
[js/ts] 한글 마지막 단어의 받침 유무를 판단하여 조사 붙이기언어/Javascript 2024. 7. 25. 15:54
컴포넌트를 만들 때, props로 text를 넘겨주고는 한다.이 때, 한글은 text의 받침 유무에 따라 조사가 달라지는데,아래와 같이 코드를 작성하여 받침이 있으면 true 없으면 false를 리턴하도록 하여 조사를 붙여줄 수 있다. export const hasLastConsonantLetter = (text: string): boolean => { return (text.charCodeAt(text.length - 1) - "가".charCodeAt(0)) % 28 !== 0;};
-
HTML form 태그 안에 submit 버튼을 여러 개 사용하여 동작을 다르게 하기 (with. React Hook Form)프레임워크/React(NextJs) 2024. 7. 24. 17:55
여러 화면에서 값을 입력하고, 한 번에 서버로 데이터를 요청해야 하는 상황이 발생했다.그래서 이전 버튼을 클릭했을 때와 저장 버튼을 클릭했을 때, 입력한 값을 가지고 페이지 이동 또는 서버 요청이 필요했다. 그래서 나는 페이지 이동 시마다 Form Data를 가져와 전역 상태에 넣어 관리해 주는 방식을 생각했고,이 때 프로젝트에서 사용하고 있는 React Hook Form의 onSubmit을 통해 데이터를 가져오는 방식이 베스트 였다. 그러나 이렇게 되면 하나의 form태그에 submit 버튼 두개가 되어 이를 구분해서 처리하는 방법이 필요했다.이후, submit도 이벤트라는 것에 초점을 맞추어 찾아보니, 해답을 찾을 수 있었다. 그 해답은,form태그에서 Submit 이벤트가 발생했을 때 submit..
-
[ESLint] ReactJS(+TypeScript)에 맞게 설정하기기타 2022. 11. 1. 00:58
ReactJs(+TypeScript)에 맞는 ESLint 설정하기 ! 우선, 아래 npm 모듈들을 install 한 후, "eslint": "^8.25.0", "eslint-config-prettier": "^8.5.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-typescript": "^3.5.1", "eslint-plugin-import": "^2.26.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.31.10", "eslint-plugin-react-hooks": "^4.6.0", 아래와 같이 설정해서 사용했다. 자세한 내용은 주석 참고. { "env..
-
[React] typescript + webpack 에서 tsconfig.json - paths 속성 사용하기 (별칭 경로)프레임워크/React(NextJs) 2022. 9. 10. 18:44
React를 webpack으로 직접 빌드하는 프로젝트와 typescript로 만든 경우 tsconfig.json에서 paths를 사용하기 위해서는 webpack에서 제공하는 플러그인 설정이 필요합니다. 경로를 잘못 설정하면 아래와 같은 에러가 발생하고, Cannot find module '@pages/Main' or its corresponding type declarations. 플러그인을 설치하지 않으면, devServer모드나 build시 아래와 같은 에러가 발생합니다. Module not found: Error: Can't resolve '@pages/Main' in 'C:/git/...' 설정 방법 프로젝트 구조 /src // ... /pages // ... App.tsx index.tsx ts..
-
[React] react-hook-form(feat. typescript)으로 Input 컴포넌트 만들어보기프레임워크/React(NextJs) 2022. 9. 6. 21:41
이 글은 프로젝트의 파일 구조와 디자인패턴을 고민하면서 시도했던 방법을 작성해두기 위한 글입니다. 해당 코드는 현재 사용하는 방식일 수도, 아닐 수도 있습니다. 이런식으로 코드를 짜봤구나. 정도의 예시로 봐주시면 감사하겠습니다. 사용한 라이브러리 : react-hook-form ./src/components/forms/Form.tsx import * as React from 'react'; interface onSubmitProps { onSubmit: React.FormEventHandler; children: React.ReactNode; } const Form = ({ onSubmit, children }: onSubmitProps) => { return {children}; }; export de..