프로젝트 마무리 시 수정 예정

저작자표시 비영리

'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글

3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과  (0) 2020.04.02
3. 배경 이미지에 그라데이션 넣기  (0) 2020.04.01
2. CSS 폰트 설정 , 기본설정, 전체 배경 이미지 넣기  (0) 2020.04.01

1. single_quotes

2. 문자열에 single_quotes 사용하는 방법

3. three_quotes

4. 주석

5. 문자열 길이 len()

6. 문자열 범위로 가져오기

7. 문자열을 다루기위한 파이썬 기본 메서드 들?

8. 문자열 format

 

문자열을 다루기위해 이정도 문법정도는 알고 있어야할것같아서 한번씩은 타이핑을 해보았다. 헿ㅎ

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# single_quotes 
single_quotes  = 'Hello World'
print(single_quotes)
 
#double_quotes
double_quotes = "It's "
print(double_quotes)
 
# three_quotes
three_quotes = """
    three_quotes example
"""
print(three_quotes)
 
#len
string_len = len(single_quotes)
print(string_len)
 
#string Index
index1 = single_quotes[0]
index2 = single_quotes[1]
index3 = single_quotes[2]
index4 = single_quotes[3]
index5 = single_quotes[4]
print(index1)
print(index2)
print(index3)
print(index4)
print(index5)
 
#range index
range1 = single_quotes[0:5]
range2 = single_quotes[:5]
range3 = single_quotes[6:]
print(range1)
print(range2)
print(range3)
 
#python method
print(single_quotes.count('Hello'))
print(single_quotes.find('World'))
print(single_quotes.replace('World','zzzz'))
print(single_quotes)
 
 
# 
greeting = 'Hello'
name = 'kingchobo'
result = greeting + ',' + name
print(result)
 
result1 = '{}, {}. Welcome!'.format(greeting,name)
print(result1)
 
result2 = f'{greeting},{name.upper()} good'
print(result2)
 
 
print(dir(name))
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs
저작자표시 비영리

'Python' 카테고리의 다른 글

1. 가상환경 사용하기  (0) 2018.08.07

1. 배열 Array

배열에는 String , Number, undefined ,null, boolean 다 들어갈 수 있다.

    var empty = [];
    var language = ["JAVA", "C#", "PYTHON"];
    var number = [1,2,3,4,5,6];
    var etc = [7,"string", undefined, null, false];

    console.log(empty);
    console.log(language);
    console.log(number);
    console.log(etc);

    console.log(language[0]);
    console.log(language[2]);

2. Object 

배열과 비슷하다. Object의 특징은 Key - Value

    // object
    var objempty = {};
    var myObj = {
        key1: "value1",
        key2: "value2",
        key3: "value3"
    };

    console.log(objempty);
    console.log(myObj);
    console.log(myObj.key1);

 

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Arrays and Objects</h1>
</body>
</html>
<script>
    var empty = [];
    var language = ["JAVA", "C#", "PYTHON"];
    var number = [1,2,3,4,5,6];
    var etc = [7,"string", undefined, null, false];

    console.log(empty);
    console.log(language);
    console.log(number);
    console.log(etc);

    console.log(language[0]);
    console.log(language[2]);

    // object
    var objempty = {};
    var myObj = {
        key1: "value1",
        key2: "value2",
        key3: "value3"
    };

    console.log(objempty);
    console.log(myObj);
    console.log(myObj.key1);
   
</script>

결과

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

1. 문자 타입 

문자 타입은 " " 따옴표로 묶어줍니다.

 var stringType = "문자타입 입니다.";
 console.log(stringType);
 var myString = "문자 더하기"+ "문자";
 console.log(myString);

 

2. 숫자타입

 

Integer >   32-bit number ( -2,147,483,648 ~ 2,147,483,647)

Long >  64-bit number (-9,223,372,036,854,775,808  ~ 9,223,372,036,854,775,807)

Float >   3.4E+/-38(7개의 자릿수)

Double >  1.7E+/-308(15개의 자릿수)

var numberType = 5;
console.log(numberType * numberType);

var integerType = 10;
var longType1 = 9223372036854775808;
var longType2 = 9223372036854775807;
var floatType = 3.5;
var doubleType = 9310141419482.22;

 

3. 기타 

var booleanType = true;
var notAnumberType = NaN;
var undefinedType;
var nullType = null;

 

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>
        JavaScript Variables
    </h1>
</body>
</html>
<script>
//문자타입
    var stringType = "문자타입 입니다.";
    console.log(stringType);
    var myString = "문자 더하기"+ "문자";
    console.log(myString);
