ref React 에서 ref prop은 HTML Element에 직접 접근하기 위해 사용됩니다. 예를 들어, 아래 컴포넌트에서는 useRef 훅으로 생성한 inputRef 를 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체에 접근해서 current속성에 엘리먼트에 레퍼런스가 할당되고 이를 통해 handleFocus 이벤트 핸들러에서 엘리먼트의 focus 함수를 호출할 수 있습니다. const Form = () => { const inputRef = useRef(null) const handleFocus = () => { inputRef.current.focus() } return ( 인풋 포커스 ) } 자식 컴포넌트에 접근하기 그렇다면 부모컴포넌트에서 자식컴포넌트 내..

타입스크립트에서는 Type Transformation을 유연하게 도와 주는 여러 유틸리티 타입을 제공하고 있습니다. (TypeScript Utility Types) 그 중에 실무에서 유용한 몇가지 타입을 알아보겠습니다. 타입스크립트에서는 조건부 형식으로 타입을 정의 할 수 있습니다. T extends U ? X : Y 위와 같은 형태를 취하는데 조건식 결과에 따라 X가 될 수도 Y 가 될 수도 있습니다. 타입스크립트는 용도에 맞게 조건부 타입을 활용한 새로운 타입들을 미리 정의해두고 이것을 "Predefined conditional types" 라고 하며 그 중 하나가 Exculude 입니다. Exclude Exclude 타입은 2개의 제네릭 타입을 받을 수 있으며, 첫번재 제네릭 타입 T 중 두번째 제..

Next.js 는 React 라이브러리의 프레임워크 입니다. 장점 서버사이드 렌더링 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주면서, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO의 장점을 가질수 있습니다. pre-reloading은 SSR 뿐만 아니라 SSG(Static Site Generate - 정적 사이트 생성)도 가능하게 해줍니다. 또한 SSR 과 CSR도 혼합하여 사용 할 수 있습니다. SEO 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보가 보이지 않습니다. 구글의 검색엔진의 경우 자바스트립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않..

스토리북? 스토리북은 독자적인 UI 컴포넌트 개발을 위한 업계표준 컴포넌트 탐색기 입니다. 내부 개발자들을 위한 문서화(Documentations)에 사용할 수도 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있습니다. 장점 복잡한 로직 없이 독립적인 환경에서 컴포넌트를 개발을 할 수 있습니다. 재사용을 위한 컴포넌트 들을 Story 에서 조합해 테스트 할 수 있습니다. 컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화할 수 있습니다. 초기세팅 # Storybook 설치 npx storybook init # Storybook 실행 yarn storybook 폴더구조 크게 .storybook 폴더와 stories..

테스트의 종류 단위테스트 단위 테스트는 응용 프로그램에서 테스트 가능한 가장 작은 소프트웨어를 실행하여 예상대로 동작하는지 확인 하는 테스트 단위테스트에서 테스트 대상 단위의 크기는 엄격하게 정해져 있지 않습니다. 하지만 일반적으로 클래스 또는 메소드 수준으로 정하여 테스트합니다. 단위의 크기가 작을 수록 복잡성이 낮아집니다. 따라서 단위 테스트를 활용하여 동작을 표현하기 더 쉬워집니다. 즉, 테스트 대상 단위의 크기를 작게 설정해서 단위 테스트를 최대한 간단하고 디버깅하기 쉽게 작성해야 합니다. 소프트웨어를 개발할 때, 소프트웨어 내부 구조나 구현 방법을 고려하여 개발자 관점에서 테스트합니다. 그러므로 단위 테스트는 소프트웨어 내부 코드에 관련한 지식을 반드시 알고 있어야 하는 화이트박스 테스트입니다...

Emotion? Emotion은 JavaScript로 css 스타일을 작성하도록 설계된 라이브러리입니다. 본격적으로 Emotion에 대해 알아보기 이전에 간단히 다양한 웹 스타일링 기술을 알아보겠습니다. 다양한 웹 스타일링 기술 CSS CSS(Cascading Style Sheets)는 HTML 이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다. CSS의 문제점 - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 한다. - Dependencies: CSS간의 의존 관계를 관리 하기 힘들다 - Dead Code Elimi..