로니의 개발 이야기

2022년 3월 29일부로 react version 18을 사용할 수 있게 되었다. v17에서 v18로 업데이트되면서 root API에서 변화가 생겼는데, 이번에 그 부분에 대해서 다뤄볼까 한다. ‘root’는? root는 react가 렌더링 할 트리를 추적하는 데 사용하는 최상위 데이터 구조에 대한 포인터이다. Legacy root API(v17) : root는 DOM 요소에 연결하고 DOM 노드를 통해서 액세스 했다. New root API(v18) : root를 만들어주고, 그것을 렌더링 한다. // Before import * as ReactDOM from 'react-dom'; import App from 'App'; const container = document.getElementById('..

브라우저의 핵심 기능은? 사용자가 참조하고자 하는 웹페이지를 서버에 요청(request)하고 서버의 응답(response)을 받아 브라우저에 표시하는 것이다. 자원의 주소는 URI에 의해 정해진다. 그렇다면 브라우저는 어떻게 동작할까? 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. 렌더링 엔진은 HTML 문서를 파싱 해서 각각의 태그를 DOM 노드로 변환하여 DOM 트리를 생성하고 CSS 문서를 파싱 해서 CSSOM 트리를 생성한다. 그리고 이 둘을 결합하여 렌더 트리를 만들게 된다. 그 다음은 레이아웃 단계이다. 이 단계에서는 각 노드의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 어디에 배치할지, 어떤 크기를 가질지가 정해진다. 페인팅 단계에서는..

var, const, let의 차이점을 비교하려면 var의 문제점을 알아야 한다. 그렇다면 var를 사용함으로써 어떤 문제가 발생하게 될까? var를 사용하면서 발생하는 문제점 ⓵ 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. ⓶ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. ⓷ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ⓸ 어떤 의도로 선언되었는지 알 수 없다. 위와 같은 문제들이 발생할 수 있는데, 이를 개선하기 위해 ES6에서 나온 새로운 키워드가 const와 let이다. 이제 var, const, let의 차이에 대해서 알아보겠다. var, const, let의 차이 const와 let은 중복 선언이 불가능하다 → 어떤..

스코프(scope)란? 식별자의 유효 범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다. 전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다. 블록 레벨 스코프 자바스크립트에서 모든 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는데, 이를 블록 레벨 스코프라고 한다. 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지..

변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙여진 이름을 말한다. 즉, 변수란 값의 위치를 가리키는 상징적인 이름을 말한다. var foo = 135; console.log(foo) // 135 변수명(식별자)인 foo는 변수의 값이 아닌 메모리 주소를 기억하고 있고, 변수명을 사용하게 되면 자바스크립트 엔진이 변수명과 맵핑된 메모리 주소를 통해 value 값을 반환한다. 아래의 예제를 살펴보자. console.log(foo); // ① undefined var foo = 135; console.log(foo); // ② 135 { var foo = 246; } console.log(foo); // ③ 246 var 키워드를 사용하여 선언한 변수는..

react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB...

Optional chaining 이 필요한 이유? 옵셔널 체이닝은 왜 필요한 것일까? 일단 옵셔널 체이닝(optional chaining)?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다. 에러 없이 안전하게 접근한다? 음.. 어떤 부분에 대해서 안전할까에 대해서 한번 천천히 생각해보도록 하자. 만약, data라는 배열을 받아와서 핸들링한 후 리턴하는 예시가 있다고 해보자. 코드의 결과는 당연히 undefined가 나올 것이다. 왜 undefined가 나올까? 그것은 data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문이다. map 함수 입장에서는 data가 뭔지 모르겠으니까 data를 undefined 취급해줄 수밖에 없는 것이다. const examp..

CORS? 개발을 하다 보면 쉽게 접하게 되는 CORS에 대해서 한번 정리해보고자 한다. 그렇다면 먼저 CORS란 무엇일까? CORS는 Cross-Origin Resource Sharing의 줄임말로, 직역하면 교차 출처 리소스 공유이다. 교차 출처 리소스 공유라는 말은 쉽게 와닿지 않는다. 쉽게 말해, 내가 가지고 있는 모자를 친구가 빌린다고 했을 때, 내가 알겠다고 하는 느낌으로 생각하면 될 것 같다. 그렇다면, 출처(Origin)란 무엇일까? 서버의 위치를 뜻하는 URL들은 여러 개의 구성 요소로 이루어져 있는데, 이중에 sheme(protocol), host(domain), port로 구성되어있는 것이 출처이다. 예를들어, https://aosjehdgus.tistory.com/라는 주소가 있다고..

AWS EC2 Instance에 ping test를 진행해봤더니 아래와 같이 timeout 메시지를 받게 된다. 그리고 테스트를 종료해보면 100.0% packet loss라는 메시지를 보게 된다. 그렇다면 ping test 진행을 위해서 어떠한 설정을 해주어야 할까? Request timeout for icmp_seq 0 이것을 해결해주기 위해서는 인바운드 규칙을 별도로 추가해주어야 한다. 순서는 다음과 같다. AWS EC2에 접속 후에, 좌측 네비게이션 바에서 보안 그룹을 클릭한다. 내가 수정하고 싶은 보안 그룹을 클릭한다. 인바운드 규칙 편집을 클릭한다. 규칙 추가 버튼을 클릭한다. 여기서 유형 , 프로토콜 , 소스 를 지정해주면 된다. 각각의 설정 내용은 아래와 같다. 유형 : 네트워크 트래픽에 ..

npx create-react-app taskbox 명령을 사용했는데, 아래와 같은 오류가 발생하여서 이를 해결해보고자 한다. 간단하게 이제 글로벌 설치가 지원되지 않는다는 것이다. You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) We no longer support global installation of Create React App. 해당 오류를 해결하기 위한 방법으로 아래와 같은 방법이 터미널에 제시되고 있다. Please remove any global installs with one of the following commands: npm uninstall -g create-react-app ya..