Lv2. 수식 최대화 Javascript https://programmers.co.kr/learn/courses/30/lessons/67257

🧑🏻‍💻 Code(javascript)

const getPermutations = function (arr, selectNumber) {
  const results = []
  if (selectNumber === 1) return arr.map((value) => [value])
  arr.forEach((fixed, index, origin) => {
    const rest = [...origin.slice(0, index), ...origin.slice(index + 1)]
    const permutations = getPermutations(rest, selectNumber - 1)
    const attached = permutations.map((permutation) => [fixed, ...permutation])
    results.push(...attached)
  })
  return results
}

function solution(exp) {
  const spread = []
  const expLen = exp.length
  for (let i = 0, j = 0; i < expLen; i++) {
    if (Number.isInteger(Number(exp[i]))) {
      spread[j] = (spread[j] || '') + exp[i]
    } else {
      spread.push(exp[i])
      j += 2
    }
  }
  const types = ['-', '+', '*']
  const perm = getPermutations(types, 3)
  const answer = []
  let ans = 0

  for (let i = 0; i < perm.length; i++) {
    const clone = spread.slice()
    for (let j = 0; j < perm[i].length; j++) {
      for (let k = 0; k < clone.length; k++) {
        if (perm[i][j] === clone[k]) {
          switch (perm[i][j]) {
            case '-':
              ans = Number(clone[k - 1]) - Number(clone[k + 1])
              break
            case '+':
              ans = Number(clone[k - 1]) + Number(clone[k + 1])
              break
            case '*':
              ans = Number(clone[k - 1]) * Number(clone[k + 1])
              break
          }
          clone.splice(k - 1, 3, ans)
          k--
        }
      }
    }
    answer.push(clone[0])
  }
  const abs = answer.map((v) => Math.abs(v))
  return Math.max(...abs)
}

💡 Solution

const getPermutations = function (arr, selectNumber) {
  const results = []
  if (selectNumber === 1) return arr.map((value) => [value])
  arr.forEach((fixed, index, origin) => {
    const rest = [...origin.slice(0, index), ...origin.slice(index + 1)]
    const permutations = getPermutations(rest, selectNumber - 1)
    const attached = permutations.map((permutation) => [fixed, ...permutation])
    results.push(...attached)
  })
  return results
}

function solution(exp) {
  const spread = []
  const expLen = exp.length
  for (let i = 0, j = 0; i < expLen; i++) {
    if (Number.isInteger(Number(exp[i]))) {
      spread[j] = (spread[j] || '') + exp[i]
    } else {
      spread.push(exp[i])
      j += 2
    }
  }
  const types = ['-', '+', '*']
  const perm = getPermutations(types, 3)
  const answer = []
  let ans = 0

  for (let i = 0; i < perm.length; i++) {
    const clone = spread.slice()
    for (let j = 0; j < perm[i].length; j++) {
      for (let k = 0; k < clone.length; k++) {
        if (perm[i][j] === clone[k]) {
          switch (perm[i][j]) {
            case '-':
              ans = Number(clone[k - 1]) - Number(clone[k + 1])
              break
            case '+':
              ans = Number(clone[k - 1]) + Number(clone[k + 1])
              break
            case '*':
              ans = Number(clone[k - 1]) * Number(clone[k + 1])
              break
          }
          clone.splice(k - 1, 3, ans)
          k--
        }
      }
    }
    answer.push(clone[0])
  }
  const abs = answer.map((v) => Math.abs(v))
  return Math.max(...abs)
}

👨‍👦‍👦 Others

👨🏻‍💻💭 Self Feedback

• 2021.10.05 - 최초 작성

댓글 환영 질문 환영 by.protect-me

맥에서 사진을 원으로 자르기 by.시골아빠

FavIcon Generator

1. 아래 링크 접속 http://tools.dynamicdrive.com/favicon/

2. 파일 선택

3. Optional > Merge with a 32x32 desktop icon 체크

4. Download FavIcon

5. 프로젝트에 파일 추가 ex) vue project => public 폴더

🎾 서울 테니스 클럽 웹앱

주변 테니스장 찾기 & 게스트 모집 플랫폼 웹앱 개발

Link : https://tennis9in.netlify.app Github : https://github.com/protect-me/vue-tennis Project Summary : https://velog.io/@protect-me/vue-tennis-summary (Current) Development Log : https://velog.io/@protect-me/vue-tennis-log

💻 구현 화면

홈 화면, 마이페이지

테니스 지도 | 상세페이지 | 게스트 모집

참가 신청/취소 + 게스트 영입/방출 + 알림

Youtube Link (1.5배속 시청 권장) 👈🏻👈🏻👈🏻👈🏻👈🏻

테니스장 리스트 | 신규 코트 등록 | 테니스장 상세 정보

신규 게스트 모집 등록

마이페이지, 회원 정보 수정

• https://github.com/protect-me

🐟 kim-3-meals

