분류 전체보기

타입스크립트 tsconfig 간단히 살펴보기

개요 CRA, next.js 등을 이용하면 보통 타입스크립트를 직접 세팅해볼 일이 없다. 그러나, 타입스크립트를 직접 세팅할 줄 알게 되면 많은 부분 커스터마이징도 가능할 뿐더러 타입스크립트 자체에 대한 이해도 증가한다. tsconfig.json 프로젝트 루트에 tsconfig.json 을 생성하는 것은 프로젝트 내부에서 타입스크립트를 사용할 것이라 선언하는 것이다. VSCODE 는 이를 기준으로 자동완성 등을 제공한다. tsconfig.json 내부에 존재하는 옵션들 include 어떤 경로의 파일들을 ts 에서 js 로 컴파일할지 지정하는데 사용된다. 단순히 파일 이름 자체를 지정하는 것이 아니라, 파일 이름 패턴을 주로 이용한다. 파일 이름 지정 패턴에는 glob 패턴이 주로 이용된다. { "inc..

타입스크립트 type 과 interface 특징 및 비교

개요 자바스크립트에서 객체의 형태를 지정하는데는 type 과 interface 가 사용될 수 있다. type 과 interface 는 매우 가볍고 자바스크립트로 컴파일되면 사라진다. type 알아보기 자바스크립트에서 기본으로 제공하는 primitive type 이외에 타입스크립트에서 사용할 사용자 정의 타입들을 직접 정의할 수 있다. primitive type 에 대한 alias 를 적용하는 것도 가능하다. 상수에 대한 타입을 정의하는 것도 가능하다. 객체 타입 정의하기 type User = { nickname: string; realname: string; age: number; }; const jake: User = { nickname: "jake", realname: "jinkyu", age: 20..

타입스크립트 클래스 간단 정리

개요 타입스크립트에서도 Class 문법을 사용할 수 있다. 접근 제어자 알아보기 접근 제어자란, 클래스의 설계를 위해 클래스의 필드나 메서드에 대한 접근을 제어하기 위해 사용되는 키워드이다. public public 으로 선언된 메서드나 필드는 어디에서든 접근이 가능하다. protected protected 로 선언된 메서드나 필드는 해당 클래스의 바디 혹은 해당 클래스를 상속받은 클래스의 바디에서만 접근이 가능하다. private private 으로 선언된 메서드나 필드는 해당 클래스의 바디에서만 접근이 가능하다. Private 과 Public field 선언하기 생성자를 이용해 선언할 수도 있고, 생성자에서는 말 그대로 초기화만 할 수도 있다. 생성자를 이용해서 선언하기 constructor 내부에 ..

자바스크립트 클래스 간단 정리

개요 클래스는 오브젝트를 만들기 위한 템플릿이다. 데이터와 데이터를 조작하는 코드를 하나로 추상화한다. JS 클래스는 프로토타입을 기반으로 빌드되었지만 ES5 의 클래스 같은 의미와는 다른 문법과 의미를 가진다. 클래스 정의 JS 의 '특별한 함수'이다. JS 에서는 모든 것이 오브젝트로 표현 가능하다는 점을 염두에 두자. 구조 클래스 문법에는 2가지 구성 요소가 있다. 클래스 선언 (Class Declaration) 클래스 표현식 (Class Expression) 클래스 선언 (Class Declaration) 알아보기 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 호이..

자바스크립트 호이스팅 매우 간단히 정리

정의 자바스크립트 호이스팅은 인터프리터가 코드 실행 전 함수, 변수, 클래스 선언 등을 스코프의 맨 위로 올리는 프로세스를 말한다. 호이스팅은 코드가 선언되기 전 함수가 안전하게 사용될 수 있게 한다. 변수와 클래스 선언 또한 호이스팅된다. 그래서 선언 전에도 참조될 수 있다. 그러나 그런식으로 코드를 작성하는 것은 권장하지 않고, 예상치 못한 에러를 낼 수 있다. 에러를 예방하고 싶다면, 자바스크립트는 선언만 호이스팅하고 초기화는 호이스팅하지 않는다는 것을 기억해야 한다. let, const 를 포함한 ECMAScript 2015 언어 명세 이전에는 호이스팅이 Javascript 의 실행 컨텍스트에서 동작방식을 표현하는 일반적인 방법이었다. 함수 호이스팅 예제 catName("Tiger"); funct..

계층구조형 (BDD, Behave Driven Development) 테스트 작성법

개요 Describe, Context, It 패턴은 기본적으로 자바스크립트 테스팅 프레임워크인 mocha 에서 지원하는 BDD (Behave Driven Development) 문법이다. 목적 단순히 테스트를 이용해 신뢰성 있는 앱을 만드는 것만이 목적이 아니다. 다양한 테스트를 만들면서 설계에 대한 문제나 유저의 사용성에 대한 문제들도 생각해보고 고칠 수도 있고, 스스로 문제를 내고 해답을 맞춰가는 쾌감을 통해 개발에서 재미를 느낄 수도 있다. 우리가 지켜야 할 규칙 Describe, Context, It 이라는 세 키워드를 목적에 맞게 잘 사용해야 한다. Describe: 설명할 테스트 대상을 명시한다. Context: 대상이 놓인 상황을 설명한다. It 대상의 행동을 설명한다. Describe 작성..

cypress 세팅 방법

개요 Cypress 를 세팅하여, 내 앱을 테스트할 수 있는 환경을 만들어보자. 설치 pnpm install cypress --save-dev테스팅 도구라서 글로벌한 어딘가에 설치해야 된다고 생각했는데, cypress 공식 문서 에서는 프로젝트 경로에 설치하는 것을 권장하고 있다. Best Practice The recommended approach is to install Cypress with npm because: Cypress is versioned like any other dependency. It simplifies running Cypress in Continuous Integration. 열어보기 npx cypress open위와 같이 실행 명령어를 입력 후에 조금 기다리면, 위 화면처럼..

7월 넷째주 회고 거리

7월 넷째주 회고거리 UI/UX 프로젝트 회사에서 UI/UX 프로젝트가 진행 중이다. 사실 이 프로젝트의 이름은 UI/UX 프로젝트이지만, 뜯어보면 웹사이트 내의 모든 코드 베이스를 바꾸는 작업이며 나는 여기서 Frontend 와 Backend 코드를 분리해보려 한다. 그 이유는 여러가지가 있다. 장애가 발생했을 때 장애가 퍼지는 영역을 최소화하고 싶다. 서버쪽의 코드가 제대로 작동하지 않거나 느리더라도 프론트쪽에서 서버 통신이 없는 간단한 부분을 먼저 보여주고 싶다. 언젠가는 프레임워크의 분리를 통해 전문화를 이뤄내고 싶다. 요즘은 프론트 생태계에 프론트에 특화된 많은 개발도구가 존재하는데, 현재의 상황에선 이러한 도구를 활용하기 어려운 실정이다. 레거시 코드베이스를 걷어내고 싶다. JSTL 과 같은 ..

자바스크립트 클린코드 원칙 간단 정리

클린 코드의 특징 응집도, 단일책임, 적당한 추상화를 지키는 코드이다. 찾고 싶은 로직을 빠르게 찾을 수 있는 코드이다. 유지보수 시간을 줄여주는 코드이다. 클린 코드는 짧은 코드가 아니다. 응집도 하나의 목적을 가진 코드가 흩뿌려져 있으면 안 된다. 같은 목적의 코드는 뭉쳐두자. 단일 책임 하나의 함수는 하나의 역할만 해야 한다. 하나의 일을 하는 뚜렷한 함수 이름을 짓자. 함수가 뚱뚱해진다 싶으면 이 함수가 1개 이상의 일을 하고 있는 것은 아닌지 점검해보자. 때때론 함수 이름을 한글로 먼저 지어보고 가장 핵심을 짚는 이름이 무엇인지 고민해보자. 추상화 함수의 세부 구현 단계가 제각각이면 안 된다. 추상화 단계를 조절해 핵심 개념을 필요한 만큼만 노출해야 한다. 너무 추상화 단계가 높아서 보여주어야 ..

블랙커피 JS 코드리뷰 스터디 step2 까지 회고

개요 바닐라 자바스크립트로 상태를 관리하여 UI 를 보여줘야 한다면 어떻게 하는 것이 좋을까? 그 해답에 대해 이번에 블랙커피 JS 코드리뷰 스터디를 진행하며 생각해보았다. 블랙커피 JS 코드리뷰 스터디 는 NEXTSTEP 에서 제공하는 교육이지만 UDEMY 에도 강의 영상이 있다. 이 스터디에서 만드는 것은 '문벅스 메뉴 관리' 라는 것인데, 이는 여러 프론트엔드 프레임워크를 처음 연습할 때 만드는 투두 리스트와 거의 동일하다. 다만 차이점은 카테고리별로 투두가 별도로 관리되며, 진화하는 투두리스트라는 것이다. 강의 영상 직접 만든 데모 관심사 나눠보기 이 과제는 크게 보면 자바스크립트에서 상태를 관리하고 이를 DOM 으로 렌더링하는 과제이다. 이를 개발하며 나는 아래와 같은 관심사를 발..

React 컴포넌트 어떻게 나누고 재사용할 것인가?

컴포넌트를 어떻게 나눌 것인가? 현실에서 일어나는 일들 우리는 프로덕션을 개발하며 수많은 변경을 마주하게 된다. 이에 대해 현명한 대처가 필요하다. 이러한 이유는 뭘까? 현재의 제품이 완벽하지 않다. 사용자 입장에서 불편함이 있다. 만일 프로덕션이 변경될 일이 없다면? 현재의 제품이 완벽하다. 사용자 입장에서 불편함이 없다. 사실 제품이 변화하는 것은 놓쳤던 고객의 니즈를 발견하고 제품을 성장시키는 과정이다. 그리고 이러한 변경에 대응하는 것은 쉬운 일이 아니다. (특히 설계가 제대로 되지 않은 소프트웨어에서는 더더욱 그렇다.) 제품이 만들어지는 흐름 작은 역할을 하는 여러 개의 컴포넌트를 만든다 기능을 만들기 위해 컴포넌트를 합친다. 컴포넌트가 너무 커지면 적당히 분리한다. 위의 흐름은 틀리지 않았지만..

자바스크립트 DOMContentLoaded vs load (onload) 의 차이

개요 바닐라 자바스크립트에서 페이지 시작 시에 DOM 에 이벤트 리스너를 붙여주고 싶다면, document.addEventListener() 혹은 window.addEventListener() 와 같이 이벤트를 붙이는 것으로 시작하는데, 보통 아래의 두 이벤트 타입 중 하나를 사용한다. DOMContentLoaded load (onload) 위의 두 방법은 소스코드가 비슷하여 얼핏 같은 역할을 한다고 이해하기 쉬우나 미세한 차이가 있다. DOMContentLoaded 를 이용하는 방법 document.addEventListener( "DOMContentLoaded", function () { // attach event listeners here. }, false ); 이 이벤트는 말 그대로 '모..