프론트엔드15 [testing-library] 쿼리 사용 우선순위 Intro element를 선택하는 방법은 여러 가지가 있다. (getByTestId, getByText 등..) 테스트 코드 강의 여러 개를 보니 getByTestId로 하는 곳도 있고, ByRole로 하는 사람도 있길래 그냥 자기가 편한 걸 사용하면 되나? 생각했었다. 하지만, testing-library에서 권장하는 쿼리 사용 우선순위가 있다고 한다. 어떤 기준으로 우선순위를 정했는지 알아보자. 쿼리 사용 우선순위 공식 문서에 따르면, 테스트는 사용자가 코드(구성 요소, 페이지 등)와 상호 작용하는 방식과 최대한 유사해야 한다고 한다. 간단하게 말하자면, 사용자는 [등록 버튼]을 누르는 것이지 [id 가 submit-button-test인 요소]를 누르는 게 아닌 것이다. 이러한 이유로 공식 문서에.. 2023. 1. 14. [타입스크립트] 타입 가드로 catch문 error 타입 정하기 Intro 회원가입이나 로그인을 할 때 에러가 발생하면 서버가 에러 메시지를 리턴해주는 경우가 있다. 그런데, error.message를 보려고 하니 error에는 message가 없다며 타입 에러가 발생한다. 에러 타입을 어떻게 정해주면 좋을까? try ~ catch문 에러 타입 정하기 문제 error의 타입은 unknown이기 때문에 바로 console.log(error.message)를 하면 타입 에러가 발생한다. const getUsers = (a: string | number) => { try { // actions.. } catch (error) { console.log(error.message) // Error! } } 해결 instanceof Error로 타입을 좁혀주면 타입 에러가 사라진.. 2023. 1. 13. [타입스크립트] 사용하는 이유 1. 안전함 런타임 오류를 방지할 수 있다. 런타임 vs 컴파일 - 런타임 : 사용자에 의해 실행되고 동작 되어질 때 - 컴파일 : 소스코드 -> 기계어 코드로 변환하는 과정 동적 타입 언어 - 런타임에 실제 코드의 값이 평가될 시점에서야 변수에 들어올 값과 타입을 알 수 있다. - ex. JavaScript function multiply(num1, num2) { let result = num1 * num2; return result; } 정적 타입 언어 - 컴파일 타임에 변수의 타입을 결정한다. - 실제 코드를 실행해보지 않더라도 변수의 값이 무슨 타입인지 미리 알 수 있다. - ex. Java // args의 타입을 미리 결정해야 한다 public class Main { public static v.. 2023. 1. 13. [리액트] 합성 패턴으로 컴포넌트 만들기 - 1 (인풋) Intro 기획팀 요청으로 선택 버튼이 있는 인풋을 구현한 적이 있다. 요청 사항 - 인풋은 유저가 직접 값을 입력할 수 없음 - 인풋의 값은 선택 버튼 클릭 후 등장하는 드롭다운의 옵션 중 선택 고려 사항 흰색 박스가 input처럼 보이지만, 실제 input 태그는 하늘색으로 표시한 영역이고 흰색 박스는 label과 input을 감싸는 div 태그이다. 공통 컴포넌트 Label, Input, Button을 조합해서 아래처럼 만들었다. import styled from "styled-components"; import Label from "./components/Label/Label"; import Input from "./components/Input/Input"; import Button from ".. 2023. 1. 13. 이전 1 2 3 4 다음
