전체 글 118

텍스트로 UML 다이어그램을 그리는 방법. Mermaid란?

텍스트로 UML 다이어그램을 그리는 방법. Mermaid란? 안녕하세요! 개발을 하다 보면 자연스럽게 문서화작업의 필요성을 느끼게 됩니다. 대부분 작업을 하다 보면 코드를 보고 이해할 수 있지만, 협업을 하고 프로젝트의 규모가 커지다 보면, UML 다이어그램과 같은 시각적인 자료가 얼마나 유용한지 알게 됩니다. 또한 개발자뿐만 아니라 다른 직군의 동료들에게도 코드를 보여주는 것보다 다이어그램을 통해서 훨씬 손쉽게 설명하고 이해시킬 수 있습니다. 오늘은 텍스트를 이용하여 UML다이어그램을 그릴 수 있는 Mermaid에 관해서 알아보겠습니다. UML 다이어그램이란? Mermaid란? 설치방법? 사용방법? 마치며. 1. UML 다이어그램이란? UML 다이어그램이란 Unified Modeling Language..

NextJS .env.local이란?

NextJS .env.local이란? 안녕하세요! 오늘은 NextJS에서 env.local이란 파일이 무엇인지 알아보겠습니다. 개발을 하다 보면 특히 협업을 한다면 필연적으로 git을 사용하게 됩니다. 이때 우리는 gitlab이나 github에 소스코드를 업로드하게 됩니다. 이때 따로 비공개로 설정하지 않는다면 소스코드는 공개되는 경우가 많습니다. 하지만 개발을 하다 보면 다른 개발자나 타인에게 보여주기 민감하거나 혹은 보이지 않아야 하는 정보들이 있기 마련입니다. 예를 들면 데이터베이스에 접근하기 위한 Id, Password, Database name 등등이 있을 수 있습니다. 이러한 정보들은 자칫 타인에게 보이게 된다면 타인이 데이터베이스에 접근할 수 있기 때문에, 당연히 접근도 할 수 없고 보이지 ..

Typescript: Pick and Omit

Typescript: Pick and Omit 안녕하세요. 오늘은 타입스크립트의 유틸리티 타입스들 중 pick과 omit에 관해서 알아보도록 하겠습니다. 타입스크립트로 개발을 하면서 새로운 타입들을 지정해줄때 한 번씩 이러한 생각이 들 때가 있습니다. 기존에 작성된 타입 중 하나만 제외시키고 싶은데 혹은 하나를 더 추가하고 싶은데 하는 생각말이죠. 잘 이해가 되지 않으신다고요? 아래의 코드를 보겠습니다. type Person = { name: string; age: number; hobby: string; }; 여기 Person이라는 타입이 있습니다. 이 타입은 각각의 name, age 그리고 hobby 타입을 지정하였습니다. 이때 만약 Person타입에 address라는 key를 추가하고 싶다면?? 혹..

Typescript as 대신 satisfies 사용하기

안녕하세요! 저번에 타입스크립트에서 as 키워드에 관해서 알아보겠습니다. 하지만 저번에 언급했듯 as 키워드는 실제 타입에 무관한 값이 들어가 있거나 혹은 그 타입을 충족하지 못하거나 않는 값이 들어가 있어도 받아들이기 때문에 사용하는데 주의를 요하는 키워드입니다. 이러한 문제를 보안할 수 있는 다른 키워드가 있습니다. 이 키워드는 현재 3-4개월 전에 나온 키워드입니다. 이는 satisfies라는 키워드입니다. 오늘은 그럼 satisfies라는 키워드가 어떻게 동작하고 어떻게 사용하면 되는지 짧게 알아보겠습니다. 글을 읽어보시고 공부하시는 것도 좋지만 가장 좋은것은 직접 손으로 타이핑하여 결괏값을 보는 것입니다! 그러니 가능하다면 따라서 코드를 쳐보시기 바랍니다!! as 대신 satisfies. 사용방..

Typescript Type Assertion. as 키워드 사용하기

Typescript Type Assertion. as 키워드 사용하기 안녕하세요! 오늘은 타입스크립트를 사용하다 보면 한 번씩 마주하게 되는 키워드 중 하나인 as 키워드에 관해서 말씀드리겠습니다. 타입스크립트는 자바스크립트와 거의 동일하지만 타입이 추가된 superset이라고 보시면 됩니다. 하지만 자유로운 자바스크립트와 달리 타입스크립트를 사용하면 자주 파라미터나 변수의 타입 때문에 머리가 아픈 경우가 한두 번이 아닙니다. 특히 한 오브젝트가 여러 가지 타입을 가질 수 있다면 더더욱 그렇습니다. 자 그럼 이제 as 키워드에 관해서 알아보겠습니다. as 키워드란? 사용방법? 조심해야 되는 부분? 마치며 1. as 키워드란? as 키워드란 자바스크립트에는 없는 즉 타입스크립트에만 존재하는 키워드입니다. ..

타입스크립트 함수 작성 방법

타입스크립트 함수 작성 방법 안녕하세요. 오늘은 타입스크립트를 이용할 때 사용하면 좋은 함수 작성 방법을 알아보겠습니다. function 함수 arrow 함수 응용 마치며 1. function 함수 function은 우리가 예전에 가장 흔하게 사용하던 함수 작성을 도와주는 문법입니다. 하지만 현재는 ECMA 스크립트의 발전으로 function 함수보다는 arrow 함수를 사용하는 것이 일반적입니다. 하지만 그렇다고 function 함수가 오래되었으니 사용하지 않는 것이 좋다라는 뜻은 아닙니다. 상황에 따라서는 function 함수를 사용하기도 합니다. 또한 function 키워드를 사용하면 함수를 정의하기 전 함수를 부를 수 있는 장점이 있습니다. 이러한 상황이 많지는 않겠지만 정말 가끔가다가 유용하게 ..