Wecode 부트캠프에 오고 이제 한달이 흘렀다.
그동안 많은 것을 배웠는데, 첫 한달의 결과로 instargram clone coding을 진행 하였다. 첫 주에 배운 html, css 그리고 둘째 주에 javascript를 배우고, 그것을 바탕으로 clone coding을 하였다. 그리고 4주차에 이것을 react로 옮기는 작업을 하였다. 그리고 미니 프로젝트를 진행하였는데, 백엔드에게 API를 받아서, 로그인, 회원가입 작업을 구현 하였다.

내가 만든 첫 페이지 이기 때문에 어려움도 많았지만, 그 과정에서 배운게 너무나도 많았다.

로그인페이지

코드는 다음과 같다.

render(){
           return( 
           <div className = "Login">
                <div className = "logo_img"><img alt ="Logo_img" src = {Logo}/></div>
                <div className = "input_wrap">
                    <input onChange = {this.inputValueId} onKeyUp ={this.buttonColorChange} type="text" className= "textId" placeholder="전화번호, 사용자 이름 또는 이메일"/>
                    <input onChange = {this.inputValuePw} onKeyUp ={this.buttonColorChange} type="password" className="password" placeholder="비밀번호"/>
                </div>
                <button className ={this.state.btnColor ? 'buttonColor' : 'buttonChangeColor'} onClick = {this.handleClickEvent} >로그인</button>
                {/* <button className ={`buttonColor ${this.state.btnColor ? ' ' : 'buttonChangeColor'}`}>로그인</button> */}
                <div className = 'mid'>
                    <div className = 'mid-line-01'></div>
                    <div className ='or'><strong>또는</strong></div>
                    <div className = 'mid-line-02'></div>
                </div>
                <div className = "login-facebook"> facebook으로 로그인</div>
                <div className = "addText">비밀번호를 잊으셨나요?</div>
                <div className="secondBox">
                    <div className ="secondBox-signup-first">계정이 없으신가요? <strong>가입하기</strong></div>
                 
                </div>
            </div>
        )
    }