Thinking Developer

TypeScript에서 interface와 type 중 무엇을 사용할까?

TypeScript에서는 interface와 type을 모두 사용하여 객체의 구조를 정의할 수 있다. 하지만 두 가지 개념 사이에는 미묘한 차이가 있다. 이번 글에서는 interface와 type의 특징과 차이점, 그리고 언제 어떤 것을 사용하는 것이 더 적절한지 정리해보겠다.interface와 type의 특징interfaceinterface는 TypeScript에서 객체의 구조를 정의하는 기본적인 방법으로, 다음과 같은 특징을 가진다.객체의 구조를 명확하게 정의할 수 있다.선언 병합(Declaration Merging)이 가능하다.implements 키워드를 사용하여 클래스에서 타입 검사를 수행할 수 있다.extends 키워드를 사용해 확장할 수 있다.typetype은 보다 범용적인 타입 정의 방식으로..

소프트웨어 개발에서 코드 테스트는 단순히 실행해 보며 기능을 확인하는 단계를 넘어, 코드 품질 개선과 유지보수성 향상, 그리고 장기적인 제품 안정성을 보장하는 핵심 요소로 자리 잡았다. 여기서 언급하는 테스트는 제품을 직접 사용하는 방식이 아니라, 코드 기반의 자동화 테스트를 의미한다. 개인적으로는 유닛 테스트를 주로 활용하며, TDD(Test-Driven Development) 방법론을 선호한다. 직접 주도하지는 않았지만, 테스트 커버리지 100%를 달성한 경험이 있으며, 테스트가 전혀 없는 환경에서 테스트 문화를 구축하고 지속적으로 커버리지를 향상시킨 경험도 있다. 다양한 테스트 방법론과 적용 방식TDD 외에도 BDD(Behavior-Driven Development)와 DDD(Domain-Drive..

Firebase Remote Config란 애플리케이션의 각종 기본값들을 Firebase를 통해 손쉽게 관리할 수 있도록 하는 클라우드 툴이다. Firebase 원격 구성 | Firebase Documentation 앱 업데이트를 게시하지 않고도 일일 활성 사용자 수 제한 없이 무료로 앱의 동작과 모양을 변경할 수 있습니다. firebase.google.com 각종 기본값들의 경우 애플리케이션의 탭 리스트가 될 수도 있고 각종 스태틱한 값들이 될 수 있다. 이러한 값들의 경우 서비스 기획이나 정책에 따라 언제든지 변경될 수 있다. 이럴 경우 보통 데이터베이스와 백엔드를 통해 관리를 하게 되는데 이것을 구현하는게 어렵지는 않지만 번거롭고 시간이 걸릴 수 있어서 프로덕트 스케줄에서 우선순위에서 밀릴 수 있다..

Typescript는 Javascript를 Java, C, Swift, Kotlin처럼 정적 타입으로 쓸 수 있게 해주는 Javascript의 슈퍼셋이다. 빌드가 되면 브라우저 또는 Node.js가 이해할 수 있는 퓨어한 Javascript로 바뀌어 동적 타입인 Javascript의 태생적 한계를 극복하고 Javascript 생태계를 보다 안정적으로 쓸 수 있게 해준다. 다음을 살펴보자 let a = 1; console.log(typeof a); // number a = 'abc' console.log(typeof a); // string Javascript는 이처럼 변수를 선언해서 number 타입을 넣었다가 string 타입을 넣었다가 자유롭게 쓸 수 있다. 이처럼 동적 타입이기 때문에 때로는 변수를..

잘 팔리는 웹 프론트엔드 개발자에 대해 말하기 전에 우선 "웹 프론트엔드 개발자"란 무엇인지 짚고 넘어가자. 소프트웨어 엔지니어 직군의 세부 직군 중 가장 모호하고 헷갈리는 직군이 바로 웹 프론트엔드 개발자가 아닐까 싶다. 게임 개발자, 아이폰 앱 개발자, 안드로이드 앱 개발자, 서버 개발자. 남들에게 이렇게 소개하면 IT 업계를 잘 모르는 사람이라도 대충 이 사람이 무엇을 하는지 감이 온다. 물론 백엔드 개발자의 경우도 일반적으로 확 와닿는 표현은 아니지만 그냥 대충 서버 개발자입니다. 하면 어느 정도 맞는 말이기도 하고 듣는 사람 입장에서도 이해가 된다. 그럼 웹 프론트엔드 개발자 직군은 대체 무엇이고 뭘 하는 사람들인가. Front End를 직역하면 "앞단", Back End를 직역하면 "뒷단"이다..

이제 나에게는 필수적인 라이브러리가 된 styled-components에 대한 개요, 설치하는 방법과 기본적인 활용법 등을 소개하고자 한다. 백엔드 개발자의 대표적인 고충이 DB와 관련한 작업들이라면, 프론트엔드 개발자들의 고충은 아마도 마크업, UI 개발, 퍼블리싱이라고 불리는 HTML과 CSS 작업일 것이다.(마크업, UI 개발, 퍼블리싱은 HTML, CSS 개발이라는 공통분모가 있어 비슷하지만 각각 약간 개념이 다른 것 같다.) 그중 CSS 작업은 매우 고통스러운 일이 될 수도 있다. 왜냐하면 CSS는 구조화하기 어렵고, 변수를 선언하여 쓰기 어렵고, 프로젝트가 커지다 보면 class명이 겹쳐서 스타일이 꼬이는 등 예상치 못한 문제가 튀어나올 가능성이 매우 크기 때문이다. 그래서 SCSS와 같은 좀..

개발을 하다 보면 직접 만든 utils 또는 프론트엔드의 경우 components 폴더, styles 폴더 등 현재 작업 파일과 다른 경로의 파일들을 import 시켜야 할 때가 있다. import 시킬 필요가 없는 파일은 아주 단순한 스크립트이거나 온갖 로직을 하나의 파일에 다 작성할 때인데 별로 좋지 않은 패턴이다. 그래서 파일의 상단에는 다음과 같은 현상이 일어난다. import styled from 'styled-components'; import { TextField } from '../../components/textfield'; ... line 1과 line2가 import 방식이 조금 다른 것을 알 수 있다. line 1의 styled의 경우 styled-components라는 npm 패키..

ESLint가 개발할 때 혹은 빌드할 때 실수하지 않도록 우려가 될 만한 부분에 대해 에러를 뿜어주는 역할이라면 Prettier는 코드 작성 패턴을 사전에 설정해놓은 대로 자동으로 바꿔주는 역할을 한다. 그러므로 ESLint와 Prettier를 적절히 활용하면 에러를 미연에 방지하고, 코드가 예쁘게 나오고, 다른 사람과 협업 시에도 코드 컨벤션을 지키면서 작업을 할 수 있게 된다. 역시 VSCode 기준으로 설명하겠다. VSCode에서 prettier를 검색하고 다음의 확장프로그램을 설치한다. 그리고 프로젝트 최상위에 .prettierrc.js 라는 파일을 만들고 다음과 같이 작성 후 저장한다. module.exports = { semi: true, // 세미콜론(;) 사용 여부 trailingComma..

ESLint 공식 홈페이지에서는 ESLint에 대해 한마디로 다음과 같이 표현하고 있다. "Find and fix problems in your JavaScript code" ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org 즉, 개발자가 javascript 코드의 여러가지 문제점들을 찾아서 고쳐주는 역할을 하는 것이다.(예..

1. 개발환경 Next.js와 기타 등등 라이브러리들을 설치하고 개발을 하려면 기본적으로 Node.js와 NPM이 설치되어 있어야 한다. 아래의 공식 사이트에서 운영체제에 맞게 다운로드하고 설치하면 된다. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 본 포스팅의 예제 환경은 M1 맥북, VSCode이다. 공식 문서에서 안내하는 개발 가능 환경은 다음과 같으니 참고 바란다. Node.js 12.0 or later MacOS, Windows (including WSL), and Linux are supported Next.js by Vercel - The React Framew..