분류 전체보기 (84) 썸네일형 리스트형 [주니어도 하는 타입스크립트] 리액트에서 타입스크립트로 코드 짜기 (feat. 제네릭) 리액트 실무자로서, 타입스크립트를 활용한 리액트 프로젝트는 어떻게 만드는지 궁금해졌다. 그래서 제네릭 기법을 활용한 간단한 타입스크립트 코드를 리액트에서 실행시켜보기로 했다. 제네릭 사용법은 앞에서 이미 숙지한 바 있으므로 아래 링크로 대체한다. [주니어도 하는 타입스크립트] 제네릭이란 무엇이고 어떻게 쓰는것일까? 먼저 타입스크립트에서 예제를 통해 사용하는 일반적인 제네릭 사용법을 숙지해보자. type User = { id: number; name: string; gender: number; } function testUser(value: any): any { return value; } functio.. bomango.tistory.com 먼저 타입스크립트 코드 기반으로 리액트 프로젝트를 만드려고 한다.. [주니어도 하는 타입스크립트] 제네릭이란 무엇이고 어떻게 쓰는것일까? 먼저 타입스크립트에서 예제를 통해 사용하는 일반적인 제네릭 사용법을 숙지해보자. type User = { id: number; name: string; gender: number; } function testUser(value: any): any { return value; } function testUserInfo (obj: T): T { return obj; } let test1 = testUser(10); let test2 = testUserInfo('10'); let test3 = testUserInfo({id: 1, name: '홍길동', gender: 1}) test1의 경우 타입이 any로 설정되었으므로 숫자 10이 들어가도 아무 문제가 없다. 대신, 숫자가 아닌 스트링이나 다른 타입이 들어.. [주니어도 하는 타입스크립트] 리액트 프로젝트에서 타입스크립트 사용하기 타입스크립트를 이용하면 코드를 보다 안정적이고 재사용가능하게 짤 수 있다는 이점이 있어, 이 부분을 평소 쓰던 프레임 워크인 리액트에 이용하고 싶어졌다. 그래서 리액트에 타입스크립트로 프로젝트를 생성해보고자 했다. 마침 리액트 공식 문서에 이 부분이 친절히 명시되어 있다. 1. 타입스크립트로 리액트 앱 생성하기 npx create-react-app my-app --template typescript 혹은 yarn create react-app my-app --template typescript 로 명령어를 치면 tsx 확장자로 앱이 생성된다. 2. 리액트 앱에 타입스크립트 추가하기 이미 리액트 앱이 생성이 되어 있다면 install 혹은 add로 타입스크립트 추가가 가능하다. npm install --s.. 유튜브 임베드 오류 failed to execute 'postmessage' on 'domwindow': the target origin provided ('<url>') does not match the recipient window's origin ('<url>'). failed to execute 'postmessage' on 'domwindow': the target origin provided ('') does not match the recipient window's origin (''). 슬라이드에 유튜브 영상들을 임베드하는 작업을 하고 있었다. 이때 슬라이드가 돌아가면 재생중이던 유튭 영상이 일시정지 되어야 했다. 구글링을 해보니, postMessage로 유튭 영상을 제어할 수 있었다. 슬라이드 오른쪽 왼쪽 버튼을 클릭할때마다 (혹은 슬릭과 같은 라이브러리 사용시에는 afterChange 이벤트 후에) 아래의 코드를 넣었다. const player = document.querySelectorAll('.video_player'); for (let idx in.. [자바스크립트+타입스크립트] 왕초보도 이해한 '클로저' 완전 분석 클로저란 무엇일까? 여러 문서들을 살펴봐도 정확하게 개념을 깨우치기 너무 힘들었다. 대략 본인이 이해했을때 '클로저'란 외부에 존재하는 데이터에 접근할 수 있는(엮여있는) 함수를 말한다. function outerFunc() { let name = "bomango"; return function callName() { console.log(name); } } const func = outerFunc(); func(); 위의 예제에서 outerFunc라는 함수 안에는 name이라는 변수와 callName이라는 함수가 존재한다. 위 예제에선 callName이라는 함수가 클로저로 작용한다. 클로저가 작동하기까지의 과정을 실행 순서를 통해 살펴보자. 1. 먼저 func라는 변수에 outerFunc라는 함수가 저.. 인터페이스에서 readonly 제어가 안되는 오류 타입스크립트를 공부하면서 인터페이스에 readonly를 줬는데도 프로퍼티가 제어가 안되고 수정이 되는 오류?를 발견했다. 대체 왜 readonly가 안 먹히는 걸까! 고민하면서 열심히 찾아본 결과, 인터페이스의 개념과 상속 부분을 제대로 이해하지 못했다는 걸 깨달았다. interface Container { readonly name: string; readonly age: number; } class Person implements Container { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; console.log(`${this.name} is ${this.age}.. 타입스크립트 왕초보의 '클래스' 개념 정리 기본 자바스크립트에서 개발을 시작한 프엔들에게 클래스라는 개념은 너무나 거리가 멀다. 그래서 처음 클래스를 접하면서 납득하기? 어려웠던 개념 정리를 해보고자 한다. 1. 자바스크립트 클래스 vs 타입스크립트 클래스 클래스는 객체를 생성하기 위한 템플릿이자 '함수'다. 자바스크립트에서는 es6 이후 현재 사용되는 클래스 기반의 개발이 시작됐고, 타입스크립트로 넘어가면서 보다 엄격한 객체 지향형 개발이 가능해졌다. 타입스크립트의 클래스가 자바스크립트의 그것과의 가장 큰 차이는 프로퍼티에 타입을 선언해야 한다는 점이다. /* 자바스크립트 */ class Animal { constructor(name) { this.name = name } call () { return this.name } } let dog =.. react portals로 popup 혹은 tooltip툴팁 만들기 리액트를 시작한지 어언 5개월차.. 매번 쓰던 hook 말고도 다른 기능들을 독학하기로 결심했다. 그중 리액트 포탈이라는 것을 보고 여기 정리해두고자 한다. 리액트의 기능 중 하나인 Portal 포탈은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공.. 한다고 공식 문서에 명시되어 있다. Portals – React A JavaScript library for building user interfaces ko.reactjs.org 쉽게 말하자면 객체를 생성했다가 원하는 DOM 위치에 추가해주는 기능을 가지고 있다. 때문에 팝업이나 툴팁처럼 같은 스타일의 컴포넌트를 여러 페이지에서 돌려막기? 할 때에 유용하게 쓰일 것 같다. 우선 마크업은 대충 요렇게 짜봤.. yarn 실행 오류, Set-ExecutionPolicy : 레지스트리 키 엑세스 거부 해결 방법 git으로 업무를 하는데 pc를 옮기면서 새롭게 클론을 받다보니 여러 오류와 맞딱뜨리고 있다. 명령어 yarn을 쳤더니 이 시스템에서 스크립트를 실행할 수 없으므로 ~~파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies~~를 확인해보라는 경고 메시지가 뜬 것이다. 그래서 검색해보니 Set-ExecutionPolicy 명령어로 제한을 풀어야한다는 것. 그냥 터미널에서 Set-ExecutionPolicy를 치니까 보안때문에 여전히 명령어가 안먹힘. Set-ExecutionPolicy : 레지스트리 키에 대한 액세스가 거부되었습니다. 라는 경고가 뜸. 이럴땐 파워쉘을 관리자 권한으로 접속해야한다. 쉽게 들어가는 방법 윈도우 검색 -> powershell -> 오른쪽 버튼을 .. 최신 우분투 mysql 계정 생성하고 실행까지! 워크벤치로 쉽게 접속하기 Node.js 시작하기 express로 hello world 찍어보자 Node를 공부하면서 지난 블로그에 셋팅 과정들을 기록해왔다. NVM 설치하기 (node 버전 관리 / 윈도우에서 작업 환경 세팅하기) 구글 클라우드 플랫폼에서 VM인스턴스를 생성하고 ssh 접속까지 완료 bomango.tistory.com 이전 시간에 node.js에서 express를 이용해 hello world를 찍는 것까지 공부했다. 이번에는 mysql에서 데이터베이스를 생성하고 거기서 직접 데이터를 받아오려고 하는데, 쪼렙인 내겐... mysql을 실행하고 계정을 만드는 것부터가 굉장한 고난이었다.. 우선 workbench를 다운로드 한다. dev.mysql.com/downloads/workbench/ MySQL :: Downl.. 이전 1 2 3 4 5 ··· 9 다음