//숫자타입
    var numberType = 5;
    console.log(numberType * numberType);

    var integerType = 10;
    var longType1 = 9223372036854775808;
    var longType2 = 9223372036854775807;
    var floatType = 3.5;
    var doubleType = 9310141419482.22;
    var booleanType = true;
    var notAnumberType = NaN;
    var undefinedType;
    var nullType = null;


    console.log(integerType);
    console.log(longType1);
    console.log(longType2);
    console.log(floatType);
    console.log(doubleType);
    console.log(booleanType);
    console.log(notAnumberType);
    console.log(definedType);
    console.log(nullType);

    


</script>

 

결과

 

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

1. alert() 사용하기

 

window.alert("alert 메시지~!!!");
alert("window. 을 빼고 함수를 호출해도 동일합니다.");

2. prompt() 사용하기

 

prompt("text", [default])

여기서 text는 메시지

[default]는 inputtype 이 text 이다.

var age = prompt("당신의 나이는 ??");
console.log("나의 나이는 :"+ age + "입니다.");

 

3.  confirm() 사용하기

보통 data를 삭제 또는 수정할 때 사용한다. 

 

var message = "정말로 삭제하시겠습니까??";
    result = window.confirm(message);
    console.log(result);
    if(result){
        console.log("삭제 되였습니다.");
    }else{
        console.log("취소 되었습니다.");
    }

경고 창에 예를 눌렀을 경우 true를 리턴한다.

 

아니오를 눌렀을 경우 false 를 리턴한다.

 

전체 소스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>alert 사용하기</title>
</head>
<body>
    <pre>
        1. alert() 사용하기
        2. prompt() 사용하기
        3. .confirm() 사용하기
    </pre>
</body>
</html>
<script>
    //1. alert() 사용하기
    window.alert("alert 메시지~!!!");
    alert("window. 을 빼고 함수를 호출해도 동일합니다.");

    //2. prompt() 사용하기
    var age = prompt("당신의 나이는 ??");
    console.log("나의 나이는 :"+ age + "입니다.");

    var message = "정말로 삭제하시겠습니까??";
    result = window.confirm(message);
    console.log(result);
    if(result){
        console.log("삭제 되였습니다.");
    }else{
        console.log("취소 되었습니다.");
    }
</script>
저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

1. html tag에 text 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaSciprt DOM API를 사용해보기</title>
</head>
<body>
<p id="dom"></p>    
</body>
</html>
<Script>
    document.getElementById('dom').textContent = " DOM는 Document Object Model 의 약자입니다.";
</Script>

 

2. Body 속성 안에 h1 tag를 추가하여 보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaSciprt DOM API를 사용해보기</title>
</head>
<body>
<p id="dom"></p>    
</body>
</html>
<Script>
    document.getElementById('dom').textContent = " DOM는 Document Object Model 의 약자입니다.";
    
    var element = document.createElement('h1');
    element.textContent = 'h1 element를 추가합니다. 어디에? body 안에';
    document.body.appendChild(element);
    
</Script>

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

크롬의 개발자 도구를 활용하여 JavaScript console.log() 사용법을 배워보겠습니다.

 

1. 기본

console.log("Hello World");

 

2. 변수를 활용하여 로그를 확인하기

//Logging variables

var hello = "안녕하세요";
console.log(hello);
var name = '왕초보';
var age = '15';
console.log("이름:", name, "나이:", age);

3. Placeholders 사용하기

//Placeholders

var greet = "안녕하세요~", who = "여러분~~" ;
console.log("%s, %s", greet, who);

4. Object 로깅

//Logging Objects

console.log({
    'Email':'aaaa@email.com',
    'Groups':{},
    'IsBoolean' :false,
    'IsNum':1
});

 

5. HTML elements 로깅

console.log(document.body);

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1
2
3
4
1. create-react-app <projectName>
2. cd projectName
3. yarn start
 
cs


프로젝트를 생성하자 


App.js


(당일로 조회하면 데이터가 없다 그래서 하루 전 데이터를 조회하기위해 getData -1)을 했다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from "react";
import "./App.css";
import Movie from "./Movie";
 
const key = "발급받은 키";
 
const getDate = new Date();
const yDate = getDate.getTime(1 * 24 * 60 * 60 * 1000);
getDate.setTime(yDate);
var yYear = getDate.getFullYear();
var yMonth = getDate.getMonth() + 1;
var yDay = getDate.getDate() - 1;
 
if (yMonth < 10) {
  yMonth = "0" + yMonth;
}
if (yDay < 10) {
  yDay = "0" + yDay;
}
const resultDate = yYear + "-" + yMonth + "-" + yDay;
 
const res = resultDate.slice(0, 10).replace(/-/g, "");
 
class App extends Component {
  state = {};
 
  componentDidMount() {
    this._getMovies();
  }
 
  _renderMovies = () => {
    const movies = this.state.movies.map((dailyBoxOfficeList, index) => {
      return (
        <Movie
          rank={dailyBoxOfficeList.rank}
          movieNm={dailyBoxOfficeList.movieNm}
          key={index}
        />
      );
    });
    return movies;
  };
 
