설모의 기록

너무 오랜만에 글을 써서 티스토리 에디터가 변했는지도 몰랐네요..😭😭 최근 한 리엑트 프로젝트에 mobx 를 적용하다가 사소한 습관으로 인해 삽질한 경험이 있어 글을 쓰게 되었습니다. (빠른 시일 내에 React + Mobx + Typescript 적용기를 정리할 수 있길 바라며..) mobx 의 기본 튜토리얼은 여기 를 보시면 됩니다 :) 코드기본 튜토리얼을 보며 익히기 위해 복붙을 하지 않고 직접 작성을 했었습니다. 이게 삽질을 초래한 결과였죠.. (아래의 예제는 최대한 간단한 코드로 구성해보았습니다.) 아래의 코드는 React + Mobx + Typescript 로 구성되어 있습니다. 1. RootStore.tsimport { observable, action } from 'mobx'; export..

상속 관계 매핑 여러 클래스를 구현할 때 공통된 기능이나 변수가 있다면 상위 클래스를 만들어 그 곳에 모아두는 '상속' 을 이용하는 경우가 많습니다. 가장 대표적인 예로 Animal 클래스라는 상위 클래스를 만들어 bark() 라는 함수를 만들어두고, 하위 클래스로 Dog, Lion, Cat 등을 만들어 bark() 함수를 오버라이딩하는 경우입니다. 그렇다면 객체의 상속 관계가 데이터베이스에서는 어떻게 매핑이 될까요? 이에 대한 설명을 아래에 기록하겠습니다. 상속 관계 매핑사실 RDB에서는 '상속' 개념이 따로 있지 않습니다. 따라서 ORM 에서 이야기하는 상속 관계 매핑은 객체의 상속 구조와 데이터베이스의 슈퍼타입 서브타입 관계를 매핑하는 것입니다.슈퍼타입-서브타입 논리 모델을 실제 물리 모델인 테이블..

Web Socket? 웹에서 채팅을 구현할 때 사용하는 Web Socket 에 대해 알아보겠습니다. 보통 서버에게 정보를 요청할 때 HTTP/HTTPS 통신을 거치게 되는데요. HTTP/HTTPS 통신은 클라이언트가 요청을 했을 때 서버가 해당하는 정보를 응답해주는 구조입니다. 그러나 채팅은 누군가가 대화를 보내면 내가 서버에 요청을 보내지 않아도 서버가 저에게 정보를 주어야 합니다. 이럴 때 사용하는게 웹소켓입니다. 내가 원하는 정보에 대해 구독을 신청하고, 토픽에 대한 메세지를 발행하면 해당 토픽을 구독하고 있는 모든 사용자에게 보내주는 방식입니다. HTTP/HTTPS 는 같은 사용자가 서버에게 여러 번 자원이나 정보를 요청하는 경우에 매번 연결을 요청해야 하며 그 때마다 Header 에 요청 정보를..

데이터베이스에서의 연관관계와 JPA 에서의 연관관계 Spring 을 공부하면서 가장 헷갈리는 내용이 연관관계 매핑입니다. 데이터베이스의 외래키와 똑같이 생각하다가 함정에 빠지는 것이 태반입니다.데이터베이스에서는 외래키라는 하나의 컬럼을 가지고 연관관계를 표현합니다. 그러나 JPA 에서는 객체를 매핑합니다. 따라서 JPA에서의 연관관계 매핑은관계의 방향다중성 (다대일? 일대다? 다대다?)연관관계의 주인이 세가지가 중요합니다. 아래에 정리한 내용에서 위의 3가지를 알아볼 것입니다. 단방향 연관관계연관관계 중 다대일(N:1) 을 먼저 알아보겠습니다. 다음에서 설명할 예제의 객체들은 다음의 관계입니다.사람은 가족이 있습니다.사람은 하나의 가족에만 소속될 수 있습니다.사람과 가족은 다대일 관계입니다.위의 관계를 ..

JPA Persistence Spring JPA 를 공부하다보면 persistence 라는 말을 많이 들어보게 됩니다. (출처 : 네이버 영어사전) 무슨 소리지...하고 매번 넘어갔었는데 이번 기회에 정리를 하게 되었습니다. JPA 에서의 영속성은 위의 단어 해석처럼 Entity를 영구적으로 저장해주는 환경을 의미합니다. 책의 내용을 바탕으로 자세하게 정리해보겠습니다. EntityManagerFactory 와 EntityManager데이터베이스를 하나만 사용하는 애플리케이션은 보통 EntityManagerFactory 를 하나만 생성합니다. EntityManagerFactory 는 여러 EntityManager 를 생성하는 객체입니다. 두 객체의 차이점은 아래와 같습니다.EntityManagerFacto..

