분류 전체보기 328

SpringBootServletInitializer

War vs. Jar 배포상의 차이 @SpringBootApplication public class SuperApplication extends SpringBootServletInitializer { public static void main(String[] args) { SpringApplication.run(SuperApplication.class, args); } @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(SuperApplication.class); } } 보통 SpringBoot 웹 애플리케이션을 배포할 때는 embedded..

Http와 REST

1. Http 프로토콜 HTTP 메시지 프로토콜은 반드시 request/response의 한쌍으로 구성되어있다. 그리고 request와 response는 각각 header와 body로 이루어져 있고 header와 body 사이에는 반드시 한 줄이 띄어져야 한다. Http는 반드시 먼저 요청을 보내야지 response를 받기 때문에 카카오톡과 같이 서버로부터 데이터를 먼저 받는 것은 불가능하다. 먼저 받으려면 FCM푸시나 소켓통신을 통해서 해결해야 한다. 1) Request 헤더에는 : 리퀘스트라인(리퀘스트에 사용하는 메소드, URI), 상태라인, 헤더필드, 엔티티 헤더필드가 있다. 1) Http method http method는 request 헤더의 첫 번째 줄 첫 번째에 명시되어 있다. method의..

CS/Network 2022.12.10

아파치 카프카

1. 카프카의 탄생 배경 파편화된 데이터 수집 및 분배 아키텍처를 운영하는데 큰 어려움을 겪던 링크드인이 개발했다. 카프카는 각각의 애플리케이션끼리 연결하여 데이터를 처리하는 것이 아닌, 한 곳에 모아 처리할 수 있도록 중앙집중화했다. 즉, 카프카는 기업의 대용량 데이터를 수집하고 이를 사용자들이 실시간 스트림으로 소비할 수 있도록 만들어주는 일종의 중추 신경으로 동작한다고 볼 수 있다. 카프카를 중앙에 배치하면서 소스애플리케이션과 타깃 애플리케이션 사이의 의존도를 최소화하여 커플링을 완화하였다. 카프카 내부에 데이터가 저장되는 파티션의 동작은 FIFO 방식의 큐 자료구조와 유사하다. 큐에 데이터를 보내는 것이 프로듀서이고 큐에서 데이터를 가져가는 것이 컨슈머이다. 상용 환경에서 카프카는 최소 3대 이상..

Redux middleware(리덕스 미들웨어)

1. 미들웨어란?(함수를 반환하는 함수) 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행한다. 예를 들어 전달받은 액션을 단순히 콘솔에 기록, 전달받은 액션 정보를 기반으로 액션을 취소, 다른 종류의 액션을 추가로 디스패치 등 액션 --> 미들웨어1--> next --> 미들웨어2--> next --> 리듀서 --> 스토어 예시 const loggerMiddleware = store => next => action =>{ // 미들웨어 기본구조 }; export default loggerMiddleware // 위와 동일한 의미 const loggerMiddleware = function loggerMiddleware(store){ return func..

Vue, React 자동로그인

1. 자동로그인 1) localStorage에 로그인 유저 정보 담고 (localStorage vs. sessionStorage) 2) 새로고침, 새로운 페이지 접근 시 계속 store에 담아준다. https://velog.io/@devyouth94/%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%B0%EC%9E%A5-%EC%9E%90%EB%8F%99-%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [react] 자동 로그인 연장 / 자동 로그아웃 구현하기 ⚠️ token의 보안은 아직 고려하지 못했습니다. 단순히 리프레시 토큰과 액세스 토큰을 핸들링하는 방법에 치중된 내용..

Safari에서 new Date(), Date.parse 오류

1. 웹뷰 개발시 IOS에서 Javascript의 기본 Date 사용시 주의할 점 new Date(year, month, day, hour, min, sec) 방법으로 사용해야한다! https://velog.io/@yeoj1n/safari-%EC%97%90%EC%84%9C-new-Date-%EC%82%AC%EC%9A%A9%EC%8B%9C-Invalid-Date-%ED%98%84%EC%83%81 safari 에서 new Date() 사용시 Invalid Date 현상 현재 웹뷰로 개발 중인 프로젝트에서 날짜 계산 도중 android에는 정상적으로 동작하나 ios에서 계산이 되지 않는 이슈사항이 발생했다.javascript 의 기본 Date객체를 사용하고 있었는데 new Date(yyyy-mm- velog.io

App/WebView 2022.11.30

Infra 인프라

[IT 인프라 4대장] 1대장) Hardware(HW) - 서버 장비, 데이터 저장 스토리지, 기타 장치 등 2대장) Network - 애플리케이션 사용자(Client)를 서버와 리모트로 연결 해주는 것 3대장) Operating System, 운영체제(OS) - 하드웨어와 소프트웨어를 제어하고 사용자가 컴퓨터(서버)를 사용할 수 있도록 해주는 프로그램 4대장) Middleware - 서버가 특정 목적 및 기능을 수행하는데 도움을 주는 소프트웨어 미들웨어는 OS와 비즈니스를 처리하는 애플리케이션 사이에 들어가는 각종 소프트웨어를 말한다. 웹 서버, DBMS, 시스템 모니터링 툴 등이 있다. 오픈 소스부터 상용 솔루션까지 다양하므로 꼼꼼히 검토 후 필요한 요건에 따라 선정해야 한다. 서버(Server)는 ..

DevOps 2022.11.19

Node.js, Nginx 관계

1. Node.js란? Node.js란 Chrome V8 Javascript엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 구동되는 환경)이다. 예전에는 자바스크립트 런타임이 브라우저 밖에 존재하지 않았는데 이를 극복하기 위해 Node.js가 나온 것이다. https://perfectacle.github.io/2017/06/18/what-is-node-js/ Node.js란...? 이 글을 쓰게 된 계기는 다음과 같다. Q: Node.js는 서버인가요?A: 네, 백엔드 개발자들이 Node.js를 씁니다. ‘백엔드 개발자도 쓸 뿐, 프론트 엔드 개발자도 쓸 수 있다’가 내가 내린 결론이고,오늘 perfectacle.github.io 1) Node.js의 특성 가. 비동기 이벤트 기반(event..

DevOps 2022.11.16

Vue 초기 렌더링 속도 개선

1. 초기 렌더링 속도 개선하기 ( Webpack 번들 크기 줄이기, 코드 스플리팅) https://suspicious-pare-a66702.netlify.app/develop/initialRenderingOnVue/ https://suspicious-pare-a66702.netlify.app/develop/initialrenderingonvue/ 최근 회사의 모바일 어플리케이션을 개발하고 있는 중에 초기 렌더링 속도의 개선에 대해 큰 필요성을 느꼈다. 우리 회사는 Native에서 프론트에 Webview를 요청하면 webpack으로 빌드되어 있는 파일 suspicious-pare-a66702.netlify.app 2. 웹팩 용량 최적화 https://romeoh.tistory.com/367 [Vue + ..

Css Advanced (Section 7~)

1. Background #product-overview { background: url("freedom.jpg"); // bacgroung-image("freedom.jpg"); 도 똑같다 background-image: url("freedom.jpg"); background-size: 100px; // 반복되게 된다. // background-size:cover 는 100%랑 같다. // 다른 요소 : contain background-position: 20px; // 왼쪽에서 얼마나 떨어지는지 backgroud-repeat: norepeat; background-origin: border-box // 이미지가 border라인에 겹치게// content-box, padding-box backgroun..