건브로의 소소한 개발

1. 제네릭이란? 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있는 문법이다. 타입스크립트 문서에서는 아래와 같이 정의하고 있다. C#과 Java 같은 언어에서, 재사용 가능한 컴포넌트를 생성하는 도구 상자의 주요 도구 중 하나는 제네릭입니다, 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있습니다. 사용자는 제네릭을 통해 여러 타입의 컴포넌트나 자신만의 타입을 사용할 수 있습니다. https://www.typescriptlang.org/ko/docs/handbook/2/generics.html Documentation - Generics Types which take parameters www.typescriptlang.org 2. 타입이 고정적일 때 //TypeScript c..

1. 인덱스 속성(Index Property) 인덱스 속성은 이름이 안정해진 속성의 타입을 정의한다. //typescript //오류가 나는 경우 interface Animal { [props: number]: string } const sparrow: Animal = { name: '참새' } //정상적으로 작동하는 경우 interface Animal { [props: string]: string } const chicken: Animal { name: "꼬꼬" } 위의 코드에서 sparrow 값 할당 할 때 오류가 발생한다. sparrow의 속성인 name은 string이지만, Animal 인터페이스에 정의 된 것은 숫자이다. 그러므로 숫자 속성으로 밖에 못 쓴다. 2. 함수 오버로드(Function..

1. 인터섹션 타입(Intersection Type) 이 타입은 다른 타입과 합칠 수 있도록 도와주는 문법이다.(interface도 된다) 쓰는 방법은 어렵지 않다. 아래 intersection type이 적용된 ElevatedEmployee의 내용으로는 Admin과 Employee 타입이 합친 상태일 것이다. ElevatedEmployee의 타입 내용 name: string; privileges: string[]; startDate: Date //typescript type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; // intersection type type El..

node.js는 자바스크립트 실행기입니다. 즉, 브라우저에서 개발자 도구 콘솔 창에서 실행 안 해도 컴퓨터에서도 동작한다는 것입니다. 노드의 이러한 동작을 REPL이라고 합니다!! R은 Read, E는 Eval P는 Print, L은 Loop 이 단어들을 합치면, "읽고나면 해석해서 반환하고 다시 반복한다"입니다. REPL을 실행하려면, cmd에 node를 입력해야 합니다. (node.js를 다운로드하으셔야 가능합니다.) 이렇게 브라우저 콘솔처럼 제가 넣은 짧은 코드에 대해서 결과가 나옵니다. undefined가 나오는 이유는 console.log()가 return 값이 없어서 그렇습니다. 1. 자바스크립트 파일 실행해보기 이렇게 node에 파일 이름만 써서 실행도 가능합니다. 2. 모듈로 만들어보기 /..

안녕하세요 건브로입니다. node.js뿐만 아니라 자바스크립트도 해당하는 부분인데요. node.js는 자바스크립트 실행기니까 당연히 해당합니다! 1. 이벤트 기반 node.js는 이벤트 기반으로 동작합니다. 2. 이벤트 루프와 관련된 용어 이벤트 루프란 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정하는 역할을 담당합니다. 노드가 종료될 때까지 이벤트 처리를 위한 작업을 반복해서 루프라고 부릅니다. 백그라운드란 타이머나 비동기적으로 실행되는 이벤트 리스너들이 대기하는 곳입니다. 이 부분은 호출 스택과 동시에 돌아가므로 싱글 스레드 기반인 node.js가 아닌 다른 언어로 된 부분입니다. 태스크 큐란 이벤트 발생 후, 백그라운드에서는 태스크 큐로 타이머나 이벤트 리스너..

안녕하세요 건브로입니다!! 오늘은 유용하게 사용하는 Array 내장 함수에 대해서 간단하게 알아보려고 합니다! 1. map 함수 const celebrities = ['헤이즈', '박보영', '송중기', '치즈', '조이']; //for문 사용해서 하나씩 출력하기 for(let i = 0; i< celebrities.length ; i++){ console.log(celebrities[i]+"는 제가 좋아하는 연예인입니다."); } //결과 //헤이즈는 제가 좋아하는 연예입니다. //박보영는 제가 좋아하는 연예입니다. //송중기는 제가 좋아하는 연예입니다. //치즈는 제가 좋아하는 연예입니다. //조이는 제가 좋아하는 연예입니다. //for문과 동일한 기능으로 사용하기 celebrities.map((ce..

안녕하세요! 건브로입니다. 오늘은 자주 사용하는 ES6 문법에 대해서 정리하려고 해요. ES6 문법은 가장 보편 하게 쓰이고 있는 자바스크립트 표준 문법입니다. ES6중에서 자주 사용하는 문법을 소개하겠습니다. 제가 정리하는 순서는 화살표 함수(arrow function), Class, let과 const 키워드 그리고 scope , Spread 연산자, Template String입니다. 1. 화살표 함수 //일반 함수 function have(name, object){ return name+"이(가)"+object+"를(을)가지고 있다"; } let info = have("건브로", "컴퓨터"); console.log(info); //결과 //"건브로이(가)컴퓨터를(을)가지고 있다" //화살표 함수 ..

안녕하세요. 건브로입니다. 오늘은 HTTP 통신에 대해서 한 번 다루어 보도록하겠습니다. 1. HTTP란 무엇인가? HTTP란 Hyper Text Transfer Protocol의 약자이다. 즉, HTML 문서를 전송하기 위한 프로토콜이다. 그리고 클라이언트와 서버의 약속이라고 봐도된다. 2. HTTP 메세지의 구조는 어떻게 될까? 먼저 HTTP 메세지 의 구조는 크게 두 가지로 나뉘어진다. 바로 그 두 가지가 헤더와 바디이다. 먼저 예시 코드를 보여주겠다. 로그인 form { display: flex; flex-direction: column; align-items: center; } form section{ display: flex; justify-content: center; } form secti..

안녕하세요 건브로입니다. 오늘은 JWT에 대해서 정리 해보겠습니다. 일단, 정리하기 전에 이 글은 정리한 만큼 저의 생각도 포함되어 있습니다. 그리고 구글링으로 찾아봐도 잘 없는 mysql + express + react를 제가 직접 부딪히면서 만들어본 경험을 바탕으로 글을 쓰겠습니다. ※주의: 1.밑에 나오는 코드는 새로 쓴 코드가 아닌 제가 만들다가 적용한 코드이므로 부분적으로만 참고하기를 바랍니다. 2. 클라이언트와 서버를 클라이언트 쪽 package.json에서 proxy를 적용해서 클라이언트와 서버가 통신이 가능하다는 전제로 보셔야 합니다. 3. mysql table 만드는 부분은 생략했으며, 쿼리를 이용해서 데이터를 꺼내거나 데이터를 넣는 것만 설명이 있으니 주의 바랍니다. "proxy": "..

안녕하세요 건브로입니다. 오늘은 Redux에 대해서 정리를 해보려고 합니다. 1. Redux란 무엇인가? Redux란 상태 관리를 쉽게 해주는 자바스크립트 기반 기술이다. 아마 react를 하면서 redux를 같이 배우는 사람들이 많은 걸로 알고 있다. 나도 이번에 react 공부하다가 redux를 알게 되었고 공부하게 되었다. 2. Redux 코드들 분석하기 Redux에는 여러 가지 함수들이 있다. 1) createStore() createStore()는 데이터를 넣을 수 있는 장소를 생성해주는 함수이다. 하지만 createStore의 인수로는 reducer 인수가 들어가야 한다. 2) reducer() reducer()는 data를 수정하는 함수이다. return 값으로는 state data를 전달할..