전체 글182 React Hook Form 이해 설명form 을 다룰 때 사용하는 라이브러리로 최적화, 유효성 검증, api 등 유용한 기능 등을 제공합니다.controlled/uncontrolled components 란uncontrolled components: 값이 DOM에서 관리되는 컴포넌트로, React 상태와 별개로 DOM 자체가 입력값을 보관하여 리렌더링이 최소화되는 방식의 컴포넌트controlled components: 값이 React 상태로 관리되는 컴포넌트로, value와 onChange 이벤트를 통해 실시간으로 상태가 제어되는 방식의 컴포넌트주요 기본 기능1. 최적화React Hook Form 는 주로 uncontrolled components 를 사용하여 불필요한 리렌더링을 방지하고 직관적인 api 를 제공하여 효과적으로 로직을 .. 2024. 11. 2. [React] 지나친 추상화 및 파일 분리 시 주의점 설명평소 최대한 코드를 분리하여 각 코드/파일의 기능을 최소화하여 형태와 기능을 한눈에 파악할 수 있게 구성하는 방식으로 개발해왔는데최근 코드 리뷰 중 지나친 추상화 및 코드/파일 분리로 오히려 로직의 흐름을 따라가기 힘들다는 조언을 받아 수정하면서 배운 내용을 정리하고자 한다.주의점1. 복잡한 구조로 인한 가독성 저하지나치게 많은 파일과 추상화된 컴포넌트를 생성하면, 코드가 여러 레이어로 나뉘어 복잡해지며 직관적으로 요소의 스타일이나 기능을 파악하기 어려워지기 때문에 이해하는 데 오히려 시간이 많이 걸릴 수 있습니다. 예를 들어 작은 수정사항에도 여러 파일을 확인해야 할 수도 있습니다2. 불필요한 코드 중복과 비효율성모든 상황에 맞추어 사용할 수 있는 범용적인 컴포넌트를 만들려고 하면 실제로 필요 이상.. 2024. 11. 2. shadcn/ui 의 Form component 활용 설명shadcn/ui component 들 과 react-hook-form 들의 기능을 활용해 구성된 form 형식의 컴포넌트기능 및 장점FormField 를 통해 form field 를 제어zod 를 사용해 form 데이터 유효성 검사접근성 및 오류 메시지를 핸들링 가능React.useId() 를 사용하여 고유 id 활용적절한 aria 속성 적용다른 스키마 라이브러리와도 사용 가능스타일과 마크업 커스텀이 자유로움기본적인 Form component 구조 ( { /* 실제 form field ㅣlabel */} { /* 실제 form field 요소 */} { /* form field 설명 */} .. 2024. 9. 11. typescript Optional Properties 이해 설명일반적으로 javascript 는 유효하지 않은 속성에도 접근이 가능하며 undefined 를 반환한다. 객체에 해당 속성이 자체가 없는 경우나 속성이 아직 정의되지 않은 경우 모두 undefined 인 조금은 아이러니한 상황을 마주 할 수 있다.typescript 에서 Optional Properties 를 활용해 앞서 언급한 위 두 상황을 조금 더 명확하게 표현 할 수 있다.// appleCount 속성의 타입이 number이거나 undefined입니다.interface fruitStoreA { appleCount: number| undefined}// appleCount 속성이 존재하지 않을 수 있으며, 존재한다면 그 타입이 number입니다. // appleCount 속성에 접근할 경우,.. 2024. 8. 3. [TypeScript] if/else, switch 대신 객체 리터럴 패턴 활용 객체 리터럴 패턴을 활요한 조건문 로직 구현특정 조건에 따라 각기 다른 로직을 구현할 경우 if/else 혹은 switch 를 활용하는 방식이 기본적이나 객체 리터럴 방식으로 구현 시 장단점에 대해 정리해보려 한다.간단 예시type SelectionType = "A" | "B" | "C"function testObjPattern(selection:SelectionType) { const ObjPattern:Record string> = { A: () => "apple", B: () => "bear", C: () => "car" } return ObjPattern[selection]}코드 설명특정 조건에 따라 실행될 로직을 리터럴 형식의 객체안에 로직을 구현하고, 실제 사용하기.. 2024. 7. 3. [JS] 코딩 테스트 문제 : 동전 교환 [배낭(KnapSack) 알고리즘] 문제 : 동전 교환(냅색 알고리즘)문제 설명다음과 같이 여러 단위의 동전들이 주어져 있을때 거스름돈을 가장 적은 수의 동전으로 교환해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. ▣ 입력설명첫 번째 줄에는 동전의 종류개수 N(1각 동전의 종류는 100원을 넘지 않는다. ▣ 출력설명첫 번째 줄에 거슬러 줄 동전의 최소개수를 출력한다. ▣ 입력예제 131 2 515 ▣ 출력예제 13설명 : 5 5 5 동전 3개로 거슬러 줄 수 있다.오답 노트function solution(m, coin) { let answer = 0; let answerArr = []; sortArr = coin.sort((a, b) => b - a); for (const c of sortArr).. 2024. 5. 29. [JS] 코딩 테스트 문제 : 계단오르기 [동적계획] 문제 : 계단오르기문제 설명철수는 계단을 오를 때 한 번에 한 계단 또는 두 계단씩 올라간다. 만약 총 4계단을 오른다면 그 방법의 수는 1+1+1+1, 1+1+2, 1+2+1, 2+1+1, 2+2 로 5가지이다. 그렇다면 총 N계단일 때 철수가 올라갈 수 있는 방법의 수는 몇 가지인가? ▣ 입력설명첫째 줄은 계단의 개수인 자연수 N(3≤N≤45)이 주어집니다. ▣ 출력설명첫 번째 줄에 올라가는 방법의 수를 출력합니다. ### **▣ 입력예제 1** 7 ▣ 출력예제 121내코드// BFS 활용 방식// 아래 방식의 단점은 중복된 계산을 반복할 수 있습니다.function solution(n) { let answer = 0; const steps = [1, 2]; let que =.. 2024. 5. 22. [JS] 코딩테스트 문제 : 섬나라 아일랜드 [BFS] 문제 : 섬나라 아일랜드(BFS 활용)문제 설명N*N의 섬나라 아일랜드의 지도가 격자판의 정보로 주어집니다. 각 섬은 1로 표시되어 상하좌우와 대각선으로 연결되어 있으며, 0은 바다입니다. 섬나라 아일랜드에 몇 개의 섬이 있는지 구하는 프로그램을 작성하세요. 1 1 0 0 0 1 00 1 1 0 1 1 00 1 0 0 0 0 00 0 0 1 0 1 11 1 0 1 1 0 01 0 0 0 1 0 01 0 1 0 1 0 0 만약 위와 같다면 ▣ 입력설명첫 번째 줄에 자연수 N(3두 번째 줄부터 격자판 정보가 주어진다. ▣ 출력설명첫 번째 줄에 섬의 개수를 출력한다. ▣ 입력예제 17 1 1 0 0 0 1 00 1 1 .. 2024. 5. 17. [next 14 공식문서 부시기] 3.3 데이터 가져오기 패턴 서버에서 데이터 가져오기Server Components 를 사용하여 서버에서 데이터를 가져오는 것을 추천하며 다음과 같은 장점을 가지고 있습니다.백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스할 수 있습니다.액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 유지가능동일한 환경에서 data fetch 및 render 과정이 통합 되므로 클라이언트와 서버 간의 불필요한 통신은 줄고 물론 브라우저의 메인스레드 작업도 감소합니다.한 요청에 대한 다수클라이언트에서 여러 개별 요청을 수행하는 대신 단일 왕복으로 여러 데이터 가져오기를 수행합니다.Fetching data where it's needed 트리의 여러 components 에서 동일한 .. 2024. 5. 12. 9. Tailwind CSS 주요 클래스 내용과 문법(layout) Layout 관련Containercontainer 클래스는 현재 breakpoint 의 최소 너비와 일치하도록 요소의 최대 너비를 설정하는 클래스입니다.Breakpoint 에 따른 최대 너비Breakpoint (min-width)기존 css 속성Nonewidth: 100%;sm (640px)max-width: 640px;lg (1024px)max-width: 1024px;가운데 정렬 컨테이너Tailwind의 컨테이너는 자동으로 중앙에 위치하지 않습니다.mx-auto : margin-left: auto; margin-right: auto; Columns요소 내의 콘텐츠를 구분 하는 열 수를 설정tailwind 문법 및 실제 css 예시tailwind 클래스기존 css 속성columns-1column.. 2024. 5. 9. 8. Tailwind CSS 기본 설정과 옵션 - 2 설정 옵션presetspresets 섹션을 사용하면 Tailwind의 기본 설정을 사용하는 대신 사용자 정의 기본 설정을 지정할 수 있습니다.// tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { presets: [ require('@acmecorp/base-tailwind-config') ], ...}prefixprefix 옵션을 사용하면 Tailwind에서 생성된 모든 유틸리티 클래스에 맞춤 접두사를 추가할 수 있습니다. 이는 이름 충돌이 발생할 수 있는 기존 CSS 위에 Tailwind를 계층화할 때 유용할 수 있습니다.※ 사용자 정의 클래스에는 접두사가 추가되지 않습니다./** @type {im.. 2024. 5. 8. 7. Tailwind CSS 기본 설정과 옵션 - 1 tailwind 기본 설정기본적으로 Tailwind는 프로젝트 루트에서 tailwind.config.js 파일에 내용을 참고해 사용자 정의된 내용을 적용합니다.기본 설치npx tailwindcss init기본 설정 파일(tailwind.config.js) 구조/* tailwind.config.js */module.exports = { content: [...], theme: { ... extend: { ... }, }, plugins: [...],}ESM 설정 및 설치기본적으로 설치 시 프로젝트가 ES 모듈인지 감지하여 올바른 구성 파일을 자동으로 생성합니다.다만 --esm 플래그를 사용하여 ESM 구성 파일을 명시적으로 생성할 수도 있습니다.npx tailwindcss .. 2024. 5. 6. 이전 1 2 3 4 ··· 16 다음