• 유튜브 김사원세끼 채널 맛집 지도 웹사이트 구축(유튜브 김사원세끼 채널)

1. Specs

• Vue.js : v3 + Firebase + Bootstrap + Netlify : Deploy

  2. Link 👈🏻

• https://kim3meals.com/ (link1)
• https://kim3meals.netlify.app/ (link2)
• 각종 포털에서 ㄱㅅㅇㅅㄲ 초성 검색으로 접근 가능

  3. Github

• https://github.com/protect-me/kim-3-meals

  4. Project Summary 👈🏻

• https://velog.io/@protect-me/kim-3-meals-summary

  5. Developement Log

• https://velog.io/@protect-me/kim-3-meals-log

🎾 vue-tennis

• 주변 테니스장 찾기 & 게스트 모집 플랫폼 웹앱 개발

1. Specs

• Vue.js : v2 + Firebase + Vuetify + Netlify : Deploy

  2. Link 👈🏻

• https://tennis9in.netlify.app (모바일 화면 권장)

  3. Github

• https://github.com/protect-me/vue-tennis

  4. Project Summary 👈🏻

• https://velog.io/@protect-me/vue-tennis-summary

  5. Developement Log

• https://velog.io/@protect-me/vue-tennis-log

💪🏿 gain-muscle

• 근력 운동을 계획·기록하고 점진적 과부하를 돕는 웹앱 개발

1. Specs

• Vue.js : v2 + MySQL + Vuetify + Node.js(Experss.js)

  2. Link 👈🏻

• 시연 영상 Youtube (2배속 시청 권장) (배포 작업중)

  3. Github

• https://github.com/protect-me/gm-front (front)
• https://github.com/protect-me/gm-back (back)

  4. Project Summary

• -

  5. Developement Log

• https://velog.io/@protect-me/gain-muscle

Photo by Ales Nesetril on Unsplash

🐟 유튜브 김사원세끼 맛집 지도 웹

https://kim3meals.com/ (link1) https://kim3meals.netlify.app/ (link2) 각종 포털에서 ㄱㅅㅇㅅㄲ 초성 검색으로 접근 가능

📲 누적 방문자 수

*누적 방문자 수 산정 기준: 1시간 이내 접속 기록이 없는 IP의 경우 Count

• 프로젝트 오픈 1일차 (2021.08.20) 누적 방문자 수: 1만 8천여 명

• 프로젝트 오픈 5일차 (2021.08.24) 누적 방문자 수: 2만 5천여 명

• 프로젝트 오픈 40일차(2021.09.10) 누적 방문자 수: 7만 1천여 명

일 평균 방문자 수 : 약 1,775명 🤭

📈 Firestore 사용량 기록

• 2021.08.19~2021.08.20

• 2021.08.19~2021.09.06

• 2021.09.04~2021.10.03

💻 구현 화면

• 검색 화면(지도)

• 검색 화면(카드)

• 출장 요청 화면

• 출장 요청 화면(주소 검색)

• 관리자 페이지 리스트

• 관리자 페이지 신규 상호 등록

• 관리자 페이지 기존 상호 수정

🔔 유튜브 소개

커뮤니티 소개(Link)

• 좋아요 2.2천 + 댓글 281개

동영상 소개(Link)

✍🏻 후기

발단

• 맛집 소개를 해주는 유튜브는 많지만, 정작 밖에서 내 주변의 맛집을 찾기는 힘들다는 포인트
• 실생활의 작은 불편함에 시작된 토이프로젝트가 유튜버 김사원세끼님과 만나며 폭발적인 반응을 이끌어냄

발전 가능성

• 데이터를 시각화하고 활용성을 높였다는데에 의의가 있었으며, 타 맛집 유튜버들의 맛집 지도를 통합하는 방식도 고려해볼만 함.
• 유튜버와 구독자 간의 소통을 조금 더 원활하게 할 수 있도록 맛집 방문 요청 페이지를 추가 제작하였으며, 차후 이 기능 또한 지도로 표시하여 구독자 맛집 지도를 구현 가능할 수 있음.

아쉬운 점

• 웹사이트 오픈 직전, 급하게 캐시를 통한 누적방문자 수, 페이지당 방문자 수를 기록하는 로직을 구현하였으나, 기회가 된다면 SSR을 구현하고, Google Analytics를 추가하여 유입경로 분석 혹은 나아갈 방향을 예측해보고자 함.

🌿아는 것과 실행하는 것의 차이. 🌿여러 시행착오를 겪으며 내가 '무엇을 모르는지를 알아가는' 과정.

🎾 서울 테니스 클럽 웹앱

주변 테니스장 찾기 & 게스트 모집 플랫폼 웹앱 개발

Link : https://tennis9in.netlify.app Github : https://github.com/protect-me/vue-tennis Project Summary : https://velog.io/@protect-me/vue-tennis-summary Development Log : https://velog.io/@protect-me/vue-tennis-log (Current)

