전체 글

효율적인 소프트웨어 설계를 위한 State Machine 알아보기

오늘은 State Machine에 대해서 알아보도록 하겠습니다 본 글에서는 간단하게 상태머신 이라고 하도록 하겠습니다 상태 머신(State Machine) 이란? 상태 머신은 컴퓨터 과학에서 시스템의 동작을 모델링 하는 데 사용되는 개념으로 시스템이 가질 수 있는 상태(State)들의 집합과 그 상태들 간의 전이(Transition)를 정의합니다 상태 머신은 시스템이 특정 시점에 어떤 상태에 있으며 이벤트나 조건에 따른 다른 상태로 전환할 수 있다는 것을 설명합니다 대략 아래와 그림과 같이 각 상태들 정의하고 해당 상태들 간의 전의들을 정의하는 게 상태 머신입니다 상태 : 시스템이 특정 시점에 가질 수 있는 조건이나 상황을 의미합니다 예를 들어 교통 신호등은 빨간색, 노란색, 초록생에 상태를 나타내며 각..

일렉트론 이대로 괜찮은가?(w.Tauri)

이직한 회사에서 일렉트론으로 개발을 주로 하고 있는데 데스크탑 앱 개발을 할 때 사용하는 프레임워크가 일렉트로만 있을까? 하는 생각을 하다가 Tauri 프레임워크를 알게 되었습니다 따라서 오늘은 최근에 등장한 Tauri 프레임워크를 알아보면서 일렉트론과 어떤 게 다른지를 한번 알아보도록 하겠습니다 Tauri https://tauri.app/ko/ Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Apps Tauri는 주요 데스크톱 플랫폼을 위한 작고 불티나게 빠른 바이너리를 만드는 프레임워크입니다. 개발자는 사용자 인터페이스를 위해 HTML, JS, CSS로 컴파일되는 그 어떤 프론트엔드 프레임워크..

Nextjs 14 공개

드디어 4달간에 프로젝트를 끝나고 여유가 생겼는데 프로젝트 진행하는 와중에 NextJs 컨퍼런스에서 Nextjs 14 가 발표가 되었네요 그러므로 오늘은 Nextjs 14에 변경되는 사항을 한번 정리해 보겠습니다 Nextjs 공식 블로그 글에 내용을 참고하였습니다 https://nextjs.org/blog/next-14 Next.js 14 Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more. nextjs.org 우선 가장 크게 변경되는 점은 3가지입니다 Turobpack 최대 53% 더 빠른 로컬 서버 구동 속도 빠른 새로 고침으로 최대 94% ..

PlantUML 을 이용하여 시퀀스 다이어그램 그려보기

안녕하세요 정말 오랜만에 블로그 글을 쓰네요 ㅎㅎ 최근에 일들이 많이 바빠서 블로그에 신경을 많이 못쓴 게 많이 아쉽습니다 ㅠㅠ 오늘은 최근에 프로젝트에 전반적인 구조 및 설계를 보는것에 대해 관심이 가지게 되었는데 설계를 하려면 여러 가지 다이어그램을 그리 줄 알고 잘 볼 수 있어야 될 거 같습니다 그래서 PlantUML을 통해 시퀀스 다이어그램을 만드는 방법에 대해서 작성해 보겠습니다 PlantUML PlantUML 은 텍스트 기반으로 다이어 그램을 생성할 수 있는 오픈소스 도구입니다 사용자는 DSL(Domain Specific Language)을 활용하여 다양한 UML(Unified Modeling Language) 다이어그램을 설명하고 PlantYML 은 이를 그래픽 다이어그램으로 변환합니다 Pl..

React 에서 Jest 를 활용하여 TDD 배우기 - 2

저번에는 Jest를 통해서 함수를 테스트하는 방법을 알아보았는데 이번에는 리액트 컴포넌트를 테스트하는 방법을 알아보도록 하겠습니다 리액트 컴포넌트 테스트 jest 같은 경우는 리액트 컴포넌트를 테스트하기에는 다소 불편한 부분이 많습니다 그래서 리액트 컴포넌트를 테스트할 때는 testing-library를 사용하여 테스트를 진행합니다 이 라이브러리는 컴포넌트의 구현 상세보다는 실제 동작 방식에 집중하며 이로 인해 사용자가 애플리케이션을 사용하는 방식과 가장 유사하게 테스틀 진행할 수 있습니다 라이브러리 설치 yarn add -D @testing-library/react @testing-library/jest-dom 그러면 우선 간단한 예제로 테스팅 라이브러리가 어떻게 동작하는지 알아보도록 하겠습니다 화면에..

React 에서 Jest 를 활용하여 TDD 배우기 - 1

