전체 글

개요 이 글에서는 React.js의 장단점에 대해 정리해보겠습니다. React.js는 웹 애플리케이션을 구축하는 데 널리 사용되는 자바스크립트 라이브러리입니다. 유연성, 재사용성, 사용 편의성으로 널리 인정받고 있습니다. 그러나 다른 기술과 마찬가지로 React.js에도 고유한 장단점이 있습니다. 이 글에서는 다음 프로젝트에 사용할지 여부를 결정하는 데 도움이 되도록 React.js의 장단점에 대한 포괄적인 개요를 제공합니다. React.js의 장점 1. 코드 재사용성 React.js는 재사용 가능한 컴포넌트 개념을 기반으로 합니다. 즉, 컴포넌트를 한 번 생성하면 애플리케이션 전체에서 재사용할 수 있습니다. 코드 재사용성을 통해 애플리케이션을 더 쉽게 유지 관리하고 시간을 절약할 수 있습니다.가상 DO..

1. 캐시 웹 프론트엔드에서 필요한 데이터를 매번 서버에 요청해서 가져와 사용하는 것은 비효율적입니다. 서버에 부담을 줄 뿐더러 시간도 오래 걸립니다. 만약 같은 요청에 같은 데이터를 응답하는 요청이라면 데이터를 메모리에 저장해놓고 쓰는 것이 효율적일 것입니다. 이렇게 응답 데이터의 사본을 저장하는 공간을 캐시라고 합니다. 2. 캐시의 종류 종류 위치 설명 브라우저 캐시 브라우저 한 번 받아온 리소스들을 재사용하여 속도가 빨라짐 프록시 캐시 브라우저와 ISP 조직 내에서 접속하는 웹 사이트의 리소스들을 캐시하여 속도가 빨라지고 네트워크 사용량을 줄임 트랜스패어런트 캐시 ISP ISP는 이 캐시를 이용하여 ISP간 대역폭 낭비를 줄임 리버스 프록시 캐시 ISP와 웹 서버 원본 서버로의 트래픽을 줄이고, 사..

웹 성능이란 웹 성능(Web Performance)은 웹 콘텐츠가 사용자에게 빠르게 전달될 수 있도록 하는 시스템들의 성능을 의미합니다. 즉, 웹 로딩 시간과 같다고 할 수 있습니다. 웹 성능이 중요한 이유 웹 성능이 중요한 이유는 너무나 명확합니다. 웹 서비스가 느리다는 것은 그 서비스를 이용하기가 불편하다는 뜻이고, 서비스가 불편하다면 사람들은 그 서비스를 이용하지 않을 것이기 때문입니다. 여러분도 웹 서비스가 느려서 몇 초간 로딩만 되는 경우 그냥 뒤로가기를 눌러본 경험이 있을 겁니다. 미국의 쇼핑몰인 월마트는 로딩 시간에 따른 구매율을 조사했는데, 로딩이 2초 내에 완료되었을 대 사용자의 구매가 가장 많았고, 로딩 시간이 길어질수록 구매율이 낮아지는 것을 발견하였습니다. 또 구글의 조사 자료에 따..

이 글은 super tokens 블로그의 "Why is redux state immutable?" 이라는 글을 한글로 번역하여 작성하였습니다. 원문 링크는 글 하단에 기재하였습니다. Redux가 올바르게 동작하기 위해서 state는 불변(immutable) 객체여야 합니다. 이것은 우리가 redux state를 업데이트할 때마다, 전체 state의 복제본을 생성하고 변경하기 원하는 필드를 변경해야 한다는 것을 의미합니다. 코드로 보면 아래와 같습니다. let newState = { ...oldState, field1: { ...oldState.field1, field2: 'some new value' }, } 위 코드에서, 우리는 oldState의 field2 값을 새로운 state를 생성하고 field..

들어가며 이 글은 dev.to 의 cclintris가 작성한 JavaScript: Demystify Hoisting in JS 라는 글을 한글로 재작성하였습니다. 원문은 https://dev.to/cclintris/javascript-demystify-hoisting-in-js-306b 에서 확인 할 수 있습니다. 이 글을 쓰게 된 가장 큰 이유 중 하나는 몇몇 동료들이 JS에서의 호이스팅에 대해 이야기하는 것을 들은 적이 있기 때문입니다. 당시에는 동료들의 관점을 이해하기가 너무 어려워 인터넷에서 관련 글들을 검색해보기 시작했습니다. 이것은 몇 분 안에 이해할 수 있는 것이 아닌 것 같아서 자바스크립트의 호이스팅을 제대로 이해해보고자 이 글을 쓰기 시작했습니다. 호이스팅은 무엇일까요? 더 이상 고민하지..

