[12/24 부트캠프] 강의: 자바스크립트 문법 종합반 1주차, UX집중반: 쏘카 문제발견 과제

 

내일배움캠프 D-45 (10주차)

 

📌To Do List

* 강의: 자바스크립트 문법 종합반 1주차  ✅🤔

* UX집중반: ①문제발견 - 쏘카 데스크리서치 ✅🤔❌

 

 

01 강의: 자바스크립트 문법 종합반 1주차

✏️형 변환

brother 변환이 아니라 형태를 변환한다는 뜻이다.

암시적/명시적 변환이 있다.

 

암시적 변환

let result1 = 1 + "2";

숫자1과 문자열 2를 더하는 값이었을 때 암시적으로 숫자 1을 문자열로 바껴서 입력된다.

더하기 였을땐 이렇지만 그 외의 연산자의 경우(-,÷,×) 숫자가 됨.

 

명시적 변환

- Boolean

개인적으로 불리언 이부분이 가장 헷갈렸다.

어떤 건 true, 어떤 건 false인 게 헷갈림 ㅠㅠ

console.log(Boolean(0));

불리언 우측 괄호 안에 0, null, " "(빈 문자열), undefined, Nan 등 입력되지 않은 값이 들어가면

false가 나온다.

 

반면 값이 있는 걸 넣으면 true가 나오는데

상수값, "문자열",{ } 이 들어가면 true가 나온다. 여기서 중괄호(객체)는 비어도 true의 값으로 나온다고 한다 ㅎ 어이없다!!! 비었는데 왜 나오는건지!!! 그냥 그렇단다...ㅎ

 

문자열이나 숫자로 형태를 바꿀 수도 있다.

//값이 안들어간 것을 적어도 모두 문자열로 변환된다.
string(true);
string(null);

null의 경우에도 터미널로 출력해보니 모두 string형태로 출력된 것을 확인할 수 있었다.

어떤 값들이 들어가도 string()의 경우 모두 문자열로 출력된다. 숫자는 number()를 적어주면 된다.

 

 

 

✏️연산자

 

더하기 등호 / 빼기 등호 연산자 중에 +=, -=의 정체가 궁금했는데

예를 들어 x = 5라고 선언했다고 치자.

x += 5; 는 곧 x = x + 5를 뜻한다. 따라서 10이라는 결과값이 나온다.

 

나누고 나머지의 값은 %로 계산할 수도 있다.

 

 

＊비교 연산자 (true, false 반환)

① 1 === 1 : 숫자 1과 숫자 1이 같니? true.

- 모두 true일 경우에만!!! true가 나온다. 하나라도 false일 경우 false!!!

② 1 !== 1 : 숫자 1과 숫자 1이 다르니? false

 

 

＊ 작다, 크다, 같다 연산자 (<, >, <=, >=)

③ 논리곱 연산자(&&): 모두 true일 경우만 true 반환

console.log(true && true); // true
console.log(true && false); // false

④ 논리합 연산자(||): 하나라도 true면 true반환

console.log(false || true); // true
console.log(false || false); // false

 

⑤ 논리 부정 연산자 (!) : 값을 반대로!

console.log(!true); ---> 반대로 값을 바꾸었으니 false가 된다.

 

 

＊ 삼항 연산자

let c = 10;
let result = c > 5 ? "크다" : "작다";

1항 : c > 5

2항 : "크다"

3항 : "작다"

총 3항이기때문.

- 해석: c가 5보다 큰가요? true면 "크다"를, false면 "작다"를 반환합니다.

 

 

 

✏️함수

기본적인 함수 모습

function () {}
function () {}
function () {}

 

여러번 쓰라해서 여러번 써봤다ㅎ

함수는 기본적으로 인풋을 넣고 아웃풋을 내는 재활용 가능한 기능이라고 하는데

A를 했을 때 B의 값이 도출된다. 이런식으로 이해했다.

 

여기서 심화!

// 두 개의 숫자 입력 받아서 덧셈을 한 후 내보내는 함수
function add(x, y) {
 let result; // 간단한 문제일 경우 아래 return문만 있어도 가능하니 이건 삭제 가능
 return x + y;
}

add: 함수 이름

( ) : 매개변수

return : 출력 (출력은 항상 return)

 

 

✏️화살표 함수, 스코프

함수를 저렇게 표현할 수도 있지만 화살표로도 표현 가능하다.

