본문 바로가기

분류 전체보기267

[React] 코드 분할 Code-Splitting (번들링) 공식문서 - https://ko.reactjs.org/docs/code-splitting.html 번들링이란? 앱이 커지면 번들도 커진다. 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것도 주의해야하는 부분이다. 코드 분할 Code-Splitting 번들이 거대해지는 것을 방지하는 방법 런타임에 여러 번들을 동적으로 만들고 불러오는 것 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능 코드 분할은 여러분의 앱을 “lazy-load” 하게 도와줌 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게함 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. ✅ 동적 import()문법 // Befo.. 2021. 12. 15.
#TIL #211202-1215 12월 02일 (목) 오늘한 것 알고리즘 1문제 - 프로그래머스 Level 01-12 자연수 뒤집어 배열로 만들기 12월 05일 (일) - 06일 (월) 오늘한 것 Front-end 스터디 내용 준비, 공유, 피드백 반영 JavaScript 동기 vs 비동기 ES6란? async/await 12월 07일 (화) - 08일 (수) 오늘한 것 JavaScript - 함수 선언문과 함수 표현식 호출의 차이 Front-end 스터디 내용 준비, 공유, 피드백 반영 JavaScript Arrow Function this 순수 함수 12월 09일 (목) - 10일 (금) 오늘한 것 Front-end 스터디 내용 준비, 공유, 피드백 반영 JavaScript 얕은 복사, 깊은 복사 TypeScript개념, 기본문법 .. 2021. 12. 15.
[Webpack] 웹팩이란? Webpack 여러개의 리소스 파일을 하나의 파일로 묶어주는 도구(bundler) 중 하나로 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러 하나의 시작점(entry point)에 의존되는 모듈을 전부 찾아 하나의 결과물로 만들어 냄. 장점 네트워크 접속의 부담을 줄여 더욱 빠른 서비스를 제공할 수 있음 서로 다른 패키지들 간의 동일한 변수명으로 인한 충돌 문제를 줄여줌 리팩토링 효과를 냄 : 구동되는 방식은 그대로 유지하며, 내부의 코드를 효율적으로 바꿈 다양한 플러그인을 제공하고 다양한 작업을 자동화 할 수 있음 구형 브라우저에서 사용 가능하게 함 (IE를 포함한 구형 브라우저에서는 module을 사용할 수 없었음) 핵심 개념 Entry Output Loaders Plugins Mode.. 2021. 12. 15.
[React] Hook이란? ✨❗️ 리액트 공식 문서 - Hook의 개요 Hook은 React 버전 16.8부터 새로 추가된 것으로 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 게하는 요소이다. ✅ Hook이 뭔가요? 👉 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다. - React 공식 문서 ✅ 왜 등장했을까? Class component - state, 라이프 사이클 때문에 사용 - 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음 - this.state가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생) - 반면 함수는 한번 .. 2021. 12. 15.
[Next.js] Next.js란? Next.js https://github.com/vercel/next.js React Framework Ziet에서 만든 React Framework Netflix, Github, Uber 등에서 사용 SSR(서버 사이트 렌더링) TypeScript, JavsScript 사용 특징 React를 통한 프론트엔드 개발에 필요한 유용한 기능을 기본으로 제공 ServerRendering Static Exporting CSS-in-JS Zero Setup Fully Extendsible Ready for Production 장점 빠른 렌더링 속도, 새로고침 시 화면 깜박임없음 SSR → SEO적용에 유리 파일 시스템 라우팅을 특별한 설정 없이(zero config) 기본 제공 → 개발 초기 세팅을 위한 시간적 비.. 2021. 12. 13.
[WEB] 웹 렌더링 SSG, SSR, CRS 이란? SSG (Static-Site Generation) 빌드 타임에 js를 변환하여 html을 미리 만들어 둠 > 요청이 들어오면 이미 완성된 html을 반환 빠름 단점 정적 파일로 제공되기 때문에 현재의 사용자 수준에 상응하는 웹 서비스를 제공하기 어려움. SSR(Server-Side Rendering) 전통적인 렌더링 방식 페이지를 새로고침 > 서버에 요청이 들어오면 html로 바로 만들어서 응답 SEO에 유리함 단점 페이지 이동 시 화면 깜박임 새로운 파일을 받아 다시 로드하므로, 클라이언트에서 메모리에 데이터를 유지할 수 없음 CSR(Client-Side Rendering) SPA 처음 웹사이트 진입 시, 비어 있는 html 응답 > 클라이언트 브라우저에서 어플리케이션 렌더링 진행 초기 로드 이후, .. 2021. 12. 13.
[Bundler] 번들링Bundling이란? 등장 배경, 종류 Module 분리된 코드 조각 시스템을 이루는 논리적인 일부분 Bundling '묶는다'는 뜻. 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다. Bundler 여러 개의 파일을 묶어주는 도구. Webpack, Borserify, Parcel 등이 있음 배경 // hello.js var word = 'Hello'; // world.js var word = 'World'; 위와 같이 두 js 파일에서 동일한 word라는 변수명을 사용했을 때, 두 변수가 충돌하고 마지막으로 호출한 js파일 선언된 word만 적용된다. 이때 word는 전역 변수. 전역 스코프를 오염 예측하기 어려워짐 코드의 규모가 점점 커지고, 협업의 규모가 커지게 되면 이런 상황은 심각한 문제가 된다. 이러한 문제에 대응하기 .. 2021. 12. 13.
[React] 리액트란? 사용하는 이유 Why React? Web-app (웹 앱) 앱과 같은 사용성을 제공하는 웹. 높은 수준의 UX제공 화면의 새로 고침없이 부드럽게 전환을 해주는 장점 (SNS 사이트에 주로 사용) 모바일 App으로 발행이 쉬움 요즘은 Web page(웹 페이지)라는 말보다 Web Application(웹 애플리케이션)이라는 말을 더 많이 사용한다. ... 애플리케이션의 규모가 커지지면서 다양한 기능을 구현이 요구되었고, 이전의 방법(DOM, jQuery 등)들로 개발+유지보수를 하는 것이 어려워졌다. 화면의 모든 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않다. (jQuery도 결국엔 쉽게 DOM에 접근해서 조작을 가능하게 하는 메소드의 모음) 시장에서 요구되는 웹 서비스의 규모가 커짐에 따라 복잡한 애플리케이션을 개발하며 생.. 2021. 12. 13.

티스토리툴바