TIL (84) 썸네일형 리스트형 TIL 24.12.13 input components props type 지정 기존에 input component를 제작할 때 타입을 다음과 같이 받아오고 있었다. 이렇게 하면 html 태그에 존재하는 props들을 타입으로 따로 지정하지 않아도 자연스럽게 받아올 수 있다interface InputProps extends HTMLAttributes { type?: "email" | "password" | "text" | "number"; placeholder?: string; disabled?: boolean; register?: any; width?: number | string | "full";} 근데 다음처럼 작성하니까 value 가 타입에 맞지 않는다면서 에러가 생김. 그래서 찾아보니까 다음과 같은 차이가 있었다. 1. HTMLAttributes적용 대상.. TIL 24.12.09 git stash 로 현재 작업 내역 임시 저장 및 브랜치 이동하기 git stash변경 사항을 커밋하기에는 아직 이른데, 현재 작업내역에 대해서는 임시저장하고싶고 브랜치 이동해서 다른 작업을 수행해야 할 때 사용한다. 사용 순서 (ex 헤더 브랜치와 푸터 브랜치를 동시에 작업한다고 할때, 헤더작업하다가 중간에 푸터로 이동하고 싶을수도 있다고 생각) 1. 헤더 브랜치로 이동git checkout feat/header 2. 헤더 내용 작업 3. 헤더 작업 stashgit stash push -m "header: 헤더 작업 중" 4. 푸터 브랜치로 이동git checkout feat/footer 5. 푸터 작업 stashgit stash push -m "footer: 푸터 작업 중" 특정 stash 복원 1. 현재 브랜치에서 저장 된 stash 목록 확인git stas.. TIL 24.12.02 react-native-expo 환경 변수 추가 문제점 현재 앱 개발을 위해서 react-native 를 학습하고 있는데, 조금 더 빠른 개발환경 구축을 위해 expo 를 선택했다.서버는 일단 appwrite를 이용해서 만들었는데, config를 추가하는 와중에 평소 react 를 개발하던것처럼 REACT_APP .env에 환경변수를 작성하고 아무생각없이 process.env 로 불러왔다. (당연 작동안함 ...ㅎㅎ) export const appwriteConfig = { endpoint: process.env.REACT_APP_END_POINT, platform: process.env.REACT_APP_PLATFORM, projectId: process.env.REACT_APP_PROJECT_ID, databaseId: process.en.. TIL 24.11.29 React svg component 불러오기 React 에서 svg를 불러오는 방식에 대해서는 여러가지가 있다.그동안 내가 사용했던 방식은 이미지 형식으로 src 에 삽입해서 작성하는 것으로, svg 형태로 코드를 작성한 후,다음과 같이 img src={해당 svg파일} 을 불러와서 사용했다. 1. svg 파일을 img 형태로 src에 추가하기 checkImg.svg 그러나 새롭게 알게 된 방식이 있어서 작성해보려고 한다. 2. 컴포넌트 형태로 import 하여 사용하기 다음과 같이 해당하는 svg 파일을 import 하되, 여러개를 import 할거라면 as 를 붙여서 이름을 변경해준다.단, 여기서 맨 앞글자가 대문자가 되도록 해야함import { ReactComponent as Check } from "assets/vector/che.. TIL 24.11.14 Prisma 전역 객체 선언 및 타입 지정 next.js 15 + react 19 에 대한 authenticaiton 강의를 들으면서 prisma 를 사용할 일이 생겼다.우선 db를 셋팅하기 전 Node.js 에서 prisma 를 사용할 때 개발환경에서는 PrismaClient 인스턴스를 전역으로 설정해서 성능을 최적화 시켜주어야 한다. 전역객체에 Prisma 인스턴스를 선언하는 이유 : 개발 환경에서는 코드가 변경될 때마다 서버가 재시작(hot-reload)되고, 이는 새로운 PrismaClient 인스턴스를 계속 생성하는 문제를 발생시킬 수 있다. 따라서 prisma 인스턴스를 전역 객체에 선언해서 node.js 의 전역범위에서 하나의 prisma 인스턴스를 재사용 할 수 있음. var로 선언한 변수는 전역 스코프에서 전역객체 (global .. TIL 24.11.11 React.Children.map() 함수 공통 컴포넌트를 작성하는중에, children 으로 받아온 자식요소에 대해서 index 를 주어야 할 일이 생겼다. 물론 사용하려고 불러오는 컴포넌트에서 다음처럼 index 값이나 id 를 개별적으로 넘겨주어도 되지만 map을 돌리지 않는 이상, 너무 귀찮은 일이라고 생각이 들었다. 그리고 나는 context로 accordion 컴포넌트에서 전역적으로 데이터를 관리하므로, item에서 받아온 정보를 또 props 로 넘겨주거나 개별 컴포넌트마다 id 를 뿌려주는 귀찮은 짓을 해야해서 사용자가 단순히 children 만 입력해도 기능이 동작하게 끔 최대한 기본컴포넌트에서 기능을 구현하고 싶었다. open1 content1 .. TIL 24.11.06 className, style 등 기본 props type 지정 typescirpt 를 할 때, 기본적으로 props 를 받아오게 되는데 그 밖에도 className 이나 style 과 같은 기본 props 를 주고 싶은 경우가 있다. 예를들어, 나는 공통컴포넌트를 만드느라고 다음과 같이 DialogHeader 를 만들었다. const DialogHeader = ({ children, ...props }: DialogProps) => ( {children} ); 다음과 같이 스타일을 지정할 때, type error 가 나는 경우가 있다. 그렇다면 style, className 기타 등등 모든 요소를 하나하나 type에 담을수가 없는데 어떤식으로 타입을 줘야하는걸까 Heading Text This i.. TIL 24.10.28 react-draggable positionOffset, bounds 위치 문제 해결 1. 문제점 공용 컴포넌트를 직접 만들고 있는데 dialog 를 제작할 때 화면의 정 가운데에 가게 하도록 컨테이너의 기본 css 는 다음처럼 했다. top: 50%; left: 50%; transform: translate(-50%, -50%); 그러나 드래그 가능한 컴포넌트를 만들기위해 react-draggable로 해당 컴포넌트를 감싸게 되면 자꾸 살짝 오른쪽 밑으로 기울어있는 것이다. (정가운데가 아님) 그래서 개발자도구를 켜서 추가적인 css 속성이 들어가나 확인해봤더니, 다음처럼 transform: translate 속성이 0px, 0px 로 바뀌어있었음. 2. 시도해본것 그래서 stackoverflow 에서 나와 같은 문제를 겪고있는 사람들의 글을 서치해 봤는데, Draggable 에.. 이전 1 2 3 4 ··· 11 다음