1. 프로젝트 환경설정

1-1. 프로젝트 생성

• $ vue create vue-tennis : vue-tennis라는 이름으로 vue 프로젝트 생성

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Lint
er
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in producti
on) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

1-2. 경로 이동 및 서버 테스트 실행

• $ cd vue-tennis : 경로 이동
• $ yarn serve : 서버 실행
• http://localhost:8080/ : LOCAL URL
• $ Control + C : 서버 내리기
• editor(VScode)를 해당 경로로 다시 열기

1-3. Vuetify 설치

$ vue add vuetify (해당 프로젝트 내부에서 명령어 입력)

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

1-4. .gitignore 파일 수정

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
node_modules

2. Firebase 설정

Firebase

• firebase 구글 로그인
• 프로젝트 추가

Authentication

• 이메일/비밀번호: 사용 설정
• Google: 사용 설정

Firestore Database

• Database에 적합
• Cloud Firestore의 보안 규칙: 테스트 모드
• Cloud Firestore 위치 설정: asia-northeast3(Seoul)

Realtime Database

• 설정값에 적합
• 미국으로 설정(차후 가까운 지역이 나오면 그쪽으로 설정)
• 테스트모드로 설정

프로젝트 설정

• 일반 > 내 프로젝트 >공개 설정 > 지원 이메일 설정
• 일반 > 내 앱 > 플랫폼 선택: 웹(</>) : 웹 앱에 Firebase 추가 > 앱 등록

Firebase 설치

• $ Firebase login

• $ Firebase init

  firebase init
  
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
  

You're about to initialize a Firebase project in this directory:

/Users/***/Documents/Develope/vue-tennis

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Database: Configure Firebase Realtime Databas e and deploy rules, Firestore: Deploy rules and create indexes for Firestore, Functions: Co nfigure and deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites, S torage: Deploy Cloud Storage security rules

=== Project Setup

First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.

? Please select an option: Use an existing project ? Select a default Firebase project for this directory: vue-tennis (vue-tennis) i Using project vue-tennis (vue-tennis)

=== Database Setup i database: ensuring required API firebasedatabase.googleapis.com is enabled... ✔ database: required API firebasedatabase.googleapis.com is enabled

Firebase Realtime Database Security Rules allow you to define how your data should be structured and when your data can be read from and written to.

? What file should be used for Realtime Database Security Rules? database.rules.json ✔ Database Rules for vue-tennis-default-rtdb have been written to database.rules.json. Future modifications to database.rules.json will update Realtime Database Security Rules when you run firebase deploy.

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow requests. You can keep these rules in your project directory and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while maintaining performance that scales with the size of the result set. You can keep index definitions in your project directory and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

=== Functions Setup

A functions directory will be created in your project with a Node.js package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript ? Do you want to use ESLint to catch probable bugs and enforce style? No ✔ Wrote functions/package.json ✔ Wrote functions/index.js ✔ Wrote functions/.gitignore ? Do you want to install dependencies with npm now? Yes

protobufjs@6.11.2 postinstall /Users/***/Documents/Develope/vue-tennis/functions/node_modules/protobufjs node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file. added 227 packages from 204 contributors and audited 227 packages in 6.657s

8 packages are looking for funding run npm fund for details

found 0 vulnerabilities

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? Set up automatic builds and deploys with GitHub? No ✔ Wrote dist/index.html

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow uploads and downloads. You can keep these rules in your project directory and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

i Writing configuration info to firebase.json... i Writing project information to .firebaserc...

✔ Firebase initialization complete!

- `$ yarn add firebase@8.2.3`

