Vue Test Utils (VTU) - Vue.js 컴포넌트 테스트를 쉽게 만들어주는 유틸 Vue Test Utils Crash Course TodoApp 예제 export default { name: 'TodoApp', data() { retur

슬롯 머신 텍스트 이펙트를 react-slot-machine-text라는 라이브러리로 만들어서 배포했었다. 하지만 아이러니하게도 정작 내 포트폴리오 웹 페이지에서는 SlotMachine 내부에서 i18n을 사용하고 있던 터라 곧바로 컴포넌트를 라이브러리로 대체해서 사용

뭔가 포트폴리오 웹 페이지다 하면 또 로고가 빠질 수 없기에 처음 페이지에 접속할 때 로더에서 로고를 보여주고 싶었다.먼저 SVG로 로고를 만들고, Framer Motion을 씌운 다음 useState와 useEffect로 로더를 보여주도록 구현했다.로고는 노가다의 산

현재 index.ts의 import들이 보기가 좋지 않다.가독성이 매우 떨어진다고 생각한다.이는 다른 파일에서도 마찬가지다.이런 식으로 상대 경로와 절대 경로가 뒤죽박죽 섞여있으면 가독성은 더욱 떨어지게 된다.path alias를 정의해서 이 문제를 해결할 수 있다.위

슬롯 머신 이펙트를 React 컴포넌트 라이브러리로 만들어보려고 한다.

거대한 그래프로 구성된 지리적 정보를 나타내는 앱 가정각 노드는 도시와 같은 복잡한 개체도, 보다 작은 기업체, 관광지 등도 표현할 수 있음만약 실제 객체들 사이에 길이 존재한다면 노드 연결각 노드의 종류는 자체 클래스로 표현되고, 각 노드는 객체임그래프를 XML 포맷

React만 쓰던 사람이 Vue.js를 시작할 때 가벼운 마음으로 읽으면 좋을 것 같다.

기업 문서를 분석하는 데이터 마이닝 앱 가정앱에 다양한 포맷의 문서들을 넣어 동일한 포맷의 유의미한 데이터 추출앱의 첫 번째 버전 - DOC, 두 번째 버전 - CSV, 세 번째 버전 - PDF데이터 포맷을 다루는 코드는 다르지만 데이터 가공/분석 코드는 거의 동일 →

내비 앱 가정가장 빠른 경로 찾기 기능, 자동차 경로만 지원하다가 도보 경로, 대중교통, 자전거 등 추가새 경로 알고리즘 추가할 때바다 내비 클래스는 두 배로 커지는 상황알고리즘 하나가 변경되면 클래스 전체에 영향 끼침새로운 기능 구현 → 거대한 클래스 변경, 코드 충

실용주의 프로그래머이 책을 한 단어로 표현하자면 "근본"이 아닐까 싶다.태도와 마음가짐, 코드 설계와 도구, 프로젝트와 팀 등 광범위한 주제를 다룬다. "실용주의적 원칙"이라는 말은 일종의 oxymoron으로 느껴질 수도 있지만, 한 세대에 걸쳐 검증된 관행들은 충분히

유한 상태 기계의 개념과 밀접한 관련이 있음프로그램이 한 시점에 가질 수 있는 유한한 갯수의 상태 존재각 상태마다 프로그램은 다르게 행동하고, 한 상태에서 다른 상태로 즉시 변경 가능현재 상태에 따라 다른 상태로 변경이 될 수도 안 될 수도 있음이런 변경 규칙을 ‘전이

고객, 매장 두 종류의 객체가 있음고객 - 매장에 곧 들어올 특정 브랜드의 제품에 관심이 있음 → 매일 매장에 방문해 재고를 확인할 수 있지만 제품이 들어오기 전까진 무의미함 매장 - 새 제품이 들어올 때 모든 고객들에게 이메일 보냄 → 몇몇 고객들은 좋지만 다른

텍스트 에디터 앱 가정텍스트에 실행된 작업을 실행 취소하는 기능을 구현해야 하는 상황 → 작업 실행 전에 앱이 모든 객체의 상태를 저장해 저장소에 저장하도록 하고, 실행 취소를 하면 기록에서 가장 최근 스냅샷을 가져와 모든 객체의 상태를 복원하기로 했음스냅샷 → 객체

반응형 웹 구현을 시작하고 보니 버튼 관련 코드 리팩토링이 시급해서 다른 섹션의 반응형 레이아웃을 구현하기 전에 리팩토링부터 바로 착수하기로 했다.반응형 화면을 구성하는 과정에서 비슷하지만 다른 버튼들을 여러 곳에서 사용하게 되다 보니 버튼 관련 코드를 리팩토링해야 할

페이지를 반응형으로 만들어 여러 크기의 화면에서 모두 자연스럽게 보일 수 있도록 해봐야겠다. 메인 화면 width 640px 미만의 모바일 화면과 640px 이상의 넓은 화면 레이아웃을 다르게 구성해야 할 것 같다. 이는 두개의 div를 만들고 Tailwind CS

고객 프로필 생성/관리 대화 상자 가정텍스트 필드, 체크박스, 버튼 등 다양한 form control로 구성form 요소 중 일부는 다른 요소들과 상호작용할 수도 있음e.g. “저는 반려동물이 있습니다” 라는 체크박스를 체크하면 반려동물 이름을 적는 숨겨진 텍스트 필드

콜렉션은 프로그래밍에서 가장 많이 사용되는 데이터 타입 중 하나지만, 단지 객체 그룹의 컨테이너일 뿐콜렉션들은 단순한 리스트에 요소를 저장하지만, 어떤 콜렉션들은 스택, 트리, 그래프 또는 다른 복잡한 자료 구조를 기반으로 함콜렉션이 어떻게 구성되어 있든, 다른 코드들

텍스트 에디터 앱 가정에디터의 다양한 작업을 위한 많은 버튼들이 있는 툴바를 만들어야 함툴바의 버튼과 대화 상자의 일반 버튼들이 사용하는 Button 클래스를 생성했음모든 버튼이 비슷하게 생겼지만 모두 다른 작업을 하는 상황 - 버튼의 클릭 핸들러는 어디에 위치해야 할

온라인 주문 시스템 가정시스템에 대한 접근을 제한해 인증된 유저들만 주문할 수 있게 하고 싶은 상황또한 관리자 권한을 가진 유저들에게는 모든 주문에 대한 접근 권한이 주어져야 하는 상황검사가 순차적으로 진행되어야 함 → 애플리케이션은 유저의 자격 증명을 포함한 요청을

next-i18next를 사용해 국제화를 구현할 것이다. 세팅 1. 설치 2. 설정 2.1 common.json 이 common.json 파일은 필수로 존재해야 하고, 안에는 번역 데이터가 들어가게 될 것이다. 2.2 next-i18next.config.js