react38 [프로젝트][React] 예약 사이트 기능 구현하기 (when to meet) 목차이번 기능을 구현하면서 비대화형 이벤트에 대해서 많이 알아갔다.또한 비대화형 이벤트가 생각이상으로 까다로워서 당황스러웠다... 그래서 이번 기회에 한번 정리해보려고 한다. 완성한 모습대충 주요 기능만 완성하였다... 구현 시 고민했던 부분들1. 컴포넌트의 merge 컴포넌트가 합쳐지는 것이 너무 까다로워서 display의 여부로 만들었고 첫인덱스의 배열크기를 늘렸다.처음에는 배열을 늘리고 줄이는 식으로 했는데 그렇게 하면 인덱스 다루는 것이 너무 까다로워 배열의 크기는 바꾸지 않는 선으로 다시 진행했다. 각 배열 아이템의 타입 정의export interface ReservationInterface { content: string; //내용을 담을 곳 time: number; display:.. 2024. 9. 12. [React] Unit Test 에 대해 알아보자 목차 Unit Test란?단위 테스트(Unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다. 예를 들어 웹 애플리케이션에서 로그인 메소드에 대한 독립적인 테스트가 1개의 단위테스트가 될 수 있다. 즉, 단위 테스트는 애플리케이션을 구성하는 하나의 기능이 올바르게 동작하는지를 독립적으로 테스트하는 것으로, "어떤 기능이 실행되면 어떤 결과가 나온다" 정도로 테스트를 진행한다. Unit Test의 장점일반적으로 실무에서 테스트 코드를 작성한다고 하면 거의 단위 테스트를 의미한다. 통합 테스트는 실제 여러 컴포넌트들 간의 상호작용을 테스트하기 때문에 모든 컴포넌트들이 구동된 상태에서 .. 2024. 8. 30. [React][Typescript] 타입스크립트 개념 심화 목차 구조적 서브타이핑//구조적 서브타이핑//이름이 다른 객체라도 가지고 있는 속성이 동일하다면//타입스크립트는 서로 호환 가능하다.interface Pet { name: string;}interface Cat{ name: string; age: number;}let pet : Pet;let cat: Cat = {name: "zag", age: 2};pet = cat;//함수도 가능function greet(pet: Pet){ console.log(pet.name);}greet(cat);//class, interface, type, 모두 구조적 서브 타이핑 가능 값과 타입 공간에 동시에 존재하는 심볼인 class 와 enumclass Rectangle { "height": numb.. 2024. 8. 30. [React][TypeScript] 타입스크립트에 대해 알아보자 목차 타입스크립트가 무엇이고 왜 써야하는지 그리고 활용 방법에 대해 알아보자 타입스크립트란?타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(static type language)이다.자바스크립트가 확장된 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고 브라우저에서 실행하기 위해서 컴파일(complile)이라는 변환 과정을 거쳐야 한다. 타입스크립트는 왜 써야 하는거지?1. 에러의 방지// jsfunction sum(a, b) { return a + b;}// tsfunction sum(a: number, b: number) { return a + b;} number 타입에 문자열을 할당할 수 없다고 에러가 발생하게 되어 의도하지 않은 코드의 동작을 예방할.. 2024. 8. 28. 이전 1 2 3 4 5 ··· 10 다음 728x90