> 버전별로 import하는 방식이 다르게 나와서 꽤나 혼란스러움.
`v8`로 설치 시, 본 블로그 글의 내용과 같이 `import`가 가능하나,
`v7` 이하 혹은 `v9` 이상에서는
`import * as firebase from 'firebase/app'`과 같이 `import`
=> 자세한 사항은 [firebase Document](https://firebase.google.com/docs/web/setup?authuser=0) 참고


### firebase 연결

#### main.js
```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import './plugins/firebase.js' // plugin 설정

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app')

plugins/firebase.js

import Vue from 'vue'
import firebase from 'firebase/app'
import firebaseConfig from '../../firebaseConfig'
import 'firebase/auth'
import 'firebase/firebase-firestore'

firebase.initializeApp(firebaseConfig)
Vue.prototype.$firebase = firebase

App.js

<script> 
  (...)
  mounted() {
    console.log('here', this.$firebase)
  },
  (...)

.env 설정

$ npm install dotenv

• .env 파일 생성 : firebaseConfig.js의 내용을 기입

  VUE_APP_apiKey=''
  VUE_APP_authDomain=''
  VUE_APP_databaseURL=''
  VUE_APP_projectId=''
  VUE_APP_storageBucket=''
  VUE_APP_messagingSenderId=''
  VUE_APP_appId=''
  VUE_APP_measurementId=''

• firebaseConfig.js 내용 수정

  export default {
  apiKey: process.env.VUE_APP_apiKey,
  authDomain: process.env.VUE_APP_authDomain,
  databaseURL: process.env.VUE_APP_databaseURL,
  projectId: process.env.VUE_APP_projectId,
  storageBucket: process.env.VUE_APP_storageBucket,
  messagingSenderId: process.env.VUE_APP_messagingSenderId,
  appId: process.env.VUE_APP_appId,
  measurementId: process.env.VUE_APP_measurementId,
  }

.gitignore 추가

.env

3. Netlify 배포

Netlify deploy

New site from Git > Github > 로그인 및 권한 설정 > 해당 repository 선택 > 기본 설정 유지, Deploy site

환경변수 설정

site Settings > Build & deploy > Environment > Environment variables > .env의 환경변수 기입

functions bundling error

2. Functions bundling                                         
11:16:27 PM: ────────────────────────────────────────────────────────────────
11:16:27 PM: ​
11:16:27 PM: Packaging Functions from functions directory:
11:16:27 PM:  - index.js
11:16:27 PM: ​
11:16:27 PM: ​
11:16:27 PM: ────────────────────────────────────────────────────────────────
11:16:27 PM:   Dependencies installation error                               
11:16:27 PM: ────────────────────────────────────────────────────────────────
11:16:27 PM: ​
11:16:27 PM:   Error message
11:16:27 PM:   A Netlify Function is using "firebase-functions" but that dependency has not been installed yet.

위와 같은 에러를 만난 경우

• 원인 : Netlify와 firebase의 각각의 funtions가 있는데, Netlify가 배포할 때 fireabase의 funtions 폴더를 찾아들어가서 함수를 찾기 때문에 에러가 발생.
• 해결 : 최상위 경로에 netlify.toml 파일 생성 후 아래와 같이 작성

  [build]
  functions="NetlifyFunctions"

  즉, Netlify 배포 시, netlify의 funtions는 NetlifyFunctions 경로에 들어가서 찾도록 설정함. 물론 폴더가 없거나 만들더라도 빈 폴더이기 때문에 아래와 같은 log를 남기고 넘어갈 수 있음 (추가로 netlify funtions를 작성한 경우 제외) The Netlify Functions setting targets a non-existing directory: NetlifyFunctions

4. KakaoMap 설정

kakao developers

앱 키 설정

• 애플리케이션 추가 > 앱 키 확인 : REST API 키 : JavaScript 키

• .env 파일에 내용 추가

  VUE_APP_KAKAO_ADDRESS_REST_API_KEY=''
  VUE_APP_KAKAO_MAP_JAVASCRIPT_KEY=''

플랫폼 설정

: 플랫폼 > web > Netlify에서 배포한 주소 추가

ERROR

Mixed Content

• Error Mixed Content: The page at 'https://tennis9in.netlify.app/Map' was loaded over HTTPS, but requested an insecure script 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=*****'. This request has been blocked;
• Solve public > index.html > head 아래 내용 추가 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
• Ref Mixed content 문제 해결(https 사이트에서 http 사이트 요청 시 발생하는 보안 문제)

참고: 리액트 무료 강좌(웹게임) ZeroCho TV

1. 리액트를 왜 쓰는가

1. 사용자 경험
2. 재사용 컴포넌트
3. 데이터-화면 일치
4. 유지보수에 용이

2. 첫 리액트 컴포넌트

react: react가 동작하는데 필요한 코드 react-dom: react코드를 DOM에 붙여주는 역할

[React 강의] 리액트(react)로 Quora-Clone 웹사이트 만들기 by.리액트 깎는 노인

• react app 설치(+ redux) $ npx create-react-app quora-clone --template redux

• material icon 설치 $ npm install @material-ui/core $ npm install @material-ui/icons

• reset css => index.css 상단

참고 https://slides.com/woongjae/react2021

1. Basic Hooks

1-1. useState

• state를 대체할 수 있음

기존에는 state를 변경하려면 class 문법을 통해서만 가능했고, functional 컴포너늩에서는 구현이 불가능했지만, hook이 새롭게 업데이트 되면서 functional 컴포넌트에서도 state를 가질 수 있게 되었다.

1-1-1. class 구현(기존)

import React from 'react'

export default class Example2 extends React.Component {
  state = {
    count: 0,
  }
  render() {
    const { count } = this.state
    return (
      <div>
        <p>You Clicked {count} times</p>
        <button onClick={this.click}>BTN</button>
      </div>
    )
  }
  click = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
}

1-1-2. functional 구현(1)

import React from 'react'

export default function Example2() {
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <p>You Clicked {count} times</p>
      <button onClick={click}>BTN</button>
    </div>
  )

  function click() {
    setCount(count + 1)
  }
}

1-1-3. functional 구현(2)

import React from 'react'

// (기존) useState => count
// (수정) useState => {count: 0}
export default function Example3() {
  const [state, setState] = React.useState({ count: 0 })

  return (
    <div>
      <p>You Clicked {state.count} times</p>
      <button onClick={click}>BTN</button>
    </div>
  )

  // function click() {
  //   setState({ count: state.count + 1 })
  // }
  function click() {
    setState((state) => {
      return {
        count: state.count + 1,
      }
    })
  }
}

state hook이 나오면서 ...

• (기존) : Functional Component = Stateless Component = Stateless Functional Component
• (현재) : Functional Compoent !== Stateless Component

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움 : 컨테이너 방식 말고 상태에 관련된 로직
• 복잡한 컴포넌트들은 이해하기 어려움
• Class는 사람과 기계를 혼동시킴 : 컴파일 단계에서 코드 최적화가 어려워짐
• this.state는 로직에서 레퍼런스를 공유하기 때문에 문제 발생 가능성이 있음 : functional 컴포넌트는 this.state를 공유하지 않음 : 따라서, 어떠한 것이 맞다 틀리다가 아니라, 상황에 맞게 class 혹은 function을 적절하게 활용해야함

1-2. useEffect

• 라이프 사이클 훅을 대체할 수 있음 : componentDidMount : componentDidUpdate : componentWillUnmount

  // useEffect
  import React from 'react'
  

export default function Example5() { const [count, setCount] = React.useState(0)

// React.useEffect(() => { // console.log('componentDidMount && componentDidUpdate', count) // }) React.useEffect(() => { console.log('componentDidMount')

return () => {
  // cleanup
  // componentWillUnmount
}

}, [])

React.useEffect(() => { console.log('componentDidMount && componentDidUpdate by count', count) return () => { // cleanup console.log('cleanup by count' count) } }, [count])

return (

function click() { setCount(count + 1) } }

> [[번역] useEffect 완벽 가이드 | rinae's devlog](https://rinae.dev/posts/a-complete-guide-to-useeffect-ko)


### 1-3. userContext
`6. Context API` 에서 다룸

---
## 2. Custom Hooks
```js
// useWindowWidth.js
import { useState, useEffect } from 'react'

export default function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)
  useEffect(() => {
    const resize = () => {
      setWidth(window.innerWidth)
    }
    window.addEventListener('resize', resize)
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [])

  return width
}

