sammy_bbang2.log

앱개발 2-2주차

Tue, 01 Mar 2022 11:14:19 GMT

flex import React from 'react'; import { StyleSheet, Text, View } from 'react-native';

export default function App() { return (

); }

export default function App() { return ( // 다른 컨테이너들을 포함하는 틀

  
  
    

    
    

    
    // 컨테이너투 안에 또 다른 이너(영역)생성. 따라서 화면에 나타날 때 컨테이너 투 영역안에서 이너들끼리 영역을 나눔을 의미.

); }

export default function App() { return (

); }

export default function App() { return (

); }

const styles = StyleSheet.create({ container: { flex:1 }, containerOne: { flex:1, backgroundColor:"red" }, containerTwo:{ flex:2, flexDirection:"row", backgroundColor:"yellow" }, innerOne: { flex:1, backgroundColor:"blue" }, innerTwo: { flex:4, justifyContent:"flex-start", //"flex-end"(하,우),"flex-start"(상,좌),"center" 컨텐트에서 자주쓰이는 값. //현재 flexDirection : "column" 기본값 상하 //좌우로 영역을 나누고 싶을 때는 "row" 사용, 이 경우 flex-end = 우 flex=start = 좌 backgroundColor:"orange"

}); 4. alignItems = flexDirection과 반대 방향으로 컨텐츠를 둠 flexDirection = "row" alignItems = "flex-start" //좌우로 영역을 나눴지만 컨텐츠는 상하로 움직임 영역에서 특정부분만 방향을 바꾸고 싶을 때 요긴하게 사용됨

import React from 'react'; import { StyleSheet, Text, View } from 'react-native';

export default function App() { return (

); }

앱개발 2주차

Tue, 01 Mar 2022 10:35:18 GMT

react native 공식사이트 사용하면 tag 자세히 알 수 있음.

ScrollView import React from 'react'; import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default function App() { return ( 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! ); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, textContainer: { height:100, borderColor:'#000', borderWidth:1, borderRadius:10, margin:10, }, textStyle: { textAlign:"center" } });

Button tag import React from 'react'; import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() { return ( 아래 버튼을 눌러주세요 {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. /}

Jquery,ajax

Wed, 05 Jan 2022 12:11:06 GMT

2주차 코딩 수업

Jquery jquery 는 javascript를 미리 작성해둔 것, 라이브러리.

1) input 박스의 값 가져오기

id값 입력 후 val()로 값을 가져옴. $('#id').val();

2) div 보이기/숨기기

보이기 (=css의 display : none;) $('#id').show();
숨기기 (=css의 display : block;) $('#id').hide();

3) 태그 내 텍스트 입력 (1) input box의 경우 $('#id').val('텍스트 입력하면 됨!');

(2) 다른 것들 - ex) 버튼 텍스트 $('#id').text('버튼 누르기');

4) 태그 내 html 입력

버튼 넣기 let temp_html = ; $('#id').append(temp_html);

5) 포스팅 박스 열기 버튼에 function 달기

//onclick 속성

(1) 클릭으로 포스팅 박스 여닫기

포스팅 박스에 id값 주기
포스팅 박스 제어 ex) id="post-box" function openclose() {
```
if($('#post-box').css('display')=='block') {
   $('#post-box').hide();
} else {
  $('#post-box').show);
}
```
}
- post box 시작부터 감추려면 css의 display: none;

(2) '포스팅박스 열기' 버튼의 글씨 바꾸기

포스팅 박스 열기 버튼에 id값 주기
버튼 텍스트 바꾸기 function openclose() { if($('#post-box').css('display')== 'block') {
```
  $('#post-box').hide();
  $('#post-box').text('포스팅박스 열기');
```
} else { $('#post-box').show(); $('#post-box').text('포스팅박스 닫기'); } }

6) Quiz1. (1) input-q1의 입력값 가져오기 (2) 입력칸 빈칸이면 경고메세지 아니면 입력값 띄우기

function q1() { let value = $('#input-q1').val(); if (value == '') { alert('입력하세요!'); } else { alert(value); } } Quiz2. (1) input-q2의 입력값 가져오기 (2) 값에 @가 있으면 도메인만 추출 ex. abc@defg.hij 중 defg만 추출해 alert 띄우기 (3) 이메일이 아닐 경우 '이메일이 아닙니다.' alert 띄우기

funtion q2() { let email = $('#input-q2').val(); if(email.includes('@')) { let domain = email.split('@')[1].split('.')[0]; alert(domain); } else { alert('이메일이 아닙니다!'); } } Quiz3. (1) input-q3의 값 가져오기 (2) 값을 이용해 names-q3에 붙일 태그 만들기. (3) 만들어둔 temp_html을 names-q3에 붙이고 내부 태그는 모두 비움

function q3() { let name = $('#input-q3').val(); if(name == '') { alert('이름을 입력하세요') return; } let temp_html =

${name}

; $('#names-q3').append(temp_html); } function q3_remove() { $('#names-q3').empty(); }

ajax 1) 기본 골격 $.ajax({ type: "GET", - GET 방식 요청 url: "url입력", data: {}, - 요청하면서 함께 줄 데이터 (GET 요청 시 비움) success: function(response) { - 서버에서 준 결과를 response 라는 변수에 담음 console.log(response) } })

GET, url 뒤에 주소를 붙여 데이터를 가짐 POST, data: {}에 넣어서 데이터를 가짐 ex) data: {param: 'value',param2:'value2'}, 2) 연습

3) 연습 2

4) 연습 3

5) 로딩 후 호출

$(ducument).ready(function() {
```
alert('로딩 끝!')
```
});

ex)

$(ducument).ready(function() {
```
get_rate();
```
});

function get_rate() {
```
$.ajax({
    type: "GET",
    url: "url입력",
    data: {},
    success: function (response) {
      let now_rate = response['rate'];
      $('#now_rate').text(now_rate);    
```
} }) }

2주차 여전히 배움의 즐거움 가득이다. 다음주도 그러길 바라며...코딩력 + 1

코딩의 시작.

Fri, 31 Dec 2021 08:04:23 GMT










스파르타코딩클럽 | 부트스트랩 연습하기

100년의 전통, 테일러 푸룬 가격: 4500원/개

부드럽게 맛있는 풍부한 자연 에너지로 변비 잘가! 건강 웰컴!

주문자 이름

수량

주소

전화번호

1주차 코딩 숙제를 마쳤다. 역시 뭐든 처음은 재미있다. :) 이 즐거움이 계속되길... Happy New Year!