wecode +15 (9/1)

배운 것/개발한 것/정리한 것

 - 오전 : code Kata Day2 (완료)

1. 문제

* 문제 reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.   x: 숫자 return: 뒤집어진 숫자를 반환!

2. 내 코드

const reverse = x => {
  let result = parseInt(x.toString().split('').reverse().join(''));
  return (x>=0) ? result : result * -1
}

* result 변수에 숫자 -> string -> 배열로 변환 -> reverse() -> 다시 string -> 숫자로 변환한 결과값 저장

** 삼항연산자 사용하여 x의 양수/음수 여부에 따라 결과값에 + 또는 - 처리

 

 - 오후

  1) 세션 1 : React routing, SASS(SCSS) - 내일 블로그 정리

  2) Westagram 레이아웃 React로 구현 (완료)

   - public 폴더 내의 image import : 그냥 img src='/images/sss.png'의 형태로 지정하여 해결

  3) 코드 자체 리뷰 : Westagram 로그인에서 자식 class 내의 요소를 클릭시 부모 요소 내의 라우팅 기능 사용하여 메뉴 이동하는 기능 개발

   1. 내 코드

 

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "../../styles/reset.scss";
import "./Login.scss";

class Login extends Component {
  constructor() {
    super();
    this.state = {};
    this.goToMain = this.goToMain.bind(this);
  }

  goToMain() {
    this.props.history.push("/main");
  }

  render() {
    return (
      <div className="Login">
        <LoginImage />
        <LoginPanel goToMain={this.goToMain} />
      </div>
    );
  }
}

class LoginImage extends Component {
  render() {
    return (
      <div className="LoginImage">
        <img alt="loginSlideImage1" src="/images/loginimage1.jpg" />
        <img alt="loginSlideImage2" src="/images/loginimage2.jpg" />
        <img alt="loginSlideImage3" src="/images/loginImage3.jpg" />
      </div>
    );
  }
}

class LoginPanel extends Component {
  constructor() {
    super();
    this.state = {};
    this.goToMain = this.goToMain.bind(this);
  }

  goToMain() {
    this.props.goToMain(this);
  }

  render() {
    return (
      <section className="LoginPanel">
        <section className="login">
          <div className="logo">
            <img alt="instagramLogo" src="/images/logo_text.png" />
          </div>
          <form className="loginForm">
            <div className="userInput">
              <input
                className="userId"
                type="text"
                placeholder="전화번호, 사용자 이름 또는 이메일"
              />
              <input
                className="userPassword"
                type="password"
                placeholder="비밀번호"
              />
            </div>
            <button className="login_btn" onClick={this.goToMain}>
              로그인
            </button>
          </form>
          <div className="passwordFind">
            <p>비밀번호를 잊으셨나요?</p>
          </div>
        </section>
        <section className="createAccount">
          <p>
            Don't have an account? <span>Sign Up</span>
          </p>
        </section>
        <section className="getApp">
          <p>Get the app.</p>
          <div className="appIcon">
            <img alt="app download icon" src="/images/appIOS.png" />
            <img alt="app download icon2" src="/images/appAndroid.png" />
          </div>
        </section>
      </section>
    );
  }
}

export default withRouter(Login);

* 참조 : 링크

2. 코드 리뷰 (+ 새로 사용한 코드들)

1) constructor

2) super()

3) props and state

4) 멘토님 질문

 

내일 할 일

react.js 공부

1. westagram -> react 구현 (계속)

 - 라우팅 (완료)

 - 메인 파트 scss 작업 완료하기

2. 오전 : 코드 카타 Day 1 리뷰 및 Day 2 같이 풀기

3. React 블로깅 완료 (JSX, props/state 예습)