useHasMounted vs widthHasMounted

(...)

3. Additional Hooks

4. React Router Hooks

5. 컴포넌트 간 통신

6. Context API

참고 https://slides.com/woongjae/react2021

1. HOC | Higher Order Component

• 리액트에서 컴포넌트 안에 있는 로직을 재사용할 수 있는 진보된 기술
• 최근에는 Hook을 더 많이 활용하는 추세
• 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수
• HOC는 앞에 with를 붙이는 경우가 많음
• 횡단 관심사 ex) 로그인이 되어있는지 확인하는 로직 ex) 로그 수집
• 컴포지션

주의

• render method 안에 HOC를 사용하지말자 : render될 때마다 새로운 컴포넌트를 만들기 때문
• static method는 카피해서 써라(Feat. hoist-non-react-static)
• refs 통과시킬 수 없음(feat. React.forwardRef)

2. Controlled Component, Uncontrolled Component

• 상태를 가지고 있는 엘리먼트 : input, select, textarea, ...

• Controlled : 엘리먼트를 가지고 있는 컴포넌트가 관리
• Uncontrolled : 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유

2-1. Controlled Component

// ControlledComponent.jsx
import React from 'react'

class ControlledComponent extends React.Component {
  state = {
    value: '',
  }
  render() {
    const { value } = this.state
    return (
      <div>
        <input type="text" value={value} onChange={this.change} />
        <button onClick={this.click}>버튼</button>
      </div>
    )
  }
  change = (e) => {
    console.log(e.target.value)
    this.setState({ value: e.target.value })
  }
  click = () => {
    console.log(this.state.value)
  }
}

export default ControlledComponent

2-2. Uncontrolled Component | createRef

// UncontrolledComponent.jsx
import React from 'react'

class UncontrolledComponent extends React.Component {
  // 방법2
  inputRef = React.createRef()
  render() {
    console.log('initail render', this.inputRef)
    return (
      <div>
        {/* <input id="my-input" /> 방법1 */}
        <input ref={this.inputRef} />
        <button onClick={this.click}>전송</button>
      </div>
    )
  }

  componentDidMount() {
    console.log('componentDidMount', this.inputRef)
  }

  click = () => {
    // 목표
    // input 엘리먼트의 현재 상태 값 (value)를 꺼내서 전송함
    // 방법 1 => real DOM에 직접적인 변경을 가함 => 지양
    // const input = document.querySelector('#my-input')
    // console.log(input.value)
    // 방법 2
    console.log(this.inputRef.current.value)
    // inputRef
  }
}

