번형 스타일 제공자를 사용해 변형 스타일를 공유 많은 프로젝트 특히 대규모 프로젝트에는 컴포넌트들의 모양과 느낌에 대한 가이드 역할을 하는 디자인 시스템이 있습니다. 아래 예와 같이 Figma에서 다른 버튼 번형에 대한 디자인들을 볼 수 있습니다. 웹사이트의 주요 액션에 대한 버튼은 primary, secondary와 같이 다양한 번형을 가질수 있습니다. 또한 danger와 같이 사용자의 액션에 대해 위험을 나타내는 번형도 있습니다. 이러한 번형을 구현하는 방법은 여러가지가 있습니다. CSS 변수나 모듈을 사용해 깔끔하고 효과적으로 이를 관리할 수 있는 방법을 공유해보도록 하겠습니다. 디자인 시스템 기반으로 번형이 있는 Button, Tag 컴포넌트를 생성하는 방법 CSS 변수나 모듈을 활용해 구성 요소..
분류 전체보기
7 Powerful JavaScript Shorthands That You Should Know(알아야 할 7개의 강력한 JavaScript의 단축 표기법) 코딩 속도를 올리기 위해 사용할 수 있는 유용한 JavaScript의 단축 표기법입니다. 자바스크립트는 요즘 매우 강력한 프로그래밍 언어입니다. 자바스크립트로 우리는 할 수 있는 것들이 많이 있습니다. 그 외에도 자바스크립트에는 많은 유용한 도구, 프레임워크, 라이브러리를 발견할 수 있는 거대한 생태계가 있습니다. 자바스크립트는 개발자의 삶을 쉽게 만들어 주는 많은 강력한 기능과 도구들이 있습니다. 문법에는 자바스크립트 코드 빠르게 작성하거나 라인수를 줄이여서 사용할 수 있는 많은 단축 표기법들이 포함되어 있습니다. 특히 최신 ECMAScript 사..
TypeScript를 이용해 Jest 테스트를 진행해보자. 서론 간단한 node 빈 프로젝트가 있다고 합시다. (package.json만 있는 프로젝트) Jest는 TypeScript를 지원하는 단위 테스트 도구이기 떄문에 사용하기 좋습니다. 필요한 모듈 설치 npm i jest @types/jest ts-jest typescript -D jest 단위 테스트 프레임워크 @types/jest jest types ts-jest jest의 ts 모듈 typescript 타입 스크립트 모듈 Jest 설정 jest.config.js를 만들어 아래와 같이 설정한다. module.exports = { "testMatch": [ "**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec..
Ruby의 map vs each 🧐 두 개의 가장 큰 차이점 두 개의 가장 큰 차이점은 새로운 배열 반환 여부입니다. map은 새로운 배열을 반환하고, each는 새로운 배열을 반환하지 않습니다. 간단한 예제를 통해 살펴보도록 하겠습니다 1️⃣ map names = [ "Dan", "Stella", "Elly" ] upcase_names = names.map { |name| name.upcase } puts names // [ "Dan", "Stella", "Elly" ] puts upcase_names // [ "DAN", "STELLA", "ELLY" ] map은 새로운 배열을 반환하기 때문에 변환된 값이 나오는걸 확인할 수 있습니다. 즉, 원래 배열을 변환하지 않는 장점이 있습니다. 원래 배열도 같..
Why Engineering Managers Still Want To Write Code(왜 개발 관리자가 여전히 코드를 작성하길 원하는가) 리더 역할을 맡으면서 기술적으로 직접 해보고, 코드를 작성해야 할까요? 이러한 기사들은 수없이 많고 흔한 주제입니다. 그러나 왜 이러한 질문을 애초에 하는 이유가 무엇일까요? 왜 이게 문제일까요? 팀을 이끌고 다른 개발자를 휼륭하게 하는 것이 주요 목표인데, 왜 가장 큰 영향을 미치지 않거나 팀에 중요한 가치를 더하는 것이 아닌 작업에 집중해야 할까요? 개인적인 경험을 통해 나 자신에게 같은 질문을 하면 이러한 생각을 해서 동기부여를 하는 3가지 주요 이유가 있다고 생각합니다. 코딩은 에너지를 줍니다. 대부분의 개발자 관리자는 오랫동안 개발 역할을 맡거나, 여러 가..
만약 Google의 PageSpeed Insights나 Google Lighthouse를 사용해봤다면, 아래와 같은 웹페이지의 성능 평가를 봤을 것이다. 어떻게 하면 웹사이트의 속도가 향상될 수 있는지에 대한 진단의 통계들을 받았을 것이다. 쉽게 수정되는 것, 사용하지 않는 파일, 느리거나 많은 공간을 차지하는 요청들을 볼 수 있어 몇몇 진단들을 꽤 유용할 수 있습니다. 메인 쓰레드 작업, 자바 스크립트 실행 시간와 같은 것을 보여주는 진단들은 문제점을 보여주지만, 실제 문제를 해결하기 위해 도움이 되지는 않습니다. 이 글은 Vue Application이 가능한 빠르게 동작할 수 있도록 몇가지 단계를 소개합니다. 단계들을 통해 무엇을 고쳐야 할지 추측하는 것이 아니라 정확히 알 수 있을 겁니다. 1. 필..
DOM(Document Object Model) VS BOM(Browser OBject Model) 📝 DOM(Document Object Model) 문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조 및 스타일, 내용 등을 변경할 수 있게 도와줍니다. 간단하게 말하자면 프로그래밍 언어(예를 들어 JavaScript)가 구조에 접근할 수 있는 방법을 제공해 문서 구조나 스타일, 내용을 변경할 수 있게 도와주는 모델입니다. JavaScript는 어떤 작업을 할 수 있게 해주..
통합 테스트는 독립적으로 개발된 소프트웨어의 단위가 서로 연결되어 있을 때 올바르게 작동하는지 확인합니다. 이 용어는 소프트웨어 산업의 확산된 표준임에도 불구하고 이 용어를 글에 사용하는 것이 조심스러웠습니다. 특히 많은 사람들이 반드시 통합 테스트의 범위는 넓어야 한다고 하지만, 좁은 범위에서 더 효과적으로 수행할 수 있습니다 흔히 이러한 것은 약간의 역사로 시작하는 것이 가장 좋습니다. 통합 테스트를 맨처음 알았을 때는 1980년대 폭포수(Waterfall) 개발 방법론의 지배적인 영향때문이였습니다. 큰 프로젝트에서는 시스템의 다양한 모듈의 인터페이스와 동작을 명시하는 설계 단계가 있습니다. 모듈들을 개발자들이 할당받아 프로그래밍합니다. 보통 한명의 개발자가 하나의 모듈만 담당하는 일은 흔치 않는 일..
아이템 76. 가능한 한 실패 원자적으로 만들라 실패 원자적(failure-atomic)? 호출된 메소드가 실패하더라도 해당 객체는 메서드 호출 전 상태를 유지해야 한다는 특성 어떻게 하면 실패 원자적 특성을 가진 메서드를 만들수 있을까? 아주 간단한 방법은 불변 객체(아이템 17)로 만드는 것이다. 메서드가 실패하면 새로운 객체가 만들어 지지 않을 수 있으나, 기존 객체가 불안정한 상태에 빠질일은 없다. 왜냐하면 생성 시점에 고정되어 절대 변하지 않기 때문이다. 그럼 가변객체는? 가장 흔한 방법은 작업 수행에 앞서 매개변수를 검사하는 것(아이템 49)이다. 쉽게 말하면 객체 내부 상태가 변하기 전에 잠재적 예외 가능성을 걸러내라는 의미이다. 간단한 Stack 코드를 보자. public Object po..
아이템54. null이 아닌, 빈 컬렉션이나 배열을 반환하라 컬렉션에 값이 없으면? 대부분 null로 처리한다고 한다고 합니다. (전 그런적이 없는데...) return list.isEmtpy() ? null : new ArrayList(list); 이거의 가장 큰 단점은 위의 값을 return하는 메소드를 사용하는 곳에서 null 방지를 해줘야 한다는 점입니다. 이렇게 쓰는 사람들의 의견은 빈 컬렉션을 반환하는 것이 비용이 들기 때문에 null로 처리해야한다는 의견입니다. 그러나 저 의견은 손쉽게 깨트릴수 있습니다. 빈 컬렉션을 만드는 것의 문제점이 아닌 이유 성능 저하의 주범이라고 확인되지 않는 이상 이정도의 성능 차이는 신경 쓸 수준이 못된다. 빈 컬렉션과 배열을 굳이 새로 할당하지 않고 만들수 있..