이 글에서는 Create React App (CRA) 를 Vite로 마이그레이션하는 과정들을 정리하였습니다. 동일한 프로세스를 겪고 있는 다른 분들에게 도움이 되기를 바랍니다. 이 글은 https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite 를 한글로 번역하여 작성하였습니다. 마이그레이션을 한 이유 저는 CRA를 정말 좋아한다는 말로 글을 시작하고 싶습니다. CRA는 많은 프로젝트(개인 및 전문)를 신속하게 세팅하고 유지보수하는 데 도움이 되었습니다. 그러나 궁극적으로 Vite로 전환하기로 결정한 몇 가지 이유는 다음과 같습니다. 전담 관리자가 없습니다. 출시가 느립니다. 이것은 React와 Webpack에 더 많은 기능이 추가..

들어가며 이 글에서는 NestJS, Vite 및 esbuild가 무엇인지, 이 세 가지를 조합하는 방법, 다른 두 도구를 종속성으로 사용하도록 NestJS 앱을 구성하는 방법, 그 과정에서 실제 시나리오와 주요 기능 및 사용 사례에서 조합하여 작업하는 방법을 공부합니다. 이 글은https://blog.logrocket.com/getting-started-with-nestjs-vite-esbuild 원문을 참고하여 한글로 작성하였습니다. 목차 NestJS란? Vite란? esbuild란? NestJS 설치 및 구성 NestJS 보일러플레이트 살펴보기 NestJS와 함께 Vite와 esbuild 설치 NestJS란? NestJS는 효율적이고 확장 가능한 엔터프라이즈 서버 측 백엔드 애플리케이션을 구축하기 위..

9년 전인 2013년 3월, Solomon Hykes와 그의 공동 설립자들은 Docker라는 오픈 소스 플랫폼으로 소프트웨어 개발 방식을 혁신했습니다. Docker의 제작자는 컨테이너를 발명하지 않았지만 대중화했습니다. Docker 덕분에 개발자들은 GitHub Codespaces와 같은 도구를 생성하여 클라우드에서 호스팅되는 개발 컨테이너에서 코딩할 수 있습니다. 개발 컨테이너에 대해 처음 들었을 때 두 가지 질문이 있었습니다. 사람들이 컨테이너 내부에서 개발하는 이유는 무엇일까? 컨테이너란 무엇인가? 비슷한 의문이 있는 경우 이 글을 읽어주세요. 이 블로그 게시물에서는 컨테이너가 무엇인지, 개발자에게 어떤 이점이 있는지, GitHub Codespaces에서 devcontainer를 설정하는 방법을 설..

세계가 세 번째 대유행의 해에 접어들면서, 우리는 서서히 코로나가 전 세계 기술 지형에 미친 영향을 이해하고 있습니다. IoT, 작업 프로세스의 자동화, (의료, 교육, 농업, 비즈니스 등) 서비스의 디지털화 및 데이터 관리는 소프트웨어가 지난 몇 년 동안 침투한 우리 일상 생활의 일부 측면에 불과합니다. 2022년에는 데이터 및 운영을 최적화하고 능률화하기 위한 소프트웨어 통합이 기업의 성장과 수익성에 없어서는 안 될 부분입니다. 하지만, 수많은 소프트웨어 개발 전략이 매일 등장하고 있는 상황에서, 어떤 방법을 선택해야 할까요? 소프트웨어 회사 및 개발자에게 있어 이러한 추세에 발맞추는 것은 최첨단 소프트웨어 제품을 제공하고 혁신 리더로 자리매김하는 것을 의미합니다. 반면에, 기업은 기존에 있는 소프트..

저는 최근에 리액트 앱의 성능을 향상시켜야 하는 업무를 담당하게 되었습니다. 이 글은 제가 그 리액트 성능 최적화를 진행하고 기록한 글입니다. 1단계 - 성능이 저하되기 시작하는 시나리오 찾기 성능이 저하되는 모든 시나리오를 파악하려면 앱에서 다양한 작업을 엄격하게 수행하고 성능이 저하되기 시작하는 시기를 계속 모니터링해야 합니다. 이를 위한 직접적인 방법은 없고, 유일한 방법은 많은 사람들이 앱을 사용하고 자신의 경험을 보고하는 것입니다. 또 다른 방법은 충분히 많은 더미 데이터를 생성하고 UI에 모든 데이터를 로드하여 어떻게 작동하는지 확인하는 것입니다. 또한 모든 시나리오를 한 번에 파악할 수는 없습니다. 시나리오를 계속 검색한 후 아래 단계를 수행하여 각 시나리오의 성능을 향상시킬 수 있습니다. ..