디자인 패턴이란 프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다. 과거의 웹사이트와 비교했을 때 현재는 화면 작업이 훨씬 복잡해졌고 React, Vue와 같은 개발 프레임워크를 활용하여 컴포넌트 단위로 웹 페이지를 개발하고 있습니다. 더욱 효율적인 웹사이트 구축이나 유지 보수를 위해 컴포넌트의 단위의 활용이 중요하게 되었는데, 이에 컴포넌트를 어떻게 구성할 것인가에 대한 고민이

작년 초에 Module Federation을 적용한 작은 서비스를 개발했습니다. 이 글은 그때의 경험을 바탕으로 Module Federation를 사용하는 이유, 단점, 사용하며 느낀 점 등을 다룹니다. 1. Micro-Frontend and MSA Micro-Frontend MSA(Microservice Architecture)는 이제 Backend에서 친숙한 단어입니다. MSA는 여러 개의 작은 서비스를 모아 하나의 앱을 구현하는 방식입니다. 작은 단위로 유지되는 각각의

#0. 대용량 트래픽 처리의 필요성 * 웹 서비스를 다루는데 있어 트래픽을 처리하는 구조를 설계하고 적용하는 것은 개발자의 필수 역량이다. 특히 서비스의 규모가 커질 수록 개발자가 의도한 대로 프로그램이 작동하지 않는 경우가 발생한다. 아무리 뛰어난 성능을 가진 서버라고 해도 모든 트래픽을 감당할 수는 없으므로 서비스의 안정적인 구동과 만족도 높은 고객 경험을 제공하기

I. 신입 개발자의 일상 시작하기에 앞서 아직 프론트가 낯선 입사 1년이 막 지난 한 사원의 프론트엔드 개발 흐름을 살펴보자. 1. figma 등을 통해 본인이 맡은 페이지의 모습을 확인한다. 2. 퍼블리셔 분이 만들어주신 컴포넌트를 일단 복붙하고 시작한다. 3. 나름 관심사에 따라 한 페이지를 몇 개의 컴포넌트로 나눈다. 4. 다시 각각을 container와

TypeScript 알차게 활용하기 들어가며 최근 통합 테스트 과정을 거치면서 TypeScript를 잘 활용할수록 에러 발생률을 줄일 수 있음을 체감하였다. 그래서 TypeScript 활용 팁을 정리해보았는데, 이번 글에서는 Utility Types와 Enums의 활용 방법을 살펴보고자 한다. Utility Type으로 간편하게 타입 정의하기 TypeScript는 다양한 Utility Type을 제공하고 있는데, 이를 사용하면 좀 더 간편하게 타입을 정의할

시작 안녕하세요 2023년이 된지 일주일이 조금 지난 지금, 디자인계의 트렌드는 계속 발전되고 변화되고 있습니다. 어느 분야든 마찬가지겠지만, 트렌드를 알고 시장을 이해하는 것이 중요합니다. 2023년의 웹디자인은 어떤 트렌드가 자리잡고 있을까요? 목차 먼저 목차를 보겠습니다. 첫 번째로 2023 웹디자인 트렌드에 대해서 보고 두 번째로 2년전인 2021년과 2023년의 트렌드가 어떠한 차이가 있었는지 비교해보도록

목차 * 개요 * Typescript 특징 * Typescript Compile Process * Typescript를 선택하는 이유 개요 타입스크립트가 등장하기 전 많은 프로젝트에 자바스크립트를 사용했습니다. 자바스크립트의 동적 타이핑은 자바와 다르게 개발자가 아주 유연한 코딩을 할 수 있도록 했지만, 프로젝트가 거대해 지면서 점점 디버깅에 취약하고 가독성이 낮으며 객체 지향을 추구하는 프로젝트에 걸맞지 않는 문제점이 야기되었습니다. 1년간 자바스크립트 기반의

주제 선정 이유 개발을 하다보면 이미 작성된 코드를 분석해야할 상황에 자주 놓이게 됩니다. 가장 쉽게 이런 상황에 놓이는 경우는 보통 라이브러리를 사용해야 할 때 일 것입니다. 라이브러리에서 원하는 기능의 API를 찾아 사용하기 위해서는 매개변수와 반환값의 타입을 참조하여 대략적으로나마 어떤 기능을 위해 만들어진것인지, 어떻게 사용해야 하는지 힌트를 얻는 과정이 필요하였습니다. 이

