Junnnho

## 본 게시글은 강의를 들으면서 필요한 부분들을 개인적으로 정리한 것 입니다.

## 어떤 강의인지는 밝히지 않으며 저작권에 대한 문제가 있을시 삭제할테니 말씀해주세요!

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

CRA 4가지 명령어

start 명령어는 '개발모드'로 실행할 때 사용하는 것으로 최적화가 되어있지 않은 상태이기 때문에

'배포'할 때 사용하면 안된다.

start로 시작하게 되면 default는 HTTP로 실행된다.

HTTPS는 HTTP에 보안 등의 여러가지 기능이 추가된 업데이트 http이다.

https로 실행하고 싶을 때는

window 기준 set HTTPS=true && npm start

macos 기준 HTTPS=true npm start

를 사용한다.

build 명령어는 배포할 때 사용된다.

빌드를 하게 되면 정적 파일이 생성된다.

npm run build를 이용해서 빌드를 하면 아래와 같은 정적 파일이 생긴다.

서버에서는 생성된 build 폴더 안에 있는 내용들을 정적 파일로 서비스하면 된다.

'별도로 서버에 애플리케이션을 실행하지 않기 때문에 SSR로 동작할 수 없는 것이다'

로컬에서 정적 파일을 서비스 하기 위해서는 serve 패키지를 사용한다.

(설치는 npm install serve!)

(실행은 npx serve -s build) <= build 폴더에 있는 정적 파일을 서비스한다.

test는 아직 내가 사용하기에 먼 내용이라서 패스..

eject도 마찬가지긴 하지만..

eject는 react-script를 사용하지 않고 모든 설정 파일을 추출하는 명령어이다.

cra를 기반으로 직접 개발환경을 구축하고 싶을 때 사용하는 것으로,

추출하지 않으면 cra 기능이 추가됬을 때 react-scripts 버전만 올리면 되는데, 

추출을 하면 수동으로 설정 파일을 수정해야 하는 단점이 있다.

polyfill

polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드이다.

예를 들면 padStart 같은 문자열 함수를 사용할 때, 이를 지원할 수 있는 브라우저가 있고 아닌 브라우저가 있다.

지원되지 않는 브라우저는 대표적으로 IE가 있다.

polyfill을 추가하기 위해서는 대표적으로 core-js를 많이 사용한다.

github에는 core-js 관리 페이지가 있는데,

이 중에서 polyfill을 추가하길 원하는 대상을 찾아서 index.js 에 import 하면 지원 가능해진다.

** cra에는 core-js를 자동으로 패키지에 포함시키기 때문에 설치할 필요가 없다 **

환경변수

개발, 테스트 또는 배포 환경 별로 다른 값을 적용할 때 사용한다.

전달된 환경변수는 js 내 코드에서 process.env.변수이름 의 형식으로 사용한다.

환경변수를 커맨드라인에서 직접 지정할 수 있는데,

react에서는 항상 아래와 같은 규칙을 따른다.

REACT_APP_*

ex) REACT_APP_KEY

** 리액트에는 기본적으로 NODE_ENV 환경변수가 지정되어 있는데

** 개발모드인 start 로 실행하면 NODE_ENV 는 development가 되고

** 배포모드인 build로 실행하면 NODE_ENV 는 production이 된다.

** 환경변수를 .env 파일로 직접 관리할 수 있는데

** .env.development 파일에 환경변수를 지정하면 개발모드를 사용할 때 변수 사용이 가능하고

** .env.production 파일에 환경변수를 지정하면 배포모드를 사용할 때 변수 사용이 가능하다

programmers.co.kr/learn/courses/30/lessons/43236

이분탐색 l4 문제인 징검다리 입니다.

이분탐색에 해당하는 문제를 풀 때는

이분탐색의 구간에 해당하는 것이 무엇인지, 이를 판단하는 조건은 무엇인지 파악하는 것이 중요합니다.

문제에서 주어졌듯이 이분탐색의 '구간'에 해당하는 것, 즉 원하는 값은

각 돌 사이의 간격이며 이 간격들 중의 최솟값을 최대로 하는 것입니다.

이를 판단하는 조건은 n개의 돌을 제거하는 것!

여기서 아래와 같이 생각해볼 수 있습니다.

나열된 여러 개의 돌 중에서 n개를 제거하면서 돌 사이 간격의 최솟값을 최대로 하고 싶다

=> n개의 돌을 제거한 이분탐색의 결과값인 '간격'을 알고 싶다

=> 임의의 '간격'을 기준으로 돌을 제거할 수 있을까

=> 임의의 '간격'보다 작은 '간격'에 해당하는 돌을 제거하면서 몆개를 제거할 수 있는지 확인한다

