[앱개발 종합반] 1주차 개발일지

 

1. 배운 내용

자바스크립트 기본 문법과 ES6에 새로 추가된 문법 중에 앱 개발할 때 자주 사용하는 문법

 

 

2. 새로 알게 된 내용

1) 비구조 할당 방식(destructuring assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)

let blog = {
	owner : "jj",
    url: "dev-jejecrunch.tistory.com",
    getPost() {
    	console.log("ES6 문법 정리");
    }
};

* 기존 방식

let owner = blog.owner
let getPost = blog.getPost()

* ES6 방식

let { owner, getPost } = blog;

해당 딕셔너리의 키 값과 변수명이 동일해야 한다.

* 함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기

let blogFunction = ({owner, url, getPost}) => {
	console.log(owner)
    console.log(url)
    console.log(getPost())
}

 

2) 리터럴 문법

const message = `줄바꿈도 마음대로
사용이 가능합니다.`

* 출력결과

줄바꿈도 마음대로
사용이 가능합니다.

 

3) 객체 리터럴

중괄호를 이용해서 객체를 생성한다. {} 안에 아무것도 적지 않은 경우는 빈 객체가 생성되며, 중괄호 안에 "프로퍼티 이름":"프로퍼티 값" 형태로 표기하면, 해당 프로퍼티가 추가된 객체를 생성할 수 있다.

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

* 기존 방식

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

* ES6 방식

var user = {
	name,
    job
}

 

4) map

모든 배열의 값에 function을 실행하는 메소드이다.

* 사용방법

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) });

 

5) 자바스크립트 파일의 모듈화 (module system)

function 앞에 export를 붙여서 다른 파일에서도 해당 함수를 import하여 사용할 수 있게 하는 기능. export default도 있지만 한 파일 안에 하나만 지정할 수 있다. import할 때 중괄호 생략할 수 있다. 별칭도 지정할 수 있다.

* lib.js 파일 내부에 아래 함수가 있다고 가정하자.

export function a(){
	console.log("a");
}

export default function b(){
	console.log("b");
}

* App.js에서 불러올 때는

import { a } from './lib';
import b from './lib';
// import { a as printA } from './lib';

a();
b();
// printA();

 

 

3. 숙제 답으로 제출한 코드

1) 배열에서 특정 원소 갯수 구하기 (map 함수 활용할 것)

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

let count = 0;

fruit_list.map((value, i)=>{
    if(value == '딸기') count++;
});

console.log(count);

2) 이메일 판별하기

* indexOf를 이용하여 판별하기

function checkEmail(email){
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
var result;

result=email.indexOf('@')>-1? "이메일이 맞습니다.":"이메일이 아닙니다.";

console.log(result);
}

checkEmail('gunhee21@gmail.com')
checkEmail('gunhee21#gmail.com')

* 정규표현식 이용하여 판별하기

function checkEmail(email){
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
var result;

result=regExp.test(email)? "이메일이 맞습니다.":"이메일이 아닙니다.";

console.log(result);
}

checkEmail('gunhee21@gmail.com')
checkEmail('gunhee21#gmail.com')

 

 

4. 느낀 점

서비스는 영 최악이지만 강의 질은 좋다고 생각한다. 자바스크립트 기본 문법 시간이었는데 생각보다 깊은 내용까지 살짝 알려줘서 좋았음. 그리고 강의자료 주어지는 거, 개발일지 쓰게 하는 거는 좋다. 강의자료의 경우는 노션을 이용해서 깔끔했음. 그렇지만 강의 동영상 버퍼링이 심하고, 트래픽이 일정 시간이 되면 많아져서 해당 시간을 피해서 들어야 할 듯. 예를 들면 진도사우르스, 스터디 직전에 들을 수 있는 시간대를 말한다. 일요일 오전 11시부터 오후 14시대까지. 이런 부분에 대해 미리 말해줘야지 전혀 쓸데 없는 정보들을 제공한다. 예를 들면 지금 몇명이랑 같이 듣고 있는지, 누가 다음 강의로 넘어갔는지 ... 전혀 궁금하지 않고 알고 싶지 않다. 사용자 입장에서 어떤 정보가 필요한지 정확히 모르고 있는 것 같다. 내가 원하는 정보는 1. 어느 시간대에는 사람이 몰리니까 그때는 강의 듣는 걸 피해달라고 할 것, 2. 매 주차 수업은 일요일 11시 59분까지 들어야 한다든지 => 이런 부분들은 오티 자료에 넣어야 하는 게 맞는 거다. 말로 얘기하는 게 아니라. 오티도 1시간이나 해서 별로였음.