목록React & Next.js (42)
Mi Lugarcito
npx create-react-app 생성할 폴더이름 1. readme 안에 내용 지우기 2. yarn.dock 파일 삭제 3. package.json 에서 블럭 된 2개 삭제 git init git remote add origin https://github.com/dmstlf292/movie_app_2021.git git add . git commit -m "setting" git push origin master App.js import React from 'react'; function App() { return ( ); } export default App; index.js import React from 'react'; import ReactDOM from 'react-dom'; import A..
cd back sudo npm i back 폴더 안에!!!! .env 파일 만들기 COOKIE_SECRET=sleactcookie MYSQL_PASSWORD=1234 콘솔창에 입력후 디비 만들기 npx sequelize db:create npm run dev // 테이블 생성을 위해 ctrl+c DB 연결 성공이라고 제일 아래와 같이 뜬다 그리고 나서 ctrl+c해서 빠져나오기 npx sequelize db:seed:all // 이미 디비값을 임의로 만들어 둔걸 실행시키기 npm run dev // 실제 데이터 넣는것 git에 올릴때는 node_modules 폴더는 제외시켜야한다. 용량도 너무 많고 무거워 & package.json 파일만 있으면 npm i 할 시 자동생성되는 폴더이기 때문 npm i -..
DOM? Binding : React에서 컴포넌트에 이벤트메서드를 연결하는 방법 (=바인딩(binding)) --> 보통 arrow function 으로 빠르게 구현 Mounting : 컴포넌트가 mount되는 것과 render가 되는것은 다르다. 맨처음 컴포넌트가 렌더될때는 component가 mount 되지만, 다시 props나 state가 변경 되어 render될때는 mount가 되지 않는다! react의 state나 props 변화가 있을때는 렌더될때 컴포넌트가 다시 마운트 되는 게 아니므로, shouldComponentUpdate(nextProps, nextState) 나, componentWillRecieveProps(nextProps) 쪽에서 그 변화를 감지해 관련 작업을 해줘야하는것이다.
HTML JS class EventHandling extends React.Component{ constructor(props){ super(props); this.state={ isToggleOn:true//버튼 클릭시 알 수 있도록 처리하기 } } handleClick=()=>{ //이런 형태로 바인딩 해주기 //고정된 값을 출력하는것이 아니라 변경될 수 있는 값을 출력하기 위해서는 (즉, state를 이용하는 경우) 바인딩 처리까지 해줘야한다 //console.log("이벤트 처리"); this.setState(state=>({ isToggleOn: !this.state.isToggleOn })) } render(){ return( {this.state.isToggleOn ? 'ON' : 'OFF'..
React 컴포넌트 객체가 DOM 에 실제로 삽입되기 전까지의 과정은 아래와 같다. 이러한 과정을 마운팅 Mounting 이라고 부른다. 1) contructor() - 특정 컴포넌트 초기화 2) componentWillMount() 3) render() - 화면 그려준다 4)componentDidMount() - 처리가 끝난후에 불러와지는 함수 & 기본적으로 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 api 호출을 수행하면 효과적이다. 데이터 변경 기본저그올 화면에 특정한 객체를 렌더링 하기 위해서는 props혹은 state를 사용해야 한다. props 와 state는 이러한 과정이 서로 다르지만 대략적으로 다음과 같은 순서로 수행된다. 1) shoudComponentU..
State : 변경될 수 있는 데이터를 처리할때 효율적으로 사용 가능함 함수형 컴포넌트가 아니라, class형 컴포넌트를 사용해야 한다@@ HTML CSS .blue{ color: blue; } .red{ color: red; } ReactDOM 에 render 함수가 수행되는 것이 아니라!!!! 컴포넌트를 활용해서 render함수를 이용해 rendering이 수행될 수 있도록 하는것 class Clock extends React.Component{ //class 형일때는 무조건 render 함수가 꼭 필요하다!!! //class 형 컴포넌트를 사용할 경우 props를 기본적으로 내장하고 있어서 앞에 this 키워드 붙여서 해당 컴포넌트에 내장된 props 이용해야한다. //state 적용해서 화면 구성..
word clould.py # 단어구름에 필요한 라이브러리를 불러옵니다. from wordcloud import WordCloud # 한국어 자연어 처리 라이브러리를 불러옵니다. from konlpy.tag import Twitter # 명사의 출현 빈도를 세는 라이브러리를 불러옵니다. from collections import Counter # 그래프 생성에 필요한 라이브러리를 불러옵니다. import matplotlib.pyplot as plt # Flask 웹 서버 구축에 필요한 라이브러리를 불러옵니다. from flask import Flask, request, jsonify # 테스트를 위하여 CORS를 처리합니다. from flask_cors import CORS # 파일에 접근하기 위한 라이..
특정한 이미지파일을 클라이언트측에서 접근하려면 정적폴더를 만들어서 제공해야한다. word_cloud.py # 단어구름에 필요한 라이브러리를 불러옵니다. from wordcloud import WordCloud # 한국어 자연어 처리 라이브러리를 불러옵니다. from konlpy.tag import Twitter # 명사의 출현 빈도를 세는 라이브러리를 불러옵니다. from collections import Counter # 그래프 생성에 필요한 라이브러리를 불러옵니다. import matplotlib.pyplot as plt # Flask 웹 서버 구축에 필요한 라이브러리를 불러옵니다. from flask import Flask, request, jsonify # 플라스크 웹 서버 객체를 생성합니다. a..
시작전에 먼저 파이썬 설치 후 -> 파이참 설치해야한다. wikidocs.net/8 위키독스 온라인 책을 제작 공유하는 플랫폼 서비스 wikidocs.net dev.plusblog.co.kr/34 macOS 파이썬 개발환경 Python 3 & 파이참(PyCharm) 설치 맥북이나 iMac에 파이썬 개발환경을 설치해보자. macOS에는 기본적으로 파이썬 2.x 버전이 설치되어 있다. 다음 명령을 실행해보면 기본적으로 설치되어 있는 파이썬 버전을 확인할 수 있다. python - dev.plusblog.co.kr wikidocs.net/81238 위키독스 온라인 책을 제작 공유하는 플랫폼 서비스 wikidocs.net outputs 폴더 만들기 / word_cloud.py 파일 생성/ NanumGothic...
yarn add style-loader css-loader webpack.config.js 'use strict' const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: { main: ['./src/main.js'] }, output: { path: path.resolve(__dirname, './build'), filename: '[name].js' }, module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, './src'), loaders: 'babel-loader' },{ test : /..