본문 바로가기

공부 정리/웹(Web)39

typescript 이점, 타입추론 typescript의 이점(쓰는 이유) 자바스크립트를 사용하면 런타임에러가 발생하여 오류가 어디서 났는지, 찾기 힘들 수 있지만 타입스크립트를 사용하면 컴파일 시, 오류를 감지하여 에러를 발견할 수 있다 ! 타입추론 let number1 = 5; let number1: number = 5; 위 방식은 타입을 추론하여 적용할 것이고, 아래 방식은 명시적으로 타입을 입력하여 준 것 입니다. 타입추론을 하여도 정상적으로 타입이 정상적으로 지정되기 때문에, let number = 5; number="haha" 같은 코드도 에러가 발생합니다. 2022. 8. 13.
AAA 테스트 패턴 AAA란 테스트할때 주로 사용하는 패턴으로 Arange Act Assert 세 단어의 약자입니다. Arrange Arrange는 테스트를 위한 준비를 의미 합니다. Act 실행할 부분을 실행합니다. (버튼의 이벤트를 발생 시킨다던지...) Assert 원하는 대로 작동하는지 검증합니다. 간단한 예시 화면을 그리고 어떠한 버튼을 클릭했을 때, 특정 문구가 뜨는가? Arrange - 화면그리기 Act - 버튼 클릭 Assert - 특정문구 있는지 확인 code import MyScreen from "./MyScreen"; import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-eve.. 2022. 7. 18.
[React] lazy loading Lazy Loading이란? lazy loading이란 말그대로 느린 로딩을 의미합니다. react를 사용하여 렌더링을 할때, 프로젝트가 클수록, 초기 렌더링 시간이 오래걸리기 때문에 이를 해결해야할 필요성이 있습니다.(CSR을 채택하기 때문) 그리하여 나온 방법이 한번에 다 로딩하지 않는 느린 로딩 방식입니다. 처음에 모든페이지를 다 렌더링 하지않고 특정 페이지를 요청했을때 js를 다운받아오는 방식입니다. 문법 lazy Loading 안썼을 때 import A from './경로'; lazy Loading 썼을 때 const A = React.lazy(() => import('./경로'); 이제 A컴포넌트는 필요시에만 다운로드되어 작동합니다. 문제점 근데 이렇게 까지만 구현하면 원하는대로 작동하지 않습.. 2022. 7. 11.
테스트 피라미드 오늘은 테스트 피라미드 구조에 대해서 공부 했습니다. 피라미드 구조인 이유는 test빈도수에 있습니다. 유닛 테스트는, 통합테스트보다 더 많이하고, 통합테스트는 UI테스트보다 더 많이하고... 그런식 입니다. UnitTest란 작은 컴포넌트, 하나의 기능을 하는 함수처럼 잘개 쪼개어 테스트해보는 것 입니다. Integration은 Unit테스트에서 이루어진 것들을 합쳤을때도 제대로 동작하는지 테스트 해보는 것 입니다. end-to-end(UI)는 통합테스트를 통해 이루어진 하나의 서비스를 테스트 해보는 과정입니다. 그림에서 보다시피 유닛테스트로 갈수록 컴포넌트가 작고, 기능이 적기 때문에 빠르게 테스트하며, 독립적이지만, 유저테스트로 갈수록 그 반대입니다. 2022. 6. 28.
Js for in Vs for of 글 작성 동기 for in, for of는 es6에 추가된 문법인데,, 계속 for만 쓰는버릇 하니까 for in 과 for of에 익숙해지지 않는 것 같아서 블로그 포스팅하여 정리했습니다. 일단 결론부터 말하자면 for in는 객체 순환시에, for of는 배열 순환시에 사용합니다. 예제를 통해 자세히 보겠습니다. const obj = { age: 15, height: 150, weight: 50, }; for (let a in obj) { console.log(a); // age height weight console.log(obj[a]); //15 150 50 } const arr = [15, 150, 50]; for (let a of arr) { console.log(a); //15, 150, 5.. 2022. 5. 20.
싱글톤 패턴(Singleton Pattern) 싱글톤 패턴이란? 싱글톤...single...single... 싱글톤은 하나만 가지고 노는 패턴 입니다. 즉, 하나의 클래스에 하나의 인스턴스만 가집니다. 예를 들면.... 책 하나 사서 친구랑 돌려보기,,, 게임cd 하나 사서 친구랑 돌려쓰기 같은 느낌인 것 같습니다. 즉 하나를 생성해서 여기저기 쓰는 패턴을 말합니다. 자바스크립트의 싱글톤 ex1) const ob1 ={ num1: 1 } const obj2 ={ num: 1 } console.log(obj1 === obj2) // false ex2) let instance; let Singleton = { instance: instance, createInstance: function () { let object = new Object("I am t.. 2022. 4. 30.
반응형