export default UncontrolledComponent

참고 https://slides.com/woongjae/react2021

1. Style Loaders

BEM: Block, Elment, Modifier React에서 컴포넌트별로 스코핑이 되지 않기 때문에 BEM 방법론을 채택하기도 함

2. SCSS 적용

1. App.scss 파일 생성 및 작성
2. $ npm i sass
3. App.js import './App.scss'

3. CSS Modules

1. App.js import styles from './App.modules.css'
2. src > App.css 생성 및 작성
3. styles가 자동으로 선택자에 해시값을 추가해서 맵핑
4. function App()의 return 값 수정 <div className={styles["App"]}></div> ...

   전역적으로 오염되지 않은 스코프를 가짐

Button 기본

// Button.jsx
import styles from './Button.module.css'

const Button = (props) => <button className={styles['button']} {...props} />

export default Button

// Button.module.css
.button {
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
  cursor: pointer;
}

Button 로딩 추가

// Button.module.css
import React from 'react'
import styles from './Button.module.css'

// const Button = (props) => <button className={styles['button']} {...props} />
class Button extends React.Component {
  state = {
    loading: false,
  }
  render() {
    return (
      <button
        onClick={this.startLoading}
        className={
          this.state.loading
            ? `${styles['button']} ${styles['loading']}`
            : styles['button']
        }
        {...this.props}
      />
    )
  }
  startLoading = () => {
    this.setState({
      loading: true,
    })
    setTimeout(() => {
      this.setState({
        loading: false,
      })
    }, 1000)
  }
}

export default Button

Button 로딩 추가 - classnames 추가

classnames test

import classNames from 'classnames'
    console.log(classNames('foo', 'bar'))
    console.log(classNames('foo', 'bar', 'baz'))
    console.log(classNames({ foo: true }, { bar: false }))
    console.log(
      classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''),
    )
    console.log(classNames(styles['button'], styles['loading']))

$ npm i classnames

import React from 'react'
import styles from './Button.module.css'
import classNames from 'classnames/bind' // bind 추가

const cx = classNames.bind(styles)
console.log(cx('button', 'loading'))

// const Button = (props) => <button className={styles['button']} {...props} />
class Button extends React.Component {
  state = {
    loading: false,
  }
  render() {

    const { loading } = this.state

    return (
      <button
        onClick={this.startLoading}
        className={cx('button', { loading })}
        {...this.props}
      />
    )
  }
  startLoading = () => {
    this.setState({
      loading: true,
    })
    setTimeout(() => {
      this.setState({
        loading: false,
      })
    }, 1000)
  }
}

export default Button

4. Styled Components

• 별도 라이브러리를 통해 스타일링을 좀더 손쉽게 가능
• $ npm i styled-components

기본 사용법

// StyledButton.jsx
import styled from 'styled-components'

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
  cursor: pointer;
`

export default StyledButton

// 사용
import StyledButton from '../components/StyledButton'
      <StyledButton>스타일버튼</StyledButton>

다양한 활용법

import Button from '../components/Button.jsx'
import StyledButton from '../components/StyledButton'
import StyledA from '../components/StyledA'
import styled, { createGlobalStyle } from 'styled-components'

const PrimaryStyledButton = styled(StyledButton)`
  background: palevioletred;
  color: white;
`

const UppercaseButton = (props) => (
  <button {...props} children={props.children.toUpperCase()} />
)
const MyButton = (props) => (
  // <button {...props} children={`MyButton ${props.children}`} />
  <button className={props.className} children={`MyButton ${props.children}`} />
)

const StyledMyButton = styled(MyButton)`
  background: transparent;
  border-radius: 3px;
  border: 2px solid ${(props) => props.color || 'palevioletred'};
  color: ${(props) => props.color || 'palevioletred'};
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
  cursor: pointer;

  :hover {
    border: 2px solid red;
    font-size: 25px;
  }

  ::before {
    content: '@';
  }
`

const GlobalStyle = createGlobalStyle`
button {
  color: yellow;
}
`

export default function Home() {
  return (
    <div>
      <GlobalStyle />
      <h1>HOME</h1>
      <Button>BTN</Button>
      <StyledButton>스타일버튼</StyledButton>
      <StyledButton primary>스타일버튼</StyledButton>
      <PrimaryStyledButton>스타일버튼</PrimaryStyledButton>
      <StyledButton as="a" href="/profile">
        a버튼
      </StyledButton>
      <StyledButton as={UppercaseButton}>button</StyledButton>
      <StyledMyButton>button</StyledMyButton>
      <StyledMyButton color="green">button</StyledMyButton>
      <StyledA href="https://google.com">구글로</StyledA>
    </div>
  )
}

// StyledA.jsx
import styled from 'styled-components'
const StyledA = styled.a.attrs((props) => ({
  target: '_BLANK',
}))`
  color: ${(props) => props.color};