//방법 1
let a = (x,y) => {
return x+y;
};

//방법 2: 한줄로도 가능. 변수가 1개일 경우 괄호 생략 가능
let b = x => x
//중괄호가 생략됐음을 알 수 있다.
//근데 저장키 누르면 let b = (x) => x 이런식으로 괄호가 다시 추가되더라~!

 

＊스코프: 범위

ex. 함수 선언 전, 선언한 변수 A값이 있다면 전체범위에 적용되지만

함수 내부에서만 선언될 경우 전역변수, 지역변수(범위가 좁아지는)라고 한다.

 

 

 

 

✏️조건문

if, else if, switch가 있다.

 

① if : true/false를 측정할 수 있는 값이 들어가야한다!

let x = 40
if (x > 0) {
console.log('양수입니다');
}

let y = -500;
if (y > 0) {
console.log('양수입니다');
}
//이 경우 y값이 0보다 작으므로 로직이 출력되지 않는다.

 

 

② else if : true면 앞에 있는 로직 실행, false면 뒤에 로직 실행

x = 10;
if (x >= 0) {
console.log('일치합니다');
} else {
console.log('불일치합니다');
}

이런 로직을 만들어봤다.

x가 0보다 크거나 같으면 '일치합니다'

그게 아니라면 '불일치합니다'

 

＊심화: if - else if - else문

x = 50;

if (x = 0) {
console.log('0점입니다.');
} else if (x > 0) {
console.log('발전했군요!');
} else {
console.log('저런, 분발하세요!');
}

여기서 출력될 값은 '발전했군요!'에 해당한다.

아마 내 예상으로는 중간에 계속 else if조건문을 몇번이고 쓸 수 있고 마지막을 else로 끝내면 될 것 같다.

 

점수x는 50점이다.

만약 점수x가 0점이라면 '0점입니다'

만약 점수x가 0보다 크다면 '발전했군요!'

만약 그것도 아니라면 '저런, 분발하세요!'

 

③ switch: 변수의 값에 따라 여러 케이스 중 한가지 선택하는 것!

처음에 이 개념이 어려웠는데 한 번 하고나니 무슨 말인지 이해할 수 있었다.

let cosmetics = "페리페라";

switch (cosmetics) {
	case "페리페라":
		console.log('No.1 틴트');
		break;
	case "롬앤":
		console.log('쿨톤 색조 잘뽑는 브랜드');
   		break;
	case "바닐라코":
       	 	console.log('질감 + 퀄리티 너무 예쁨');
        	break;
	default:
    		console.log('어떤 브랜드를 찾아보시겠어요?');
        	break;
}

 

cosmetic이라는 이름을 가진 switch의 다양한 케이스 중 하나를 선택할 건데,

만약 선언한 변수의 값이 "페리페라"라면 'No.1틴트'

"롬앤"이라면 '쿨톤 색조 잘 뽑는 브랜드'

"바닐라코"라면 '질감+퀄리티 너무 예쁨'

이 중에 없다면 '어떤 브랜드를 찾아보시겠어요?'

 

break; 는 멈추는 역할을 한다. 꼭 넣어줄 것!

 

 

 

 

후... 심호흡 하고 다시 가보자~!~!~!

 

 

 

 

조건부 중첩

let score = 65;
let study = "나머지 공부";

if (score < 70) {
//   console.log("탈락입니다");
  if (study === "나머지 공부") {
    console.log("탈락입니다. 나머지 공부가 필요합니다!");
  } else {
    console.log("탈락입니다. 재시험 등록을 해주세요.");
  }
} else {
  console.log("축하드립니다! 합격입니다!");
}

시험 탈락에 관하 코딩을 넣었다.

if문 안에 if문이 또 들어갈 수가 있다.

 

 

 

 

✏️객체

객체는 변수에 value를 넣는 것보다 좀 더 크기가 크다고 했다.

그래서 여기서 사용되는 함수를 '메소드'라고 칭한다.

즉, 메소드는 객체 안에 있는 함수라고 생각하면 된다.

 

객체를 생성하고, 복사하는 등의 메소드를 사용할 수 있는데

 

 

① Object: 객체 안에 있는 key를 불러올 수 있다.

let person = {
	name: 홍길동,
   	age: 18,
   	gender: "남자",
};
//person이라는 변수에 "객체"를 할당했다.

