타입스크립트로 작업을 하다 보면, 객체를 타이핑하기 위해 키워드로 'type'과 'interface'가 자주 사용되는걸 볼 수 있다.중괄호를 사용한 객체 리터럴 방식으로 타입을 선언할 때 매번 일일이 작성하기에는 중복적인 요소가 많을 뿐만 아니라 변경이라도 발생하면 일일이 찾아서 수정을 해야 하고 그러다 보면 놓치는 부분이 발생할 수 밖에 없다. 그러면 예상치 못한 문제가 발생할 수도 있다.그래서 type 또는 interface 키워드를 사용해 아래와 같이 선언을 해 반복적으로 사용해 중복을 없애고 변경 사항이 발생했을 때 일괄적으로 적용이 될수 있도록 할 수 있다.type Item = { id: string; name: string; price: number; thumbnailUrl: strin..

리액트에서 개발을 하다 보면 .css를 사용하는 사람도 있고, .module.css를 사용하는 사람도 있는걸 볼수 있다. 두개의 차이에 대해서 알아보겠습니다..css 파일.css 파일은 import를 하게 되면 import한 파일 내에서만 사용이 될거라고 생각을 하지만 생각과 다르게 글로벌 범위에 전역으로 적용이 됩니다. 이는 동일한 클래스 이름을 가진 요소가 여러 곳에서 동일한 스타일을 가질 수 있다는 것을 의미합니다. 따라서, 다른 컴포넌트나 페이지에서 동일한 클래스 이름을 사용할 경우, 원치 않은 스타일이 적용이 될수 있습니다. 다만, import만 하여 간단하게 사용을 할 수 있습니다.// Button.css.button { ...}// Button.tsximport './Button.css..

MSA(MicroService Architecture)BFF를 이야기 하기 전에 어떠한 이유에 의해 BFF가 나오게 되었는지 알기 위해서 MSA 부터 알아 볼 필요가 있다. MSA는 MicroService Architecture의 약자로 독립적인 배포가 가능한 서비스들로 구성된 아키텍처이다. 기존에는 대부분 모든 서비스가 한 곳에 모인 Monolithic 구조로 개발을 진행을 했었지만, 요즘에 서비스의 규모가 커지면서 Monolithic 구조로는 해결이 어려운 문제들이 나타나게 되었고, 이를 해결 하기 위해 나타난 것이 MSA라고 보면 됩니다.MSA는 각 서비스를 도메인별로 분리시키고, 서비스는 작은 서비스의 집합으로 구성되며 각 서비스는 독립적이고 단일 비즈니스 기능에 대해서만 책임을 가지게 됩니다.이..

안녕하세요. 이번 포스팅에서는 Nextjs에서 dotenv 사용하는 방법에 대해서 알아보겠습니다. 기본적으로 Create Next App으로 Nextjs 프로젝트를 생성시 루트에 .env 파일을 생성을 하고 안에 값을 NEXT_PUBLIC_으로 시작해서 작성을 하면 됩니다. # .env NEXT_PUBLIC_TEST=Hello World 위와 같이 Hello World라는 값을 가진 REACT_APP_TEST를 만든 후 console을 통해 확인을 해보겠습니다. // index.tsx import React from 'react'; function Home() { console.log('test', process.env.NEXT_PUBLIC_TEST); return Hello, World! } expor..

안녕하세요. 이번 포스팅에서는 간단하게 dotenv를 사용해보도록 하겠습니다. 기본적으로 CRA로 리액트 프로젝트를 생성시 루트에 .env 파일을 생성을 하고 안에 값을 REACT_APP_으로 시작해서 작성을 하면 됩니다. # .env REACT_APP_TEST=Hello World 위와 같이 Hello World라는 값을 가진 REACT_APP_TEST를 만든 후 console을 통해 확인을 해보겠습니다. // App.tsx import React from 'react'; function App() { console.log('test', process.env.REACT_APP_TEST); return Hello, World! } 위와 같이 코드를 작성하고 실행을 하면 아래와 같이 콘솔에 Hello Wo..

안녕하세요. 이번 포스팅에서는 이벤트(버튼 클릭 등) 발생 시 특정 위젯이 위치한 위치로 스크롤 이동하는 방법에 대해서 알아보겠습니다. 웹에서 url에 Fragment(#)를 이용해서 Fragment id에 해당하는 HTMLElement를 보이게 하는것과 동일한 동작이라고 보면 됩니다. 방법은 아주 간단합니다. 특정 위젯에 대한 정보를 알기 위한 key 값을 등록하고 Scrollable.ensureVisible을 이용하면 됩니다. 먼저 특정 Widget에 key를 등록해줍니다. ... final GlobalKey _widgetKey = GlobalKey(); @override Widget build(BuildContext context) { @override Widget build(BuildContext..