`
export default StyledA

5. React Shadow

• $ npm i react-shadow
• 컴포넌트마다 격리시켜 style을 독립적으로 적용시킬 수 있음

6. Ant Design

• Ant Design
• $ npm i antd

// index.js
import 'antd/dist/antd.css'

참고 https://slides.com/woongjae/react2021

React의 라우팅 이해하기

비교

• 기존 방식
• SPA | Single Page Application

SPA 라우팅 과정

1. 브라우저에서 최초에 '/'경로로 요청을 하면
2. React Web App을 내려줌
3. 내려받은 React App에서 '/'경로에 맞는 컴포넌트를 보여줌
4. ReactApp에서 다른 페이지로 이동하는 동작을 수행하면
5. 새로운 경로에 맞는 컴포넌트를 보여줌

React는 작성, 렌더, 업데이트에 관여하는데, route는 기본적으로 react의 범주를 넘어서는 작업 ⇒ React Router Dom Library가 그 일을 대신함

$npm i react-router-dom CRA에 기본 내장된 패키지도, 공식 패키지도 아님 가장 대표적인 라우팅 패키지임

기본 라우팅

// App.js
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './pages/Home'
import Profile from './pages/Profile'
import About from './pages/About'
import './App.css'

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={Home}></Route>
      <Route path="/profile" component={Profile}></Route>
      <Route path="/about" component={About}></Route>
    </BrowserRouter>
  )
}

export default App

export default function Profile() {
  return (
    <div>
      <h2>Profile</h2>
    </div>
  )
}

동적 라우팅 (1)

• params: 필수 요소
• http://localhost:3000/profile/10

// App.js
(...)
<Route path="/profile" exact component={Profile}></Route>
<Route path="/profile/:id" component={Profile}></Route>
(...)

// profile.jsx
export default function Profile(props) {
  const id = props.match.params.id
  console.log(id, typeof id)
  return (
    <div>
      <h2>Profile</h2>
      {id && <p>id 는 {id} 입니다.</p>}
    </div>
  )
}

동적 라우팅 (2)

• query string: 선택적 요소
• http://localhost:3000/about?name=hell

basic

export default function About(props) {
  const searchParams = props.location.search
  console.log(searchParams)
  const obj = new URLSearchParams(searchParams)
  const name = obj.get('name')
  console.log(name)
  return (
    <div>
      <h2>About</h2>
      {name && <p>name은 {name}입니다.</p>}
    </div>
  )
}

query-string library

import queryString from 'query-string'

export default function About(props) {
  const searchParams = props.location.search
  console.log(searchParams)
  // const obj = new URLSearchParams(searchParams)
  // const name = obj.get('name')
  // console.log(name)
  const query = queryString.parse(searchParams)
  console.log(query)
  return (
    <div>
      <h2>About</h2>
      {query.name && <p>name은 {query.name}입니다.</p>}
    </div>
  )
}

Switch와 NotFound

• 여러 Route 중 순서대로 먼저 맞는 하나만 보여줌
• 로직에서 exact를 뺄 수 있게 해줌
• 가장 마지막에 어느 path에도 맞지 않는 경우를 설정해서 Not Found 페이지를 만들 수 있음

  // App.js
  import { BrowserRouter, Route, Switch } from 'react-router-dom'
  import Home from './pages/Home'
  import Profile from './pages/Profile'
  import About from './pages/About'
  import NotFound from './pages/NotFound.jsx'
  import './App.css'
  

function App() { return ( ) }

export default App

---

## JSX 링크로 라우팅 이동(Link)
> `<a></a>` 태그를 통해 이동하면 React Application의 SPA 특성을 담은 페이지 이동이 아니라 서버에 새로운 요청을 일으킴. 즉, 새로고침이 일어남
⇒ `<Link></Link>` 컴포넌트를 활용

### Link Component - 직접 사용
```js
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom' // Link import
import Home from './pages/Home'
import Profile from './pages/Profile'
import About from './pages/About'
import NotFound from './pages/NotFound.jsx'
import './App.css'

function App() {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Switch>
        <Route path="/profile/:id" component={Profile}></Route>
        <Route path="/profile" component={Profile}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/" exact component={Home}></Route>
        <Route component={NotFound}></Route>
      </Switch>
    </BrowserRouter>
  )
}

export default App

Link Component - Links 분리

import { Link } from 'react-router-dom'

export default function Links() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/profile">Profile</Link>
      </li>
      <li>
        <Link to="/profile/1">Profile/1</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/about?name=hell">About?name="hell</Link>
      </li>
    </ul>
  )
}

JSX 링크로 라우팅 이동(NavLink)

• import {NavLink} from 'react-router-dom'
• activeClassName, activeStyle 처럼 active 상태에 대한 스타일 지정이 가능
• Route의 path 처럼 동작하기 때문에 exact가 있음

// NavLinks.js
import { NavLink } from 'react-router-dom'
const activeStyle = { color: 'green' }

