D.JOUNG

typeorm은 relation 설정을 통해 엔티티 간의 다채로운 관계를 보다 쉽게 다룰 수 있다.기본적으로 아래 네 가지 어노테이션을 통해 관계를 relation을 설정할 수 있으며, 매개변수로 옵션 정보가 담긴 매개변수를 넘겨준다.@OneToOne() // 1:1 관계@ManyToOne() // n:1 관계@OneToMany() // 1:n 관계@ManyToMany() // n:n 관계 엔터티 속성 위에 어노테이션을 붙여 관계를 설정해줄 수 있다. @ManyToOne은 FK를 가지는 쪽(자식 엔티티)에 적용하고, @OneToMany( )는 그 반대쪽(부모 엔티티)에 적용한다. 실제 DB의 FK는 @ManyToOne( ) 쪽에 생성된다. 반면 @OneToMany( )는 엔티티 간의 관계 설정을 위한 어..

typeorm에서 사용하는 네 가지 관계 어노테이션의 첫 번째 매개변수와 두 번째 매개변수는 콜백함수 형태로 넣어줘야 한다.typeorm은 해당 매개변수를 통해 엔티티 간의 관계를 설정하게 되는데, 여기서 첫 번째 매개변수는 왜 굳이 콜백함수여야 하는 것일까? 예를 들면, 아래와 같이 관계 엔티티의 클래스를 값으로 바로 넣어주면 안되는 걸까?@ManyToMany(Role, user => user.roles) 위 처럼 표현하면 표현이 더 명확해지겠지만, 해당 방식으로 코드를 작성할 경우 자바스크립트 코드 로딩 단계에서 순환 의존성 문제가 발생하게 된다. 예를 들어, 아래 처럼 User 엔티티와 Role 엔티티가 서로 관계를 맺고 있다고 가정해보자. 그리고 관계 어노테이션의 첫 번째 매개변수도 위에서 상상한..

react-router는 React에서 라우팅을 더 쉽게 구현할 수 있게 해주는 라이브러리다. react-router-dom은 react-router를 코어로 사용해 브라우저에서 사용할 수 있는 라우팅 관련 컴포넌트를 지원한다. useNavigate Hook과 Navigate 컴포넌트는 react-router 라이브러리를 통해 사용할 수 있으며 둘 다 현재 페이지를 다른 페이지로 변경할 수 있는 리다이렉트 기능을 제공해준다. react-router-dom을 통해서도 해당 두 소스를 사용할 수 있는데, react-router-dom이 react-router 라이브러리의 코드를 import해서 그대로 export 해주고 있기 때문이라고 한다. useNavigate()와 둘 다 사용법이 간단해 필요할 때 바..

인증/인가 정보를 로컬 스토리지와 쿠키, 둘 중 어디에 저장하는 게 좋을까? 로컬 스토리지와 쿠키 둘 다 브라우저 메모리 내에 저장할 수 있지만, 각각 장단점이 다르다.참고로, 로컬 스토리지와 쿠키 저장소는 모두 개발자 도구의 어플리케이션 탭에서 확인할 수 있다. Local Storage - Session Storage와 함께 브라우저의 웹 스토리지다.- 쿠키처럼 브라우저가 자동으로 헤더에 담아주지 않기 때문에, API 요청 시 개발가 직접 요청 헤더에 담아줘야 한다.- 오직 문자열 데이터만 지원하기 때문에, 객체나 배열은 JSON.stringify()로 직렬화하여 저장하고, 사용할 때는 JSON.parse()로 역직렬화해야 한다.- 만료 기간이 존재하지 않으며, 페이지를 변경하거나 브라우저를 닫아도 반..

리액트의 가장 유명한 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 점이다. 이번 장에서는 가상 DOM이 무엇인지, 그리고 실제 DOM에 비해 어떤 이점이 있는 지 살펴보고 가상 DOM 사용 시의 유의점에 대해서도 알아본다.DOM과 브라우저 렌더링 과정가상 DOM을 공부하기 앞서 DOM(Document Object Model)이 무엇인지부터 살펴본다.DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.브라우저가 웹사이트에 접근 요청을 받으면 다음과 같은 과정을 거친다.브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 트리(DOM)를 만든다.2번..

