전체 글

회원가입 폼에서 주로 볼 수 있는 필수입력사항 * 별표시를 렌더링하고 싶을 땐 가상요소(pseudo-Element)를 이용할 수 있다. &::after { content: '*'; color: '#ff0000'; } styled-components를 이용한다면 믹스인을 만들어서 사용하면 편하다. import { css } from 'styled-components'; export const RequiredStar = (position: 'before' | 'after') => css` ${position === 'before' ? css` &::before { content: '*'; color: ${({..

1. 안녕 "동글" 우아한테크코스 레벨3부터는 프론트엔드와 백엔드가 힘을 합쳐 팀 프로젝트를 진행한다. 제목에 있는 "동글"은 내가 앞으로 참여하고 개발할 프로젝트 이름이다. 프로젝트 이름은 서로 의견을 내고 내부 투표를 통해 결정했다. 6월 27일 화요일 동글 팀원인 에코, 토리, 헙크, 비버, 파인, 아커와 인사하고 서로 자기소개를 했다. 그리고 바로 팀 그라운드 룰을 정했다. 적당하고 깔끔하게 잘 정한 것 같다. 특히 회의시간에 존댓말하기와 하이파이브가 마음에 든다! 2. "동글" 이란? "동글"은 기획자인 에코가 낸 아이디어인데, 여러 에디터에서 작성한 글을 한번에 관리하고 다양한 블로그 플랫폼으로 배포할 수 있는 기능을 제공한다. 나는 기여자로서 "동글"이 되게 맘에 들었다. 왜냐하면 나도 현재..

1. CRA 없이 리액트를 시작해야하는 이유 create-react-app을 이용하면 정말 편하게 리액트 프로젝트를 시작할 수 있다. 웹팩과 바벨, 타입스크립트 설정까지 제공해준다. 하지만 내 방식대로 설정을 바꾸기가 힘든 단점이 있다. craco 같은 라이브러리를 이용하여 설정을 override 해야하는데, 번거롭고 이럴바엔 처음부터 리액트를 구축하는 것이 낫겠다 라고 판단하게 된다. 나의 경우 import 방식을 바꾸려고 했었는데, 이를 위해 웹팩, ts 설정까지 전부 override 해야하는 문제점이 있었다. 배보다 배꼽이 더 큰 경우였다. 그래서 CRA없이 리액트 프로젝트를 구축해보려고 한다. 2. 구축 순서 1. package.json 생성 2. React, Typescript 설치 3. web..

📖 KDC 한국십진분류표 📖 kdc-table-yogjin.vercel.app KDC 한국십진분류표를 편하게 볼 수 있는 웹페이지입니다. KDC 한국십진분류표 6판 기준으로 만들었습니다. 맨 오른쪽 요목을 클릭하면 클립보드에 복사됩니다. 버그제보, 업데이트 수정 요청 모두 환영합니다.

1. 문제 상황 React에서 기존 태그를 감싼 Custom Component를 만들때, 기존 태그의 속성을 override하고 싶은 경우가 있다. 그때 styled-components 를 이용하는 경우 어떻게 타입 선언을 해야할까? 2. 방법 적당한 예시와 함께 보자. input 태그의 size 속성은 input의 width를 결정한다. 우리가 만들 Custom Component인 Input은 size 속성에 따라 다른 padding 을 설정하는 것으로 바꾸고 싶다. 거두절미하고 결과코드부터 보자. 결과코드 // Input import { ComponentPropsWithoutRef } from "react"; import styled, { css } from "styled-components"; ex..

프로젝트의 컴포넌트를 만들 때 기존 태그의 props를 그대로 상속받아서 사용할 수 있게 만들어야 할 때가 있다. 리액트에서 제공하는 엘리먼트의 속성 타입들은 여러가지가 있다. HTMLAttributes [Element]HTMLAttributes ComponentPropsWithRef ComponentPropsWithoutRef HTMLAttributes HTMLAttributes 는 key, ref 같은 props 타입이 정의되어있지 않기 때문에, 사용에 적합하지 않다. [Element]HTMLAttributes type MyButtonProps = { backgroundColor?: string; } & ButtonHTMLAttributes; const MyButton = (props: MyButto..

앱을 개발하다보면 상수를 선언해야할 때가 있다. 예를 들어 카드결제와 관련한 앱을 만든다고 생각해보자. 카드 식별을 할 때 각 은행별로 할당된 코드 code로 식별한다고 생각하자. 1. as const로 상수와 타입 선언하기 as const 키워드를 이용해 은행 코드를 상수로 선언할 수 있다 export const BankCodeList = { BCCard: '361', ShinHanCard: '366', KakaoBank: '090', HyunDaiCard: '367', } as const; 그러면 BankCodeList의 value들에 해당하는 은행 코드 타입은 typeof, keyof 키워드를 이용해 선언할 수 있다. export type BankCode = (typeof BankCodeList)[..

오늘은 서울 브루어리의 모카 로코 포터! 맥주캔에 초코와 원두를 보면 바로 맛이 상상갈 것 같다. 달달한 흑맥주다. 이전에 먹었던 벨칭 비버 피넛버터 맥주에서 피넛이 빠지고 커피가 들어간 느낌? 꽤 부드럽다 싶었는데 우유가 들어가있다. 커피향이 난다. 그러다보니 뭔가 아.아 먹는거 같기도 하구.. 아아랑 향도 비슷한거같다. 그래서 뭔가 벌컥벌컥 마시게 되는데, 금방 취할 것 같다. 오늘은 테코톡을 끝내서 기분좋은 날이다.