export default function NavLinks() {
  return (
    <ul>
      <li>
        <NavLink to="/" exact activeStyle={activeStyle}>
          Home
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile" exact activeStyle={activeStyle}>
          Profile
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile/1" activeStyle={activeStyle}>
          Profile/1
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about"
          activeStyle={activeStyle}
          isActive={(match, location) => {
            console.log('match', match)
            console.log('location', location)

            return match !== null && location.search === ''
          }}
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=hell"
          activeStyle={activeStyle}
          isActive={(match, location) => {
            console.log('location', location)
            return match !== null && location.search === '?name=hell'
          }}
        >
          About?name=hell
        </NavLink>
      </li>
    </ul>
  )
}

JS로 라우팅 이동

기본

// Login.jsx
export default function Login(props) {
  console.log('props', props)

  function login() {
    setTimeout(() => {
      props.history.push('/') // go, goback, push, replace...
    }, 1000)
  }

  return (
    <div>
      <h2>Login</h2>
      <button onClick={login}>로그인하기</button>
    </div>
  )
}

component 분리 (1) - 지양

• 부모 컴포넌트에서 자식 컴포넌트로 직접 props를 넘겨주는 방식

  // Login.jsx
  import LoginButton from '../components/LoginButton'
  export default function Login(props) {
  return (
    <div>
      <h2>Login</h2>
      <LoginButton {...props} />
    </div>
  )
  }

// LoginButton.jsx
export default function LoginButton(props) {
  console.log('LoginButton Props', props)
  function login() {
    setTimeout(() => {
      props.history.push('/')
    }, 1000)
  }
  return <button onClick={login}>로그인하기</button>
}

component 분리 (2) - HOC

• Higher Order Component인 withRouter 활용

  // Login.jsx
  import LoginButton from '../components/LoginButton'
  export default function Login() {
  return (
    <div>
      <h2>Login</h2>
      <LoginButton />
    </div>
  )
  }

  // LoginButton.jsx
  import { withRouter } from 'react-router-dom'
  

export default withRouter(function LoginButton(props) { console.log('LoginButton Props', props) function login() { setTimeout(() => { props.history.push('/') }, 1000) } return 로그인하기 })

### component 분리 (3) - Hook
- hook을 통한 방법도 있음(차후 학습)


---

## Redirect
`import { Redirect} from 'react-router-dom`

```js
// App.js
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
// import Links from './components/Links.jsx'
import NavLinks from './components/NavLinks.jsx'
import Login from './pages/Login'
import Home from './pages/Home'
import Profile from './pages/Profile'
import About from './pages/About'
import NotFound from './pages/NotFound.jsx'
import './App.css'

const isLogin = false // isLogin에 따라서 home으로 갈지 login으로 갈지 결정됨

function App() {
  return (
    <BrowserRouter>
      {/* <Link to="/">Home</Link> */}
      {/* <Links></Links> */}
      <NavLinks></NavLinks>
      <Switch>
        <Route
          path="/login"
          render={() => (isLogin ? <Redirect to="/" /> : <Login />)}
        ></Route>
        <Route path="/profile/:id" component={Profile}></Route>
        <Route path="/profile" component={Profile}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/" exact component={Home}></Route>
        <Route component={NotFound}></Route>
      </Switch>
    </BrowserRouter>
  )
}

export default App

참고 https://slides.com/woongjae/react2021

CRA

Create React App $ npx create-react-app my-project

scripts 명령어

npm start

• react-scripts start
• starting the development server

  npm run build

• react-scripts build
• creating and optimized production build
• build 폴더에 결과물 생성
• 배포 : $ npm install server -g : $ serve -s build

  npm test

• react-scripts text
• jest를 통해 test code를 실행

  npm run eject

• rect-scripts eject

webpack

ESLint(linter)

• 잘못입력한 문법을 자동으로 수정

Prettier(formatter)

• 팀원간의 코딩 컨벤션을 맞추기 위해서 사용

ESLint & Prettier

ESlint는 보통 잘못입력한 문법을 자동으로 수정하기 위해서 사용된다.

Prettier는 팀원간의 코딩 컨벤션을 맞추기 위해서 사용된다.

즉, eslint는 포매팅 기능이 포함되어 있기 때문에 eslint와 prettier를 같이 사용하는 경우에는 충돌이 나게 된다. 따라서, eslint 포메팅 기능을 종료시키고 문법 기능만 사용하게 한다.

eslint-config-prettier은 eslint에서 prettier의 포매팅과 겹치는 것을 삭제하고 eslint-plugin-prettier는 eslint에서 prettier의 포메팅 기능을 추가한다.

출처: https://zereight.tistory.com/994 [Zereight's Blog]

// package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier" // 여기에 추가하여 충돌 방지
    ]
  },

Create React App 시작코드 이해하기

React Developer Tools

• 디버깅에 용이 확장프로그램 설치