달과 함께하는 IT

개요 이 가이드는 Docker를 사용하여 Node.js 애플리케이션과 Nginx 서버를 구성하고, 효율적으로 배포하기 위한 전반적인 프로세스를 다룹니다. 특히 SVN에서 코드를 체크아웃하고, 문서를 생성하며, live-server를 이용한 로컬 개발 환경 설정에 초점을 맞춥니다. 또한, Docker Compose를 활용하여 여러 컨테이너를 관리하는 방법에 대해서도 설명합니다. 샘플 파일 배포 Github https://github.com/zerosial/Docker_svn_Nginx GitHub - zerosial/Docker_svn_Nginx Contribute to zerosial/Docker_svn_Nginx development by creating an account on GitHub. gith..

작년 우아콘과 더불어 회사 내 사내 발표시 사용했던 ppt가 있어서 공유합니다. 진작 공유하고 싶었지만.. 사용한 코드나 예시 스크린샷이 아직 공개된 앱이 아니라서 참고 참았다가 첫 발표에 사용한 PPT를 이제야 공유합니다 https://gamma.app/public/React-query-Zustand-0yejbuupd15mi5t 일부 열화된 (직접찍느라) 사진들이 있지만.. 첫 발표라 설랬던 내용을 공유하고 싶습니다.

시작하기에 앞서 이 포스트를 통해 커스텀 훅의 사용 예시와 더불어 실제 프로젝트의 적용 코드 및 사용 주의사항 등을 공유할 예정입니다. 먼저 Hooks 란? 리액트(React)의 훅(Hooks)은 함수형 컴포넌트에서 상태 관리, 라이프 사이클 이벤트 처리, 그리고 React의 다른 기능들을 사용할 수 있게 해주는 기능들입니다. 훅을 사용하면 클래스 기반 컴포넌트에서만 가능했던 여러 기능들을 함수형 컴포넌트 에서도 쉽게 사용할 수 있습니다. 우리가 자주 쓰는 useEffect , useState를 포함해 정의된 Hooks를 통해 React의 생명주기를 다룰 수 있습니다. Hooks의 종류 Built-in React Hooks – React [Built-in React Hooks – React The lib..

React에서 스크롤 기반 헤더 최적화하기 스크롤 기반의 동작은 웹 애플리케이션에서 흔히 볼 수 있는 패턴입니다. 이런 패턴은 사용자 경험(UX)을 크게 향상시켜주지만, 잘못 구현될 경우 성능에 문제를 가져올 수 있습니다. 이 글에서는 React Hook을 사용하여 스크롤에 따라 헤더 내용을 바꾸는 작업의 최적화 과정을 함께 살펴보겠습니다. 초기 구현: 이전 코드 우리가 개선 전에 사용하던 코드는 아래와 같습니다: import { useEffect } from "react"; import { Store } from "Helper"; import { CommonHeaderTypePageActions } from "Action"; const useProminentHeader = (ref, title) => ..

1. SPA에서 Redux의 개념 단일 페이지 응용 프로그램(Single Page Application, SPA)에서 Redux는 상태 관리 라이브러리로써 사용됩니다. SPA는 전통적인 웹사이트와 달리 페이지 이동 없이 동적으로 내용을 업데이트하며, 이로 인해 상태 관리가 복잡해질 수 있습니다. Redux는 중앙 집중화된 상태 저장소를 통해 SPA의 상태를 예측 가능하게 관리하고 변경을 추적하는데 도움을 줍니다. 2. React에서 Redux를 사용하는 방법 React에서 Redux를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다. Redux 설치하기: npm install redux react-redu 액션(Action) 정의하기: 액션은 상태 변경을 설명하는 객체로, 액션 타입과 필요한 데이터를 가..

JEST Jest는 JavaScript 애플리케이션을 위한 테스트 프레임워크입니다. 주로 React 프로젝트에서 컴포넌트 및 함수의 유닛 테스트와 통합 테스트를 작성하는 데 사용됩니다. Jest는 간편한 구문과 기능을 제공하여 테스트 작성을 쉽고 효율적으로 할 수 있도록 도와줍니다. Jest의 특징: 간결한 문법과 쉬운 설정으로 테스트 작성을 용이하게 함. 테스트 실행을 위한 별도의 설정 없이 기본적인 설정 제공. 테스트 코드에서 Mocking 및 Spy 기능을 내장하여 외부 의존성 테스트 가능. 병렬 실행과 자체적인 결과 리포팅 기능 제공. Jest 사용법 예시: 설치: 프로젝트 디렉토리에서 Jest를 설치합니다. bashCopy code npm install --save-dev jest 테스트 작성:..

React Query: React Query는 API 호출, 데이터 캐싱, 상태 관리, 리렌더링 최적화 등을 제공하는 라이브러리입니다. 쿼리와 뮤테이션을 사용하여 비동기 작업을 관리하며, 데이터를 효율적으로 가져오고 관리하는데 도움을 줍니다. Axios: Axios는 HTTP 클라이언트 라이브러리로, 서버와의 HTTP 요청을 보내고 응답을 받는데 사용됩니다. Promise 기반으로 작성되어 있어 간편하게 비동기 요청을 처리할 수 있습니다. Redux-Saga: Redux-Saga는 Redux와 함께 사용되는 미들웨어 라이브러리로, 사이드 이펙트 관리를 위해 사용됩니다. 주로 복잡한 비동기 흐름을 관리하고 제어하는 데 사용되며, 제너레이터 함수를 이용하여 비동기 로직을 작성합니다. Redux-Thunk: ..

MFA(Micro Frontend Architecture)란 웹 프론트엔드를 작은 독립적인 단위로 나누어 개발하고 배포하는 아키텍처 패턴을 의미합니다. 이는 마이크로 서비스 아키텍처의 원칙을 웹 프론트엔드에 적용한 것으로, 애플리케이션을 작은 모듈 또는 마이크로 프론트엔드로 분리하여 개발하고 관리하는 방식입니다. MFA 개요 MFA는 하나의 대규모 단일 애플리케이션 대신, 작은 프론트엔드 모듈을 개발하고 각 모듈을 독립적으로 배포하고 실행함으로써 애플리케이션을 구성합니다. 이는 여러 개발 팀이 동시에 작업하고 독립적으로 배포하여 개발 생산성을 향상시킬 수 있게 해줍니다. MFA 적용시 장점 독립적인 개발 및 배포: 각 마이크로 프론트엔드는 독립적으로 개발되며, 필요한 경우 개별적으로 배포할 수 있습니다...

부트스트랩 세계에서 가장 인기있는 프론트엔드 오픈 소스 툴킷이며 Sass 변수와 믹스인, 반응형 그리드 시스템, 광범위한 사전 제작된 컴포넌트, 그리고 강력한 JavaScript 플러그인이 있는 Bootstrap으로 반응형 모바일 우선 사이트를 디자인하고 입맛대로 바꿔보세요. 부트스트랩은 Html 단에서 class name 지정을 통해 각종 컴포넌트 , 레이아웃 , CSS등을 구사할 수 있는 강력한 컴포넌트 입니다. 기본적인 사이트의 구성에서부터 시작해서 하나의 웹 서비스를 매우 빠르게 만들 수 있습니다. 장점 제작 기간이 짧음 러닝 커브가 쉬움 Javascript 지식이 거의 필요 없음 => 모달 , 케로우셀부터 시작해서 기본적인 모든게 다 들어가있음 반응형 웹이 자동으로 만들어짐 디자인을 통일화시켜 ..