CodeHoon

안녕하세요 상훈입니다.

1. 깃 연결

$ git remote add origin "git주소입력해주세요"

2. 깃 연결 확인

$ git remote -v

2. 깃 연결 해제

$ git remote remove origin

-> origin으로 등록을 하셨으면 origin으로 작성하시고, 아니라면 해당되는 이름을 작성하시면 됩니다.

안녕하세요 상훈입니다.

React로 체크박스를 체크하면 타이머가 돌아가고, 체크박스를 해제하면 타이머가 멈추는 

체크박스를 이용한 스톱워치를 구현하려고합니다.

<div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor(props){
                super(props)
                this.state = {
                    seconds : 0
                }
                this.handleChange = this.handleChange.bind(this)

            }

            handleChange (event) {
                if(event.target.checked){
                    this.timerId = setInterval( () => {
                        this.setState({
                            seconds: this.state.seconds+1
                        })
                    }, 1000)
                }else{
                    clearInterval(this.timerId)
                }
            }

            render () {
                return (
                    <div>
                        <input type="checkbox" onChange={this.handleChange}/>   
                        <span>타이머활성화</span>
                        <h1>Timer : {this.state.seconds}</h1> 
                    </div>
                )
                
            }
            
            
        }
    
        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    
    </script>

이전까지는 1가지의 기능만 구현을 했었는데,

이번건 2가지의 기능(체크박스 -> 이벤트 -> setInterval())를 사용하였기 때문에 헷갈릴 수 있다.

안녕하세요 상훈입니다.

React로 체크박스 클릭시, text부분의 색을 변경하고 줄을 긋는 기능을 구현하려고합니다.

  <div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    checked : false
                }
                this.handleClick = this.handleClick.bind(this)
            }
            
            render () {
                const textStyle = {
                    color : this.state.checked ? 'blue' : 'red',
                    textDecoration : this.state.checked ? 'line-through' : 'none'
                }
                return (
                    <div>
                        <input type="checkbox" id="checkboxItem"
                            onClick = {this.handleClick} />    
                        <label for="checkboxItem">선택해주세요</label>
                        <h2 style={textStyle}>Text</h2>
                    </div>
                )
            }

            handleClick (event) {
                this.setState ({
                    checked : event.target.checked
                })
            }
        }

        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    
    </script>

render 함수 내의 상수를 선언해놓고 이를 삼항연산자( x ? y : z) 를 사용하여 해당 기능을 구현하였습니다.

안녕하세요 상훈입니다.

React.js 로 input 태그 내에 값을 입력하면 내용을 곧바로 h1 태그 내에 작성되게 하는 기능을 구현하겠습니다.

 <div id="root"></div>

    <script type="text/babel">
    class App extends React.Component {
        constructor (props){
            super(props)
            this.state = {
                text: '',
            }
            this.handleChange = this.handleChange.bind(this)
        }

        render () {
            return (
                <div>
                    <input type="text" 
                        value={this.state.text}
                        onChange={this.handleChange} />    
                    <h1>{this.state.text}</h1>
                </div>
            )
        }

        handleChange (event) {
            this.setState({
                text: event.target.value
            })
        }
    }

    const container = document.querySelector("#root")
    ReactDOM.render(<App />, container)

    </script>

지난번과 마찬가지로, 

root라는 id를 가진 div 태그를 생성하였습니다.

text = '' 로 놓고,  값이 변할때마다 handleChange() 함수를 호출하고, 그 값을 h1태그에 보여주는 형식입니다.

안녕하세요 상훈입니다.

React.js 로 버튼을 클릭하면 값이 1씩 증가되는 기능을 구현해보려고합니다.

<div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    count: 0
                }
                this.countUp = this.countUp.bind(this)
            }
            render () {
                return (
                    <div>
                        <h1>클릭한 횟수 : {this.state.count}</h1>
                        <button type="button" onClick={this.countUp}>클릭</button>
                    </div>
                    )
            }
    
            countUp (event) {
                this.setState({
                    count: this.state.count + 1
                })
            }
            
        }
        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)

        
    </script>

root라는 이름을 가진 div하나 넣어주시고,

나머지는 전부 script로 한번에 html 내에 넣었습니다. 

수정 21.09.01.10:11

에러해결 - ReactDOM.Component => React.Component

DOM이 아니라 그냥 React만 호출해야했다.

VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined

React.js 하던와중 갑자기 이런 에러가 발생

왠지모르겠음.. 

super()를 선언할때 인자로 null 혹은 function이 들어가야하는데 undefined가 들어갔다. 라는 뜻 같은데..

props에 해당하는 부분이 undefined 된건가?

흠.

코드는 대충 클릭이벤트 함수를 생성한것인데, 이렇다. 

<body>
    <div id="root"></div>

    <script type="text/babel">
        class App extends ReactDOM.Component {
            constructor (props) {
                super(props)
                this.state = {
                    count : 0
                }
                this.countUp = this.countUp.bind(this)
            }
            render () {
                return (
                    <div>
                        <h1>클릭한 횟수 : {this.state.count}</h1>
                        <button onClick={this.countUp}>클릭</button>
                    </div>
                    )
            }
    
            countUp (event) {
                this.setState({
                    count: this.state.count + 1
                })
            }
            
        }

        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)

        
    </script>


</body>

자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다.   (다음 포스팅은 한글 키보드..)

물론 cdn을 이용해서 기본 키보드에서 좀 더 꾸며진 모습을 확인할 수 있습니다.

head태그 내에 넣을 내용

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
</head>

body 태그 내에 작성할 내용

<body>
    <input class="input" placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
  
    <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
    <script src="src/index.js"></script>

    <script>
        const Keyboard = window.SimpleKeyboard.default;

        const myKeyboard = new Keyboard({
        onChange: input => onChange(input),
        onKeyPress: button => onKeyPress(button)
        });


        function onChange(input) {
        document.querySelector(".input").value = input;
        console.log("Input changed", input);
        }


        function onKeyPress(button) {
        console.log("Button pressed", button);
        }

    </script>
</body>

확인해보니 최소 px의 가로길이는 500px 로,

모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.

안녕하세요 상훈입니다.

코로나 19로 인해 언택트 시대로 변한 요즘. 가장 핫하게 뜬 플랫폼 중 하나는 Zoom(줌) 이라는 영상 통화 서비스입니다.

다 건너 뛰고, 줌 녹화에 대해 설명드리겠습니다.

줌 녹화는 매우 간단합니다.

1. 회의 중 - 화면 공유 옆의 "기록" 버튼을 클릭.

2. "recording in progress" 라는 알림음이 스피커로 출력되며 녹화가 시작됩니다.

4. 녹화를 종료하고 싶을때는 "중지" 버튼을 클릭.

5. "recording stoped" 라는 알림음이 스피커로 출력되며 녹화는 종료됩니다.

6. 녹화 내용 확인하는 방법

• C:\Users\사용자명\Documents\Zoom\

의 경로에 해당 내용이 존재하게 됩니다.

해당 내용의 회의명이 폴더명으로 지정되어 들어가시면 이렇게 리스트가 나옵니다.

"double_click_to_convert_01" : 용량이 큰 것을 더블클릭하시면,

이렇게 변환이 시작되고, 해당 내용이 완료되면 convert 파일이 mp4 파일로 저장됩니다.

추가적으로 채팅한 내용은 txt 파일로 저장되어집니다.