(이 글은 클라우드 네이티브 앱을 개발하고 운영하는 팀을 대상으로 하되, [개발 역량]에 초점을 두고 작성하였습니다. 따라서, 클라우드 인프라, DevOps 영역에 대한 내용은 없습니다. 참고하시고 읽어주시면 고맙겠습니다.) 클라우드 환경은 지원하는 기술 스택에 따라 IaaS, PaaS, SaaS 세 가지로 분류합니다. 시간의 흐름에 따라 IaaS에서 SaaS를 향해 발전하는데, 2001년 현재 우리는 PaaS

이 글은 SI(System Integration) 프로젝트에서 기업형 애플리케이션(Enterprise Application)을 목표 시스템으로 프로젝트를 진행하는 프로젝트 팀 개발자를 독자로 가정하고 작성하였습니다. 서비스 개발 회사의 경우, 기술 선택의 폭이 넓고 다양하여 일관된 흐름과 구조를 특정하기 어렵기 때문입니다. 소프트웨어 아키텍트는 목표 시스템의 아키텍처를 설계할 때, 다양한 의사결정과정을 거칩니다. 그 과정에서 기업이나 프로젝트

1. State란 무엇인가? 우선 State를 설명하기전, Props(Properties)를 간단하게 살펴 보겠습니다. 일반적으로 React에서는 모든 데이터 전달 방향은 부모 컴포넌트에서 자식컴포넌트로 향해 있습니다. 그래서 자식컴포넌트에서 필요한 데이터는 부모컴포넌트에서 자식컴포넌트의 props에 담아 전달하게 됩니다.  이로써 자식컴포넌트는 부모컴포넌트로 부터 Props를 전달받아 사용이 가능합니다. 하지만 데이터를 수정하는 로직이나 사용자가 입력한 변경된 데이터를 저장해야

props React 에서의 데이터 흐름은 단방향으로 부모(상위) 컴포넌트에서 자식(하위) 컴포넌트로 전달되는 구조입니다. 이러한 흐름에서 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터는 props 라는 객체로 전달되며 properties 의 줄임말 입니다. 그림 1은 현재 자판기 예제의 데이터 전달 방식으로 VendingMachine(부모 컴포넌트)에서 자판기의 음료들에 대한 정보를 갖습니다. VendingMachine은 음료들에 대한

