본문 바로가기

분류 전체보기

 (86)
Mac m2 소스트리(github) 연결 + 소스트리에 클론할때 비밀번호 확인창 계속 뜨는 오류 해결 맥북 에어 M2를 구입했다! m2에 기존 쓰던 것들을 셋팅하고 있는데, 쉽게 되던 것들이 요상하게 막혔다. 본인은 github에 소스코드들을 저장하고 있고, 이를 GIT GUI인 sourcetree를 통해 관리하고 있다. 이전 맥에서 https로 소스를 관리하다보니 어느순간 토큰 에러 같은게 뜨면서 더이상 지원되지 않았다. https가 막히면서 작업 도중에 ssh로 변경했는데 그러다보니 약간의 우여곡절이 있었음.. 그래서 이번엔 애초부터 ssh로 연결하기로 했다. 우선 계정...으로 들어가 새 계정을 추가했다. 위처럼 github로 로그인해 계정을 연결하면 SSH 키에 .pub 파일이 생성되는데 바로 아래에 클립보드에 복사 버튼을 누르면 ssh키가 복사가 됩니다! (아무것도 안떠서 처음엔 당황했지만 확인..
React에서 (api 데이터) json형식 데이터 가져오기 및 원하는 데이터 추출 등 데이터 관리 방법! 프로젝트를 하다보면 작고 큰 데이터들을 가져다가 출력하고 수정하고 삭제하고 등등의 작업들을 처리한다. (보통은 이런 작업들이 전체 작업의 주를 차지하는 것 같다..) 규모가 큰 데이터 혹은 등록, 수정, 삭제 등이 필요한 데이터는 당연히 api 통신을 통해 작업하는게 맞는데, 규모가 크지 않은 소소한 제품 데이터의 경우(별도의 추가나 수정이 필요없는)는 별도의 js 파일에 오브젝트 혹은 배열을 담은 변수로 관리 하곤 했다. // Item.js const Items = { data: [{ name: '아메리카노', taste: '쓴 맛', type: ['아이스', '핫'] }, { name: '라떼', taste: '고소한 맛', type: ['아이스', '핫'] }, { name: '말차라떼', tast..
[주니어도 하는 타입스크립트] 리액트에서 타입스크립트로 코드 짜기 (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 위치에 추가해주는 기능을 가지고 있다. 때문에 팝업이나 툴팁처럼 같은 스타일의 컴포넌트를 여러 페이지에서 돌려막기? 할 때에 유용하게 쓰일 것 같다. 우선 마크업은 대충 요렇게 짜봤..

티스토리툴바