Study/모던 리액트 Deep Dive

creacte-next-app 없이 next.js 구축하기

아래의 내용은 중 한 부분입니다. create-react-app과 create-next-app은 각각 리액트, 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI 도구이다. 해당 도구들은 애플리케이션 구축에 필요한 대부분의 작업을 대신해주기 떼문에 프로젝트 구조를 공부하기는 어렵다. 그리고 2023년도에 리액트 팀은 "create-react-app은 미래에 더이상 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이다."라고 했기 때문에 아무것도 없는 상태에서 리액트 프레임워크를 구축하는 방법을 공부할 필요가 있다. CLI란? Command Line Interface의 약자로, 컴퓨터와 사용자 간의 상호 작용을 위해 텍스트 명령어를 사용하는 인터페이스를 의미합니다..

서버 사이드 렌더링이란? | with Next.js

전통적인 사이드 렌더링과 SPA 비교 위의 이미지를 보면, 최초 요청 이외에도 계속 서버에서 HTML을 받아올지 아닌지의 차이를 볼 수 있다. 쉽게 말하면 웹페이지 랜더링의 책임을 어디에 두느냐에 따라 SPA냐 아니냐가 구분된다. 여기서 Ajax란 브라우저가 갖고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법으로, ES6의 fetch().then()문법과 비슷하다고 생각하면 된다. 서버 사이드 렌더링의 장점 ✓ 최초 페이지 진입이 비교적 빠르다. - 서버에서 HTTP 요청을 수행하고 서버에서 HTML을 그려서 내려주는 것이 클라이언트 단에서 수행하는 것보다 빠름 ✓ 검색 엔진 최적화에 유용하다. - 검색 엔진 작동 과정 1...

AbortController in UseEffect | UseEffect 내부에서 비동기함수 실행 할 때

요즘 웹 개발에서 api를 패치하는 비동기 작동을 다루는 것은 흔한 일이고 나도 프로젝트에 당연하게 사용하고 있다. 그런데, 이 행위는 생각보다 오래 걸리고 예기치 못한 이슈를 발생시키면서 불필요한 메모리를 잡아먹기도 한다. 이때 필요한 것이 바로 자바스크립트의 기능 중 하나인 AbortController이다. 특히 React의 useEffect 훅과 사용할 때 굉장히 유용하다. AbortController란? abort는 '중단하다'라는 뜻으로, 이전 요청을 취소하는 취소하는 역할을 한다. AbortController을 fetch할 때 사용할 때의 장점 1. 효율적인 리소스 관리 한 api가 완료되는데 오래 걸릴때, 그 요청을 취소함으로써 불필요한 메모리 소비를 막을 수 있다. 2. 빠른 유저 경험 만..

[2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 | 모던 리액트 딥다이브

*** 읽을 때 주의할 css 1. [링크] 2. 밑줄 밑줄에 대한 개념 설명 3. h1제목 4. h2제목 모던 리액트 딥다이브 [2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 (자세한 예시는 꼭 책을 참고하시길 추천합니다.) 1.4 클로저 1.4.1 클로저란? 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합 *변수가 코드 내부에서 어디서 선언됐는지 말하는 것 함수가 속한 렉시컬스코프를 기억하여 함수가 그 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능 1.4.2 변수의 유효 범위, 스코프 전역 스코프 (global scope) 전역 레벨에 선언 브라우저 환경에서 전역 객체는 window이다. 함수 스코프 함수 레벨에 선언 자바스크립트 특징 { }블럭이 ..

[1주차] 자바스크립트의 동등 비교, 함수, 클래스 | 모던 리액트 딥다이브 공부

1.1 자바스크립트의 동등 비교 1.1.1 자바스크립트의 데이터 타입 원시타입 객체가 아닌 모든 타입, 메서드를 갖지 않음 boolean 0, NaN, ””, null, undefined 모두 falsy 한 값 null 명시적으로 비어 있음을 나타내는 값 undefined 선언됐지만 할당되지 않은 값 number 최대 2^53-1저장 가능 string 템플릿 리터럴(백틱``사용, 줄바꿈0, 표현식0) symbol 고유한 값을 나타낼 때 사용, Symbol()함수 사용 bigint number의 숫자 크기 제한을 극복, ES2020 객체타입 object 원시 타입 이외의 모든 것 배열, 함수, 정규식, 클래스 참조를 전달 (=참조 타입) 1.1.2 값을 저장하는 방식의 차이 원시 타입 변하지 않는 형태의 ..

멋진 프론트엔드 개발자가 되고 싶다...

이왕 개발자가 되기로 한거 내 분야, 내가 주로 사용하는 언어, 라이브러리, 프레임워크에 대한 질문에 잘 대답해줄 수 있는 그런 멋진 프론트엔드 개발자가 되고 싶다... 그래서 최근에 나오는 모던 리액트 Deep Dive 책을 구매해 보았다. 사실 자바스크립트 딥 다이브는 굉장히 어려웠던 기억이 있어서 이 책을 살까말까 고민을 했었다. 하지만 목차를 스윽 흝어보니 거의 익숙한 용어들이 대부분이여서 용기를 얻고 질러버렸다. 딥다이브 특징 답게 엄청 두꺼워 yes24에서 +3000해서 분철한 책을 받았다. 리액트를 공부한지는 거의 1년이 되어가지만 아직도 랜더링 개념, 훅의 사용법 등이 익숙지 않고 낯선 것들도 더러 있다. 또, 최근에는 Next로만 작업을 했어서(react기반이지만 또 뭔가 느낌이 다르다)..

흥미로운 리액트의 역사를 읽고 알게 된 사실

예전에는 양방향 바인딩 구조여서 모델과 뷰가 서로가 서로를 변경할 수 있는 구조였다. 페이스북 프론트엔드 개발자들이 고민 끝에 모델이 뷰를 변경하는 단방향 방식인 react가 시작되었다. 양방향 구조에서 버그 잡기란 지금보다 훨씬 더 어려웠다. 페이스북팀은 리액트 전에 BoltJs 라는 프레임워크를 먼저 시도했었다. 그러나 조용히 사라졌다. 하나의 어플리케이션에서 API의 변화에 따라 무언가 변경되면 단순히 UI를 초기화하고 재랜더링하는 것이 당연한 게 아니였다. 2013.05 최초 공개된 버전은 0.3.0이고 2023 기준 최신 버전은 18.2.0이다. 재미있는 사실은 0.14.7 이후 바로 15.0.0 버전으로 넘어왔다. 그 당시의 대다수의 개발자들은 JSX 구문, 즉 자바스크립트 내에 HTML을 추..