개발 일지
-
세션 관리 in React개발 일지/Front-end 2022. 1. 11. 16:28
안녕하세요? 이번 글에서는 모든 스킬 레벨에서의 개발자들이 고민하는 세션에 대해 생각해 보겠습니다. 여러 블로그들과 포스트들을 참고해 보면 다음과 같습니다. 브라우저의 local storage, session storage 활용하기 및 쿠키 관리, redux-react-session, redux-persist 등등 매우 많은 전략들이 있습니다. Local Storage와 Session Storage 모두 브라우저에서 제공되는 저장소 인데 둘 모두 동일한 기능을 제공합니다. 다만 세션 스토리지의 경우 세션이 유지되는 동안에만 데이터가 유지됩니다. (여기서 세션은 브라우저 탭이라고 이해하면 됩니다.) 간단하게 생각해서 세션 데이터는 쿠키로 유지해보도록 하겠습니다. 필요한 경우 만료기간을 지정할 수 있습니다...
-
React Native 살펴보기개발 일지/Mobile 2022. 1. 10. 15:44
안녕하세요! 오늘은 리액트 네이티브 공홈 방문을 해보겟습니다. https://reactnative.dev/ React Native · Learn once, write anywhere A framework for building native apps using React reactnative.dev 모바일 개발에는 몇 가지 방법이 있죠. 회사에서도 네이티브 앱 개발이냐, 하이브리드 개발이냐로 초기에 고민을 많이 했습니다. 현재는 리액트 네이티브로 Vue.js 화면을 표시해 주고 있는데요. React Native 공홈에서는 아래와 같이 소개 하고 있습니다. React를 사용하여 Android와 iOS 네이티브 앱 만들기 React Native는 네이티브 개발의 가장 좋은 부분을 React(사용자 인터페이스를..
-
Spring boot 프로젝트 구조 잡기개발 일지/Back-end 2022. 1. 10. 11:38
안녕하세요! 신규 프로젝트를 시작할 때 우리 개발자들이 흔히 하게 되는 고민 중에 하나이죠. 새로운 마음으로 이번에는 잘(?) 해보자!! 프로젝트의 폴더(파일) 구조를 잡는 것입니다. 앞 포스트에서는 React의 프로젝트 구조잡기에 대해 살펴봤습니다. Backend로는 스프링 부트를 사용하고 있는데요. 우선 어느 정도 정리는 해서 프로젝트를 진행하고 있습니다. React나 Vue.js 등 프론트엔드에서 프로젝트 구조 잡기할 때 참고하였던 모델은 SPA(Single Page Application)과 PWA(Progressive Web App)이었습니다. 백엔드의 경우는 DDD(Domain Driven Design) 전략을 참고하려고 합니다. MSA(Microservice Architecture)와도 연결되..
-
빠른 메모개발 일지 2022. 1. 3. 11:11
# SPA ## 히스토리 1. 서버-클라이언트(페이지 reload) 2. 템플릿 기반 Angular.js 등 3. 이젠 React.js 등 컴포넌트 개념의 다양한 라이브러리와 프레임워크 등장 ## 특징 1. 라우팅 2. 컴포넌트 ## 장점 1. 네이티브 앱과 유사한 UX 2. 정적 리소스를 최초에 한번만 로드 3. 페이지 갱신에 필요한 데이터만 전달받아 전체적인 트래픽 감소 ## 단점 1. 초기 구동 속도가 상대적으로 느림 ## SPA의 핵심 가치 UX 향상 및 애플리케이션 속도 향상 (Mobile First) https://m.blog.naver.com/dktmrorl/222085340333 # Javascript callback ## 정의 파라미터로 함수를 전달받아, 함수 내부에서 실행하는 함수 예)..
-
React 프로젝트 구조 잡기 고민개발 일지/Front-end 2021. 12. 30. 12:54
안녕하세요! 신규 프로젝트를 시작할 때 우리 개발자들이 흔히 하게 되는 고민 중에 하나이죠. 새로운 마음으로 이번에는 잘(?) 해보자!! 프로젝트의 폴더(파일) 구조를 잡는 것입니다. 지난(2021) 과제에서 React를 처음 사내 도입할 때는 React 공홈에 있는 "파일구조" 페이지를 잠시 둘러보고 개발하면서 리펙토링을 진행하였습니다. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org 동시에 다른 분들의 기술 블로그도 조금 차용하였죠. 최근 구성한 구조는 아래와 같습니다. 보시다시피... 정리가 안되어 있죠. 프로젝트가 끝난지 ..
-
Stomp (The Simple Text Oriented Messaging Protocol) 번역개발 일지/Back-end 2021. 12. 13. 16:22
출처 : https://stomp.github.io/ STOMP STOMP is a very simple and easy to implement protocol, coming from the HTTP school of design; the server side may be hard to implement well, but it is very easy to write a client to get yourself connected. For example you can use Telnet to login to any STO stomp.github.io What is it? STOMP는 심플(또는 스트리밍) 텍스트 지향 메시징 프로토콜입니다. STOMP는 양방향 네트워크 프로토콜 기반으로 STOMP 클라이언트는..
-
Spring AMQP를 사용한 메시징개발 일지/Back-end 2021. 12. 2. 16:48
1. 개요 본 포스트에서는 Spring AMQP 프레임워크를 사용하여 AMQP릉 통한 메시지 기반 통신을 살펴보겠습니다. 2. 메시지 기반 통신 메시징(Messaging)은 애플리케이션 사이에 통신을 위한 기술입니다. 동기적인 요청/응답 기반 아키텍처 대신 비동기 메시지 전달에 의존합니다. 메시지 생산자(Producer)와 소비자(Consumer)는 메시지 브로커라고 하는 중간 메시징 계층에 의해 분리됩니다. 메시지 브로커는 메시지의 퍼시스턴트 스토리지, 메시지 필터링 및 메시지 변환과 같은 기능을 제공합니다. Java로 개발된 애플리케이션 간의 메시징은 일반적으로 JMS(Java Message Service) API가 사용됩니다. 서로 다른 벤더와 플랫폼 간의 상호 운용성을 위해, JMS 클라이언트와 ..
-
Pub-Sub vs. Message Queues개발 일지/Back-end 2021. 12. 2. 15:47
1. 개요 본 포스트에서는 "메시지 큐"와 "Pub/Sub"을 살펴보겠습니다. 이들은 2개 이상의 서비스가 서로 통신하기 위해 분산된 시스템에서 사용되는 일반적인 패턴입니다. 2. 메시지 큐 메시지 큐는 퍼블리싱 서비스와 큐를 거쳐 동신하는 여러 컨슈머 서비스로 구성됩니다. 이 통신은 전형적으로 단방향의 특징을 가집니다. 위 그림에서 퍼블리셔는 'n+1'번째 메시지를 큐에 넣고 있습니다. 그리고 n개의 메시지들이 이미 큐에 존재하고 있고 소비되기를 기다리고 있습니다. 우측에는 큐의 메시지를 기다리는 'A'와 'B' 2개의 consuming 서비스를 가지고 있죠. 다음 상황을 고려해 보겠습니다. 먼저, 퍼블리셔의 메시지가 큐의 마지막에 들어갔습니다. 다음으로, 우측을 살펴보겠습니다. 소비자 'A'가 메시지..