Jerry

#페이지라우팅- 경로에 따라 알맞은 페이지를 렌더링 하는 과정- /new -> new 페이지 렌더링Multi Page Application (MPA)- 애초에 서버가 여러 개의 페이지를 가지고 있음- 많은 서비스가 사용하는 전통적인 방식서버 사이드 렌더링 vs MPA- 서비가 여러 개의 페이지를 가지고 있는 것이 후자- 브라우저가 페이지 요청을 했을 때, 해당 페이지를 응답해주는 것이 전자But, 리액트는 이 방식을 따르지 않음- 페이지 이동이 매끄럽지 않고 비 효율적임- 다수의 사용자 접속 시, 서버의 부하가 심해 짐-SPA(Single Page Application)- 페이지 이동이 매끄럽고 효율적임- 다수의 사용자가 접속해도 크게 상관 없음- 필요한 요소만 교체동적 경로(Dynamic Segment..

#useReducer- 컴포넌트 내부에 새로운 State를 생성하는 React Hook- 모든 useState는 useReducer로 대체 가능- 상태 관리 코드를 컴포넌트 외부로 분리할 수 있음   #최적화- 웹 서비스의 성능을 개선하는 모든 행위를 일컫음- 아주 단순한 것부터 아주 어려운 방법까지 매우 다양함일반적인 웹 서비스 최적화 방법- 서버의 응답속도 개선- 이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선- 불필요한 네트워크 요청 줄임- ...React App 내부의 최적화 방법- 컴포넌트 내부의 불 필요한 연산 방지- 컴포넌트 내부의 불 필요한 함수 재생성 방지- 컴포넌트의 불 필요한 리렌더링 방지     #useMemo- "메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화 하는 리..

이번에는 '리렌더링이 되는 조건'이라는 주제에 대해서 이야기해보려고 한다. 리렌더링 되는 조건 이란 무슨 뜻일까? 요 며칠간 리액트에 관해 공부하고 있어서 그나마 쉽게 정리를 하지 않을까 싶었지만 리렌더링에 대한 의미에 대해 생각해보니 단순하게 입으로 리렌더링이란 말을 썼지 이 용어 의미하는 바를 제대로 모르고 있었고 NaverD2에 있는 이 글을 보고 이해해볼 수 있을까했는데... D2에 있는 글은 열심히!! 읽어봤지만 필자에겐 아직 어려웠다... 다른 레퍼런스를 참고해 리렌더링에 대해 알아보려고 한다! 가즈아!! 포기하지마!!! 그렇다면 먼저! 렌더링에 대해서 알아보자! 1. 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 2. React 엘리먼트를 루트 DOM 노드에 렌더링 하려..

어제 '리액트 최적화'에 대한 키워드를 정리하다 보니 최적화라는 것이 Virtual DOM과 연관이 있다는 것을 덤으로 알게 되었다. 덩달아 기술면접 관련 스터디 주제에 Virtual DOM이 있는 것이 아닌가?! 이때다 싶어서 이번 주제를 Virtual DOM으로 정했다!! 최적화에 대해 공부하면서 Virtual DOM에 대해 잠깐 보았지만 정말 내가 제대로 알고 있는 것 같지 않았기에 이번 기회를 통해서 관련 개념이 한층 깊어지는 시간이 되었으면 한다. Virtual DOM 이란 무엇일까? The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory ..

필자는 현재 코드스테이츠 Immersive 수료 후에 취업 준비 과정 중에 있다. 취업 준비 과정에서 리액트에 다시 개념 공부도 하고 있기도 하고 스터디원들과 기술 면접 리스트를 가지고 준비하는 과정에서 이번에 "리액트 최적화"라는 주제가 내 눈길을 사로잡아 이번 기회로 잘 정리해보려고 한다. 이번 주제와 관련해서 공식 문서와 여러 잘 정리된 블로그 글들을 보고 너튜브 영상도 찾아서 보았다. 참고한 자료들을 나름 집대성해보려고 했으나 양이 비대해지는 걸 막지 못해 핵심적인 부분 위주로 구성을 해보았다. 각 내용의 자세한 내용들을 참고한 자료의 출처에 대한 내용들을 보시면 더 이해가 잘 될 것이다. 만약, 한 번 보고 이해가 안 가신다면 그건 당연하다고(?) 말씀드리고 싶고 꼭 필자의 글만 볼 필요 없고 ..

이틀간 스프린트 결과물이다. 아직 많이 부족하지만, 주말에 보강해보고 부족하면 더 시간 날 때마다 해볼 생각이다. 스프린트 내용은 밑에 적어 놓았다. 스프린트 설명 이번 스프린트는 클라이언트 사이드 프로젝트와 서버 사이드 프로젝트를 따로 만드는 스프린트다. 테마는 Personal Portfolio이며, 즉 자신의 포트폴리오를 만들기다.! Bare minimum Requirement로는 클라이언트 사이드 React를 사용해야 합니다. SPA(Single Page App)로 만들어야 합니다. 클라이언트 상에서 페이지 라우팅을 적용하십시오. React Router를 사용해봅시다 Stateful 한 컴포넌트를 두 개 이상 만드세요. (다음 예시를 참조하세요. 라이브러리를 사용하지 마세요.) 메뉴 선택 (sele..

Achievement Goals React 기본 React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다. 요즘 웹페이지는 유저와 많은 interaction이 일어나(ex. button) 수많은 상태 관리가 필요하다. 돔 관리와 상태 관리 말고 기능 구현에 집중하고 싶은 욕구가 있었고, React, Angular, Vue가 탄생했다. 리액트는 component (하나의 의미를 가진 독립적인 단위 모듈) 개념에 집중하고 있는 라이브러리다. 직관적과 재사용성이 증가한다. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다. 리액트는 기본적으로 ES6를 사용한다. Destructuring, Spread operator, rest parameters, default paramete..

웹, 데스크톱, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리. 이전에 나는 페이지 단위의 DOM 개발을 다뤘다면, 이제는 컴포넌트 단위의 개발을 다룬다. React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React 리액트는 유저 인터페이스(Ui)를 빌딩하기에 선언적, 효율적이며 유연한 자바스크립트 라이브러리다. 리액트는 컴포넌트라고 불리는 작고 독립된 코드 조각들을 가지고 복잡한 UI들을 ..