우리가 이용하는 이 홈페이지들은 브라우저 에서 실행이 되고 있으며, 브라우저가 없이 코드 만으로는 이러한 화면을 볼 수 없습니다. 렌더링(rendering)은 컴퓨터 프로그램을 사용하여 이미지나 영상을 만드는 과정을 말하는데요. 브라우저에서도 화면에 페이지를 그리기 위해 브라우저가 네트워크를 통해 받은 데이터를 렌더인 ( DOM 과 CSSOM ) 으로 바꾸는 것을 말하며, 이를 곧 화면을 그린다고 표현합니다. DOM 과 CSSOM 을 결합하여 최종적으로 렌더 트리를 통해 화면을 그리는데요.홈페이지에 변화가 일어나게 되어서, 홈페이지의 화면을 달리 그려야하게 되면 브라우저는 이러한 DOM 구조를 처음부터 다시 변경해야하는 구조입니다. Virtual DOM 은 이러한, DOM의 불필요한 계산과정을 줄이기 ..
Next.js 를 실무에서 배포할때 Vercel이나 AWS Amplify 사용하거나 (클라우드 플랫폼 서비스), ECS 또는 EKS (Kubernetes) 사용하는 형태로 (자체 인프라 관리) 트래픽 증가에 따른 자동확장을 통해 관리하곤 합니다. Vercel이나 AWS Amplify는 Next.js와 같은 프레임워크에 최적화되어 있어, 자동화된 배포 파이프라인과 CI/CD 통합이 기본적으로 제공됩니다. GitHub에 코드를 푸시하는 것만으로 배포가 자동으로 이루어집니다. 특히나 Vercel의 경우 빌드 + 배포 + 호스팅 까지 Next.js 에 특화된 기능을 제공하기 때문에, 정적페이지의 경우는 무조건 Vercel 을 이용하는것이 좋다고 생각하고, API 서버가 분리된 경우에도 효과적으로 사용할 ..
이번글은 Vanilla Javascript로 React UseState Hook 만들기 글을 보고 궁금하여 직접 공부하고 개발한 것을 정리한 글입니다. 해당 글에서 제기한 의문의 핵심은 이러하다. useState 를 통한 상태값 변경 시 상태 값이 변경됨에 따라 렌더링이 실행되면 반드시 해당 function(컴포넌트)이 재 실행되어야 하는데 값 초기화 구문이 실행되지 않고 유지될 수 있을까? 1. JavaScript 로 useState 기본 구현해보며 알아보기(1). React의 useStatefunction Counter () { const [count, setCount] = useState(1); // 전역 객체 window에 increment를 할당하여 돔에서 호출할 수 있게 한다. win..
모노레포 도입기 모노레포 도입기 (Feat. 실습)모노레포 도입기: 왜, 어떻게, 그리고 결과는?모든 프로젝트에는 확장성, 유지보수성, 그리고 효율성이 중요한 요소로 자리잡고 있습니다. 특히 규모가 커지면 커질수록 이러한 요소들은 점점ineedbentely.tistory.com 를 통해 모노레포를 도입하게 된 계기와 어떤 장점이 있었는지를 언급하였습니다. 모노레포는 여러 프로젝트를 하나의 레포지토리에서 관리하는 방식으로, 이러한 문제들을 해결하는 데 도움이 될 수 있습니다. 이번 글에서는 모노레포 도입의 배경과 실제 구성 과정을 실습을 통해 살펴보겠습니다. 1. 모노레포 도입 배경우리는 패키지 및 서비스 영역으로 나누어 모노레포를 구성할 것입니다. 디자인 시스템을 포함하는 패키지 영역은 npm에 퍼블리싱..
모노레포 도입기: 왜, 어떻게, 그리고 결과는?모든 프로젝트에는 확장성, 유지보수성, 그리고 효율성이 중요한 요소로 자리잡고 있습니다. 특히 규모가 커지면 커질수록 이러한 요소들은 점점 더 도전 과제가 됩니다. 나도 이러한 문제들을 해결하기 위해 모노레포(Monorepo)를 도입하기로 결정했습니다. 이 글에서는 모노레포를 도입한 이유, 그리고 같이 실습해보는 과정을 공유하려고 합니다.모노레포란 무엇인가?모노레포는 여러 개의 프로젝트를 하나의 Git 저장소에 모은 방식입니다. 이렇게 하면 여러 팀이 하나의 코드베이스를 공유하면서도 서로 영향을 덜 받으며 작업할 수 있습니다. 모노레포 방식의 가장 큰 장점은 코드 관리의 일관성과 중앙화된 의존성 관리입니다. 왜 모노레포를 도입했나?우리 팀은 여러 개의 프로젝..
어렸을 적, 형과 나는 자타공인 게임광이었다. 나는 이 게임 저 게임을 같이 하자며 형에게 졸랐고, 금방 실증을 느낀 나는 게임기를 던져두고 형 혼자 남겨두곤 했다. 그때마다 형은 혼자 게임하며 나에게 불평을 퍼부었다. 시간이 흘러, 이번엔 여자친구가 나에게 피크민을 해보자고 꼬드겼다. 하지만 얼마 지나지 않아 그녀는 흥미를 잃고, 나는 혼자 피크민 속 작은 친구들을 이끌며 행성을 탐험했다. 이제는 습관처럼 움직일 때마다 핸드폰을 켜고 피크민을 돌리고 있다는 것... 형의 불평이 떠오르면서 묘한 기분이 든다. 발렌타인데이 이벤트로 여자친구에게 선물한 포토북. 평범한 초콜릿 대신, 우리 둘만의 추억을 한 장 한 장 담아봤다. 꾸미기위에 사진을 고르고, 페이지 레이아웃을 맞추며 머릿속엔 온통 그녀의 반응..
코드스피츠 (무료 인터넷 강의) 유튜브의 프로그래밍 101 (JavaScript를 기반으로 프로그래밍 기초를 알려주는 강의)에서 재귀 함수와 반복문에 대한 차이를 설명해주면서 JSON.stringify 함수에 대해서 짜보라는 숙제를 주셨습니다. stringify 함수는 기본적으로 Object 형태일 경우 트리 형태로 무한한 depth를 가질 수 있기 때문에, 적절한 재귀 함수를 사용해야 하기 때문인데요. 간단하게 stringify 함수를 구현하여 과제는 끝마쳤지만, JSON 객체에 대한 궁금증이 생겨서 JavaScript로 JSON 클래스를 고도화해서 커스텀하게 만들어 보고 싶어졌습니다. 이번 글에서는 JavaScript로 커스텀 JSON 클래스를 만들어, JSON.stringify와 JSON.parse..
사내 IoT 플랫폼 프로젝트에서 Spring MVC 가 아닌 Spring WebFlux 기반으로 코드를 작성하면서 겪은 시행착오와 도입하게 된 계기에 대해 공유하고자 합니다. 특히 WebFlux 를 도입하면서 자료가 적은 부분에 대해 아쉬웠기 때문에, 다른 참조내용들을 추가하였습니다.WebFlux를 도입하게 된 이유과거 프로젝트 착수 당시 IoT 플랫폼 서버 기술에 WebFlux를 도입하게 된 데에는 여러가지 이유가 있는데요. 우선 가격입니다. IoT 플랫폼 특성상 일별 트래픽이 운영초기부터 적어도 100만 건 이상 발생할 것이라 예상하고 있었고,이로 인해 AWS Auto Scaling Group 을 통해 운영 중인 상태에서 점진적으로 운영 비용이 증가할 것이라 생각하여 리소스를 최적화 하자는 것에서..
