NULL IS NULL SELECT * FROM 테이블이름 WHERE TITLE IS NULL; IS NOT NULL SELECT * FROM 테이블이름 WHERE TITLE IS NOT NULL; 집계함수 COUNT : 테이블에 존재하는 데이터 개수( 전체행의 갯수 가져올때는 NULL값도 포함, 특정컬럼의 갯수가져올때는 NULL 값 제외) 전체 행 갯수 가져오기 : SELECT COUNT(*) FROM 테이블; 컬럼 데이터 갯수 가져오기 : SELECT COUNT(컬럼) FROM 테이블; SUM : 테이블에 존재하는 컬럼의 합을 구하고 싶을 때 사용하는 함수.(컬럼의 타입이 숫자인경우에만 사용) 컬럼의 합 구하기 : SELECT SUM(컬럼) FROM 테이블; AVG : 컬럼의 평균을 구하고 싶을때 사..
AWS Elastic Compute Cloud (EC2) EC2특징 AWS 상에서 크기 조정이 가능한 컴퓨팅 파워 제공 가상화 서버를 인스턴스(instance)라고 부름 수천 개의 인스턴스로 컴퓨팅 파워 확장 가능 물리환경의 컴퓨터처럼 컴퓨팅 리소스를 제공하는 서비스, 가상머신으로 제공되며 인스턴스 라고불림 몇 분만에 새로운 서버 생성, 서비스 인프라 구축 유형에 따라 사용 목적과 비용을 지불하는 방식이 다름 범용(균형있는),컴퓨팅최적화(고성능), 스토리지최적화(로컬매우큰데이터), 메모리최적화(메모리대규모데이터), GPU 인스턴스 종류와 개수, 세대는 계속해서 변화하고 있음 완전히 새로운 인스턴스 타입도 탄생함(a type for ARM server) 따라서 현재의 분류는 큰 의미가 없음 EC2 인스턴스..
keyof 유저 인터페이스의 키 값중 하나를 불러올 때 유용하게 사용할 수 있는 keyof키워드입니다. keyof를 사용하면 유니온 타입을 사용한 것과 동일한 결과를 변수에 넣을 수 있습니다. User의 키에 없는 값을 넣으면 에러가 납니다. partial parital은 프로퍼티를 모두 Optional(선택적인)값으로 바꿔줍니다. 인터페이스에 선언한 값들 중 일부값만 넣으면 아래처럼 에러가 발생합니다. 아래와 같이 partial을 사용하면 일부만 사용해서 선언할 수 있게 됩니다. 즉 위의 인터터페이스가 아래의 인터페이스를 선언한 것처럼 사용할 수 있게 됩니다. partial이라도 선언하지 않는 키값을 넣을 수는 없습니다. Required required는 반대로 모든 값들을 필수 값으로 만들어줍니다. ..
제네릭의 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주활용되는 특징입니다. 특히, 한가지 타입보다 여러가지타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭을 사용하는 이유 아래의 코드는 인자를 하나 넘겨 받아 반환해주는 함수입니다. 함수의 인자와 반환값은 모두 string으로 되어있지만 만약 여러가지 타입을 허용하고 싶으면 any를 사용할 수 있습니다. function logText(text: string): string { return text; } 이렇게 any로 한다고해서 함수의 문제가 있는것은 아니지만 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수 없습니다. (any라는 타입은 검사하지 않기때문) function logTe..
클라우드 컴퓨팅이란 컴퓨팅 자원이 구름처럼 감춰져 있음을 의미 컴퓨팅 자원을 인터넷을 통해 비용을 지불하여 사용하는 주문형 서비스 사용자가 직접 컴퓨팅 자원을 구성 및 관리할 필요가 없음 NIST 정의 정보자원을 직접 구매하지 않고 전기나 수도처럼 서비스 형태로 클라우드(데이터)센터로부터 유무선 네트워크를 통해 필요한 만큼만 공급받아 상요하고 사용료 기준으로 임차하는 방식 클라우드 컴퓨팅 서비스 제공 방식 공공시설을 쓰는 것과 같은 컴퓨팅 환경 : 필요할 때, 필요한 만큼만 사용함(개인이 자원을 소유하지 않음) 분산컴퓨팅 환경을 기반으로 노드의 컴퓨팅 자원을 가상화하여 제공 : cpu, 스토리지, 네트워크 등 Amanzon WEB Service(AWs) 아마존 클라우드 컴퓨팅사업부를 중심으로 2006년 ..
자바스크립트 ES6+ 형태의 클래스와 동일하게 클래스를 만들어보겠습니다. 그랬더니 color에 오류가 발생합니다.(js에서는 정상적으로 작동합니다) 실제 js에서의 결과 타입스크립트에서 클래스를 작성할 때 맴버 변수는 미리선언해주어야합니다. 추가로 변수의 타입도 설정해줘야합니다. 멤버 변수를 선언하지 않고 사용 할 수 있는 방법이 있습니다. 바로 접근제한자나 readonly를 사용하는 것입니다. 접근제한자 js ES6에서는 접근제한자를 제공하지 않습니다. 타입스크립트에서는 사용할 수 있습니다. public , private , protected public public은 자식 클래스나 클래스 인스턴스에서 접근할 수 있습니다. 아무것도 작성하지 않으면 기본적으로 public이 됩니다. 부모클래스의 Car의..
리터럴타입 js에서는 const는 변하지 않는 값을 선언할 때, let은 변할 수 있는 값을 선언할 때 사용합니다. 겉보기에는 js와 별차이가 없어보이는데 마우스를 변수에 올려 확인해보면 userName1은 const이기 때문에 변하지 않습니다. 그렇기 때문에 userName1의 타입은 우리가 넣어준 "Bob"이 들어가고 userName2는 let이기 때문에 변할 수 있습니다. 그래서 string이 됩니다. 여기서 userName2에 다른 타입의 값을 넣고 싶다면 그 값의 타입을 명시해주어야 합니다. 그리고 여기서 userName1처럼 변하지 않는 값을 가진 변수의 타입을 문자열 리터럴 타입이라고 부릅니다. 앞에 배운것중 enum키워드가 있는데, 문자열리터럴 타입과 type키워드를 이용하면 이와 비슷한 ..
함수 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의 할 수 있습니다. 함수의 파라미터(매개변수) 타입 함수의 반환 타입 함수의 구조 타입 더하기 기능을 하는 함수를 만들면 아래와 같습니다. return 값이 없으면 void라고 적어줍니다. 선택적 파라미터(Optional Parameter) 인터페이스에서 했던 것처럼 ?를 이용해서 선택적으로 매개변수를 받을 수 있습니다.(매개변수의 타입은 지켜줘야합니다) 참고로 자바스크립트처럼 기본값(Default Value)를 넣어서 똑같이 구현할 수도 있습니다. 선택적 파라미터를 사용하면서 주의해야할점은 해당 매개변수는 필수 매개변수의 뒤쪽으로 와야합니다. 만약 선택적 매개변수가 앞으로 온다면 매개변수를 1개만 받았을 ..
인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다 객체의 스펙(속성과 속성의 타입), 함수의 파라미터, 함수의 스펙(파라미터, 반환타입 등), 배열과 객체를 접근하는 방식, 클래스 아래처럼 js에서는 객체를 정의하여 해당값에 접근할 수 있었는데 타입스크립트에서는 해당 객체의 데이터의 타입을 정의해줘야합니다. 즉 객체를 정의하고 싶을때는 인터페이스를 사용합니다. 생성방법 인터페이스는 먼저 앞에 Interface 타입이라는 것을 명시하고 일반적인 객체를 만들듯 만들어줍니다. 대신 인터페이스 안에 있는 프로퍼티(속성)에는 값이 아닌 타입이 들어갑니다. 그리고 객체를 만들 때 그 객체의 타입을 방금 만든 인..
number/string/array 기존 JS에서 사용했던 변수들을 TypeScript로 만들어 보겠습니다. 오른쪽이 js이고 왼쪽이 ts입니다. ts에서는 기존의 js에서 선언했던 변수에 타입만 명시해주면 됩니다. 만약 string만 들어가게 만들었는데 number타입을 넣으려고 한다면 어떻게 될까요? 오류가발생합니다. TypeScript를 사용하면 이렇게 특정변수 또는 상수의 타입을 지정할 수 있고 사전에 지정한 타입이 아닌 값이 설정 될 때 바로 에러를 발생시킵니다. tuple tuple은 배열과 비슷한 모양입니다. 인덱스별로 서로 다른 타입의 데이터를 넣을 수 있습니다. 타입의 순서를 미리 결정해 놓기 때문에, 올바르지 않는 데이터를 넣으면 오류가 발생합니다. void/never void : 함수..
문자열 자바스크립트 -> 문자열은 변경 x 한번생성되면 내용을 변경할 수 없다. 특수문자 출력 -> ``백틱안에 , \ -> \\2번작성해야 나온다. 자바스크립트 입력 자료형은 문자 , 숫자로 사용할려면 Number로 변환해줘야함. 소문자 ,대문자 변환 소문자 -> 대문자, 대문자 -> 소문자 문자열.charCodeAt(index) : 문자 ->아스키코드(숫자)로변환 String.fromCharCode(아스키코드숫자) : 아스키코드 -> 문자로변환 ex) str = aBcDeFg console.log(str.charCodeAt(0)-32) : 97(a)-32 =65(A) console.log(String.fromCharCode(65) : 65 = A 변환 1) 문자.toUpperCase() : 소문자 -..
상황 사용자가 상품을 클릭하면 최근에 클릭한 상품의 순서대로 최근 본 상품이라는 단어 아래에 해당 상품들을 출력하고 싶었습니다. 해결방법 현재 ItemMain이라는 컴포넌트에서 위의 정보들을 보여주고 있습니다. 여기서 상품들을 api를 통해 호출하고 state배열에 저장한다음 return문 안에서 상품들을 map을 이용해 보여주고 있습니다. 그래서 이미 호출한 state배열을 활용하고자 했습니다. 최근본상품의 컴포넌트를 호출할때 props로 상품들(state배열)을 전달하고 해당 컴포넌트의 useEffect문 안에서 findIndex함수를 통해 상품의 정보를 배열에 저장해주고 출력해주었습니다. 간단하게 순서대로 설명해보면 1. 메인페이지를 접속할때 localStorage에 wathced 배열 생성. 2...
현재 서버에서 주는 UTC시간의 형식입니다. 아래의 시간을 KST로 변환해보겠습니다. 위의 UTC시간은 a라는 곳에 담겨져있고 a를 콘솔로 출력했었습니다. 먼저 a데이터를 new Date()로 감싸서 const kor = new Date(a); 아래의 형태로 만들어줍니다. 다음으로 console로 아래처럼 입력하고 확인해보면 console.log(kor.toLocaleString()); console.log(kor.getTimezoneOffset()); 아래의 데이터가 나오고 -540 즉 UTC시간은 한국보다 9시간 빠른것을 알 수 있습니다! 그래서 여기 hour에 9시간만 더해주면 되지 않을까? 라는 생각을 했습니다. kor.setHours() 함수를 이용해 시간을 +9시간 해줍니다. getHours(..
결론 부터 말씀드리자면 아래와 같이 클릭을 할때 navigate로 navigtae('주소', { state : 보내고자하는 데이터} )를 사용하면 데이터를 전달할 수 있습니다. 받는 컴포넌트에서는 useLocation을 import하고 아래와 같이 사용하면 콘솔에서 출력이 됩니다. 해당 기능이 필요했던 이유 현재 만들고 있는 페이지에서 카테고리의 항목을 클릭하면 해당카테고리 항목의 페이지로 이동하여 그에 맞는 데이터값들을 보여줘야 했습니다. 서버에서 카테고리에 맞는 데이터를 불러오려면 아래와 같은 형식이 필요했습니다. 그래서 저는 맨뒤에 ' 보드게임 ' 이라는 값 즉, 카테고리 명이 필요했습니다. 처음에 2개의 api를 호출해야하는 줄 알았습니다. 즉, 모든 상품의 데이터 api -> post 카테고리 ..
서버에서 많은 데이터를 가져오는 작업 같은 경우는 오래걸리기 때문에 useEffect 훅을 이용해 데이터를 가져오는게 좋은 방법이라고 배웠습니다. 아직 리액트가 익숙하지 않아서 axios를 사용했을때 겪었던 문제점과 해결방법에 대해 글을 작성해보겠습니다. 먼저 문제가 발생한 상황부터보겠습니다. 첫번째 문제 상황 서버api 데이터를 이용한 요소 생성시 데이터가 할당되기전에 요소가 생성 -> 오류 아래의 이미지를 보시면 왼쪽상단에 카테고리 버튼을 클릭했을 경우 카테고리 목록이 나오는데 이때 카테고리 목록은 서버에서 받은 카테고리 데이터입니다. 그래서 axios.get을 이용해 데이터를 받아와야하는데 배운대로 useEffect안에 해당 코드를 적었습니다. 그리고 받은 데이터를 이용해 return문안에서 아래처..
