목록프로그래밍 언어 (55)
하다보니
style 태그의 scoped 속성 - 해당 컴포넌트 안에서만 유효한 스타일 속성 화면에서의 데이터 변경과 vue 인스턴스의 데이터 변경이 동기화 되는 것을 확인할 수 있다. slot 특정 컴포넌트를 다른 컴포넌트에서 사용할 때, 특정 코드들을 재정의할 수 있다. vue transition v-enter : 시작 v-enter-to : 끝 호이스팅 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다. Enhanced Object Literals - 향상된 객체 리터럴 - 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능 Modules - 자바스크립트 모듈화 방법 - 자바스크립트 모듈 로더 라이브러리(AMD, CommonJS) 기능을 js 언어 ..
v-for {{people[0].name}} {{people[0].age}} {{people[1].name}} {{people[1].age}} {{people[2].name}} {{people[2].age}} {{people[3].name}} {{people[3].age}} {{person.name}} {{person.age}} {{person.name}} {{person.age}} {{person.name}} {{person.age}} {{index}} v-for를 사용해서 객체의 속성을 반복할 수도 있다. {{ value }} {{ index }}. {{ name }}: {{ value }} new Vue({ el: '#v-for-object', data: { object: { title: 'How ..
뷰 인스턴스 생성하기 모든 vue 앱은 Vue 함수로 새 vue 인스턴스를 만드는 것부터 시작한다. vue 인스턴스를 생성할 때는 options 객체를 전달하여야 한다. vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성된다. new Vue({ el:'#app', data:{ number:1, show:false }, methods:{ increaseNumber(){ this.number++ }, toggle(){ this.show=!this.show }, } }) 뷰 데이터와 메소드 vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 vue의 반응형 시스템에 추가된다. 각 속성값이 변경될 때 뷰가 반응하여..
npx create-next-app@latest --typescript library는 개발자로서 내가 사용하는 것이다. library를 불러와서 library를 사용해서 무언가를 한다. 그런데 framework는 내 코드를 불러오는 것이다. framework는 코드를 적절한 위치에 잘 적기만 한다면 너의 코드를 불러와서 모든 걸 동작하게 할 것이다. library를 사용할때는 내가 원하는대로 코드를 작성할 수 있고, 사용하고 싶을 때 사용할 수 있다. 리액트 같은 경우는 내가 원하는대로 routing을 다룰 수 있고, 파일명을 정할 수도 있다. 라이브러리는 내가 원할 때 언제든 어떤방법으로든 부르면 된다. 프레임워크에선 특정한 규칙을 따라서 특정한 것을 해야 한다. 우리가 그것들을 따랐을 때 모든 게 ..
알아둬야하긴 하지만 자주 사용하지는 않을 것이다. nestJS, nextJS, CRA를 사용하는 대부분의 사람들은 수동으로 타입스크립트 프로젝트를 만들 일이 거의 없다. 이런 프레임워크랑 라이ㅡ러리, 패키지들이 우리를 위해 타입스크립트 프로젝트를 만들어 준다. 타입스크립트의 구성에 대한 인사이트를 제공. - npm init -y - package.json 아래와 같이 수정 아래 name은 제가 만든 파일 명입니다. { "name": "typescript-chain", "version": "1.0.0", "description": "", "scripts": { "build": "tsc" }, "keywords": [], "author": "", "license": "ISC", "devDependencies..
TypeScript로 객체 지향 프로그래밍 해보기 class Player{ constructor( //아래의 private이 js에선 보이지 않는다. private firstName:string, private lasetName:string, public nickname:string ){} } const nico=new Player("nico","las","니꼬") //firstName은 private이라 접근 불가 nico.firstName 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말한다. 그러므로 추상 메소드는 구현부가 없고 선언부만이 존재한다. 추상 클래스는 추상 메소드를 하나 이상 포함한 클래스이며, 정의되지 않은 추상 메소드를 포함..
타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 왜 타입스크립트를 써야하나? - 에러 사전 방지를 위해. 아래와 같이 작성하면 sum('10','20')과 같이 의도하지 않은 값의 동작을 예방할 수 있다. // math.ts function sum(a: number, b: number) { return a + b; } - 코드 자동 완성과 가이드 VS code의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어있다. 따라서 VS code에서해당 타입에 대한 apif르 미리보기로 띄워줄 있어 빠르게 자동 완성이 가능하다. 타입스크립트 장점 타입이 있다는 것이 장점이다. 타입 안정성이 가장 큰 장점이다. 안정성-컴파일 단계에서 미리 오류를 감지할 수 있다. 가독성-타입을 보고 이 로직..
함수에 배열을 전달할 때 배열을 구성하는 요소들이 모두 복사되어 전달되는 것이 아니라 배열의 값들을 가리키는 주소만 전달된다는 것을 알 수 있다. 함수 내에서 전달받은 배열에 새로운 값을 추가하면 함수 밖의 원래 배열에도 추가가 된다. 함수 내에서 새로운 배열을 할당하면 다른 배열을 가리키게 되면서 변수가 가리키는 주소가 달라져서 함수 내에서 아무리 변경해도 함수 밖의 원래 배열에 영향을 끼치지 못한다. 함수 인수 전달 방식 Call by Value 함수에 인수를 전달하는 방식. 변수의 값을 복사해 함수의 인자로 전달한다. 따라서 함수 내에서 전달된 인자를 조작해도 함수 외부의 변수에는 영향을 미치지 않는다. Call by Reference 함수에 인수를 전달하는 방식 포인터로 함수의 인자에 전달하는 방..
useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜준다. 메모이제이션은 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야한다면 이전에 계산한 값을 캐싱해둠으로 해당 값이 필요할 때마다 반복적으로 계산하는 것이 아니라 메모리에서 꺼내서 재사용하는 최적화 기법이다. useMemo의 인자로 콜백함수를 넣어주면 이 함수가 리턴하는 값을 메모이제이션 해주는 것이다. useCallback은 인자로 전달한 콜백함수 자체를 메모이제이션 해준다. 이 함수가 필요할 때마다 메모리에서 가져와서 재사용한다. JS에서 함수는 객체의 한 종류이다. calculate라는 변수에 객체가 할당되는 것이다. 리액트에서 함수형 컴포넌트는 함수이다. 그래서 렌더링된다는 것은 component 함수가 호출된다..