스파르타 1주차 - [왕초보] 나만의 수익성 앱

이제 국비 보조금으로 스파르타 시작함. 

 

41,000이 계좌에서 빠져나갔으나, 완주하면 환급도 해 준다고 했으니, 한번 열심히 달려볼 생각이다. 

 

<김건희 튜터 - 남자 >

안드로이드, iOS 각각 개발 하는 건 네이티브 앱! 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱!

하지만 여기서는 크로스 플랫폼 앱 개발! - 개발자들이 많이 사용하는 기술이라고 합니다. 

레퍼런스가 많다. (찾아볼 곳이 많다.) 페북에서 만든 것.

 

 

 

1주차 - 3 Javascript 기초문법 -1 (1일 - 2022 Dec 12)

1. F12 키를 이용해서 콘솔 부분을 열 수 있다. 

2. 자바 기초문법을 배운다. - Java 는 웹에서 움직이는 그림을 구현할 때 필요한 것. 하지만 범용으로 사용하게 되었다. 

 

3. - 1. 변수는 let 이나 var 둘다 써도 상관없다. (swift랑 좀 다른 듯)

     let num = 20

     num = 'Bob' 

// 한번 let 을 사용해서 변수를 정하면 다음에 변수를 넣을 때는 그냥 바로 넣으면 된다. 

 

let first = 'Bob'

let last = 'Lee' 

first +last // 'BobLee'

 

//변수는 사칙연산이 가능하다. 

 

    - 2. 변하면 안되는 값에는 const를 쓴다.  let 처럼 재할당이 되지 않는다. 

 

👉 코드상에서 쉽게 변하면 안되는 고정 값을 관리할 땐 const로 선언 하면 좋겠죠?

 

 

1주차 - 4 Javascript 기초 문법 -2 (2일 - 2022 Dec 13)

1. 리스트(배열)와 딕셔너리(객체)를 배운다

    자바 문법에서  리스트는 [ ] 로 정의한다. 예를 들면, 

let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력

 

  리스트는 계란바구니와 같이 순서가 있다. 

 

 

2. 딕셔너리 = 전화번호부와 같다. 중괄호로 선언.

   딕셔너리는 중괄호로 설정한다

   let a dict = { } 

   키 값을 설정해 주는 역할을 한다. 

let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

   names.push(new_name) // .push는 새로운 값을 입력하는 방법이다. 

 

 

*리스트와 딕셔너리의 조합

names = [
  { name: "bob", age: 20 },
  { name: "carry", age: 38 },
];
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = { name: "john", age: 7 };
names.push(new_name);
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

두번째 대괄호는 키값을 말한다. 

 

*딕셔너리의 또 다른 표현

let b_dict = {'name':'Bob','age':21}
//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다.
b_dict['name']
b_dict.name
// 둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.

 

* 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

 

//앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다.
//대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요.
//변수만을 사용한 모습은 다음과 같습니다.

let customer_1_name = "김스파";
let customer_1_phone = "010-1234-1234";
let customer_2_name = "박르탄";
let customer_2_phone = "010-4321-4321";

//...(알아보기 힘듭니다.)
//👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.

let customer_1 = { name: "김스파", phone: "010-1234-1234" };
let customer_2 = { name: "박르탄", phone: "010-4321-4321" };

//👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
let customer = [
  { name: "김스파", phone: "010-1234-1234" },
  { name: "박르탄", phone: "010-4321-4321" },
];

//✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도
//.push 함수를 이용해 간단하게 대응할 수 있습니다.

 

* API - 외부데이터를 가지고 올 때 사용하는 개념

RealtimeCityAir :  => 키 값이라고 한다. 

 

 

 

06. Javascript 기초 문법 - 3 

5) Javascript 기본제공함수란? 

     1> 나눗셈의 나머지 구하는 함수 '%'

let a = 20
let b = 7
a % b = 6


let c = 21
let d = 7 
c/d = 3

     2> 모든 알파멧을 대문자로 바꾸고 싶은 경우   -   myname.toUpperCase() 

let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB

     

3> 특정 문자로 문자열을 나누고 싶은 경우 1   - myemail.split('@')          

