분류 전체보기 (4) 썸네일형 리스트형 React-Markdown에서 커스텀 컴포넌트 타입 안정성 챙기기 React-Markdown 라이브러리에서 커스텀 컴포넌트를 렌더링하기 위해서react-markdown과 rehype 조합이 사실상 표준처럼 쓰입니다.하지만 이 라이브러리 조합엔 한 가지 불편한 점이 있습니다.💡 rehype 플러그인은 타입 안정성이 거의 없습니다.rehype 플러그인은 HTML AST를 직접 다루기 때문에,각 노드의 형태나 속성을 TypeScript로 보장하기 어렵습니다.즉, “이 노드에는 반드시 url이 있다”는 걸 코드로 증명할 수 없죠.결국 런타임 에러나 타입 추론 불가능한 상황이 자주 생깁니다.문제 상황저는 react-markdown을 기반으로 커스텀 블록(예: Rechart, Mermaid, Callout 등)을 구현하고 있었어요. rehype 플러그인은 HTML AST 노드를.. [후기] 카카오테크 부트캠프 3기 풀스택 과정 지원 1. 지원 계기4학년 2학기를 앞두고, 일반 3학점 밖에 남지 않았다.(3학점은 온라인 강의로 병행)프로젝트 경험을 통해 지식은 많이 쌓였다고 생각하지만, 여전히 개발 역량에서는 부족함을 느꼈다. 그래서 카카오라는 든든한 환경 속에서 역량을 많이 키우고 싶어 지원하게 되었다.학부 생활 동안 Flutter와 React로 프론트엔드 개발을 공부해왔지만, 점점 백엔드 분야에 대한 필요성을 크게 느꼈다. 요즘 스타트업 기업에서는 백엔드 역량이 (반)필수적으로 요구되기도 하고, 풀스택 앱을 혼자서 처음부터 끝까지 구현해보고 싶다는 욕심도 생겼기 때문이다. 그래서 풀스택 과정을 통해 진로에 대한 확신을 얻고자 하였다.2. 서류 지원서류 작성에서는 개발자로서 내가 무엇을 할 수 있는지, 어떤 경험을 쌓아왔는지에 초점.. [Next] <Link> 태그 passHref 속성 이해하기 왜 passHref가 필요한가?passHref는 Next.js의 Link 컴포넌트가 생성하는 href prop을 자식 컴포넌트에게 전달하는 역할을 합니다.SEO 최적화: 검색 엔진이 링크를 올바르게 인식할 수 있습니다.브라우저 기능: 우클릭 메뉴의 "새 탭에서 열기" 등이 정상 작동합니다. passHref가 필요한 경우1. Link 내부에 커스텀 컴포넌트나 button을 사용할 때가장 대표적인 경우입니다. Link 안에 태그가 아닌 다른 커스텀 컴포넌트를 넣을 때 passHref가 필요합니다.// ❌ 잘못된 방법 - passHref 없이 사용function ViewAllButton({ children = "전체보기", className, href, ...props }) { return ( .. [Flutter] 플러터에서 타이포 디자인 시스템 구축하기 React의 tailwindcss나 styled-component처럼 디자이너가 정의한 디자인 시스템을 Flutter 프로젝트에서 쉽게 사용하고 싶었다. 먼저 design_system.dart 파일에 디자이너가 정의한 대로 스타일을 적용한다.// style/design_system.dartconst SUB_TITLE_24 = TextStyle( fontSize: 24, fontWeight: FontWeight.w600, height: 1.4, letterSpacing: -0.5,); 추가적인 스타일은 아래와 같이 copyWith로 적용해준다. BODY14 타이포 스타일에 텍스트 색상을 추가한 코드이다.Text(text, style: BODY_14.copyWith(color: WHITE)) 이전 1 다음
