error: internal/modules/cjs/loader.js:883

모바일/삽질 기록 2020. 12. 14. 09:58 Posted by 아는 개발자

리액트 프로젝트를 복사해서 다시 사용하는데 이런 에러가 발생했다면. 

 

internal/modules/cjs/loader.js:883

 

이전에 사용한 프로젝트의 node_modules에서 만든 경로랑 꼬여서 생긴 문제일 확률이 높다. 이럴때는 모듈 별로 수정하는 방법이 있겠지만 간단하게 node_modules 폴더를 모두 날리고 다시 설치하는게 빠르다. 

 

rm -rf node_modules
rm -f package-lock.json
yarn cache clean
yarn install
728x90

'모바일 > 삽질 기록' 카테고리의 다른 글

cannot find module - heroku  (0) 2021.01.10
error: internal/modules/cjs/loader.js:883  (0) 2020.12.14
visual code definition 찾고 돌아가기  (0) 2020.12.13
RxJava: mapper function returned null 에러  (0) 2020.02.14
addr2line  (0) 2018.12.22
gcc로 pthread API 컴파일하기  (2) 2018.10.30

visual code definition 찾고 돌아가기

모바일/삽질 기록 2020. 12. 13. 16:59 Posted by 아는 개발자

visual code로 작업을 하다보면 어떤 클래스의 정의를 찾고 나서 이전 페이지로 돌아가고 싶은 경우가 있다. Jetbrain계열 IDE만 사용하다 visual code로 들어와서 헤맸는데 이번 포스트에 간단히 정리한다. 거의 게임체인저 급의 단축키임이 틀림 없다.

 

Mac 기준

 

정의 찾기: command + 마우스 클릭  

 

이전 페이지로 돌아가기: control + -

 

Window 기준

 

정의찾기: control + 마우스 클릭

 

이전 페이지로 돌아가기: Alt + 왼쪽 방향키

728x90

'모바일 > 삽질 기록' 카테고리의 다른 글

cannot find module - heroku  (0) 2021.01.10
error: internal/modules/cjs/loader.js:883  (0) 2020.12.14
visual code definition 찾고 돌아가기  (0) 2020.12.13
RxJava: mapper function returned null 에러  (0) 2020.02.14
addr2line  (0) 2018.12.22
gcc로 pthread API 컴파일하기  (2) 2018.10.30

scss

모바일/react 2020. 12. 13. 15:50 Posted by 아는 개발자

Syntactically Awesome StylesheetS 의 준말로 기존 css보더 더 편하게 스타일링 할 수 있는 언어다. css에 있는 모든 기능을 포함하고 여기에 더해 변수랑 내부에서 제공하는 함수도 사용할 수 있기 때문에 개발자들의 반복적인 작업을 확 줄여준다. 5년 전에 간단히 홈페이지 만들면서 css를 쓰고 불편하다고 느낀후 지금까지 손댄적이 없었는데 지금은 scss 라는 언어로 더 쉽게 스타일링 할 수 있게 된 것 같다. 이번포스트에서는 scss를 react에 적용하는 방법을 간단히 소개한다.

 

1. scss 로더 추가 

 

scss는 확장 기능이므로 새로 css로 transformation 해주는 기능이 필요하다. 별도의 로더를 설치하고 스크립트를 실행할 수 있으나 여기선 webpack에 로더를 추가해서 정리하려고 한다. 먼저 아래 명령어로 필요한 라이브러리를 추가한다.

 

yarn add style-loader css-loader sass-loader node-sass

 

그리고 webpack.config.js에 css, scss 용 로더를 추가한다.

 

module.exports = {
    ...
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]

 

2. scss 파일 추가 

 

scss로 쓸 파일을 추가한다. scss 언어 내에 import 기능이 있어 여러 개의 파일로 의존성이 가능하다. 최상위 파일로 styles.scss 을 만들고 예시로 base 폴더 내에 base.scss 파일을 추가한다.

 

styles.scss

 

@import './base/base';

 

base.scss

 

간단하게 브라우저 전체에 적용될 수 있는 스타일링을 넣었다.

 

body {
    background: $dark-blue;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2.4rem;
}

 

3. entry 파일에서 임포트 

 

entry에 해당하는 파일에서 아까 추가한 scss 파일을 임포트 한후 간단한 코드를 넣어 봤다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/styles.scss';

ReactDOM.render(<div><h1>This is selfish-developer blog</h1></div>, document.getElementById('app'))

 

그 결과 아래처럼 스타일링이 된 것을 확인 할 수 있다.

 

728x90

'모바일 > react' 카테고리의 다른 글

react router  (0) 2020.12.17
redux  (0) 2020.12.16
scss  (0) 2020.12.13
webpack  (0) 2020.12.13
localStorage  (0) 2020.12.11
Props  (0) 2020.12.11
TAG CSS, REACT, scss

webpack

모바일/react 2020. 12. 13. 15:10 Posted by 아는 개발자

webpack 은 자바스크립트로 짠 애플리케이션의 모듈 관리용 툴이다. 애플리케이션에서 필요한 모듈의 의존성을 관리하고 프로젝트용 코드를 만들어준다. 예로 리액트 자바스크립트에서 필요한 babel, style-loader, css-loader 같은 스타일용 로더, 애플리케이션의 시작위치를 정하는 entry, 디버깅용 devtool 설정, 서버 관리까지 모두 webpack을 이용해서 관리가 가능하다. 짜치는 일들을 하나로 묶어서 관리해주는 라이브러리니 배워두면 프로젝트 관리할 때 크게 도움이 될 것 같다.

 

