프로그래밍 (36) 썸네일형 리스트형 리액트 따라만들기 3. 성능 향상 및 fibers 이 글은 이 아티클을 따라 실습을 진행하며 작성한 글입니다. 이 전편의 내용은 링크를 통해 확인 해주세요! 전편에서는 리액트의 렌더 함수를 직접 구현하여 리액트를 사용하지 않고, 컴포넌트를 렌더링 하는 것 까지 구현을 했습니다. 전편에서 만든 yuact는 렌더링 재귀적으로 진행 하고 있는데, 커다란 돔을 한번에 렌더링 하게 될 경우 메인스레드를 너무 오래 차지하기 때문에, 이를 조금 수정해야 합니다. 따라서, 작업을 작은 단위로 나누고 각 작업이 끝난 후, 다른 할 일이 있다면 렌더링을 중단해야 합니다. 브라우저의 requestIdleCallback을 사용하면 브라우저가 유휴 상태 일때 콜백을 실행 할 수 있다. let nextUnitOfWork = null; function workLoop(deadli.. 리액트 따라만들기 2편. createElement 함수 구현하기 전편: https://kiwitrip.tistory.com/entry/리액트-따라-만들기-1편 github: https://github.com/leeyh-kor/make_react TODO: react의 create element 함수를 구현한다. createTextElement 함수를 구현한다. 두 함수를 오브젝트로 묶어서 사용 가능하게 구현한다. 오직 show만 가능한 render 함수 구현 (업데이트 및 삭제는 나중에 구현) createElement함수 createElement 함수는 element 트리를 반환한다. element 의 자식 요소들이 text(string or number)일 경우 textElement를 반환하고, 아닐 경우 오브젝트를 그대로 반환한다. function createEl.. 리액트 따라 만들기 1편. 이 글은 https://pomb.us/build-your-own-react/ 를 참고하여 리액트를 구현하는 과정을 담은 글입니다. 깃헙 주소: https://github.com/leeyh-kor/make_react 이 프로젝트를 시작한 계기 리액트를 더 잘 다루는 방법을 고민하던 중에 우아한 테크 코스를 진행했던 지인이 우테코에서는 "java로 스프링 프레임워크를 만드는 과제를 진행한다"고 했던 것 이 기억이 났다. 곰곰이 생각 해 보니, 직접 spring 을 만들어 보면 spring의 구조와 철학을 자연스레 익히면서 더 깊이있게 이해하라는 취지의 과제인 것 같다. 나는 react를 더 깊이 이해하기 위해서 같은 방법을 사용하고자 한다. todo: create element 없이 element 정의하기 .. ssr! 작동 클라이언트의 페이지 접속 요청 (request) 서버에서 리소스 확인 후 서버측 스크립트 실행, html 컨텐츠 준비 (프론트 서버 -> 백엔드 서버로 필요한 데이터 요청 작업 및 페인팅) 브라우저는 서버에서 완성된 html( 인터렉티브 하지는 않지만, 컨텐츠는 다 보이는 상태 )을 다운로드 한다. 브라우저는 javascript를 다운로드 하고 실행한다. (이 때 react 같은 웹 프레임워크( 리액트는 라이브러리) 들이 실행되면서 페이지가 interactive하게 바뀐다. 사용자가 페이지를 이동할 경우 위 동작 반복! 장점 csr보다 클라이언트의 네트워크 환경에 영향을 덜 받음. 서버에서 완성된 페이지를 내려주기 때문에, 네트워크 요청 횟수가 적기 때문에! FP(First Painting) 및 F.. http 통신의 진화 과정과 웹 소켓, 폴링 HTTP (Hyper Text Transfer Protocol) http은 html파일을 전송하는 프로토콜 이라는 뜻 이다. 웹 브라우저에서 일어나는 통신이고, 초기에는 html 파일을 전송하는 목적으로 만들어 졌다. 현재는 json, image 파일등 또한 전송 가능하다. 사진과 같이 클라이언트가 서버로 요청을 보내면 서버가 응답하는 단방향통신이다. 서버의 응답에는 상태 코드가 포함되며 상태 코드는 다음과 같이 5개의 클래스로 분류 된다. 1xx (정보): 요청을 받았으며 프로세스를 계속한다 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다 5.. visual studio code에서 prettier 설정값을 공유 합니다. prettier는 javascript의 코드 포맷팅을 도와주는 무료 코드 포맷터 입니다. * javascript 코딩 컨벤션 코딩컨벤션 | TOAST UI :: Make Your Web Delicious! visual studio code 기준으로 설치하는 방법 및 저의 설정값을 공유 합니다. 이제는 Redux를 놓아 주자. Redux는 javascript 앱을 위한 상태관리 라이브러리 입니다. React앱에서 상태관리 라이브러리로 Redux를 사용하고 있다면, 이제는 다른 옵션을 고려해야 할 때가 왔습니다. 1. 보일러 플레이트 코드가 너무 많습니다. Redux를 사용하려면, actions, reducer, saga등 너무나 많은 보일러 플레이트 코드가 필요합니다. 보일러 플레이트 코드가 많다는 것은, 개발자의 생산성 저하 및 잦은 실수를 유발합니다. 이는 엄청난 단점입니다. 2. 서버에서 받아오는 상태와 클라이언트의 전역 상태는 다르게 관리 해야 합니다. 서버에서 받아오는 상태와 클라언트의 전역 상태는 그 성질이 다릅니다. 예를 들면, 서버에서 받아오는 상태는 주기적인 업데이트, 캐싱등의 기능을 필요로 하는 반면, 클라이.. 간단하게 정리하는 프론트엔드 빌드 시스템. javascript 는 es6이후로 많은 변화가 이루어졌는데, 현재 개발되는 대부분의 웹은 es6 이후의 코드로 작성이 되어있습니다. 그런데, 모든 브라우저가 es6 이후의 문법을 지원하는 것은 아닙니다. 대표적으로 internet explore는 es6이후의 핵심 기능인 promise를 이해하지 못합니다. Babel 이러한 문제를 해결 해 주는 것이 babel인데, babel은 es6이후의 js 코드 및 typescript, jsx를 활용한 코드를 모든 브라우저에서 동작 가능한 코드로 컴파일해주는 역할을 합니다. 즉, js -> js로 컴파일 해주는 역할입니다. polyfill poly-fill은 babel이 미처 해결하지 못한 문제들을 해결한다. babel은 es6이후의 코드를 es6이전의 코드로 문.. 이전 1 2 3 4 5 다음
