본문 바로가기

전체 글19

Redux with Nextjs (Typescript) 타입맞춰주는 것과 _app.js 에서의 작업에 애를먹어서 기록해놓음. 0. 사용환경 package.json "dependencies": { "next": "9.5.3", "next-redux-wrapper": "^6.0.2", "react": "^16.13.0", "react-dom": "^16.13.0", "react-redux": "^7.2.1", "redux": "^4.0.5" }, "devDependencies": { "@types/next-redux-wrapper": "^3.0.0", "@types/node": "12.0.12", "@types/react": "16.8.23", "@types/react-dom": "16.8.4", "@types/react-redux": "^7.1.9", "red.. 2020. 9. 14.
styled-components with Nextjs (Typescript) 0. 사용환경 create-next-app 으로 만든 애플리케이션 (typescript) package.json "dependencies": { "next": "9.5.3", "react": "^16.13.0", "react-dom": "^16.13.0", "styled-components": "^5.0.0" }, "devDependencies": { "@types/node": "12.0.12", "@types/react": "16.8.23", "@types/react-dom": "16.8.4", "@types/styled-components": "5.0.1", "babel-plugin-styled-components": "^1.10.0", "typescript": "4.0" }, 1. 바벨설정 .bab.. 2020. 9. 14.
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.
반응형

티스토리툴바