1. Configuration

 

webpack.config.js 파일을 통해서 webpack에서 관리하고 싶은 설정을 추가할 수 있다. 아래 코드는 튜토리얼 프로젝트에서 추가한 webpack 설정 코드다. 공식 문서를 살펴보면 더 많은 설정을 추가 할 수 있다. 이번 포스트에서는 주요 설정에 대해서만 정리하려고 한다.

 

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname,'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname,'public')
    }
};

 

1.1 Entry 

 

webpack이 어디에서 의존성 그래프를 그려갈 지 설정하는 곳이다. 어디서부터 프로그램을 시작할지 설정하는 작업이라고 봐도 좋다. c언어 프로그램으로 치면 main함수를 어디에 둘 지 설정하는 작업이라고 봐도 될 것 같다. 위 소스코드에서는 src 폴더에 있는 app.js를 시작점으로 두었다.

 

1.2 Output 

 

webpack으로 만든 묶음(bundle)을 어디에 생성할 것인지를 설정한다. 일단 c언어라면 컴파일후 바이너리 결과물을 어디에 둘 것인지 설정하는 것과 같다.

 

1.3 Loaders

 

webpack 이 어떤 타입의 파일을 특정한 모듈로 변경하고 의존성 그래프에 추가할지를 설정하는 작업이다. 위 코드의 module 내부를 보면 test 속성과 use 속성이 있는데 test는 어떤 파일을 변형할 것인지를 설정하고 use는 어떤 loader를 사용할 것인지 설정한다. 여기서 test는 파일을 설정하는 작업이라고 했는데 파일 이름을 정규표현식으로 정하고 있다. 위 코드에서는 jsx 컨버팅용 babel-loader와 css 스타일링용 style-loader, css-loader, sass-loader 를 추가했다.

 

1.4 DevServer 

 

webpack-dev-server 라이브러리를 이용해 빠르게 프로그램을 시작 할 수 있는 기능이다. devServer 값을 설정하면 리액트 프로그램을 시작 하는 주소나 포트번호 같은 값을 쉽게 설정 할 수 있다. 위 코드에서는 가장 기본인 시작 위치만 설정 했다.

 

2. 설치 및 사용

 

2.1 설치 

 

npm을 이용해 global 하게 설치하는 방법도 있지만 꼬여버리면 답이 없으므로 프로젝트 단위로 yarn을 이용해서 설치한다. 

 

yarn add webpack webpack-dev-server

 

2.2 스크립트 파일 추가 

 

package.json에 스크립트 코드를 추가한다

 

{
  "name": "knowing-developer",
  ...
  "scripts": {
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },

 

build 스크립트는 webpack을 이용해 프로젝트 파일을 변경 시켜주는 스크립트다. 로컬에 서버까지 만드려면 dev-server 스크립트까지 추가한다.

 

2.3 실행 

 

yarn run dev-server

 

방금 추가한 스크립트를 실행한다.

728x90

'모바일 > react' 카테고리의 다른 글

redux  (0) 2020.12.16
scss  (0) 2020.12.13
webpack  (0) 2020.12.13
localStorage  (0) 2020.12.11
Props  (0) 2020.12.11
state  (0) 2020.12.11

localStorage

모바일/react 2020. 12. 11. 18:00 Posted by 아는 개발자

 

리액트의 localStorage는  Android의 SharedPreference나 iOS의 UserDefaults 처럼 애플리케이션 단위로 key-value 값을 저장할 수 있는 라이브러리다. 아래 코드를 보면 getItem 함수에 key값을 넣어서 값을 받아오고 setItem 함수에 key 값을 넣어서 값을 업데이트한다. 

 

아래 코드를 보면 JSON 라이브러리를 사용해 변환하는 과정이 있는데 이 이유는 localStorage에서는 string의 형태로만 저장이 가능하기 때문이다. 그래서 일반 텍스트를 사용하는 것이 아니면 모두 JSON을 이용해 값을 변환해서 저장해야한다. 배열 같은 값을 저장한다면 어차피 변환하는 과정이 필요하기 때문에 항상 써두는 것도 나쁘지 않을 것 같다.

 

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleIncrease = this.handleIncrease.bind(this)
        this.handleDecrease = this.handleDecrease.bind(this)


        this.state = {
            counter: 0
        };
    }

    componentDidMount() {
        const json = localStorage.getItem('counter');
        const counter = JSON.parse(json);
        
        if (counter) {
            this.setState((prevState) => {return {counter: counter}})
        }
    }

    componentDidUpdate(prevProps, prevState) {
        const json = JSON.stringify(this.state.counter);
        localStorage.setItem('counter', json)
    }

 

componentDidMount() 와 componentDidUpdate() 함수는 리액트의 라이프사이클 관리 함수다. componentDidMount()는 리액트 컴포넌트가 처음 생성 될 때 호출되고 componentDidUpdate는 리액트 컴포넌트에 변화가 생겼을 때, 예로 state 값이 변화해서 UI가 바뀌었을 때 호출된다. 위 코드는 각 라이프 사이클에서 필요한 작업을 넣은 것이다. 주로 componentDidMount에서 기존 값을 가져오고(fetch) componentDidUpdate에서 값을 업데이트 한다

 

소스코드

 

https://github.com/kwony/react-study/blob/main/src/playground/blog-localstorage.js

728x90

'모바일 > react' 카테고리의 다른 글

scss  (0) 2020.12.13
webpack  (0) 2020.12.13
localStorage  (0) 2020.12.11
Props  (0) 2020.12.11
state  (0) 2020.12.11
babel  (0) 2020.12.06