JSX란?보통 React를 통해 JSX를 많이 배우기 때문에, JSX가 리액트의 전유물이라고 오해하는 경우가 종종 있다. 물론 리액트가 등장하며 페이스북(현 메타)에서 소개한 새로운 구문이지만, 꼭 리액트에서만 쓰라는 법은 없다.JSX는 XML과 유사한 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법으로 보는 것이 옳다.자바스크립트 표준의 일부가 아니며, V8이나 Deno와 같은 JS 엔진이나 브라우저에 의해 실행되거나 표현되도록 만들어진 구문이 아니다.따라서 JSX 코드를 바로 실행하면 오류가 발생한다. 반드시 트랜스파일러를 거쳐야 한다. JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ES로 변환하는 데 초점을 두고 있다.JSX의 정의JSX는 기본적으로 ..

왜 리액트인가?React는 2011년 페이스북의 뉴스피드 페이지에서 처음 선보였다.전자정부 표준 프레임워크의 프런트엔드 개발 도구로 채택된 바 있다. 정부에서 담당하는 프로젝트는 항상 안정성과 유지보수성을 최우선으로 살피기 때문에, React가 그만큼 안정성이 확보됐으며 많은 이들이 널리 쓰고 있음을 시사한다.egovframe-template-simple-reactStackoverflow Tag Trends 에서는 stackoverflow에서 키워드 별 등록된 질문들의 통계를 확인할 수 있다. 아래는 2025년 기준 FE 라이브러리 관련 질문 통계다.https://survey.stackoverflow.co/2024/technology#most-popular-technologies-webframe 에서도 ..

개요최근 렌더링 최적화를 공부하면서 리플로우와 리페인팅 방지에 각별히 신경을 쓰게 됐다. 리팩토링하는 코드 내에서 getBoundingClientRect() 메소드를 자주 호출하는 부가 있는데, getBoundingClientRect()는 아래 포스팅에 정리되어있는 리플로우 유발 메소드 중 하나다.https://gist.github.com/paulirish/5d52fb081b3570c81e3a What forces layout/reflow. The comprehensive list.What forces layout/reflow. The comprehensive list. - what-forces-layout.mdgist.github.com 그런데 성능탭을 열어 타임라인을 살펴봐도 성능에 문제가 될 정도로..

개요 시작 화면에서 마우스 경로를 따라 움직이는 커스텀 마우스를 그리기 위해 태그를 사용하였다. Canvas API의 OffScreenCanvas 인터페이스는 화면에 노출되지 않는 캔버스를 제공하여 Canvas API의 성능 최적화를 돕는다.DOM 작업을 다른 스레드에게 분업하여 병렬 처리를 하면 좋겠지만, 기본적으로 멀티 스레드는 HTML 요소 객체를 참조하거나 수정하는 게 불가능하다. DOM Tree와 CSSOM을 생성하고, Render Tree를 만들고, Render Tree 기반으로 화면을 그리는 일련의 과정은 동기적으로 작동하는 부분이 있기 때문에, 여기에 멀티 스레드가 관여했다가는 순서가 이상하게 꼬일 수 있기 때문이다. 하지만 HTMLCanvasElement( 태그)는 특별히 transfe..

고정폭 글꼴이란?고정폭 글꼴이란 말 그대로 글자의 가로 길이가 일정한 글꼴을 뜻한다. 모노스페이스(mono-space) 글꼴이라고도 부른다. 구글 폰트(Google Fonts)에서 필터링으로 모노 스페이스 글꼴만 검색할 수도 있다. 필터 기능의 Classification 항목을 들여다보면 'Monospace' 버튼이 바로 보일 것이다. 고정폭 글꼴은 결과값을 콘솔에서 출력하는 프로그램을 실행시킬 때 출력 결과의 가독성을 높이는데 많은 도움을 준다. ansi-code와 고정폭 글꼴을 함께 사용하면 눈이 아주 편안한 포멧팅이 가능할 것이다. VS Code 에서 터미널 글꼴 설정그럼 이제 개발자들이 많이들 사용하는 VS Code IDE에서 고정폭 글꼴을 적용해보자. VS Code를 실행한 후 아래 경로로 들어..