반응형

1. 프로젝트 생성

   npm init -y

2. 관련 플러그인 설치

   npm i -D webpack webpack-cli webpack-dev-server@next

   npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 )

   npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 )

   npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 )

   npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 )

   npm i -D postcss autoprefixer postcss-loader ( 스타일 후처리를 도와주는 package, autoprefixer: 공급업체 접두사 생성, webpack loader )

   npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime ( 최신 js문법 인식 )

   npm i -D babel-loader ( 바벨 로더 설치 )

 

3. package.json 스크립트 추가

"scripts":{
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
},

4. 프로젝트 구성

   /node_modules

   /package-lock.json

   /package.json

   /webpack.config.js   

   /.babelrc.js

   /.gitignore

   /.postcssrc.js

 

   /index.html

   /js/main.js

   /scss/main.scss

   /static/fabicon.ico

       ㄴ/images/logo.png

   

5. ./index.html 파일 생성 및 (css reset cdn 적용, h1 태그 및 img 태그 링크 작성)  

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
</head>
<body>
  <h1>Hello Webpack!!</h1>
  <img src="./images/logo.png" alt="seaofcalm" />
</body>
</html>

 

5. ./js/main.js 생성

//import '../scss/main.scss'  // 추후 추가. 최초 작동 테스트에는 불필요

console.log('Webpack!')

7. ./webpack.config.js 생성

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
	// 파일을 읽어들이기 시작하는 진입점 설정
    entry: './js/main.js',	// 엔트리 파일 인식. 번들링 결과물에 포함시킴
    output: {
    	// 현재는 path와 filename이 기본값과 동일하므로 생략 가능
    	// path: path.resolve(__dirname, 'dist'),	//절대경로 필요, 폴더명
        // filename: 'main.js',
        clean: true	// 새로 build 시 기존 필요없는 파일/폴더 삭제
    },
    
   module: {
        rules: [
            {
                test: /\.s?css$/,	// .css 또는 scss로 끝나는 파일 인식
                use: [
                    'style-loader',	// html에 삽입해주는 역할
                    'css-loader',	// 먼저 해석됨. js에서 css에서 인식하도록 해석
                    'postcss-loader',	// 공급업체 접두사 적용
                    'sass-loader'	// 가장 먼저 해석됨. js에서 scss에서 인식하도록 해석
                ]
            },
            {
                test:/\.js$/,
                use: [
                    'babel-loader'  //바벨이 적용될 수 있도록 설정
                ]
            }        
        ]
    },
    
    plugins:[
    	new HtmlPlugin({
        	template: './index.html'	// 번들링 결과물에 html을 포함시킴
        }),
        new CopyPlugin({
        	patterns: [
            	{ from: 'static' }		// 번들링 결과물에 스태틱 파일을 포함시킴
            ]
        })
    ],
    
    devServer:{
    	host: 'localhost'	// 서버 호스팅 주소
    }
}

8. logo.png는 static/images 폴더에, fabicon.ico는 static 폴더에 넣어준다.

<body>
      <h1>Hellow Webpack!!</h1>
      <img src="./images/logo.png" alt="seaofcalm" />
</body>

 

9.  ./scss/main.scss파일에서 display: flex; 조건으로 확인. index.html파일에서 main.css 파일링크는 삭제

$color--black:#000;
$color--white: #fff;

body {
    background-color: $color--black;
    h1 {
        color: $color--white;
        font-size: 40px;
        display: flex;
    }
}

10. main.js에 ./css/main.css 반영

main.js

import '../scss/main.scss'

console.log('Webpack!')

 

11. Autoprefixer 공급업체 접두사 추가 => autoprefixer 및 관련 패키지 설치 (2. 참조)

 

12. package.json 에 브라우저 추가

"browserslist": [
	"> 1%",
	"last 2 versions"
]

13. .postcssrc.js 작성

module.exports = {
  plugins: [
      require('autoprefixer')
  ]
}

14. 바벨 적용( .babelrc.js 파일 생성 )

module.exports = {
    presets: ['@babel/preset-env'], // 한번에 명시
    plugins: [
        ['@babel/plugin-transform-runtime'] //비동기 처리
    ]
}

15. 깃 적용( ,gitignore 파일 생성)

.cache
.DS_Store
node_modules
dist
반응형
반응형

"리액트를 다루는 기술" 의 22장...mongodb 연동하기 과정에서 Koa 백엔드에 ESM을 적용하는 부분이 있는데, 현재 Node 14 버전에서 주의해야할 점과 함께 몇가지 정리해보고하 합니다. 

 

