본문 바로가기

타입스크립트4

Graphql-codegen과 eslint/prettier ,TIL(복습 10일차) 자유게시판 실습 실무에서 early exit pattern을 이용하여 효율적인 코드를 작성하곤 한다. if ( !myTitle && !myContents && !youtubeUrl && !address && !addressDetail && !zipcode && !isChangedFiles ) { Modal.error({ content: "하나는 입력해야합니다." }); return; } if (!myPassword) { Modal.error({ content: "비밀번호를 입력해주세요." }); return; } 위 코드블록에서 게시글을 업데이트 하는 함수 안에 초기에 if문을 사용하여 변경된 내용들이 없으면 에러 모달창을 띄어주는데 여기서 return을 하면서 함수를 종료시켜 효율적인 코드를 만들어준다.. 2022. 3. 27.
타입스크립트, TIL(복습 9일차) TypeScript, 안전한 코드 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어이다. yarn add typescript --dev 타입스크립트를 yarn으로 설치를 하는데 --dev가 들어간 건 처음이었다. --dev는 devDependencies, 브라우저 실행시 필요한 목록인 dependencies와 달리, 개발 시 vscode에서 필요한 목록으로 설치 된다는 의미다. dev는 development, 개발시에만 필요한 모록으로 이해하게 됐다. 그러면 브라우저 실행 시에는 필요 없다. 설치가 완료되면, tsconfig.json 설정파일을 만들고 yarn dev를 구동시키면 Next.js가 tsconfig에 내용을 채워준다. JSX의 여부에 따라서 확장자명은 없으면 .. 2022. 3. 26.
TS GENERIC TS GENERIC 제너릭을 이용하면 클래스나 함수 인터페이스를 다양한 타입으로 사용할 수 있다. 선언할 때는 그냥 타입 파라미터만 적어주고 생성하는 시점에 사용하는 타입을 결정한다. function getSize(arr: number[] | string[]):number{ return arr.length } const arr1 = [1,2,3] getSize(arr1) const arr2 = ["a", "b", "c"] getSize(arr2) 이렇게 arr이 늘어나 함수를 사용하게 되면 계속 타입이 늘어나게 된다. 이때 function getSize(arr: T[]): number{ return arr.length; } getSize에서 T는 어떤 타입을 전달받아서 이 함수에서 사용할 수 있도록 한다.. 2022. 2. 14.
자바스크립트(JS)와 타입스크립트(TS) 자바스크립트, Javascript 자바스크립트는 웹 개발에 가장 많이 사용되는 프로그래밍 언어이다. 메모리 측면에서 가볍고, 크로스 플랫폼(여러 종류의 컴퓨터 플랫폼) 개발을 지원하는 객체 기반 스크립팅 언어 웹 사이트의 클라이언트 쪽 동적 페이지(서버에 있는 데이터들을 스크립트하여 가공처리해 전달되는 페이지)를 만드는데 적합 HTML 페이지에서 사용되고, 페이지가 로드될 때 자동으로 실행 실행을 위한 별도의 준비나 컴파일이 필요하지 않음 서버 커뮤니케이션 : 페이지를 서버에 전송하기 전, 사용자 입력의 유효성을 검사하는 옵션 제공 상호 작용 : 마우스 hover 시 나타나는 인터페이스 등 낮은 reloading 속도 : 코드를 즉시 참조하므로 개발자가 업데이트한 사항을 페이지가 다시 로그도리 때까지 기.. 2022. 1. 20.