캐시 적용을 왜 해야 하는거지? 컴퓨터 전공자라면, 컴퓨터 관련 과목을 수강해 본 적이 있으시다면 '캐시(Cache)' 라는 말을 들어보신 적이 있을 것입니다. 캐시라고 구글링 해보시면 많은 자료가 나올텐데요. 결국 캐시는 성능을 개선하기 위해 적용합니다. 웹 사이트를 개발하는 데에 있어서 적용할 수 있는 캐시는 브라우저 캐시와 서버단에서의 캐시가 있을 것입니다. 브라우저 캐시는 이미 받아왔던 자원들은 캐시에 저장해둔 후 일정 기간동안 같은 리소스 요청은 캐시에 있는 내용을 반환하는 것입니다. 그러면 서버와의 통신에 따른 비용을 줄일 수 있습니다. 서버에서의 캐시는 DB를 조회하는 비용을 줄이기 위해서 많이 사용할 것입니다. 쇼핑몰을 예로 들면, 브라우저를 새로 로드할 때마다 상품 리스트를 보내줘야 하는..

Destructuring? 비구조화?? Destructuring 은 ES6 부터 등장한 개념입니다. 기존에 객체를 선언했던 구조를 반대로 사용한다고 이해하시면 좋을 것 같습니다.먼저 코드 예시부터 보겠습니다. let arr = ["1", "2", "3"];기본적인 배열 선언은 위와 같습니다. 1, 2, 3 이라는 데이터에 접근하기 위해서는 arr[0] 이런식으로 접근해야만 했습니다. 하지만 destructuring 을 이용하면 다음과 같은 접근도 가능합니다. // destructuring 이용 X let arr = ["1", "2", "3"]; let first = arr[0]; let second = arr[1]; let third = arr[2]; console.log(first, second, th..

이 포스트는 Java 언어를 이용해 프로그램을 구현해 나갈 때, 단위 테스트를 수행하기 위해 사용하는 프레임워크인 JUnit에 대한 내용입니다. 프로그램을 구현하다보면 지금 내가 작성하고 있는 코드가 정상적으로 수행되는 코드인지가 궁금한 경우가 많습니다. Java의 경우 System.out.print() 또는 디버깅 툴을 이용해 알아보고, JavaScript, TypeScript 의 경우에는 console.log() 를 이용하거나 debugger를 이용해 알아볼 수는 있습니다. 그러나 코드 중간중간의 단위에 대한 결과값을 빠르게 보기에는 어려움이 많습니다. 중간 결과를 알아보기 위해 이전에 수행해야하는 작업까지 모두 수행한 후 알아볼 수 있기 때문입니다. 이럴 때 유용한 프레임워크가 바로 JUnit 입니..

vue router 는 url 경로마다 띄워줄 component 들을 설정하는 것입니다. vue-router 를 이용하면 SPA(Single Page Application) 을 구현할 때 마치 여러 페이지를 구현한 것 같은 효과를 낼 수 있습니다. 참고로 vue router 의 기본 경로는 '기본_도메인/#/' 입니다. 기본 경로에 #을 없애고 싶으시다면 router 의 mode 를 history 로 설정하시면 됩니다. 이제 기본적인 사용법에 대해 알아볼까요? Vue router 사용법1. 모듈설치우선 모듈부터 설치해야겠죠? 아래의 명령어를 이용해 vue-router 모듈을 설치해주세요.$npm i vue-router --save // --save 는 package.json 에 자동으로 추가되도록 하기 ..

vue 를 이용해 핸드폰에서도 이용가능한 반응형 웹을 만들 때, 이미지 슬라이더를 구현해야 할 때가 있으실 겁니다. 스와이프를 통해 여러 이미지를 리스트 형식으로 보여주는 기능을 구현하기 위해 vue-tiny-slider 모듈을 사용해보았습니다. 아래는 데모입니다. 위의 데모는 3개의 이미지를 슬라이더로 만들어 보여주는 예제입니다. 그럼 자세한 사용방법에 대해 알아볼까요? 사용하기 전 준비 vue-tiny-slider 를 사용하기 전 모듈을 먼저 설치해야 합니다. 저는 npm 을 주로 사용하기 때문에 npm 을 이용해서 모듈을 설치하도록 하겠습니다.$npm i vue-tiny-slider --save // --save 는 package.json 에 자동으로 추가되도록 하기 위한 옵션입니다. 모듈을 설치하..