.jsx 다른 클래스 import할때 jsx확장자 제거하기

취미생활/react|2018.11.29 17:46

.jsx 다른 클래스 import 할때 확장자 제거하기


import Counter from './Counter.jsx';

위에서 .jsx를 제거하면 아래와같은 에러가 난다. 


ERROR in ./MainPage.jsx
Module not found: Error: Can't resolve './Counter' in 'C:\project\demo\src\main\jsx'
 @ ./MainPage.jsx 23:0-32 50:64-71


webpack.config.js 에 아래내용 추가



module: {
        rules: [ {
            ...
            resolve: {
                extensions: [".js", ".jsx"]
            }
        }
		...
    }


이후 .jsx를 제거하면 정상적으로 출력됨.




태그 : react

댓글(0)

spring x react 세팅후 package.json 파일이 안보일때

취미생활/react|2018.11.29 17:27

spring x react 세팅후 package.json 파일이 안보일때 


https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties



나는 @babel/plugin-proposal-class-properties 설치후 생성되었다. 

태그 : react

댓글(0)

react state 에러

취미생활/react|2018.11.29 17:25

SyntaxError: C:\project\demo\src\main\jsx\Counter.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (4:9):


import React, { Component } from 'react';

class Counter extends Component {
  state = { //이부분에 에러날때 
    number: 0
  }
  ...



처리방법


package.json 에 아래내용추가. 

plugins만 추가해도 될것같기도함.


  ...
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }


태그 : react

댓글(0)

Missing privilege separation directory: /var/run/sshd

취미생활/리눅스|2018.11.27 19:56

서버 리부팅을 하였는데 ssh가 붙지않고 에러가 났다.


root@lovejin90:/etc/apache2# systemctl status rsyslog.service
● rsyslog.service - System Logging Service
   Loaded: loaded (/lib/systemd/system/rsyslog.service; enabled; vendor preset: enabled)
   Active: failed (Result: start-limit-hit) since 화 2018-11-27 19:18:20 KST; 11s ago
     Docs: man:rsyslogd(8)
           http://www.rsyslog.com/doc/
  Process: 732 ExecStart=/usr/sbin/rsyslogd -n (code=exited, status=1/FAILURE)
 Main PID: 732 (code=exited, status=1/FAILURE)

11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Main process exited, code=exited, status=1/FAILUR
11월 27 19:18:20 lovejin90 systemd[1]: Failed to start System Logging Service.
11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Unit entered failed state.
11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Failed with result 'exit-code'.
11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Service hold-off time over, scheduling restart.
11월 27 19:18:20 lovejin90 systemd[1]: Stopped System Logging Service.
11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Start request repeated too quickly.
11월 27 19:18:20 lovejin90 systemd[1]: Failed to start System Logging Service.
11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Unit entered failed state.
11월 27 19:18:20 lovejin90 systemd[1]: rsyslog.service: Failed with result 'start-limit-hit'.
lines 1-18/18 (END)


원인은 찾고 해결했지만 왜 이렇게 됬는지 모르겠다. 

폴더 생성후 권한주고 다시 ssh를 시작시켜주면 정상적으로 된다.


mkdir /var/run/sshd
chmod 0755 /var/run/sshd


'취미생활 > 리눅스' 카테고리의 다른 글

Missing privilege separation directory: /var/run/sshd  (0) 2018.11.27
ubuntu 포트열기  (0) 2018.11.26
ubuntu tomcat8 설치하기  (0) 2018.11.26
plex 서브도메인 설정  (0) 2018.11.13
Mac root 패스워드설정  (0) 2018.11.13
plex 서버 업데이트받기  (0) 2018.11.11

태그 : ssh, ubuntu

댓글(0)

Spring x react 연동하기

취미생활/react|2018.11.27 16:26

에디터 vscode 기준


2018/11/23 - [취미생활/알쓸기능] - vscode spring 프로젝트 생성하기


이전 vscode에 설치한 spring에 react를 연동시켜보았다.

이글은 전적으로 이동련님 블로그에서 보고 배웠다.


1. react 라이브러리 설치 


터미널 Ctrl + Shift + '


npm i react react-dom
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader webpack webpack-cli -D


package.json에 의존성 추가확인



2. webpack 설정


루트에 webpack.config.js 파일 생성


var path = require('path'); module.exports = { context: path.resolve(__dirname, 'src/main/jsx'), entry: { main: './MainPage.jsx', page1: './Page1Page.jsx' }, devtool: 'sourcemaps', cache: true, output: { path: __dirname, filename: './src/main/webapp/js/react/[name].bundle.js' }, mode: 'none', module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react' ] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };


3. Controller 작성


 지난번 HomeController.java 파일에 추가함. 

class import - Alt + Shift + o 


	@GetMapping("/{name}.html")
    public String page(@PathVariable String name, Model model){
        model.addAttribute("pageName", name);
        return "page";
    }



4. 폴더생성

src/main/jsx 

src/java/webapp/css

src/java/webapp/jsp




5. .../jsp/page.jsp 


	<%@ page language="java" contentType="text/html; charset=utf-8"
	%>
	
	
		
			${pageName}
		
		 
		
			


 .../css/custom.css

.main { font-size: 24px; border-bottom: solid 1px black; }
.page1 { font-size: 14px; background-color: yellow; }


.../jsx/MainPage.jax


import '../webapp/css/custom.css';
 
import React from 'react';
import ReactDOM from 'react-dom';
 
class MainPage extends React.Component {
 
    render() {
        return 
메인 페이지
; } } ReactDOM.render(, document.getElementById('root'));




6. webpack watch


개발시 -d , 운영시 -p


node_modules\.bin\webpack --watch -d


태그 : react, Spring

댓글(0)

ubuntu 포트열기

취미생활/리눅스|2018.11.26 22:54

포트개방


iptables -I INPUT -p tcp --dport 8080 -j ACCEPT



ubuntu 16.04 이상일경우 아래명령어도 실행

sudo netfilter-persistent save
sudo netfilter-persistent reload



안된다면 패키지 설치후 사용


sudo apt install iptables-persistent


'취미생활 > 리눅스' 카테고리의 다른 글

Missing privilege separation directory: /var/run/sshd  (0) 2018.11.27
ubuntu 포트열기  (0) 2018.11.26
ubuntu tomcat8 설치하기  (0) 2018.11.26
plex 서브도메인 설정  (0) 2018.11.13
Mac root 패스워드설정  (0) 2018.11.13
plex 서버 업데이트받기  (0) 2018.11.11

댓글(0)

ubuntu tomcat8 설치하기

취미생활/리눅스|2018.11.26 22:48

업무가 spring로 봐뀔것같아 되새김좀 해볼겸 서버에 톰켓서버 설치해보았다.



java/jdk 설치


apt-get install openjdk-8-jre-headless
apt-get install openjdk-8-jdk


tomcat8 설치


apt-get install tomcat8


확인

http://ip:8080 




도메인 연결하기

vi /etc/tomcat8/server.xml

최하단 <host></host> 부분 복사하여 localhost 부분 도메인으로 변경
appbase 는 루트로 설정

	

        
        

        
        
	


tomcat8 재시작


service tomcat8 restart











'취미생활 > 리눅스' 카테고리의 다른 글

Missing privilege separation directory: /var/run/sshd  (0) 2018.11.27
ubuntu 포트열기  (0) 2018.11.26
ubuntu tomcat8 설치하기  (0) 2018.11.26
plex 서브도메인 설정  (0) 2018.11.13
Mac root 패스워드설정  (0) 2018.11.13
plex 서버 업데이트받기  (0) 2018.11.11

태그 : tomcat, ubuntui

댓글(0)

하드디스크 한눈에보기

취미생활/기타|2018.11.26 22:15

하드디스크를 한눈에 볼 수 있는 프로그램이다. 위치나 삭제도 가능한걸로 알고 있고 확장자 별로 몇기가를 차지하고있는지 확인할 수 있다. 



hdd.exe

'취미생활 > 기타' 카테고리의 다른 글

하드디스크 한눈에보기  (0) 2018.11.26
비행기 알림음 mp3  (0) 2018.11.26

댓글(0)

비행기 알림음 mp3

취미생활/기타|2018.11.26 22:09

예전에 비행기 알림음을 알림소리로 하고싶어 찾아놨던건데 파일정리하다 발견..


사실 저작권이 있는 파일인지 모르겠다.. 외국사이트 뒤지다 받은건데 문제가 된다면 비공개.





'취미생활 > 기타' 카테고리의 다른 글

하드디스크 한눈에보기  (0) 2018.11.26
비행기 알림음 mp3  (0) 2018.11.26

댓글(0)

plex 쓸만한 플러그인

취미생활/알쓸기능|2018.11.26 22:05

1. Youtube 플러그인


https://github.com/kolsys/YouTubeTV.bundle


2. daum TV에이전시


https://github.com/wonipapa/DaumMovieTVSeries.bundle


3. 자막관리기 

- 한영통합자막 분리해줌.

- smi -> srt 변환


https://github.com/hojel/SmiConvert.bundle


4. pooq 플러그인


https://github.com/soju6jan/soju6jan.github.io/tree/master/kodi_plugin




PLEX 관련 글


2018/11/11 - [취미생활/리눅스] - plex 서버 업데이트받기

2018/11/13 - [취미생활/리눅스] - plex 서브도메인 설정

2018/11/26 - [취미생활/알쓸기능] - plex 숫자들어간 파일이름 지정

2018/11/26 - [취미생활/알쓸기능] - Plex Youtube 플러그인 추가하기


태그 : plex

댓글(0)

Plex Youtube 플러그인 추가하기

취미생활/알쓸기능|2018.11.26 21:36

plex에 youtube 플러그인을 추가해보자.




https://github.com/kolsys/YouTubeTV.bundle


위 주소에서 플러그인을 다운로드받고 plex plugin-ins폴더에 넣어주자.

ubuntu 경로 /var/lib/plexmediaserver/Library/Application Support/Plex Media Server/Plug-ins



플러그인으로 들어가면 YoutubeTV가 추가되어있다. 



YoutubeTV를 들어가면 Code가 나온다. 이것을 

https://www.google.com/device


위 주소로 들어가서 코드를 입력하고 구글아이디를 로그인하여 엑세스허용을 해준다. 



다시 플렉스로 돌아와 새로고침을 해보면 본인이 구독한 사람들이 나오고 시청할수 있다. 

왠만하면 youtube를 이용하여 보겠지만.. 그냥 설치해본 기능



댓글(0)

plex 숫자들어간 파일이름 지정

취미생활/알쓸기능|2018.11.26 21:09

plex 서버에 숫자가 들어간 영상업로드시 에피소드 출력이 잘안될때가 있다.

파일명에 숫자가 들어가면 그 숫자를 에피소드로 인식할때가 있으니 아래 사진처럼 []로 감싸줘야한다.


예를들어서 응답하라 1988이면 응답하라 [1988] 로 해줘야되고

38사기동대 라면 [38]사기동대 라고 지정해줘야 정상적으로 출력된다.



댓글(0)

에버노트 프리미엄 저렴하게 결제하기

취미생활/일상|2018.11.25 03:27

에버노트 사용중이거나 새로 시작하는 사람들이라면 저렴하게 구매하는것이 좋을것 같다.

처음 에버노트를 사용하게 된건 오래전에 안드로이드폰을 구매했을때 6개월 이용권을 지급받았을때 시작했던것 같다. 자주쓰지는 않지만 거의 모든기기에서 가능하여 기록할때 유용하게 사용중이다.

 

 

먼저 한국사이트에서 그냥 구매할때 보면 월 4583원이면..1년에.. 55000원이다. 이 가격을 주고 사용하기엔 그정도 활용을 못하는것 같고 vpn을 이용하여 저렴하게 구매했다.

 

 

 

 

1. 크롬 확장프로그램으로 hola vpn을 설치

 

다운로드

 

 

2. 아르헨티나 설정후 전원on

 

 

3. 에버노트 결제페이지로 이동하여 가격확인.

18.33씩 12개월이면 220 아르헨티나 페소다.  환율계산해보면 6638원이나오며 이것저것 하면 조금더 붙을것이다.

 

 

 

 

 

카드번호를 입력하여 결제하면 된다. 사용후 vpn은 다시 off로 변경시켜주자.

 

한달 후 카드결제 청구금액이다. 1년 프리미엄으로 7149원이 결제되었다.

내가 알기로는 1년단위 정기결제로 알고있다. 더 사용하지않을거라면 꼭 해지하자.

 

 

 

에버노트 프리미엄 구매 계획이 있다면 싸게 구매하여 사용하시길.

'취미생활 > 일상' 카테고리의 다른 글

에버노트 프리미엄 저렴하게 결제하기  (0) 2018.11.25
구글 애드센스 심사통과  (2) 2018.11.19

댓글(0)

SX OS 사용기

취미생활/스위치|2018.11.25 02:56

반년정도 스위치를 타이틀 구매하여 사용하다 최근에 SXOS로 넘어갔다. 

가장큰 이유는 국내Eshop의 부진과 국내발매 타이틀 한글화등등.. sx에서 지원하는 모듈들이 스위치사용에 편리하고 좋았기 때문이다. 


sxos 설치방법은 검색해보면 엄청 나온다.


일단 스위치자체를 한글화 시킬수 있다는점이다. 영어가 어려워 하기불편하다기보단 국내정식발매에 닌텐도코리아가 있음에도 불구하고 영어로만 표기된다. 



커스텀테마도 찾아보면 많이 구할 수 있으며, 원하는 이미지로 만드는것도 어렵지 않을것이라고 생각된다. 


마리오 테마



 sxos 일반판과 pro가 있는데 나는 라이센스만 구매하여 사용중이다. 지그는 클립으로 대체하여 사용중이며 어플리케이션은 홈페이지에서 다운로드 하여 사용중이다.  PRO가 필요한 매력을 못느꼈고 이렇게 사용하는것이 편하다. 


라이센스는 여러곳에서 구매할 수 있지만 나는 네이버쇼핑에 파는 라이센스로 구매했다. 딱히 이유는 밤9시에 샀지만 라이센스를 30분이내 발송받을 수 있는 한국판매자들의 열정때문이 아닐까?..


이렇게 라이센스를 등록하고나면 즐기면된다. 홈브류에 필요한 앱들을 설치하여 사용해도된다. 

자주사용하는건 NX Shell ( nsp파일 삭제용 ) 과 checkpoint (세이브백업복구) 정도다. 




내가 지금 하는게임은 두세개뿐이지만 조카들을 위한 게임들이 많이 설치되있다.  SX의 장점중 하나는 조금더 좋은 삼촌이 될 수 있다는 점이있다. 



게임이나 소프트웨어들은 보통 결제해서 사용하지만 PSP이후 진짜 오랜만에 커펌을 진행한것 같다. 아직 기기가 벤당하진 않은것 같은데, 어쩌피 계속 이렇게사용할거라면 빠르게 벤당하면 마음도 편할 것 같다. 



설치관련 내용은 따로 올리지 않을 것이며, 질문은 받습니다. 

다만 게임 다운로드 관련 문의는 일절 무시합니다. 

'취미생활 > 스위치' 카테고리의 다른 글

SX OS 사용기  (0) 2018.11.25
스위치 SXOS 치트사용법  (0) 2018.11.19
포켓몬스터 레츠고 이브이  (0) 2018.11.18

댓글(0)

에버노트 다크테마 업데이트


보통 에디터나 모든 프로그램의 테마를 다크로 사용하는데 에버노트 앱버전도 다크테마가 업데이트됬다.

역시나 다크가 진리다. 






설정에 가면 다크테마로 바로 변경이 가능하다. 
다크를 좋아한다면 변경해서 꼭 사용하자 


댓글(0)

vscode spring 프로젝트 생성하기

취미생활/알쓸기능|2018.11.23 16:07

- 확장기능 설치 

1. Ctrl + Shift +x


2. 확장프로그램 설치 

- Java Extension Pack (Microsoft) 

- Spring Boot Extension Pack (Pivotal)




- jdk 설정


1. Ctrl + ,


2. Edit in settings.json 클릭

3. User Settings 에 경로설정


"java.home":"C:\\java\\jdk1.8"



- 프로젝트 생성


1. Ctrl + Shift +p

2. Spring Initalizr: Generate Maven Project Spring 선택

3. java

4. 패키지주소

5. 프로젝트명

6. 버전선택

7. 의존성 선택


DevTools – 클래스 소스 변경시 재시작

Web – Tomcat을 기반으로 서블릿 API를 사용수있음.



- pom.xml 추가

 //jsp
	
		org.apache.tomcat.embed
		tomcat-embed-jasper
		provided
	
//jstl
	
		javax.servlet
		jstl
		provided
	



- application.properties 삭제 application.yml 생성

spring:
  http:
    encoding:
      charset:    UTF-8
  mvc:
    view:
      prefix:     /jsp/
      suffix:     .jsp
server:
  tomcat:
    uri-encoding: UTF-8


HomeController.java 생성


package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HomeController{

    @RequestMapping("/")
    @ResponseBody
    public String index(){
        return "Hello Spring";
    }

}


프로젝트 실행 F5


결과확인







출처 : https://start.goodtime.co.kr/2018/09/%EC%8A%A4%ED%94%84%EB%A7%81-%EB%B6%80%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%EC%85%8B%EC%97%85-2018/


댓글(0)

엑셀 단축키(빠른실행) 설정하기

취미생활/알쓸기능|2018.11.22 15:33

엑셀 반복작업시 설정해놓으면 유용한기능


1. 사진처럼 왼쪽 상단의 화살표 클릭 후 기타명령 



2. 사용할 기능을 우측으로 이동. 

 - 빠른실행 도구 순으로 단축번호 지정됨.


3. 순서대로 Alt + 1 , Alt +2 ...


댓글(0)

1. react 설치하기

취미생활/react|2018.11.21 16:55

1. node.js 설치

https://nodejs.org/ko/download/


2. Yarn 설치(npm 사용해도됨)

https://yarnpkg.com/en/docs/install#windows-stable



3. react install


yarn global add create-react-app


4. 프로젝트 생성하기


create-react-app hello-react


5. 프로젝트 실행하기 


yarn start


결과화면



태그 : react

댓글(0)

구글 2단계인증 설정시 외부메일설정하기

취미생활/알쓸기능|2018.11.21 10:04

2단계 비밀번호를 설정하면 외부메일이나 로그인이 불가능한곳이 있다. 


그럴때 앱비밀번호 생성하여 비밀번호를 발급받자.


https://security.google.com/settings/security/apppasswords


위로 접속하여 로그인하자.


아래와같이나오면 생설할 앱과 기기를 선택후 생성클릭



그러면 앱비밀번호가 노란칸안에 나온다.


해당 비밀번호로 로그인하면 로그인이 될것이다.

댓글(0)

티스토리 초기화면 특정페이지로 이동

취미생활/소스코드|2018.11.20 13:14

티스토리 초기화면 특정페이지로 이동 

if ( window.location.pathname == '/' ) {
     location.href = 'https://load-map.com/86';
}


댓글(0)