1. 라이브러리 설치

해당 과정에서는 ESM이 외에도 몇가지 라이브러리가 필요합니다. koa, koa-bodyparser, koa-router, mongoose, dotenv 등 말이죠. ESLint옵션 설정하는 부분은 제외하도록 하겠습니다. (VSCode에 설치한 ESLint 기능에, 추가 설정했을 경우 달라지는 부분을 잘 몰라서 이부분은 제외하고 사용했습니다.) 아래의 package.json을 보면 필요한 라이브러리들을 확인할 수 있을 것입니다. 

{
  "name": "05_react_backend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^8.2.0",
    "esm": "^3.2.25",
    "koa": "^2.13.1",
    "koa-bodyparser": "^4.3.0",
    "koa-router": "^10.0.0",
    "mongoose": "^5.12.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  },
  "scripts": {
    "start": "node src",
    "start:dev": "nodemon --watch src/ src/index.js"
  },
  "type": "module"
}

2. 수정사항

ESM 문법은 2019년10월 Node V12부터 정식 지원되어, 간단한 설정으로 적용이 가능하다고 합니다. 바로, package.json파일에 "type": "module" 부분을 추가하는 것이죠. 교재와 달라진 부분이 index.js에서 ESM관련 설정을 해주고, main.js에 주요 구현을 만들어서 index.js에서 불러오게끔 했는데, 이젠 그럴필요 없이 package.js에서 저부분만 추가해주면 됩니다. 

 

3. 오류  

 이것만 하면 금방 적용될 줄 알았는데, 오류가 납니다. 무슨...ESM 오류라고하는데... 알고보니 start할때 책에 써있는

"-r esm" 부분이 필요가 없습니다. 지워줍니다. (위 package.json 참조)

 

 그런데 또 오류가 납니다. 여전히 ES Module에서 지원하지 않는 구문이라고 합니다. 알아보니, Node V14부터는 ESM을 적용할 때 파일 확장자까지 정확하게 써줘야 한다고 합니다. 하위 파일들도 마찬가지로요.

 

 

 

 

 

마지막으로 .env 파일과 관련되어 수정할 부분이 있습니다. 책에서는 

require('dotenv').config();

와 같이 사용하는데 이걸 

import dotenv from 'dotenv';
dotenv.config();

와 같이 수정해줘야 합니다.

 

 

그럼 모두 건승하세요~~

 

~~끝~~

반응형
반응형

만자로 리눅스로 한참 잘 쓰다가 뭔가 에러가 생겨서 새로 설치했습니다. 그리고 Guake를 설치하는데 잘 안되었던 부분을 해소하여 남겨놓습니다.

 

manjaro 21 gnome 버전을 설치하고 Guake를 설치합니다.

sudo pacman -S guake

설치 후 F12를 누르니까 키 바인딩이 잘못되었다고 실행이 안됩니다. 그래서 이래저래 알아보니 xorg 환경이 아닌 요즘 나오는 wayland일 경우 키 바인딩을 제대로 인식하지 못한다고 합니다. 그래서 시스템 키 설정에서 바인딩을 추가해주어야 한다고 합니다. 그 키 바인딩 연결파일은 /usr/bin/guake-toggle 입니다.

 

1. '설정 -> 키보드 바로가기' 메뉴로 들어가서 맨 아래쪽의 '+'버튼을 눌러 바로가기 추가를 해 줍니다.

2. 적당한 이름(guake)을 입력하고 명령에 키 바인딩 연결파일 경로(/usr/bin/guake-toggle)를 입력해줍니다.

3. 바로가기를 클릭하고 F12를 눌러서(...아니면 원하는 키..) 설정해줍니다.

 

 

 

잘 작동하네요...

 

 ....위치조정이 잘 안되네요...ㅠ. 한참 헤메다..포기

~~끝~~

반응형
반응형

 

Manjaro 리눅스에서 mongodb를 설치해보도록 하겠습니다.

 

1. AUR 추가

MongoDB는 공식 저장소에서는 지원되지 않고 AUR에서 설치해야합니다. 아래 그림과 같이 소프트웨어 추가/제거에서 환경설정 메뉴를 찾아들어갑니다.

그리고 AUR탭으로 가서 'AUR지원 사용' 을 활성화 해줍니다.

 