  _getMovies = async () => {
    const movies = await this._callApi();
    this.setState({
      movies
    });
  };
 
  _callApi = () => {
    return fetch(
      `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${key}&targetDt=${res}&itemPerPage=10`
    )
      .then(a => a.json())
      .then(json => json.boxOfficeResult.dailyBoxOfficeList)
      .catch(err => console.log(err));
  };
 
  render() {
    const { movies } = this.state;
    return (
      <div className={movies ? "App" : "App-loading"}>
        {movies ? this._renderMovies() : "로딩중 ..."}
      </div>
    );
  }
}
 
export default App;
 
cs



Movie.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Movie.css";
 
function Movie({ rank, movieNm }) {
  return (
    <div className="Movie">
      <h1>
        {rank}위:{movieNm}
      </h1>
    </div>
  );
}
 
Movie.propTypes = {
  rank: PropTypes.string.isRequired,
  movieNm: PropTypes.string.isRequired
};
 
export default Movie;
 
cs



  {movies ? this._renderMovies() : "로딩중 ..."}


데이터가 있으면 보여주고 그렇지 않으면 로딩중이라고 처리를 한다.




순위랑 영화이름만 가져왔는데 추가로 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                "rnum": "1",
                "rank": "1",
                "rankInten": "0",
                "rankOldAndNew": "OLD",
                "movieCd": "20180290",
                "movieNm": "아쿠아맨",
                "openDt": "2018-12-19",
                "salesAmt": "3482471050",
                "salesShare": "33.8",
                "salesInten": "1154445750",
                "salesChange": "49.6",
                "salesAcc": "33936773431",
                "audiCnt": "384114",
                "audiInten": "96420",
                "audiChange": "33.5",
                "audiAcc": "3875972",
                "scrnCnt": "1158",
                "showCnt": "4594"
cs


더 많은 데이터를 제공하니 수정해서 연습해봐야겠다.~


그리고 극한직업? 재밌나보다 보러가야겠다~ 


저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

1. react API를 활용하여 영화 순위 보여주기  (0) 2019.02.06
13. React/리액트 array.map 이해하기  (0) 2018.11.04
12. React/리액트 (props) 복습하기  (0) 2018.11.03
11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27


우선 

http://www.kobis.or.kr/kobisopenapi/homepg/user/openLogin.do


키를 발급받아야한다. 회원가입 후 키를 발급받자






Postman으로 json데이터를 확인해보자 


발급받은 키를 넣고 조회날, 몇위까지 표시할것인지,(최대 10개)





일별 박스오피스 데이터를 JSON으로 잘 가져온다  ㅎㅎ


다음에는 리액트로 데이터를 가져와서 뿌려보자







저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

2. react API를 활용하여 영화 순위 보여주기  (2) 2019.02.06
13. React/리액트 array.map 이해하기  (0) 2018.11.04
12. React/리액트 (props) 복습하기  (0) 2018.11.03
11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27



리액트로 웹을 공부하다가 CSS에 막혀서 ㅠㅠ 상대적으로 쉬운? React Navtive를 먼저 하기로 결정했다.


State, Props는 동일하나 Style는 생각보다 간단했다 . 


https://facebook.github.io/react-native/docs/style 


Layout 파트가 많지 않아서 .. 해보세요 










App.js


1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import List from "./List";
import Input from "./TextInput";
//import { StyleSheet, Text, View } from "react-native";
 
const App = () => {
  //return <List />;
  return <Input />;
};
 
export default App;
 
cs



InputText.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  StyleSheet
} from "react-native";
 
class Inputs extends Component {
  state = {
    email: "",
    password: ""
  };
 
  handleEmail = text => {
    this.setState({ email: text });
  };
 
  handlePassword = text => {
    this.setState({ password: text });
  };
 
  login = (email, pass) => {
    alert("email :" + email + "password :" + pass);
  };
 
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          underlineColorAndroid="transparent"
          placeholder="Email"
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={this.handleEmail}
        />
        <TextInput
          style={styles.input}
          underlineColorAndroid="transparent"
          placeholder="Password"
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={this.handlePassword}
        />
        <TouchableOpacity
          style={styles.submitButton}
          onPress={() => this.login(this.state.email, this.state.password)}
        >
          <Text style={styles.submitButtonText}>Submit</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
 
export default Inputs;
 
const styles = StyleSheet.create({
  container: {
    paddingTop: 23
  },
  input: {
    margin: 15,
    height: 40,
    borderColor: "#7a42f4",
    borderWidth: 1
  },
  submitButton: {
    backgroundColor: "#7a42f4",
    padding: 10,
    margin: 15,
    height: 40
  },
  submitButtonText: {
    color: "white"
  }
});
 
cs


저작자표시 비영리

+ Recent posts

티스토리툴바