판교너굴맨의 개발노트

사내에서 담당하고 있던 React 프로젝트의 개발이 진행될수록 첫 페이지가 나타나기 전의 흰 화면 상태가 점점 더 길어지는 이슈를 처리하게 되었다. 목차 웹페이지 구성 방식 MPA VS SPA SSR 정의와 장단점 CSR 정의와 장단점 렌더링 방식 선택 1. 웹페이지 구성 방식 MPA VS SPA MPA (Multi Page Application) MAP 구성 방식은 이름 그대로 여러 페이지로 구성된 웹 어플리케이션이다. SSR 방식을 채택하고 있다. 새로운 페이지를 요청할 때마다 서버에서 렌더링이 준비된 정적 리소스(HTML, CSS, JS 등)를 다운 받아 페이지 전체를 새로 렌더링 하는 전통적인 웹페이지 구성 방식이다. SPA (Single Page Application) 이름 그대로 하나의 페이지..

회사에서 프로젝트를 진행하는데 데이터의 값이 원하는 순서대로 들어오지 않았다. 어디서 문제가 났는지 디버그를 해보니 Object.value메서드에서 객체의 순서를 key 값의 오름차순으로 자동 변환시켰다. 객체 객체는 배열과 다르게 index(순서)가 없다. 그렇기 때문에 어떤 순서로 객체의 키 값에 접근하는지 알 수 없다. 객체의 값은 키를 통해서만 접근이 가능하다. 순서가 보장되지 않은 순회라고 한다. Object.keys() mozilla 문서 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다 아래의 예시 코드를 보자 const test = { 1: { a: 1, b: 1 }, 4: { a: 4, b: 4 }, 2: { a: 2, b: ..