==> 만약 제거한 돌의 갯수가 n개보다 작다면?

===> 이것은 괜찮다. 일단 모든 돌의 간격을 '간격' 이상으로 유지했다는 뜻이니까

         n개가 될 수 있게 더 제거해도 된다는 의미가 된다.

==> 만약 제거한 돌의 갯수가 n개보다 크다면?

====> 이것은 안된다. 모든 돌의 간격을 원하는 '간격' 기준만큼 유지할 수 없다는 뜻이니까

=> 제거한 돌의 갯수가 n개이하라면 모든 돌의 간격은 원하는 기준값인 '간격' 보다 크거나 같아진다.

=> 최솟값의 최댓값을 찾기 위해 제거한 돌의 갯수가 n개 이하라면 기준값을 늘려보고

=> 제거한 돌의 갯수가 n개를 초과한다면 기준값을 줄여본다.

#include <string>
#include <vector>
#include <algorithm>
using namespace std;

bool canDelete(vector<int> v, int mid, int n){
    int deleteRock = 0;
    int leftIdx = 0;
    int rightIdx = 1;
    while(rightIdx < v.size()){
        if(deleteRock > n) break;
        int dist = v[rightIdx] - v[leftIdx];
        if(dist < mid){
            deleteRock++;
            rightIdx++;
        }
        else{
            leftIdx = rightIdx++;
        }
    }
    
    if(deleteRock <= n) return true;
    else return false;
}

int solution(int distance, vector<int> rocks, int n) {
    rocks.push_back(0);
    rocks.push_back(distance);
    sort(rocks.begin(), rocks.end());
    
    int left = 1, right = 1000000000, mid;
    int answer = left;
    
    while(left<=right){
        mid = (left+right)/2;
        if(canDelete(rocks, mid, n)) {
            left = mid+1;
            answer = max(answer, mid);
        }else right = mid-1;
    }
    
    return answer;
}

programmers.co.kr/learn/courses/30/lessons/43238

level3 입국심사 문제입니다.

이분탐색을 이용하는 대표적인 문제라길래 풀어봤습니다.

이분탐색은 기본적으로 어떤 값을 기준으로 이분탐색을 할 것인지 파악하는게 중요합니다.

그걸 찾기가 정말 어려운데,

이번 문제는 애초에 '시간의 최솟값을 반환' 이라는 말에서 시간을 기준으로 이분탐색을 진행하라는게 주어져있습니다.

이분탐색의 조건을 찾았으면, 이 탐색간의 범위를 지정하는 기준이 무엇인지 파악해야하는데,

이 문제에서는 '현재 시간'으로 모든 사람들을 심사할 수 있는지 파악해야 합니다.

간단하게, 모든 심사위원의 심사시간을 '현재 시간'으로 나누어서 심사할 수 있는 모든 사람을 찾은 후에,

주어진 n과 비교해서 탐색을 진행해주시면 됩니다.

이분탐색 연습하기에는 좋은 문제인 것 같습니다.

#include <string>
#include <vector>

using namespace std;
using ll = long long;

long long solution(int n, vector<int> times) {
    long long answer = 0;
    long long s = 1;
    long long e = (ll)100000000*n;
    long long m;
    while(s<=e){
        m = (s+e)/2;
        ll person = 0;
        for(auto time : times) person += m/time;
        
        if(person >= n) e = m-1, answer = m;
        else s = m+1;
    }
    
    return answer;
}

programmers.co.kr/learn/courses/30/lessons/17682

2018 카카오 블라인드에서 출제된 다트 게임입니다.

문제에서 요구하는대로 '구현'할 수 있는지 묻는 문제였습니다.

요구하는 그대로 따라가주시면 됩니다.

#include <string>
#include <vector>
#include <cmath>
using namespace std;

int solution(string str) {
    vector<int> v;
    int answer = 0;
    
    for(int i = 0; i<str.size(); i+=2){
        int num = str[i]-'0';
        if (str[i + 1] == '0') {
            num = 10; i++;
        }
        char ch = str[i+1];
        int p = ch == 'S' ? 1 : (ch == 'D' ? 2 : 3);
        num = pow(num, p);
        
        if(i+2 < str.size() && (str[i+2] == '*' || str[i+2] == '#')){
            if(str[i+2] == '*') {
                num *= 2;
                if(v.size()>0) v[v.size()-1] *= 2;
            }
            else if(str[i+2] == '#'){
                num *= -1;
            }
            i++;
        }
        v.push_back(num);
    }
    
    for(int i = 0; i<v.size(); i++) answer += v[i];
    
    return answer;
}