같은 숫자는 싫어

function solution(arr)
{
    let result = []
    
    result.push(arr[0])
    for (let i = 1; i<arr.length; i++) {
        if (arr[i-1] != arr[i]) {
            result.push(arr[i])
        }
    }
    
    
    
    return result;
}

가운데 글자 가져오기

function solution(s) {
    
    if (s.length%2 != 0) {
        console.log(s[parseInt(s.length/2)])
        return s[parseInt(s.length/2)]
    } else {
        // console.log('짝수')
        console.log(s.slice(parseInt(s.length/2),2))
        return s.substr((parseInt(s.length/2)-1) , 2)
    }
    
}

2016년

function solution(a, b) {
    
    let date = new Date(2016, a-1, b)
    console.log(date) // 2016-05-23T15:00:00.000Z
    console.log(date.toString().slice(0,3).toUpperCase()) // TUE
    
    
    return date.toString().slice(0,3).toUpperCase();
}

포켓몬

function solution(nums) {
    
    let max = (nums.length) / 2
    
    let temp = new Set(nums)
    let result = [...temp]

    return (result.length>max) ? max:result.length
    
}

다른 사람은 나처럼 고생하지 않길...

문제점

• 오픈 소스를 가지고 구동을 해도 VNC 기능이 정상 동작하지 않음

원인

• Web Socket 서버를 구축하지 않아서 VNC 기능을 활용할 수 없었음

해결 과정

1. 업무용 PC TightVNC 서버를 설치
2. websocketify nodejs 를 설치 ( 프록시 용도 )
3. TightVNC 내 서비스 설정
   30-1. Log 설정
   3-2. Loopback 설정
4. React-vnc기동 -접속 확인

서버 설정

참고 사이트 및 출처

• https://github.com/novnc/websockify
• https://github.com/roerohan/react-vnc
• https://drt0927.tistory.com/6
  • 해당사이트 자세하게 정리되어 있음

React v18 >>> React v17

package.json

v18

"react": "^18.0.0"
"react-dom": "^18.0.0"

v17

"react": "^17.0.2"
"react-dom": "^17.0.2"

index.js

v18

import ReactDOM from 'react-dom/client'

v17

import ReactDOM from 'react-dom';

index.js

v18

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

v17

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

현재 프로젝트 버전 정보

"cra-template": "^1.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"web-vitals": "^2.1.4"

React란?

• Facebook에서 제공해주는 오픈 소스
• SPA 방식으로 프론트엔드를 개발할 수 있음

동작방식

• 서버에 접근할 경우에 React Web App 모두 내려 받음
• 필요에 따라 '/' 경로에 맞는 컴포넌트를 보여주는 방식 (기존의 방식과 다르게 URL 따라 매번 서버에 요청X)

REACT ROUTER 설치 

• 가장 대표적인 라우팅 패키지
• npm i react-router-dom (해당 명령어로 설치 가능)

Tabout을 설치하면 자동으로 완성되는 괄호 or 따옴표 밖으로 [Tab] 클릭으로 이동 가능 편리 기능 (VSC에서 다운로드)