ReactElement는 Virtual DOM(이하 VDOM)이라는 콘셉트의 구현체입니다. VDOM은 in-memory에 존재하는 자바스크립트 객체이며 React.createElement 함수로 생성할 수 있습니다. 이를 통해 생성된 엘리먼트는 일반적인 자바스크립트 객체입니다. 이를 아주 단순하게 표현하면 아래 코드 예시와 같습니다. React.createElement = (tag, config, children) => { // return { tag: tag, className: config.className, props: { children: children }, dom:

1. 환경 세팅 1-1. JAVA : 1.7 1-2. Eclipse : Kepler - Eclipse EGit 플러그인 설치 : EGit 플러그인은 이클립스와 Git을 연동시켜줍니다. 이클립스에 EGit플러그인을 설치하는 방법에는 두 가지 방법이 있는데 첫 번째 방법은 Eclipse Marketplace를 이용하는 방법과 다른 방법은 Install New Software를 이용하여 설치하는 방법입니다. [방법1] Market Place 1. Help > Market

이전 글에서 OAuth 2의 개념과 구현 시 고려 사항들에 대해 살펴봤습니다. 이번 글에서는 SSO 환경을 구성하기 위해 어떻게 OAuth 2를 확장하는 지와 스프링부트 및 스프링 시큐리티 OAuth로 SSO 환경을 구축하는 방법에 대해 설명하겠습니다. 1. SSO 환경 구성을 위한 OAuth 확장 OAuth를 사용해서 SSO를 구성하기 위해 인가 승인 유형 중 인가

한 회사에서 여러 시스템을 운영 중이고, 각 시스템마다 계정을 별도로 관리하여 서비스하는 경우가 있습니다. 시스템들을 이용하는 사용자는 자신이 사용하는 시스템들의 계정을 모두 기억해야 하고, 시스템들을 사용하기 위해서 각 시스템에 별도로 로그인해야 하는 불편함이 있습니다. 또한, 시스템을 운영하는 관리자 역시 회원 정보가 흩어져 있어 회원 관리의 어려움이 증대하게 됩니다. SSO(Single

이 글은 HTML과 CSS를 사용하여 문장, 문단, 문단을 담고 있는 박스 등을 사용자가 보기 좋게 정렬할 수 있는 방법에 대해 다루고 있습니다. 수평, 수직축 중앙 정렬을 다룬 두 가지의 방법에 대해 알아보겠습니다. 방법 - 1. display : table // display : table-cell // vertical-align : middle 수직 정렬 방법에 대해 자세히 알아보기 전에 먼저 vertical-align

React는 오픈소스로 구성된 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 사용자 인터페이스를 아름답게 만들수 있게 도와주는 다양한 리액트 기반의 UI 라이브러리가 있습니다. 대표적으로 Material-UI, Semantic-UI-React, Ant-Design, React-Bootstrap, Grommet 등이 있으며 간략하게 소개합니다. 1. Material-UI https://material-ui.com/?ref=designrevision.com Google Material Design 을 사용하는 React 컴포넌트를 제공합니다.React

1. React Component Element Rendering class CorrectComponent extends React.Component { // React Component is rendering only single element. render() { return ( <h4> Hello React </h4> ) } } class WrongComponent extends React.Component { // React Component is not rendering more than 1 element. render() { return ( <h4> Hello </h4>

단위 테스트란? 단위테스트는 어플리케이션을 테스트 함에 있어 가장 작은 단위로 분리하여 테스팅을 진행하는것을 말합니다. 가장 작은 단위(함수 또는 메소드..)로 수행하는 단위테스트를 통해 프로그램의 잘못된 수행과 예기치 못한 버그를 미리 예측하여 수정할 수 있습니다. 사전에 테스트 코드가 작성 또는 수정이 될때 단위테스트를 통해 정상수행 여부를 확인하여 어플레케이션 아키텍처 및

React에는 2가지 종류의 component가 있습니다. 1. Class Component - Component를 만들 때 class를 이용하여 만드는 방법입니다. 보통 React를 사용할 때 기본적으로 사용하는 방법입니다. Class Component를 사용하는 이유는 state와 lifecycle를 이용할 수 있다는 큰 장점 때문에 많이 사용되고 있습니다. 2. Function Component - Function Component는 state와 lifecycle를 따로 사용할 수 없다는

이 글을 통해 React의 Context 개념과 사용에 대해 간단히 알아보고, 실제로 context를 사용하여 간단한 컴포넌트를 제작해보겠습니다. 1. Context란? 처음 React로 개발을 진행할 때, 컴포넌트 간에 데이터를 전달하는 데 있어 불편함을 겪었습니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 '직접' 전달해야만 했기 때문입니다. 데이터를 여러 컴포넌트들이 사용하는 경우에는 각각의 컴포넌트의 props로

조건부 렌더링(Conditional Rendering) React Component는 스스로 State를 통해서 화면을 나타내며, 이러한 React Component를 조합하여 복잡한 UI를 생성할 수 있습니다. 복잡한 UI를 생성하기 위해서는 React Component는 로직을 사용할 수 있어야 하며, 로직에 따른 UI를 화면에 나타낼 것입니다. 먼저 우리는 화면에 UI요소들을 나타내기위한 JSX templet 문법 을 먼저 다룰 줄 알아야

React에서 Event를 다루는 방식과 HTML에서 Event를 다루는 방식에는 약간의 차이점이 있습니다. 1. Event 사용 방법 * HTML에서는 event를 정의 할 때 모든 event를 소문자로 정의합니다. React에서는 camelcase를 이용하여 event 정의를 합니다. React에서 제공해주는 DOM event ("이벤트 이름" 항목 부분을 참조) - https://ko.reactjs.org/docs/events.html#clipboard-events