MSA란 MicroService Architecture의 줄임말 입니다.마이크로서비스란 작고, 독립적으로 배포 가능한 각각의 기능을 수행하는 서비스로 구성된 프레임워크라고 합니다.마이크로서비스는 완전히 독립적으로 배포가 가능하고,다른 기술 스택(개발언어, 데이터베이스 등)이 사용 가능한 단일 사업 영역에 초점을 준다. 마이크로서비스의 등장배경Monolithic Architecture는 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어 있는 형태입니다.하지만 일전 규모 이상의 서비스, 혹은 수백명 이상의 개발자가 투입되는 프로젝트에서 Monolithic Architecture는 한계를 보였습니다. - 부분 장애가 전체 서비스의 장애로 확대될 수 있다.- 부분적인 여러 서버로 나누어 일을 처리하는 방식이 ..

우선 가상돔(Virtual DOM)을 알아보기 전에 DOM을 알아봅시다.DOM은 Document Object Model입니다.웹페이지의 버튼 글 등등 하나하나의 요소들을 elements라고 부르고이 모든 것을 담고 있는 웹페이지를 Document라고 합니다. DOM은 이 정도 설명이면 적당하고 Virtual DOM에 대해서 알아봅시다.React는 가상돔이라는 것을 사용해서 실제돔을 실제 돔을 조작하는 일을 엄청 빠르게 해줍니다.가상돔은 실제돔의 복제본이라고도 합니다. 가상돔은 실제돔과는 다르게 브라우저에 있는 직접적으로 접근을 할 수 없습니다.그런데 왜 굳이 복사본을 만들어서 가상돔을 사용하는 것일까 실제 돔조작은 브라우저가 현제 페이지를 전부 탐색해서 해당 elements를 찾고 해당 elements와..

https://www.youtube.com/watch?v=2C1tXVHu9XQ 컴포넌트는 간단하게 말해서 전체의 부분입니다.예를 들어 덩어리가 있다고 할때 덩어리의 단점은 반복할수없고 재사용도 불가능하고규모가 큰 설계를 하지못합니다.이 덩어리를 잘개 나누어 부분으로 나누어 설계한다면 각 부분을 독립적으로 구현함으로써효율적인 설계가 가능합니다. 프론트엔드에서 컴포넌트란프론트엔드에서 컴포넌트라는 개념이 익숙해진지는 그렇게 오래되지 않았습니다.과거의 웹 사이트는 HTML페이지만으로 구성되었습니다.유저의 액션에 대해 매번 새로운 HTML페이지를 서버에서 내려주어야 했습니다.페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 한다는 점에서 굉장히 비효율적이였습니다.과거의 웹  1990년대 네이버 메인 ..

https://youtu.be/iJcSFzR9s8Y?si=hAIWYC3i5atuNyRm JavaScript에서의 불변성(Immutability) JavaScript의 세계는 변화가 끊임없이 일어나는 곳입니다. 하지만 이 변화 속에서도 변하지 않는 것, 즉 불변함(Immutability)의 가치를 이해하는 것이 중요합니다. 이 글에서는 JavaScript에서 불변성을 유지하는 방법과 그 중요성에 대해 알아보겠습니다. 변화와 불변성의 개념 mutate(변화): 정보의 원본이 변경될 수 있다는 의미입니다. mutable(변화 가능한): 변화가 가능함을 나타내는 형용사입니다. immutability(불변성): 데이터의 원본이 훼손되지 않음을 의미합니다. 즉, 정보의 원본이 변화하지 않도록 하는 것입니다. 정보 ..

https://youtu.be/eV4Yzssr9MA?si=Cn55ZEwDshidJUpq 인치의 불변성 불변성은 '변하지 아니하는 성질' 이라는 사전적 의미를 가지고 있습니다. 말그대로 바뀌지 않는다는 뜻이며 이개념은 함수형 프로그래밍 에서 중요하게 여겨지는 개념 중 하나입니다. 이런 함수형 프로그래밍 방식을 지향하는 자바스크립트에서도 불변성은 아주 중요한 개념입니다. 자바스크립트에서 원시타입은 불변하고, 참조타입(객체)은 가변적 입니다. 여기 코드를 볼때 a라는 이름을 가진 변수에 숫자1을 할당했습니다. 이때 a는 원시타입중 하나인 넘버타입임을 확인할수 있습니다. 이번에 기존에 1이라는 값에 할당한 변수a에 2라는 값을 재할당 해줍니다. 그리고 a라는 변수는 정상적으로 2로 바뀐것으로 알수 있..

자바스크립트 객체 객체를 가지고 뭘 할 수 있는지 처음 자바 스크립트를 시작한지 얼마 안된사람들이 객체 사용법에 대해서 정리가 안 되어 있으면 다른사람이 작성했던 코드를 읽을때 무슨 문법인지 모르는경우가 있습니다. 그럴때는 이글을 읽으면 좋을것입니다. 처음에는 객체를 어떻게 쓰는지 알아봅시다. const a = "age"; const obj1 = { id: 1, name: "김동욱", [a]: 3, }; console.log(obj1); const a = "age"; const obj1 = { id: 1, name: "김동욱", [a]: 3, getNameFunction: function () { console.log("김동욱입니다"); }, }; console.log(obj1); obj1.getName..