Programming/node.js2019. 1. 29. 19:07

node.js에서 이런저런 패키지 깔고 보면

node_modules/패키지 안에 각종 js 파일들이 존재한다.


그걸 끌어올 방법이 없나 하고 찾아보는데

대개는 static으로 해당 모듈의 경로를 지정하고 script 태그에서 끌어다 쓰라는데 영 깔끔한 방법은 아닌 듯..


[링크 : https://julie.io/writing/javascript-node-modules/]

[링크 : https://stackoverflow.com/.../how-to-include-scripts-located-inside-the-node-modules-folder]


[링크 : https://dontkry.com/posts/code/using-npm-on-the-client-side.html]

[링크 : https://forum.vuejs.org/t/include-css-js-assets-from-node-modules-in-index-html/3956/2]

[링크 : https://www.npmjs.com/package/jquery]



+

react.js 예제를 보다 개발자 도구로 보니 은근 node_modules가 보이는걸 발견..

딱히 잘못된 접근은 또 아닌건가?

'Programming > node.js' 카테고리의 다른 글

express ejs  (0) 2019.02.20
pug include / ejs include  (0) 2019.02.20
npm npx yarn bower  (0) 2019.01.28
node-red rpi 접속  (0) 2018.12.20
node-red 자동시작 관련  (0) 2018.12.14
Posted by 구차니
Programming/css2019. 1. 29. 10:10

react.js 기본 예제 프로젝트 보다가 보니

App-logo-spin 이라는게 있어서 추적하다보니 나와서 보는 중


[링크 : https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp]


암튼.. @keyframe은 css 문법이었네? @로 시작하는게 머가 있나 봐야겠다

keyframe을 제외하면 아래정도인가?

[링크 : https://www.w3schools.com/cssref/pr_charset_rule.asp]

[링크 : https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp]

[링크 : https://www.w3schools.com/cssref/pr_import_rule.asp]

[링크 : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp]

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

css 반응형 웹 대응 - 미디어 쿼리  (0) 2024.01.18
css3 calc()  (0) 2020.01.03
css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
Posted by 구차니
Programming/react.js2019. 1. 28. 19:18

import 라고 쓸수 있는게 webpack 덕분이라고 해서 찾아보는 중...

require.js 이런거랑 유사한건가?


[링크 : https://webpack.js.org/]

[링크 : https://velopert.com/3626]



+

별별 유사한 모듈들이 많나보네..

[링크 : https://www.reddit.com/r/javascript/comments/3azxtj/requirejs_vs_browserify_vs_webpack/]

[링크 : https://www.slant.co/versus/3455/11602/~requirejs_vs_webpack]

'Programming > react.js' 카테고리의 다른 글

react import {}  (0) 2019.01.31
react html to jsx  (0) 2019.01.29
react.js tutorial  (0) 2019.01.28
react.js + spring  (2) 2019.01.28
react.js  (2) 2019.01.10
Posted by 구차니
Programming/node.js2019. 1. 28. 19:00

yarn이던 bower 이던 결국에는 node.js 용 패키지 매니저라고 보면 될 듯


[링크 : https://yarnpkg.com/en/]

[링크 : https://bower.io/]


[링크 : https://www.npmjs.com/]

[링크 : https://www.npmjs.com/package/npx]

[링크 : https://www.npmjs.com/package/yarn]

[링크 : https://www.npmjs.com/package/bower]


구버전에서는 yarn이 빠르게 어쩌네 하는데 좀 느리면 어때 ㅋㅋㅋ

[링크 : https://www.keycdn.com/blog/npm-vs-yarn]

[링크 : https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm]

'Programming > node.js' 카테고리의 다른 글

pug include / ejs include  (0) 2019.02.20
node_modules include  (0) 2019.01.29
node-red rpi 접속  (0) 2018.12.20
node-red 자동시작 관련  (0) 2018.12.14
node.js express static  (0) 2018.12.11
Posted by 구차니
Programming/react.js2019. 1. 28. 18:49


[링크 : https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial]

[링크 : https://reactjs.org/docs/create-a-new-react-app.html#create-react-app]

  [링크 : https://github.com/facebook/create-react-app#create-react-app-]

  [링크 : https://github.com/facebook/create-react-app/.../README.md#table-of-contents]



node.js가 깔려있어서 그냥 npx 쳐보니 npx를 설치한다고 시간을 좀 잡아먹고 무언가 뜬다  

C:\Users\User>npx

npx: installed 1 in 5.81s

Path must be a string. Received undefined


ERROR: You must supply a command.


Execute binaries from npm packages.


  npx [options] <command>[@version] [command-arg]...


  npx [options] [-p|--package <package>]... <command> [command-arg]...


  npx [options] -c '<command-string>'


  npx --shell-auto-fallback [shell]



Options:

  --package, -p          Package to be installed.                       [string]

  --cache                Location of the npm cache.                     [string]

  --no-install           Skip installation if a package is missing.    [boolean]

  --userconfig           Path to user npmrc.                            [string]

  --call, -c             Execute string as if inside `npm run-script`.  [string]

  --shell, -s            Shell to execute the command with, if any.

                                                       [string] [default: false]

  --shell-auto-fallback  Generate shell code to use npx as the "command not

                         found" fallback.

                                   [string] [choices: "", "bash", "fish", "zsh"]

  --ignore-existing      Ignores existing binaries in $PATH, or in the local

                         project. This forces npx to do a temporary install and

                         use the latest version.                       [boolean]

  --quiet, -q            Suppress output from npx itself. Subcommands will not

                         be affected.                                  [boolean]

  --npm                  npm binary to use for internal operations.

                                                 [string] [default: "C:\\Program

                             Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js"]

  --node-arg, -n         Extra node argument when calling a node binary.[string]

  --version, -v          Show version number                           [boolean]

  --help, -h             Show help                                     [boolean]


For the full documentation, see the manual page for npx(1).



실수로 오타를 냈는데 myapp 이라는 폴더에 기본 템플릿을 생성하도록 명령어를 실행

그나저나 패키지 받는데 무진장 오래걸리네..

그리고 react 관련해서 명령어들이 꽤나 여러가지 출력된다.

C:\Users\User\Desktop>npx create-react-app myap

npx: installed 1 in 2.423s

Path must be a string. Received undefined

npx: installed 63 in 11.172s

C:\Users\User\AppData\Roaming\npm-cache\_npx\10196\node_modules\create-react-app\index.js


Creating a new React app in C:\Users\User\Desktop\myap.


Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts...


+ react-dom@16.7.0

+ react@16.7.0

+ react-scripts@2.1.3

added 1926 packages in 197.071s


Initialized a git repository.


Success! Created myap at C:\Users\User\Desktop\myap

Inside that directory, you can run several commands:


  npm start

    Starts the development server.


  npm run build

    Bundles the app into static files for production.


  npm test

    Starts the test runner.


  npm run eject

    Removes this tool and copies build dependencies, configuration files

    and scripts into the app directory. If you do this, you can’t go back!


We suggest that you begin by typing:


  cd myap

  npm start


Happy hacking!

 

[링크 : https://reactjs.org/docs/hello-world.html]



+

2019.01.29


node.js 보다 확실히 구동이 좀 오래걸리네..

그리고 자동으로 등록된 브라우저를 실행해서 띄우는데 이거 끄는 법 없나?

(IE edge를 기본으로 하고 크롬써서..)

D:\work\src\myapp>npm start


> myapp@0.1.0 start D:\work\src\myapp

> react-scripts start

Starting the development server...

Compiled successfully!


You can now view myapp in the browser.


  Local:            http://localhost:3000/

  On Your Network:  http://10.0.0.4:3000/


Note that the development build is not optimized.

To create a production build, use npm run build. 


npm run build로 빌드!

D:\work\src\myapp>npm run build


> myapp@0.1.0 build D:\work\src\myapp

> react-scripts build


Creating an optimized production build...

Compiled successfully.


File sizes after gzip:


  34.71 KB  build\static\js\1.fa92c112.chunk.js

  763 B     build\static\js\runtime~main.229c360f.js

  716 B     build\static\js\main.690c38a1.chunk.js

  512 B     build\static\css\main.659f8df7.chunk.css


The project was built assuming it is hosted at the server root.

You can control this with the homepage field in your package.json.

For example, add this to build it for GitHub Pages:


  "homepage" : "http://myname.github.io/myapp",


The build folder is ready to be deployed.

You may serve it with a static server:


  npm install -g serve

  serve -s build


Find out more about deployment here:


  http://bit.ly/CRA-deploy


npm start로는 개발버전으로 실행되고

serve를 통해서 build 디렉토리 내의 것을 실행해야 static하게 구동이 되는 듯?

그리고 포트가 3000 번에서 5000 번으로 바뀐다.

D:\work\src\myapp>npm install -g serve

C:\Users\user\AppData\Roaming\npm\serve -> C:\Users\user\AppData\Roaming\npm\node_modules\serve\bin\serve.js

+ serve@10.1.1

added 78 packages in 3.909s


D:\work\src\myapp>serve -s build


   ┌───────────────────────────────────────────────┐

   │                                               │

   │   Serving!                                    │

   │                                               │

   │   - Local:            http://localhost:5000   │

   │   - On Your Network:  http://10.0.0.4:5000    │

   │                                               │

   │   Copied local address to clipboard!          │

   │                                               │

   └───────────────────────────────────────────────┘ 


+

윈도우에서는 아래와 같이 set을 통해서 한번 해주면 해당 콘솔창에서는 계속 적용 된다.

D:\work\src\myapp> set BROWSER=none 

D:\work\src\myapp> npm start 


[링크 : https://github.com/facebook/create-react-app/issues/2084]

[링크 : https://stackoverflow.com/questions/51706882/how-do-i-npm-start-with-a-specific-browser]

[링크 : https://github.com/kitze/custom-react-scripts/tree/master/packages/react-scripts#others]

  [링크 : https://github.com/facebook/create-react-app/issues/873]

'Programming > react.js' 카테고리의 다른 글

react import {}  (0) 2019.01.31
react html to jsx  (0) 2019.01.29
webpack react  (0) 2019.01.28
react.js + spring  (2) 2019.01.28
react.js  (2) 2019.01.10
Posted by 구차니
Programming/react.js2019. 1. 28. 10:40

으으으 공부해야 할 것..

회사에서 프로젝트를 angular에서 react로 전환할 거라.. ㅠㅠ


[링크 : https://start.goodtime.co.kr/2018/09/스프링-부트-리액트-개발-셋업-2018/]

'Programming > react.js' 카테고리의 다른 글

react import {}  (0) 2019.01.31
react html to jsx  (0) 2019.01.29
webpack react  (0) 2019.01.28
react.js tutorial  (0) 2019.01.28
react.js  (2) 2019.01.10
Posted by 구차니
Programming/android2019. 1. 25. 19:12

안드로이드에서 백그라운드로 주기적인 작업(예를 들면 값을 확인한다거나)하는 법 찾는중

생각해보니.. 포그라운드 앱과 백그라운드 앱으로 나눠지고

각각에 대해서 백그라운드 작업 등록하는 법을 찾아 봐야 할 듯?


[링크 : https://leewon.tistory.com/m/15?category=223806]

[링크 : https://medium.com/til-kotlin-ko/android-o에서의-백그라운드-처리를-위한-jobintentservice-250af2f7783c]

Posted by 구차니
Programming/android2019. 1. 25. 18:55

안드로이드 앱 구성이라고 해야하나

핵심 키워드 중에 하나인데 언제 보냐 ㅠㅠ


[링크 : https://whatisthenext.tistory.com/64]

[링크 : https://recipes4dev.tistory.com/67]

Posted by 구차니
Programming/android2019. 1. 24. 15:33

클릭하면 새로운 창으로 전환하는걸 액티비티 전환이라고 하는 듯

(일단 새로 생성된 창도 MainActivity로 뜨니까 머..)


[링크 : https://medium.com/.../android-개발-8-intent를-사용하여-액티비티-전환하기-4d8b64078427]

[링크 : https://bitsoul.tistory.com/6]

[링크 : https://coding-factory.tistory.com/203]

[링크 : https://philip1994.tistory.com/22]

Posted by 구차니
Programming/android2019. 1. 24. 15:28

비쥬얼 스튜디오 처럼 더블클릭하면 자동으로 메소드 추가되는 식의 자동화 까진 안된건가...

액티비티 에디터에서 onClick 에 함수 이름 넣은 다음

MainActivity.java 에서 해당 메소드를 추가해주면 끝


Toast 라는 신기한(?) 클래스가 나오네..


public void onClick_button1(View v)
{
Toast.makeText(getApplicationContext(), "버튼을 눌렸지비", Toast.LENGTH_LONG).show();

} 

[링크 : https://blog.naver.com/rkdwnsdud555/220284885555]

Posted by 구차니