최근에 테스팅에 대해 관심이 좀 가지게 되었습니다 그중 단위 테스트가 많이 궁금하였는데 이번에는 React 에서 Jest를 활용하여 Jest가 무엇인지, 그리고 TDD를 어떻게 하는지에 대해 알아보도록 하겠습니다 Jest란? 페이스북에서 개발하고 관리하는 자바스크립트 테스트 프레임워크입니다. Jest는 사용자 친화적이고, 다양한 기능을 제공하며 구성이 간단하고 다양한 환경에서 사용할 수 있기 때문에 많은 자바스크립트 개발자들이 사용합니다 사실 Jest는 주로 TDD를 할 때 많이 사용합니다 그래서 이번엔 Jest도 배우면서 TDD 도 같이 알아보도록 하겠습니다 TDD란? 테스트 주도 개발이라는 의미를 가지고 있으며, TDD는 소프트웨어 개발의 한 방법론으로 코드를 작성하기 전에 테스트를 먼저 작성하고, ..

Vue3의 새로운 상태 관리 라이브러리 Pinia

안녕하세요 한 달 만에 블로그글에 글을 쓰네요 최근 개발을 React로 주로 하다 보니 vue에 대한 관심이 많이 떨어져서 새로운 상태 관리 라이브러리가 나온 지도 모르고 있었네요 그래서 이번에는 vue3의 새로운 상태 관리 라이브러리인 Pinia에 대해 알아보도록 하겠습니다 Pinia는 무엇인가? pinia는 vue의 상태 관리 라이브러리 중 하나이며 vue3 버전을 고려하여 설계된 최신 상태 관리 라이브러리입니다 기존에 많이 사용하던 vuex와 유사하지만 Compostion API를 통한 유연한 사용과 향상된 TypeScript 지원으로 더 간편하고 직관적인 상태 관리를 할 수 있습니다 Vuex와 Pinia의 차의 점 vuex와 pinia 모두 vue의 상태 관리 라이브러리입니다 vuex는 vue의 ..

프론트 엔드 기술면접 준비하기_Typescript,React

요즘 이직을 하기 위해 면접을 많이 다니고 있는데 생각보다 쉽지가 않네요 기술면접 때 제가 부족했던 부분들을 정리해 보았습니다 Typescript 타입스크립트란 자바스크립트 타임 개념을 추가한 언어이며 자바스크립트에서 확장된 언어입니다 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 한 번에 컴파일 과정을 진행해야 합니다 왜 타입스크립트를 사용하는가? 타입 스크립트를 사용하면 에러를 사전에 방지할 수 있으며 개발툴에 기능을 최대한 활용할 수 있어서 개발 생산성을 높일 수 있습니다 타입 스크립트 기본 타입 String, boolean, Number 같은 타입은 제외한 주요한 타입입니다 Tuple : 배열의 길이가 고정되어 있고 배열의 각요소들에 타입이 정해져 있는 배열입니다 let arr: [st..

프론트 엔드 기술면접 준비하기_Vue,React

오늘은 Vue, React 프레임워크에서 나올 수 있는 질문들을 정리해 보았습니다 Vue 1. Vue 라이플 사이클 beforeCreate : 컴포넌트 인스턴스가 생성되기 이전에 호출 created : 컴포넌트 인스턴스가 생성된 후 호출이 되며 데이터에 접근하거나 이벤트 리스너를 설정할 수 있다 beforeMount : 인스턴스가 실제 DOM에 마운팅 되기 이전에 호출 mounted : 인스턴스가 실제 DOM에 마운팅 된 후 호출이 되며 돔에 접근하거나 조작을 수행할 수 있다 beforeUpdated : 데이터 변경이 일어나 DOM이 업데이트되기 이전에 호출 updated : 데이터 변경이 일어난 후 실제 DOM이 업데이트된 후 호출 beforeUnmount : 컴포넌트가 돔에서 사라지기 이전에 호출 U..

프론트 엔드 기술면접 준비하기_CS(Computer Science)

오늘은 기술면접에서 자주 나오는 CS 관련한 내용을 정리해 보았습니다 1. OOP(객체 지향 프로그래밍) OOP는 현실 세게를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법이며 코드의 재사용성을 높일 수 있습니다 2. OOP 5가지 설계 원칙 단일 책임 원칙 : 클래스는 단 하나의 목적이어야 하며, 클래스를 변경하는 이유는 단 하나의 이유여야 한다 개방 폐쇄 원칙 : 클래스는 확장에 열려있고, 변경에는 닫혀 있어야 한다 리스코프 치환 원칙: 상위 타입 객체를 하위 타입으로 변경하더라도 프로그램은 일관되게 동작해야 한다 인터페이스 분리 원칙 : 클라이언트는 이용하지 않는 메소드에 의존하지 않도록 인터페이스를 분리해야 한다 의..