Thinking Developer

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

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

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

개발을 하다 보면 직접 만든 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..

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..

실무에서는 레거시 프로젝트도 있어서 node 버전 관리 프로그램을 따로 쓰기도 하지만 개인 컴퓨터는 굳이 그럴 필요까진 없고 그냥 LTS 버전만 써도 별 문제가 없다. 근데 LTS버전도 아예 새롭게 바뀌는 경우도 있고 마이너 업데이트가 되는 경우가 있다. 그래서 개인 컴퓨터에서도 가끔은 업데이트를 해주는 게 좋다. 참고로 내 개인 컴퓨터 환경은 macOS Big Sur 11.3, M1 칩셋이며 이 환경에서 진행을 했다. $ node -v $ npm -v 버전을 찍어보니 node는 14.16.0, npm은 7.10.0이었다. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nod..

JavaScript Array의 반복 관련 메서드 두 번째 포스트다. 첫 번째 포스트는 다음을 참고 바란다. Array의 반복 관련 메소드(1) forEach, map, reduce 등 javascript에서의 반복 관련 메소드가 있는데, 그냥 편하게 반복문이라고도 하지만 정확히는 Array 객체의 메소드이다. 다만 for문 등 반복문과 비교가 되어 반복문으로 분류하기 think-dev.tistory.com 첫 번째 포스트에서는 forEach, map, filter, find를 다뤘다. 위 메소드들은 실무에서 많이 쓰지만 reduce하나면 거의 커버가 가능하고, 추가적인 형태로도 구현이 가능하다. 물론 reduce 역시 별도로 break문은 없어서 find를 구현하긴 어렵지만 시간 복잡도를 생각하지 않는..

forEach, map, reduce 등 javascript에서의 반복 관련 메서드가 있는데, 그냥 편하게 반복문이라고도 하지만 정확히는 Array 객체의 메서드이다. 다만 for문 등 반복문과 비교가 되어 반복문으로 분류하기도 하지만 뭐 이렇든 저렇든 상관은 없다. forEach const ary = [1, 2, 3, 4, 5]; ary.forEach((e) => { console.log(e); // 1, 2, 3, 4, 5 }); // 이렇게 람다식으로 써도 된다. ary.forEach(e => { console.log(e); // 1, 2, 3, 4, 5 }); // 두 번째 인자는 Array의 index를 의미한다. ary.forEach((e, i) = > { console.log(e); // 1..

기본 while문, break문, continue문 let i = 0; while (i 5) { break; } } // continue let i = 0; while (i 5) { continue; } console.log("cn"); // cn, cn, cn, cn, cn } do ~ while문 let i = 0; do { console.log(i); //..

function solution(answers) { const human1 = [1, 2, 3, 4, 5]; const human2 = [2, 1, 2, 3, 2, 4, 2, 5]; const human3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; let pointAry = Array(3).fill(0); answers.forEach((answer, index) => { const human1Index = useIndex(human1, index); const human2Index = useIndex(human2, index); const human3Index = useIndex(human3, index); if (human1[human1Index] === answer) { pointA..