본문 바로가기

전체 글

 (115)
단방향 연관관계 ORM을 이용하여 테이블을 객체에 매핑할 때 객체와 관계형 DB의 패러다임 차이로 굉장히 불편한 점이 생긴다. 객체는 .을 이용한 참조를 사용하고, DB는 FK를 이용한 참조를 사용한다. 이 차이로 인한 문제점은 무엇인지 알아보고 JPA로 해결해보자~~~~ 예제에 사용할 테이블이다. 이 두 테이블의 관계를 알아보자~~~ 클럽 하나는 여러 명의 학생을 가질 수 있습니까? Yes 학생 한 명은 여러 개의 클럽을 가질 수 있습니까? No 위 테이블의 관계는 Student:Club = N:1이다!!! (만약 둘 다 Yes라고 하면 N:M이 될 것이다) 그러면 이제 위와 같은 테이블을 객체로 바꿔보겠다.(엔티티는 다이어그램 보고 대충 만들어보자~~~) 다른 것보다 club의 Type이 Long이라는 것에 주의하자..
Vue에서 TypeScript 사용하기: Props TypeScript를 이용하면 props의 속성도 제한할 수 있다. 어떻게 하는지 알아보자!!!! types.ts 파일에 다음과 같이 정의돼있다. export interface human { name: string likeNumber: number isAdult: boolean } 그리고 humanDetail이라는 Component가 있다. 이 Component는 human이라는 props의 타입을 human으로 제한하고 싶다. 이 때 우리는 type에 'Object as PropType'과 같이 값을 전달해주면 된다. 그냥 단순히 'type: 인터페이스명'과 같이 해서는 타입을 지정해 줄 수 없고, PropType이라는 것의 도움을 받아서 아래 코드와 같이 해줘야 한다. import { defineCo..
TypeScript: Generic TypeScript에는 generic이란 개념이 있다. 무엇인지 알아보도록 하자~~~~ 별 의미는 없지만 다음과 같이 print라는 함수를 만들었다. print 함수는 parameter로 string을 받고 string을 반환하는 함수이다!!!! 그런데 number를 print함수로 찍어보고싶다면 가능할까? 당연히 불가능할 것이다. function print(content: string): string { console.log(content) return content } 이럴 때 generic을 써보자~~~ 처음 봤다면 낯설 수도 있겠지만, 까보면 별 거 없다. 사이에 온 문자 T는 함수가 호출되기 전까지 무엇인지 모르는 미지의 타입이 된다. 즉, 이 함수는 미지의 타입 T를 매개변수로 받아서 T타입을..
Vue에서 TypeScript 사용하기: Data (참고로 Tool은 Webstorm을 썼다!!!) type.ts에 아래와 같이 코드를 작성했다. interface를 이용해 타입을 지정한 코드이다. export interface human { name: string; likeNumber: number; isAdult: boolean; }; 적당히 person.vue에 아래와 같이 코드를 작성했다. 일단 중요한 것은 human을 import하는 부분이다. TypeScript에서는 @가 사용불가능하므로 ..과 같이 경로를 적어줘야 한다. 그리고 TypeScript를 이용할 때는 script tag의 lang 속성에 ts라고 값을 지정해줘야 한다. 가장 중요한 data 부분을 살펴보자!!!! 일단 기존에 Type Customizing 글에서 배운 방법은 '변..
type alias와 interface https://code-mania.tistory.com/29 TypeScript의 type 알아보기 기본적으로 js에는 다음과 같은 type들이 있다. String Number Boolean Array Function Object 타입 지정 방법 이번 시간에는 기본타입을 변수에 적용하는 방법에 대해서 알아볼 것이다. TypeScript는 TypeScript.. code-mania.tistory.com 위 글에서 기본 타입을 알아봤다. 하지만 프로그래밍하다보면 기본 타입만으로는 해결하기 어려운 상황에 직면할 것이다. 이 때 어떤 해결책이 있는지 알아보자~~~~ Type Alias와 Interface 사용자 정의 type을 지정하기 위한 방법으로 type alias와 interface를 이용하는 2가지 방법..
TypeScript의 type 알아보기 기본적으로 js에는 다음과 같은 type들이 있다. String Number Boolean Array Function Object 타입 지정 방법 이번 시간에는 기본타입을 변수에 적용하는 방법에 대해서 알아볼 것이다. TypeScript는 TypeScript라는 이름에 걸맞게(?) Type 지정이 가능하다. 변수명 뒤에 콜론과 지정하고싶은 type을 지정해주면 된다. let name: string = 'code-lover'; let likeNumber: number = 4; let isAdult: boolean = false; 객체와 배열 그런데 배열과 객체는 type 지정 방법이 조금 다르다!!! 배열의 경우 아래와 같이 사용해주면 된다. let hobbies: string[] = ['JAVA', 'V..
NUXT 알아보기(3): Routing routing이란 무엇일까??? routing은 쉽게 생각하면 경로에 페이지를 매칭시키는 것이다. Nuxt없이 Vue로 개발할 때는 이 routing을 위해서 router 설정 파일(router.js)에 경로와 vue 파일을 하나하나 적어줘야 했다. 하지만 Nuxt와 함께라면 그럴 필요가 없다!!!!!! 먼저 pages 폴더 아래에 cool.vue를 만들어보자!!!! 좋았어!!! 이번에는 pages 폴더 밑에 easy 밑에 index.vue 파일을 만들어보자!!!! 완벽하다!!!! yarn dev를 통해 어플리케이션을 실행시켜보자~~~ (참고로 nuxt는 코드를 자동으로 반영해주기때문에 yarn dev 명령어를 이미 실행 중이라면 재실행할 필요가 없다.) 이제 localhost:3000/cool과 loc..
NUXT 알아보기(2): index 페이지 만들기 NUXT는 Vue로 웹 개발을 하기 위한 프레임워크라고 말했다!!! 프레임워크인만큼 구조들에 대한 규칙이 이미 정해져있다. 만들어보면서 알아보도록 하자~~~~ vue 파일들은 pages 폴더 밑에 작성해야 한다. 먼저 pages 폴더를 만들어주자!!!! 그리고 index.vue라는 파일을 만들어주자~~~ 이는 홈페이지에서 기본적으로 보여질 것으로 반드시 이름을 index.vue로 해야 한다. Hello world! index.vue 파일 내용은 국룰인 Hello world로 했다. 이제 실행을 시켜보자!!! 터미널에 yarn dev라고 입력해주자!!! 이렇게 나오면 성공이다!!!! 자 이제 터미널에 표시된 주소로 접속해보자!!!! 혹시 페이지가 제대로 나오지 않았다면 폴더명이나 파일명, package.j..

티스토리툴바