코딩일기

2023-08-01(화) 개발 프로세스란? 개발 프로세스란 소프트웨어 시스템이나 애플리케이션 개발 및 유지보수할 목적으로 수행되는 활동의 절차를 뜻합니다. 목적 ? 개발 프로세스의 목적은 개발에 대한 전체적인 가이드라인을 제공하는 데에 있습니다. 1. 절차가 있는 개발과 그렇지 않은 개발은 큰 차이가 있다. 개발 프로세스, 즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cylcle) 를 기반으로 만들어졌습니다. 요구분석 및 시스템 명세 작성 : 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표 등을 사용자와 함께 정확히 정의하는 단계입니다. 개발하고자 하는 소프트웨어의 성격을 정확히 이해하여 이를 토대로 개발 방법과..

숫자형 열거형(Enum) 특정 값의 집합을 정의할 때 사용된다. 숫자형, 문자열 또는 이 두가지의 조합으로 정의될 수 있다. 기본 값은 숫자 형을 사용한다. 각 값은 자동으로 0부터 시작해 1씩 증가한다. (수동으로 값을 지정할 수 있다.) enum Figure { Circle, Triangle, Square, } //수동으로 값을 지정할 수 있다. enum Figure { Circle = 1, Triangle = 3, Square = 4, } let f: Figure = Figure.Circle; let triangleValue: number = Figure.Triangle; let squareValue: number = Figure.Square; console.log(d); // 출력: 1 conso..

TypeScript 마이크로 소프트에서 개발한 JavaScript의 상위 집합(Superset)언어이다. JavaScript에 정적 타입 검사와 클래스 기반 객체지향 프로그래밍 등의 기능을 추가해 개발된 언어이다. JavaScript가 발전하면서 생긴 단점(타입의 명시성이 부족한 단점으로 인해 예상치 못한 결과를 초래한다.)을 보완하기 위해 등장했다. 장점 정적타입 검사 기능 제공 코드의 가독성과 유지 보수성을 높여준다. 런타임 에러 최소화 코드 작성 시간 단축 협업시 코드의 가독성을 높을 수 있다. ES6 문법 포함한 최신 JavaScript 문법 지원 인터페이스(interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공해 객체 지향 프로그래밍을 보다 쉽게 할 수 ..

2023-07-21(금) - 아토믹 디자인 - Atomic Design 최근 스마트폰의 보급과 기술 발전으로 인해 웹 환경이 빠르게 변화하고 있습니다. 데스크톱과 모바일에서 더 나아가 태블릿, TV, 냉장고, 자동차 등 다양한 기기에서 웹 환경이 제공되고 있습니다. 이러한 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관된 사용자 경험을 제공하는 것이 더욱 중요해졌습니다. 기존의 웹 디자인 방식은 각 페이지마다 디자인 요소를 개별적으로 만들고 관리하는 방식이었습니다. 하지만 프로젝트 규모가 커질수록 관리가 어려워지고, 일관성을 유지하기 어려워졌습니다. 이로 인해 일관성 없는 UI와 중복된 코드가 발생하여 유지 보수 및 확장성 측면에서 문제가 되었습니다. 이러한 문제를 해결하기 위해 아토..

2023-07-21(금) - 디자인 시스템 - 디자인 시스템이란? 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와줍니다. 종종 디자인 요소를 모은 UI 키트를 디자인 시스템으로 혼동하기도 하지만, 디자인 시스템은 디자인 원칙, 스타일 가이드, 컴포넌트, 패턴 그리고 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념입니다. 이런 점에서 디자인 시스템은 단순한 “디자인” 가이드가 아니라, 디자인 팀과 개발팀이 업무 전반 프로세스와 방식을 일관되게 가져갈 수 있도록 도와주는 협업 “시스템”에 가깝습니다. 이를 통해 제품 개발에 관련된 인원들..

2023-07-19(수) Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다. (e.g. useSomething) 예를 들어 이런 컴포넌트가 있다고 봅시다. 해당 컴포넌트는 실제 React 공식 문서에 있는 컴포넌트입니다. //FriendStatus : 친구가 online인지 offline인지 ret..

2023-07-18(화) useCallback과 UseMemo의 차이점과 useCallback이 무엇인지 학습 useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook입니다. 아래 코드를 보도록 하겠습니다. function Calculator({x, y}){ const add = () => x + y; return {add()} ; 현재 이 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태입니다. 이 add 함수는 props로 넘어온 x와 y 값을 더해 태그에 값을 출력하고 있습니다. 이 함..

2023-07-18(화) 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있습니다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼칩니다. [그림] 너무 많은 렌더링은 앱에 안 좋은 성능을 미치는 극단적인 예 React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드라고 했습니다. 그중 렌더링 최적화를 위한 Hook도 존재하는데, useCallback과 useMemo가 바로 그 역할을 하는 Hook입니다. useMemo란? useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook입니다. 아래 코드를 보면서 useMemo에 대해 좀 더 알아봅시다. function Calculat..