그러면 검색시 AUR 을 포함한 검색 결과가 나타나게 되는데, 그 중 적당한 버전으로 mongodb-bin, mongodb-tools-bin, mongodb-compass 의 세 패키지를 설치해줍니다.

 

2.실행

설치가 완료되면 아래의 명령으로 mongodb를 실행합니다.

systemctl enable --now mongodb

그리고 mongo명령어를 입력하면 머라머라 뜹니다.

 

3. Compass 확인

compass에서 접속이 되는지 확인해보겠습니다. 설치된 compass를 찾아 실행해줍니다. 

 

그러면 아래와 같은 화면이 나오는데... 다른거 입력 필요 없고 그냥 Connect를 눌러줍시다. 

 

그러면 현재 localhost에서 실행되고 있는 mongodb에 접속하여 정보를 보여줍니다.

 

이상으로 manjaro linux에서 mongodb 설치하는 방법을 알아봤습니다.

 

~~끝~~

반응형
반응형

 

1. https://newsapi.org/register에 가입합니다.

 

News API – Search News and Blog Articles on the Web

Get JSON search results for global news articles in real-time with our free News API.

newsapi.org

가입 완료시 나오는 API Key를 저장해둡시다. 나중에  API 요청할 때 써먹어야 합니다.

 

2. 한국 Link에 들어가봅니다.

https://newsapi.org/s/south-korea-news-api 

 

News API – Search News and Blog Articles on the Web

Get JSON search results for global news articles in real-time with our free News API.

newsapi.org

3. 한국 전체 뉴스를 가져오는 API 주소를 사용하겠습니다.(복사)

 

4. App.js 파일 작성

import React, {useState } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState(null);  
  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://newsapi.org/v2/top-headlines?country=kr&apiKey=9b9cc0aa70394bc4950b08fb1faca2f7',
      );
      setData(response.data);
    } catch(e) {
      console.log(e);
    }    
  };
  return (
    <div>
      <div>
        <button onClick = {onClick}>불러오기</button>
      </div>
      {data && <textarea row={7} value={JSON.stringify(data, null, 2)} readOnly={true} />}
    </div>
    
  );
};

export default App;

<결과>

반응형
반응형

비주얼 테스트 도구인 스토리북에 대해 알아보겠습니다. 

 

1. 설치

npx -p @storybook/cli sb init

.storybook폴더가 자동 생성되고, 그 안에 story파일을 로딩해주는 main.js 와 preview.js 파일이 있습니다. main.js에는 ...story.js파일을 자동 추가/로딩해주는 부분과 addon 설정부분이 있습니다. (preview.js는 아직 잘 모르겠습니다.ㅠㅠ)

package.json에도 storybook 스크립트가 추가되었습니다. (모두 이전 버전에서 수동 생성해주던 부분임...)

 

2. Sample 컴포넌트 작성 <./src/components/Input.jsx 파일 생성>

기존 컴포넌트들이 있으면 활용해도 되지만, 저는 새로 만든 프로젝트에서 테스트할 용도로 간단한? 컴포넌트 하나를 만들겠습니다.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class Input extends PureComponent {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e) {
        const { name, onChange } = this.props;
        if(onChange) {
            onChange(name, e.target.value);
        }
    }
    componentDidMount(){
        if(this.props.autoFocus){
            this.ref.focus();
        }
    }
    componentDidUpdate(){
        if(this.props.autoFocus) {
            this.ref.focus();
        }
    }
    setRef(ref){
        this.ref = ref;
    }
    render() {
        const { errorMessage, label, name, value, type, onFocus } =this.props;
        return (
            <label>
                {label}
                <input
                  id={`input_${name}`}
                  ref={this.setRef}
                  onChange={this.handleChange}
                  onFocus={onFocus}
                  value={value}
                  type={type}
                />
                {errorMessage && <span className="error">{errorMessage}</span>}                
            </label>
        );
    }
}

Input.propTypes = {
    type: PropTypes.oneOf(['text','number','price']),
    name: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    errorMessage: PropTypes.string,
    label: PropTypes.string,
    onChange: PropTypes.func,
    onFocus: PropTypes.func,
    autoFocus: PropTypes.bool,
};
Input.defaultProps={
    onChange: () => {},
    onFocus: () => {},
    autoFocus: false,
    type: 'text',
};

export default Input;

 

3. 스토리 파일 생성(./src/stories/Input.stories.js)

위에서 만든 컴포넌트를 스토리북으로 넘겨줄 story파일을 만들겠습니다.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Input from '../components/Input';

