본문 바로가기

Frontend

(290)
[Kotlin] 변수와 데이터 타입 변수의 선언 코틀린에서 변수의 선언은 val과 var를 사용한다. val(Immutable)변수를 선언할 때 지정한 값에서 더이상 변경하지 않아야 하는 경우 사용 var(mutable) 변수의 값을 바꿀 수 있어야 하는경우 사용  변수 선언 방법변수 선언 키워드val (변경 불가능한 변수), var (변경 가능한 변수)val, var변수 이름변수를 나타내는 이름, 소문자로 시작하고 camelCase를 따름variableName데이터 타입변수의 데이터 유형 (String, Int, Boolean 등). 생략 가능 (타입 추론 지원)String, Int값변수에 할당할 초기값"변수 선언 방법" val variableName: String = "변수 선언 방법"  변수의 출력println("print value..
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..