Jay

webpack.config.js파일에 있는 presets에 설정을 적용하고 싶다 그러면 아래와 같이 배열로 해서 원하는 브라우저에만 맞춰서 해줄 수 있다. 크롬 버전이 70버전이라 치면언 69와 70버전만 호환이 되게 해준다. // webpack.config.js module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { target: { browsers: ['> 5% in KR', 'last 2 chrome versions'], }, debug: true, }], '@babel/preset-react', ], plugins: [], }, }], }, 아래와 같이 한국에서 ..

npm 명령어를 통해서 웹펙으로 빌드해준다. npm i react react-dom npm i -D webpack webpack-cli npm i -babel-loader @babel/core npm i -D @babel/preset-env npm i -D @babel/preset-react webpack.config.js 작성해준다. const path = require('path'); module.exports = { mode: 'development', devtool: 'eval', // hidden-source-map resolve: { extensions: ['.jsx', '.js'] }, entry: { app: './client', }, module: { rules: [{ test: /\.j..

터미널 창에서 그냥 webpack를 치면 아래 문구가 발생 webpack webpack : 'webpack' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십 시오. 위치 줄:1 문자:1 + webpack + ~~~~~~~ + CategoryInfo : ObjectNotFound: (webpack:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 그래서 명령어로 등록을 따로 해주어야 한다. 또는 package.json파일에 script에다가 적어주면 된다. "s..

(리액트 기본 설정 방법) npm init을 하면 package.json파일이 생성된다. npm init React 개발에 필요한 모든 패키지들을 package.json파일에 넣어준다. { "name": "lecture", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "jay", "license": "MIT" } 터미널에서 리액트와 리액트 돔이 필요 설치해준다. npm i react react-dom 리액트 개발할 때 필요한 웹펙을 설치 해준다.(- 주의, -D는 개발에서 밖에 안쓰인다는 의미이다.) n..

HTML에서 JS파일을 쓰는 방법은 간단하다. 아래와 같은 형식으로 작성한다. 리액트는 위에서 src가 되는 부분이다. 이 부분을 모르면 Webpack 할 때 문제가 생긴다.(React를 JS 파일로 만들어 주는 것) 즉 쪼개진 JS파일을 HTML이 실행할 수 있는 JS로 합쳐주는 역할이다. HTML에서 첫번째 리액트 컴포넌트를 만들어보자.(root에 리액트를 넣는 과정) 아래 참고 사이트에서 script 부분을 복사해오자. createElement는 html 태그를 만드는 것이라고 생각하자. 그리고 첫번째 컴포넌트를 만든다.(extends로 상속을 해온다.) 클래스는 기본적으로 constructor가 있다고 생각하자. 그리고 like 버튼을 화면에 어떻게 표시할 건지를 render 메소드를 통해서 결정..

mongoose 버전이 6버전 이상에서는 useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false,를 항상 기억하고 실행되기 때문에 MongoParseError: options usecreateindex, usefindandmodify are not supported 에러 발생 아래 mongoose.connect(config.mongoURI)에 들어있던 useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false,부분을 삭제 해주고 npm run start를 돌려준다. 노드 리액트 기초..

npm run start 했을 때 아래와 같은 에러가 떴었다. Cannot find module 'mongooses' 오타 에러이다.... package-lock.json파일과 node_modules폴더를 다 삭제하고 npm install npm install -g로 해서 다시 했을 필요가 없었다... 그냥 User.js 파일에 있는 const mongoose = require('mongooses') 여기서 에러가 나타났는데 mongooses를 mongoose로 고쳐서 npm run start 돌리니 정상작동 한다. 그리고 body-parser를 언급하면 index.js에서 bodyParser에 커서를 가져가보면 아래와 같이 한줄로 쭈욱 그어져 있다. 'bodyParser'은(는) 더 이상 사용되지 않습..

software development kit의 약자 무언가를 개발할 때 필요한 킷( 킷이라는 것은 무언가가 다 들어있는 느낌 프레임워크와 비슷하게 개발에 필요한 모든 것들이 들어있다. 예전에 만들었던 유튜브를 예로들면 유튜브 서버에서는 사용자가 이용할 수 있는 API가 public 공개적으로 오픈이 되어 있어서 해당하는 API를 직접 네트워크 통신을 이용해서 호출하고 데이터를 받아왔다.(public API) SDK는 사용자가 어떻게 통신을 해야 하는지 파이어베이스에는 어떠한 API가 있는지 어떤 것을 호출하고 어떤 순서로 써야 되는지를 Firebase에서 자체적으로 제공하는 SDK를 어플리케이션에 라이브러리처럼 포함만 해 놓으면 제공해준다. 즉 파이어 베이스 서버에 업데이트 하는거를 SDK가 자동적으로 ..

라우팅인란 프로세스인데 네트워크에 존재하는 traffic의 path를 선택하는 프로세스이다. 즉 웹에서 통상적으로 언급하는 라우팅이란 사용자가 요청하는 url 링크를 요청 했을 때에 어떤 특정한 페이지로 연결 할 건지를 결정하는 메커니즘. 사용자가 url을 주었을 때 어떤 페이지로 연결 할 건지를 결정하는 것. 싱글페이지 어플리케이션(SPA)을 유지하면서 url을 붙일 수 있는, 해당하는 페이지로 바로 갈 수 있고 북마크해서 추가가 되고, 뒤로가기 앞으로 가기등 네비게이션에 추가할 수 있도록 해주는 것이 React Router이다. Single Page Application(SPA): 하나의 url로 한번 페이지가 로딩되고 나면 페이지 안에서 사용자가 다른 페이지를 클릭하거나 링크를 클릭했을 때 새로운 ..

React Hooks Post CSS React Router Firebase 파이어 베이스를 이용해서 사용자의 정보를 서버에 저장할 수 있어서 웹 어플리케이션을 만들 수가 있다. Cloudinary를 이용해서 사용자의 이미지를 서버에 올릴 수도 있다. 참고: https://academy.dream-coding.com/enrollments# Dream Coding We suggest moving this party over to a full size window. You'll enjoy it way more. academy.dream-coding.com