우아한 테크코스26 생각해보기🤔 - 영화 리뷰 🍿 실제 API를 테스트해야 하는 경우와 fixture를 이용하여 테스트하는 것은 어떻게 다르고 각각 언제 사용하는 것이 좋을까요? 1. 실제 API 테스트 실제 API를 호출하여 서버와 클라이언트 간의 상호 작용 테스트 가능 실제 서버에 요청을 보내고 응답을 받아 작동 확인 네트워크 지연 및 다양한 요청/응답 시나리오 시뮬레이션 가능 API 변경이 일어난 경우 업데이트 된 API가 올바르게 작동하는지 확인 가능 2. fixture를 이용한 테스트 실제 서버를 사용하지 않기 때문에 빠른 테스트 실행이 가능하며 외부 API 의존성 없음 응답 데이터를 미리 정의함으로써 예상되는 결과를 확인하고 특정 함수 또는 모듈만을 대상으로 테스트 수행 가능 🍿제네릭은 왜 사용할까요? 1. 타입 안정성 제네릭을 사용하면 .. 2023. 6. 18. 생각해보기🤔 - 점심 뭐 먹지 🍛 TypeScript에서 type alias vs interface 1. 선언방식 type alias는 type 키워드를 사용하여 선언하며, interface는 interface 키워드를 사용하여 선언한다. // type alias type AliasType = { prop1: string; prop2: number; }; // interface interface InterfaceType { prop1: string; prop2: number; } 2. 확장 방식 type alias는 다른 타입과의 결합(union)이나 교차(intersection)로 타입을 확장할 수 있다. interface는 확장(extends)과 구현(implements)을 통해 다른 인터페이스를 상속하거나 클래스와 함께 사용할 .. 2023. 6. 17. 생각해보기🤔 - 로또 🎱 JS의 class와 같은 기능을 class 문법 없이 구현할 수 있을까요? 생성자 함수와 프로토타입을 사용해 구현할 수 있다. // 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } // 메소드 추가 Person.prototype.sayHello = function () { console.log('안녕하세요! 제 이름은 ' + this.name + ' 입니다.'); }; // 인스턴스 생성 const person1 = new Person('철수', 25); const person2 = new Person('영희', 23); // 메소드 사용 person1.sayHello(); // 안녕하세요! 제 이름은 철수 입니다. pe.. 2023. 6. 17. 생각해보기🤔 - 자동차 경주 🚗 함수를 선언하는 다양한 방식은 각각 어떤 차이가 있나요? 함수 선언식 function functionName() { // 함수 내용 } 함수가 호이스팅(Hoisting)이 되어 선언 위치에 상관없이 사용할 수 있다. 즉, 함수를 선언하기 전에 호출할 수 있다. 함수 표현식 const functionName = function() { // 함수 내용 } 화살표 함수 const functionName = () => { // 함수 내용 } 자신만의 this 값을 가지지 않기 때문에, 상위 스코프의 this를 참조한다. 생성자 함수 function ConstructorFunction() { // 프로퍼티 및 메소드 정의 } 즉시 실행 함수 (function() { // 함수 내용 })(); 🚗 어떤 경우에 .. 2023. 6. 16. 레벨2 - 장바구니 협업 리뷰 피드백 1. msw와 리액트 렌더링의 순서 리액트 렌더링보다 msw가 먼저 실행되어야 한다. 그래야 렌더링 과정에서 API 호출과 관련된 오류가 나면 잡아낼 수 있기 때문이다. 2. breakpoint 상수화 화면 breakpoint도 상수화를 하면 일관되게 반응형 디자인을 구현할 수 있다. @media (max-width: 640px) { @media (max-width: ${breakpoint.MD}) { 3. props는 필요한 것만? 통째로? orderProducts, showDetailsLink, }: OrderProductListProps) => { const { orderId, orderDateTime } = orderProducts; orderId와 orderDateTime 두 개만을 사용하고 있.. 2023. 6. 8. 레벨2 - 페이먼츠 리뷰 피드백 1. 함수형 업데이트 기존 상태를 기반으로 업데이트하는 방식은 좋지 않다. 리액트에서 상태 업데이트는 비동기적으로 일어날 수 있기 때문에 상태를 직접 참조하거나 이전 상태를 바로 사용하면 예상치 못한 결과를 초래할 수 있다. const addCardItem = (cardItem: CardItemInfo) => { const updatedCardList = [...cardList, cardItem]; setCardList(updatedCardList); }; 따라서 위의 방식보다는 아래의 함수형 업데이트 방식을 사용해 보자. const updateCardList = (cardItem: CardItemInfo) => { setCardList((prevCardList) => [cardItem, ...prevC.. 2023. 6. 7. 이전 1 2 3 4 5 다음
