javascript & Node.js12 Next.js 개요 Next.js 는 리액트를 서버사이드 렌더링할 때 쓰는 프레임워크이다. 특징 1. 웹팩, 자동 컴파일 및 번들링, 개발환경 제공. (next 내부적으론 웹팩과 바벨을 사용) 2. SSR 방식. 3. TypeScript 를 지원. 4. 파일시스템 라우팅 사용. 5. 내장 css 를 지원. 6. 코드스플리팅 지원. 7. 큰 기업들이 사용하고 있어 안정성이 보장됨. 사용법 사용법을 배워보자 필요환경 : Node 10.13v 이상 Setup npx create-next-app # or yarn create next-app 명령어를 사용하면 Next Project 를 빌드해준다. - dev: 개발용 서버로 프로젝트를 실행 - build: 배포용으로 빌드파일을 생성 - start: 배포용으로 실행 npm run d.. 2020. 9. 7. WebPack 웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러 (Module Bundler) 이다. 1. 의존성 그래프에서 엔트리로 그래프의 시작점을 설정한다. 2. 모든 자원을 모듈로 로딩한 후 아웃풋으로 묶는다. 3. 로더로 각 모듈별로 바벨, 사스 변환 등의 처리를 한다. 4. 플러그인으로 이 결과를 난독화, 텍스트 추출 등의 추가작업을 한다. 웹팩은 위에 강조한 4가지 작업 방식으로 번들링을 한다. 1. 탄생과정 각 과정을 설명하기에 앞서, 웹팩의 탄생과정을 좀 더 설명해보자면 ... 자바스크립트는 코드가 많아지면 하나의 파일로 관리하는데 있어서 한계에 부딪힌다. 그렇다고해서 파일 여러개를 브라우져에서 로.. 2020. 6. 4. 리액트의 기본구조, 그에 따른 디자인 패턴 리액트가 가지고 있는 기본특성을 살펴보고 어떤 디자인패턴이 리액트에 맞는지 공부하고자 글을 쓰게 됐다. 리액트의 특성 1. 컴포넌트 컴포넌트는 UI의 일부분을 묘사하는 자생적이고 독립적인 아주 작은 엔터티이다. 하나의 애플리케이션 UI는 더 작은 컴포넌트로 쪼개질 수 있다. 각각의 쪼개진 컴포넌트에는 해당 코드와 구조, API가 있다. 2. Props, State 컴포넌트에는 함께 잘동할 데이터가 있어야 한다. 컴포넌트와 데이터를 묶을 수 있는 두가지 방법이 있는데 바로 Props 와 State 이다. props 만약 컴포넌트가 일반적인 자바스크립트 함수라면, props 는 함수의 입력(input)이라 볼수 있다. 은유적으로 표현해본다면, 컴포넌트는 props라고 부르는 입력을 받아 절차를 거치고 JSX.. 2020. 5. 17. React.js React 란 ? React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리, 즉 프론트엔드 라이브러리 이다. React 를 사용하는 이유 웹페이지를 만들기 위해 굳이 라이브러리나 프레임워크를 사용해야 할 필요는 없다. HTML 과 CSS, 순수 자바스크립트 만으로도 웹페이지를 얼마든지 제작할 수 있다. 특히 단순한 정적 페이지를 만드는 것이 목적이라면 React와 같은 프론트엔드 라이브러리는 큰 이득이 되지 못한다. 하지만 요즘의 웹은 정적이고 단순한 페이지가 아니다. 웹앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적이다. 이런 웹 어플리케이션에서 UI 를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다. 만약 프로젝트 규모가 크고 다양한 UI와 상효작용이 필요하.. 2020. 5. 13. Typescript 1. 정의 TypeScript 는 Microsoft 에서 개발 및 유지 관리하는 오픈소스 프로그래밍 언어이다. 타입스크립트는 자바스클립트를 확장한 언어로, JS언어의 특성을 침범하지 않고 최신 ECMA 표준을 지원한다. 2. 특징 1. 컴파일언어, 정적타입언어이다. - JS는 인터프리터 언어지만, TypeScript는 컴파일언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크한다. 2. 낮은 버전의 ECMA 수용 - 새로운 표준이 반영되더라도 ES5 브라우저에 대응할 수 있는 타입스크립트 컴파일러를 지원 (tsconfig.json) 파일의 compilerOptions -> target 필드에 ES 버전 설정 가능 3. 타입 기반 언어 - 타입스크립트 = 자바스크립트 + 타입 - 컴파일 단계에서 타입오류.. 2020. 5. 12. Node js 란? Node는 Chrome V8 Javascript 엔진으로 빌드 된 Javascript Runtime 이다. * runtime 이란 ? - 프로그램이 구동되는 환경을 말한다. 자바면 자바, 자바스크립트면 자바스크립트, 노드면 노드 1. 탄생배경 예전에는 자바스크립트 런타임이 브라우저 밖에 존재하지 않았다. 하지만 그런 한계를 극복하고 Node.js 가 나왔다. 좀 더 자세한 스토리를 적어보자면... 1990년 Tim Berners lee 가 WEB을 창시했다. 이때의 웹은 정적인 체계의 웹이었다. Marc Andreessen 에 의해 Netscape 라는 대중적 웹브라우저가 등장하게 되었고, Brendan Eich 가 JavaScript 를 만들어 웹에 동적인 체계를 탑재하게 되었다. 즉, 사용자와 상호작.. 2020. 5. 12. 이전 1 2 다음 반응형
