스파르타 코딩 클럽 내일 배움단 - 앱개발 1주차

스파르타 코딩 클럽 내일 배움단 2일차 일지

'스파르타 코딩 클럽 내일 배움단'은 신청한 5주 분량의 강의를 2주만에 달성하는 것을 목표로 한다.

나는 퍼블리셔로 일했었다 보니 기초 지식도 어느정도 있는 상태라서 앱개발과 웹개발을 같이 신청해서 듣게 되었는데,

일반적인 동영상 강의와 다른 점은 '게더타운'이었다.

모각코(모여서각자코딩)처럼 여러 사람들이 온라인(메타버스)에서 모여서 각자의 공부를 한다.

솔직히 일면식도 없는 사람들이 온라인에 모이면 아무말도 안할 것 같았지만 조금씩 말을 하는 사람이 있어서 나름 재미도 있었다.

집에서 혼자 공부하니 집중이 하나도 안됬는데, 그래도 집단이 다같이 공부한다고 하니 조금 더 힘이 난다고 해야하나..?

생각보다 나에게는 효과가 있어서 놀랐다.

다만, 앱개발 1주차 과정의 경우에는 책으로 읽으면 엄청나게 길게 써있을 JavaScript 기초 지식들을 고작 2시간밖에 안되는 시간에 핵심만 딱딱 짚어서 설명해주는데, 'JavaScript 기초 지식도 없는 사람들은 따라가기 어렵지 않을까' (특히 2주라는 시간동안에는) 라는 생각이 문득 들었다.

그래도 나에게는 평소의 게으른 나에게 조금의 노력을 하게끔 해주는 스파르타 코딩 클럽이 나름대로 괜찮은 것 같다.

어차피 대학교를 가더라도 설명은 짧고 대부분은 과제로 공부하는게 대부분이라, 스스로 해결하는걸 유도하는 방식의 강의라서 나름 지금까지는 나에게 유익했다.

내일이면 웹개발 1주차를 다 마무리 하고 웹개발 1주차도 적을 예정.

학습 내용

1. 필수 프로그램 설치

2. JavaScript 기초 문법

3. JavaScript 기초 연습해보기

4. 앱개발에 자주 쓰이는 JavaScript

 

 

1. 필수 프로그램 설치

Visual Studio Code - https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Android Studio - https://developer.android.com/studio/

Download Android Studio and SDK tools  |  Android Developers

XCdoe (Mac) - https://apps.apple.com/kr/app/xcode/id497799835?mt=12

‎Xcode

NodeJS - https://nodejs.org/en/

Node.js

 

2. JavaScript 기초 문법

JavaScript는 웹 사이트 (웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어이다.

과거에는 웹에서만 사용 가능한 언어였지만, 이제는 앱 또는 게임도 만들 수 있는 다용도의 언어가 되었다.

 

JavaScript 개발자 도구 열기 - Windows : F12 / Mac : option + command + i

 

콘솔에 로그 출력

console.log("내용");

변수 선언

let num = 0;
num = '밥'

console.log(num)

사칙연산

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

const로 변수 선언

let value_box = '값'
value_box = '변경한 값';

console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.

const value_fix = '값';
value_fix = '변경한 값';

console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.

합을 구하는 함수 만들기

function get_sum(n) {
    let sum = 0
    for (let i = 0; i < n; i++) {
        sum += i;         // sum을 i만큼 증가시켜라. sum = sum + i 와 동일!
    }
    return sum
}

let result = get_sum(10); // return 결과인 sum이 result에 저장
console.log(result)       // 45를 출력

 

3. 앱개발에 자주 쓰이는 JavaScript

애로우 함수 (Arrow Function)

// 함수 기존 방식

let a = function() {
  console.log("function");
}
a();

// Arrow Function

let a = () => {
  console.log("arrow function");
}
a();

비구조 할당 방식

//객체 
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)

리터럴 (``)

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;

const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"
const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `

객체 리터럴

// [기존 방식]

var name = "스파르타";
var job = "developer";

var user = {
  name: name,
  job: job
}

console.log(user);
//{name: "스파르타", job: "developer"}

// [최신 방식]

var name = "스파르타";
var job = "developer";

var user = {
  name,
  job
}

console.log(user);
//{name: "스파르타", job: "developer"}

MAP

// 기존 코드

let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}

// MAP 사용 코드

let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})

//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6

JavaScript 파일 모듈화

// util.js

//times, plusTwo 함수를 외부로 내보낼 준비를 합니다.
export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}

// index.js

import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));

// export default

// in util.js
export default function times(x) {
  return x * x;
}
// in app.js
import k from './util.js';
console.log(k(4)); // returns 16

 

 

1주차 숙제 - 내가 작성한 코드 (틀릴 수도 있음)

배열에서 특정 원소 개수 구하기

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

let count = 0;
fruit_list.map((v) => {
	if (v == '딸기') {
		count += 1;
	}
})
console.log(count);

 

이메일 검사 함수 만들기

function checkEmail(email){
    const checkReg = /\w+\@\w+\.\w+/g
    if (checkReg.test(email))
        console.log("이메일이 맞습니다.")
    else
        console.log("이메일이 아닙니다.")
}

checkEmail('gunhee21@gmail.com') // 이메일이 맞습니다
checkEmail('gunhee21$gmail.com') // 이메일이 아닙니다.