let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

 

 

     4> 특정 문자로 나누고 싶은 경우 2     

 let txt = '서울시-마포구-망원동'
 let names = txt.split('-'); // ['서울시','마포구','망원동'

 

 

 

  5> 특정 문자로 합치고 싶은 경우            

   let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

 

 

 

6) 함수
  1> 함수를 선언해야 한다. 

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
//return 으로 값을 돌려주는, 뱉는 구조로 변수에 값을 전달 할 수도 있습니다.
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
let result = sum(10,10)
console.log(result) // 20

 

2. 또 다른 함수 선언 방식

let a = function(){
console.log("리터럴 방식 이라고 합니다");
}
a()

    * 구글에 검색하면 javascript 함수 도구를 검색할 수 있다. 

 

07. Javascript 기초 문법 - 4

 7) 조건문   if 가 들어간다. 

     and 조건은 &&

     or    조건은 ||
      

 

8) 반복문 ...   for 들어감. 반복문에서는 ; 로 구분하는게 중요하다. 

 for (let i = 0; i < 100; i++) {                            //여기서 i++는 i를 하나씩 더한다는 표현
               console.log(i);
               }

 

 

 

sum += i      //(주석)   'sum = sum + i'    란 말과 같다. sum에다가 sum을 더해라. 

 

문제1) 딸기는 몇개일까? 

문제2)서울시 미세먼지 지수가 40보다 작은 구 찾기!

 

 

12) 함축적인 자바스크립트

14) 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당;    코드를 줄이기 위해

//객체 - 딕셔너리에는 함수도 포함될 수 있음
let blog = {
  owner : "noah",
  url : "noahlogs.tistory.com",
  getPost() {
  console.log("ES6 문법 정리");
}
};


//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;

//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)


//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
console.log(owner)
console.log(url)
console.log(getPost())
}
blogFunction(blog)

 

 

 

 

15) 자바스크립트 안에서 줄바꿈을 자유롭게! - 리터럴 

  백틱(`) 문자열 안에서 변수를 마음대로 쓸수있고 줄바꿈도 마음대로 할 수 있는 편리한 기능

 

 

 

16) 딕셔너리를 짧게 만들어보기! - 객체 리터럴 

  지난 시간에 함수에서 비구조할당 방식으로 전달된 딕셔너리 값 꺼내기 할때, 

  키랑 변수가 같을 때는 한번씩만 쓰면 된다. 

  - key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며,

   그 변수값이 대입됩니다.

 

 

17) map 함수 -반복문의 또 다른 방식 - 주로 앱개발에 쓰인다. 

리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다

map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를
알려줍니다. 전체를 알려주는 함수이다. 

 

let numbers = [1,2,3,4,5,6,7];
 numbers.map((value,i) => {
  console.log(value,i)
})

// 아래와 같다는 점! 눈치 채셨나요? 
// 화살표 함수 

 numbers.map(function(value,i) {
  console.log(value,i)
   })
   
   
//1을 치면 0 출력
//2을 치면 1 출력
//3을 치면 2 출력
//4을 치면 3 출력
//5을 치면 4 출력
//6을 치면 5 출력
//7을 치면 6 출력

 

 

12. 1주차 끝&숙제 설명

map 함수를 사용해서  딸기 개수 구하기 . 

   let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
   let count = 0;
       fruit_list.map(f)=> {

       if (f == '딸기'  ) count += 1

                   })
console.log(count);

 

----------------------------------

숙제 2: filter 함수로 '포도'만 들어 있는 podo_list 리스트 구현해보기

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let podo_list = fruit_list.filter((f)=>{
               return f == '포도'
 })
console.log(podo_list)

 

 

이런 식으로 할 수 있다. 

 

다른 분 웹페이지에서 나온 글을 읽다가 갑자기 공감이 가서 옮겨 놓는다. 

" 교육은 창의성을 기르고 비판적 사고력을 기르는 교육이 절실하다 느끼고 있고 커머스는 더 투명하고 심플해져야 된다고 생각하며 소셜은 지금같이 단순히 우리의 시간과 관심을 뺏는 sns보다는 실제 의미있는 연결을 만들어 내는 sns가 있어야 된다고 생각한다. " -

 

1 주차 마침.