storiesOf('Input', module).add('기본설정', () => <Input />);

src/components/Input.jsx 와 src/stories/Input.stories.js 파일 구조. 선호하는 방식에 따라 변경 가능하다.

4. 실행 및 확인

yarn storybook

 

샘플 컴포넌트들이 하단에 나오고, 새로 생성한 Input 컴포넌트가 가장 위에 표시되는 모습

 


 

스토리북이 버전이 올라가면서 설정할 것도 별로 없어지고 편리해졌네요. story파일 자동으로 추가되도록 스크립트도 이미 생성이 되어있고, storybook 명령도 package.json파일에 자동 등록되고, 무엇보다도 개별 story를 등록해줄 필요도 없어진 것 같아 훨씬 편하게 사용할 수 있게 되었네요. 그냥 설치하고 xxx.stories.js 파일만 생성해주면 자동 등록되네요. 예전 책 "리액트 프로그래밍 정석" 으로 따라하다 잘 안되서 최신 사용법을 찾아본 소감이었습니다.

 

~끝~

반응형
반응형

MongoDB 설치파일 다운로드 위치를 몰라서 기록해놓습니다. 아울러 Compass에서 처음 접속하는 방법도 함께 공유합니다.

 

1. Download Site (www.mongodb.com/try/download/community)접속

 

2. 설치 (설치 중간에 함께 추천하는 Compass 도 설치합니다.)

3. 확인

정상 설치되었을 경우 커맨드 창에 mongo 라고 입력해보면 버전정보 등이 나타납니다.

4. Compass 실행

'mongodb://localhost:27017'을 입력하고 Connect를 누르면..

현재의 데이터베이스들이 나타납니다.

 

~끝~

반응형

'Programming > React' 카테고리의 다른 글

Newsapi api 키 발급받기  (0) 2021.03.23
Storybook 사용하기  (0) 2021.03.18
React - Apache에 배포하기  (0) 2021.02.27
React강좌3 - Redux0. redux 구조  (0) 2020.08.09
React강좌3 - Redux5. react-redux를 이용한 store연결  (0) 2020.08.09
반응형

1. Build

"create-react-app ." 명령으로 react app 생성 후 배포를 위해서는 아래의 명령으로 buid 합니다.

npm run build

이렇게 하면 build 폴더가 생성되는데 필요한 파일을 서버가 작동하는 폴더에 위치시키면 됩니다.

 

2. httpd.conf 항목 추가

매번 build된 파일을 apache가 서비스하는 폴더로 옮기는 작업은 번거롭습니다. 현재 작업중인 폴더를 직접 서비스하도록 추가하고 싶다면, httpd.conf파일에 아래의 항목을 추가해줍니다.

Alias /react "D:/05_Program_dev/03_web/04_react_hello/build"

<Directory "D:/05_Program_dev/03_web/04_react_hello/build">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

이렇게 하면 'localhost/react'로 접속 시도시 해당 폴더에 접속하게 됩니다. 따라서 작업한 파일을 보려면

'localhost/react/index.html'로 시도하면 됩니다. 

 

3. package.json homepage 수정

아직 apache 설정이 익숙치 않아서 이것저것 건드려봅니다. 어떤 앱은 2번까지만 수행해도 되고, 또다른 경우에는 여전히 흰 화면만 나오고 있습니다. 이것이 정답인지 알기는 힘들지만, 이럴땐 homepage속성에 접근하고자 하는 url을 입력했더니 수행 가능해졌습니다.

4. .htaccess 파일 추가??

.htaccess 파일을 생성하는 방법이 있습니다. 배포 폴더 내에 또는 Build하기 전 /publish 폴더 내에 .htaccess 파일을 추가하여 아래와 같이 작성해줍니다. 

<.htaccess>

Options -MultiViews 
RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^ index.html [QSA,L]

이 방법을 쓰려면 httpd.conf 파일의 AllowOverride 부분을 AllowOverride All로 해야합니다. 그래야 .htaccess의 접근을 허용해줍니다. 그러나 이 방법 성능 및 보안의 문제가 있다고 하여 사용을 권장하지는 않는 것 같습니다. (참고자료)

 

또..어떤 분은 아래와 같이 속성을 지정한다고 했는데 이건 저도 안해봤습니다. 이래저래 안될경우 따라해보려고 소스만 남겨놓습니다. 상황에 맞게 시도해보시기 바랍니다.

FallbackResource ./index.html

 

반응형

+ Recent posts