let keys = Object.keys(person);

 

② values: 키 값(value)을 가져올 수 있다.

[홍길동, 30, 남자] 이렇게 불러오게 됨.

let values = Object.values(person);

 

③ entries : key와 value 묶어서 출력.

let entries = Object.entries(person);

 

④ assign: 객체 복사

let newPerson = {};
Object.assign(newPerson, person, { gender: "여자" }); //어디에다가, 무엇을 복사할래?
console.log("newPerson =>", newPerson);
// 중괄호에 바꾸고싶은 key와 value를 넣으면 복사된 출력값이 지정한대로 바뀐다.

 

 

 

 

✏️배열

기본적으로 배열에 접근하기 위해서는 대괄호를 써줘야한다.

console.log(fruits[1]);
//여기서 1는 첫번째 순서. 즉 실질적으로 보이는 인덱스의 2번째 값이 출력됨

 

배열은 특히 메서드가 왜이렇게 많은건지 모르겠다 ^^

그만큼 배열을 쓰는 상황이 많기 때문이라고 생각했다...ㅎ 

 

 

①push: 인덱스 추가

let colors = ["white", "black"];
basket.push("orange");

출력값: [ 'white', 'black', 'orange']

 

②pop: 삭제하는거,배열의 마지막 요소가 팝! 하고 없어진다

let colors = ["white", "black", "pink"];
fruits2.pop();

출력값: [ 'white', 'black']

③shift : 첫번째 요소 삭제

let colors = ["white", "black", "pink"];
fruits2.shift();

출력값: [ ' black ', 'pink']

 

④unshift : 맨 앞에 추가

let colors = ["white", "black", "pink"];
fruits2.unshift("yellow");

출력값: [  ' yellow', ' white', ' black ', 'pink']

⑤splice : 위치 지정해서 요소 추가

(몇번째에서 수정할건지, 몇 개 지울건지, 무엇을 넣을건지)

let colors = ["white", "black", "pink"];
colors.splice(1, 2, "blue");

출력값: [  ' yellow', ' blue' , 'pink']

⑥ forEach: 각각의 값을 가져온다.

let colors = [white, black, brown, pink, pink];

colors.forEach(function (item) {
  console.log("item임 =>", item);
});

출력값:

item임 => white

item임 => black

item임 => brown

item임 => pink 

item임 => pink 

 

⑦  map : 무조건 return이 있어야한다

- 항상 원본 배열의 길이만큼이 return된다.

⑧ filter : return에 "조건"이 들어간다. 조건에 해당하는 것만 출력.
⑨ find: return에 조건에 맞는 건 여러가지가 있겠지만 그 중 첫번째 값만 가져온다.

어우 힘들어서 캡처....

 

 

 

 

 

 

03 UX집중반: 쏘카

✏️다른 조 대박이야

저 말 듣자마자 잘 정리하는거 모르겠다 하고

바로 양>질 태세로 전환했다.

 

 

쏘카의 핵심 기능을 뽑고

쏘카 자체에서 출시한 서비스도 정말 많았다..

그래서 그 기능까지 다 적으려고했는데

시간이 너무 부족했다ㅠㅠ

크리스마스여서 하루를 못하기 때문에 하루치를 더 해야하는데 그래서 오늘 더 스퍼트를 냈다.

 

 

모빌리티 브랜드 인지도와 카셰어링 브랜드에서 떠오르는 브랜드는 쏘카고

운전면허 보유자의 4명 중 1명은 쏘카의 회원이라는것!

이 서비스를 둘러보기위해 쏘카를 설치했는데

나도 이미 이 앱의 회원이었다. 운전도 안하는 내가 쏘카를 언제 설치했었지..?

 

아무튼 가입자 수와 매출액이 점점 늘고있고 앞으로도 늘 것이라는 전망이다.

 

그래서 이 앱을 누가 쓰는 것일까?
사용자 분석 결과, 이동을 필요로 하는 국내 운전면허 소비자를 핵심 타겟으로 삼았다.

또한 경제력을 갖춘 30대가 주이용층이며 40이상 신규회원도 계속 증가중이라고 한다.

목적으로는 일상에서 마트가거나 하는 이동에 쓰였지만, 최근엔 주로 여행이나 출장(업무)으로 그 목적이 확대되었다고한다.

 

 

 

 

마무리하며...

아 피곤해