[12/30 부트캠프] 강의: 리액트 입문 1·2주차, ①UX집중반: 쏘카 문제정의 과제

 

내일배움캠프 D-48 (11주차)

 

📌To Do List

* 강의①: 리액트 입문 1주차  ✅

* 강의②: 리액트 입문 2주차 🤔

* UX집중반: ①문제정의  ✅

 

 

 

01 강의: 리액트 입문 1주차

✏️const, let

＊const: 값이 변경되지 않는 변수

- 안정성, 버그예방

- 블록스코프

 

var,let = 재할당가능

 

＊const와 let 고르는 팁

- 변수 선언해야할 때 const먼저! 그리고 재할당 필요할 때 let사용.

 

 

 

✏️객체

- 기본 구성: key - value

- 객체를 리액트에서는 주로 'state'로 많이 불림.

- state에 값 저장된 건 불변성의 법칙 적용(불변성 유지)  → 기본값 변경 불가

const user = {
 name: "르탄이",
 age: 30,
 isAdmin: true,
 printHello: ()=> console.log("hello"),   
};

user.email = "jay@gmail.com"; //추가
user.age = 31; //수정
delete user.isAdmin; //삭제

console.log(user);

이런식으로 추가,수정,삭제를 해도 기본값이 변하는 게 아님.

 

- 점 표기법: 객체에 접근할 수 있음

ex. user.name -> user라는 변수에서 name이라는 key가 무엇인지 호출.

 

- 괄호 표기법: 이거는 무슨 말인지는 잘은 모르겠다.

ex. const attribute = "name"

console.log(user[attribute]);

 

Object.keys(): 키값 / Object.values(): 값

entries: 큰 배열 안에 작은 배열 조합 만듦. ex. [[banana, apple]]

assign: 변수 key 추가

 

 

 

 

✏️배열

＊ push: 요소 추가

＊ pop: 배열의 마지막 요소 삭제 후 결과값으로 반환.

 

＊콜백함수?

함수 내에서 매개변수 함수를 실행하는 것. 변수, 값 전달이 아닌, 함수 자체를 전달한다.

 

tip:

짝수만들기

num % 2 === 0;

num이라는 배열을 2로 나눈 값이 0이다. => 짝수를 뜻함.

 

 

＊map: map은 기존 배열값-> 새로운 함수를 적용시킨 값을 배열해서 반환.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(function (num) {
  return num * num;
  console.log(squared);

예를들어 이런 값이 있고, 콘솔값이 출력되면

[1,4,9,16,25]라는 배열이 출력될 것.

 

 

＊filter메서드: 배열의 요소를 순회하면서 원하는 조건에따라 필터링하는 함수.

const number1 = [1, 2, 3, 4, 5];
const evenNumbers = number1.filter(function (num1) {
  return num1 % 2 === 0;
});

console.log(evenNumbers);

-> 짝수인 경우 %2 === 0 이라고 표현.

 

 

＊reduce: 누적된 값에 일반값에 대한 함수식이 적용돼서 결과값이 생기는것.

const numbers2 = [1, 2, 3, 4, 5];
numbers2.reduce(function (누적된값, 일반값) {
  console.log("--------");
  console.log(누적된값); //최초에 누적된 값은 첫번째 값인 1로 세팅이 된다.
  console.log(일반값); //일반값은 2번째 요소에 들어간다.
  return 누적된값 + 일반값;
});

 

이런 결과값 나오는데 원리는 1+2=3. 3+3=6 이런식.
1
2
----
3
3
----
6
4
----
10
5

 

 

＊sort: 알파벳 순서로 배열 정리.

-특징: 원본 배열 바꿈.불변성의 법칙에 따라 변경된 값이 수정되지 않을 것 같지만 sort함수가 제대로 적용돼서 출력된다.

원본값을 바꿔버림!!

sort는 어떤 경우에 사용될지 생각해봤는데 사용자/유저의 데이터를 받고나서 sort의 기능을 이용해서 배열을 보기 좋게 정렬할 수 있겠다고 생각했다. 예를들어 회원가입같은 것도 이 기능을 사용할 수 있을 것 같다!

const numbers3 = [40, 100, 1, 5, 25];
numbers3.sort();

sort를 썼으니까 잘 정렬되겠지? X. 잘 정렬하기 위해서는 함수를 넣어야한다.

만약에 이렇게 했을 때 값은

[1,100,25,40,5] 이렇게 출력됨.

이유는 컴퓨터가 '문자열'로 자동 배열됐기 때문인데 (우린 이거를 '유니코드에 따라 정렬한다'라고 표현함)

맨 앞 숫자만 보고 비교한 것.

 

const numbers4 = [40, 100, 1, 5, 25];
numbers3.sort(function (a, b) {
    return a - b;
});
console.log(numbers3);

a-b: 오름차순 정렬

b-a: 내림차순 정렬

 

 

 

✏️ 화살표함수

함수를 표현하는 방식도 다양하다.

우리가 흔히 아는 것.

① function에 이름을 붙이고 + 매개변수 +중괄호 넣어서 마무리.

ex. function A(매개변수) {};

② 혹은 선언 후 그 값에 function기능을 할당하는 것.

ex. const A = function (매개변수){};

 

혹은? 화살표를 통해서도 가능하다.

③ const A = (매개변수) => {};

- function을 그냥 생략해버려도된다. 대신 화살표 추가~!

const add = (a,b) => {return a + b};
// 이 값이 더 짧게 바뀔 수 있다. return과 중괄호 생략!

const add = (a,b) => a+b; //최최종. 한 줄로 줄일 수 있음.

중괄호를 넣을 땐 무조건 return 넣기.

 

 

 

✏️ 조건 연산자 = 삼항 연산자

const score = 85;

let grade = "";

 

if (score >=80) {

grade = "A";

} else {

grade = "B";

}

이런식으로 표현하게 될 경우 멀티 라인이라고 해서

줄을 너무 많이 차지해서 불편하다.

이것도 줄일 수 있다! 뭘로? 삼항 연산자로.

개인적으로 삼항연산자 공식이 이해하기 쉬워서 재밌게 느껴지는 공식이라고 생각한다.

 

const score = 85;

const grade = score >=  80 ? "A" : "B";

 

score가 80보다 크거나 같으면 (참일경우) "A" , 아니면 "B".

 

라는 뜻이다. 5개나 쌓였던 줄을 1줄로 간단하게 줄일 수 있었다.

 

 

✏️단축평가

- 논리연산자 활용 (||, &&, ?., ??)

1) 논리합 연산자 (||): truthy, falsy. truthy한 값이 아니면 ||기준 오른쪽 값 출력.

  const textLength = preference.textLength || 50; //preference.textLength라는 값이 truthy한 값이 아니라면 오른쪽을 평가한다.
  // textLength의 값이 0이므로 falsy한 값. 따라서 50의 결과값이 나온다.

 

2) 논리곱 연산자 (&&): &기준으로 좌변의 값이 truthy할 때, 우변의 결과값이 나온다는 뜻.

- loggedIn && console.log("환영합니다", userName + "님!");

 

 

3)  Null 병합 연산자 (?, ??)

console.log(userLocation ? userLocation : "없는위치"); 
console.log(userLocation ?? "없는위치"); //좌변이 맞을 경우 좌변 그대로. 아닐경우 "없는 위치"라는 문자열 결과값 나오게해줘

 

 

 

02 강의: 리액트 입문 2주차

✏️React JS

거의 대부분이 함수형 컴포넌트로 사용되고있다고함.

그렇군.. 그래서 우리가 함수를 더 적극적으로 배워야하는 것 같다.

마음으론 이해하지만 머리가 이해를 못한다..ㅋㅋ 많이 해보는 것이 답!

 

＊프레임워크

- 강의에선 개발자가 기능 구현에만 집중할수있도록 모든 프로그래밍적 재원을 지원하는 '기술의 조합'이라고 한다.

네?ㅋㅋㅋ 무슨 말인지 이해가 안돼서 여러가지 정의를 찾아봤다.

 

(AI) 복잡한 문제를 해결하기 위해 집중할 수 있도록 도와주는 기본 구조

 

(캐스팅엔 사이트) 빵가게에 비유해서 설명해준 점이 인상깊었다.

프레임워크는 빵가게하고도 같다고 설명한다.

빵가게를 창업하기 위해 가게 임대, 빵집 이름 짓기, 홍보, 메뉴판제작, 인테리어 등을 만들어야하는데

혼자서 하는 방법 보다 더 빠른 방법은 가맹점을 내는 것이라고 한다.

가맹점은 가게 입점하는 법부터 운영법까지 한꺼번에 제공해주는데 이런게 바로 프레임 워크다.

이처럼 목적에 필요한 것을 고민할 필요 없이 이용할 수 있도록 일괄로 가져다 쓰도록 만들어 놓은 '구조화된 틀'이다.

 

https://sharonprogress.tistory.com/169

- 클래스 묶음, 뼈대, 라이브러리 등의 형태로 제공- 목적: 개발 시간을 줄이고 재사용성 증가- 다양한 플러그인, 도구 지원- 개발자가 따라야하는 가이드 제공- 쉬운 유지보수- 단점: 의존성(너무 의존하면 스스로 개발하기 어려워짐), 습득할 때 오랜 시간이 걸림

 

아 이렇게 보니 더욱 이해가 빨라진 것 같다.

그니까 앱/웹사이트를 만들 때 필요한 기본 구조를 쉽고 빠르게 가져오는 느낌..이라고 이해해야할 것 같다.

 

- Spring Framework (자바 프레임워크)
- Vue.js, Angular.js 등이 있다.

 

-프로그램이 필요한 것을 개발자한테 요청

 

 

＊라이브러리

- 공통기능의 모듈화가 이루어진 프로그램의 집합ㅎ..이것도 마찬가지로 뜻을 찾아보기로했다.

 

https://sharonprogress.tistory.com/169

-개발자가 만든 클래스의 나열

- 다른 프로그램에서도 사용 가능

- 프레임워크 = 집, 라이브러리 = 가구

 

- 개발자가 필요한 것 호출할 때 사용

 

- react.js ==> react는 왜 라이브러리인가?

- react-router-dom

- redux

 

↓

프레임워크로서의 제공 기능의 부족

 

 

<특징>

1. SPA (Single Page Application): 하나의 페이지 = html로 이뤄진 애플리케이션.

⇔MPA(Multi Page Application)2. 인기가 많다. (npm trends: node pakage manager - 노드 환경에서 돌아가는 수많은 패키지)리액트를 사용을 많이 한다고함.3. 웹+앱+VR 활용갑자기 궁금해서 찾아본 네이티브앱 vs 하이브리드앱*React Native app: 모바일 앱 개발을 위해 설계된 프레임워크. 모바일 기기에 최적화.*하이브리드앱: 웹+앱 (콘텐츠=웹기반 제작, 겉모습 =앱)4. 리액트 커뮤니티가 막강하다!

 

 

 

 

 

03 UX집중반: 쏘카 문제정의 과제

✏️문제정의 발제

* 문제정의: 문제의 핵심 발견하기!!!

고객중심의 관점.

문제가 어떤 사용자의 문제인지. 표면적인문제? 근본적인 문제인지?

그게 왜 문제인지 수집한 데이터 바탕으로 근거를  설명해야한다.

프로덕트에서 고객한테 제공하고자하는 핵심가치와 관련해서 설명하기.

대상,니즈,필요가치. who, what, why!?

 

 

*어피니티 다이어그램: UT,사용자 심층 인터뷰

 

부정,긍정으로 나눈다던지.

사용자의 행동 기준.

고객 여정이 될 수도 있고.

일상에서의 행동이 기준될 수 있다.

이 문제점을 묶을 때 어떤 기준으로 나눌 수 있을 지 논의하고 잡아야한다.

 

*페르소나

전체 사용자 여정을 탐험하는 사람으로 만들 수 있고

발견한 문제를 해결할때 페르소나의 니즈가 해결할 수 있을까? 참고할 수 있다.

리서치 후 만들수도있지만 프로젝트 개선하면서 프로덕트쓰는 대표적인 사람속성이랑 연결지어서 정교하게 페르소나를 참고할 수 있다.

-> 주관적인 생각X.사용자 인터뷰 설문조사 등으로 얻은 데이터.

 

 

*5whys

- 우리가 발견한게 진짜 문제인가? 파보면 진짜 문제가 있지않을까?

- 꼭 5번 물어보는 것X. 깊이 파본다!의 개념이맞다. 5개를 다 물어봐도 문제가 안나올수도있고 혹은 5개 안물어봐도 나올수있다.

 

*사용자 여정지도

- UT진행 과정중 유저의 감정변화 관찰하기~!

 

==> 다같이 활용해볼 수도 있고 이 방법 중 선택해서 가능하다.

 

 

핵심문제 정의할때 생각의 흐름을 어떤식으로 할건지 연습한다고 생각하면된다.

 

 

 

인터뷰했는지, 데스크리서치했는지 사용한 방법론 중에서 어떤 문제점이 가장 많이 발생했는지.

사용자들에게 행동하며 패턴이 관찰됐는지. 그 패턴이 얼마나 반복했는지?

패턴보이게 하려면 최소 몇명한테 테스트해야한다.

얼마나 반복적으로, 공통적으로 겪고있는지 파악해야한다.

 

일부 사람이 한 행동, 여러 사람이 한 행동이 있을것. 개별적이라고 보는지 보편적이라고 보는지. 보편적이라면 어떤점이 보편적이라고 생각하는지 논의하는 과정이 필요하다.

 

 

사용자의 감정변화 -> 표정, 감정변화 관찰했을 것.

일일이 분석해서 쓰는게 좋다.

사용자마자 표현하는 단어가 다를 것. 

가장 부정적/긍정적인 단어/표현이 무엇인지

어떤 문제가 사용자에게 감정의변화롞자ㅣ 이어졌는지.

===> 사용자 여정지도로 표현 가능.

감정의 변화를 살펴봐야한다. 

 

 

발견한 문제, 사용자 목표와의 관계★ ->분석돼야한다.

최종목표 달성하는 과정에서 어떤 문제가 발생되고있는지?

어떤 이유에서 사용자한테 불편을 주는지

근거가 부족한 상태에서 가정하는 것보다는 근거가 명확하게 수집돼있어서 그 근거 기반으로 논의하면 좋다.

 

  

비즈니스의 목표. ★

이 문제들이 비즈니스 목표에 어떤 부정적 영향을 끼치는지? 수익, 회원수 등.

이 문제들이 핵심 사용자 층에 어떤 영향 미칠지?

 

사용자는 어떤 환경에 처했는지? 

 

수정하고나서 다른 문제가 생기지 않을지 우려사항 논의하면 좋을것.

 

이걸 해결할 때 비즈니스 목표, 사용자 목표와 얼마나 연관있는지?

 

문제를 정의하는 과정에서 어떤 생각을 했는지. 문제를 발견하는것도 좋지만!

이런 생각을 했고 이런과정으로 진행했고 그 과정으로 이런걸 얻었다.

1. 우리가 생각한것.

2. 진행했던 과정

3. 얻은 것

 

 

 

✏️문제정의 시작

이번에도 역시 시간이 많이 부족했다.

원래 UT도 같이 진행해보고싶었는데 또 못해서 너무 아쉬웠다.

이번 기회에 할 수 있는 줄 알았는데

시간 부족 이슈와, 쏘카 서비스를 우리가 직접 사용할 수 있는 시간이 없다는 것.

시간적으로 물리적으로 할 수 없어서 아쉬운대로 설문조사만 진행하기로 했다.

 

얼마 남지 않는 시간동안 어떤 것을 어떻게 문제로 정의할 지 논의를 했는데

그 과정이 쉽지는 않았다.

 

처음에 의견을 낸 건 문제 정의를 하기 전, 서비스에 대한 파악이 있어야한다는 의견이었다.

서비스에 대한 기능 파악을 못 하고있는 상황에서 설문조사와 UT를 할 수 있을 지 걱정되었다.

물론 이걸 다 할 시간이 없는 것도 우려사항이었다.

우리는 먼저 설문조사를 진행하고 문제정의를 한 이후에 유저플로우를 파악해보자는 방향으로 논의되었다.

 

두 번째 논의는 장표 구성이었다.

시간이 없어서 장표에 먼저 구성을 그려놓고 그대로 스텝을 밟아가자는 아이디어였다.

먼저 첫 번째 장표는 다이어그램을 불편사항 별로 묶어서 만들자고 하셨고

두 번째 장표는 사용자 여정맵을 그려보자하셨다.

 

이 첫번째 다이어그램 장표를 만들 때 어떤 것을 기준으로 삼을지 고민하다가

설문조사까지 합한 다이어그램을 넣어도 괜찮겠다는 생각이 들어서 의견을 제시했다.

근데 조사한 voc의 다이어그램을 통해 먼저 문제를 정의한다는 의견에서

어떤식으로 정의를 한다는 것인지 정확하게 파악되지 않아

이 부분에 대한 논의를 좀 오래 진행했던 것 같다ㅋㅋㅋ

 

나만 이해 못한걸수동?

 

결국엔 모두가 생각했던 voc에대한 데이터를 토대로 다이어그램을 만들기로 했다.

 

문제의 본질에 대한 논의가 아니라는 생각에 마음이 조급해지긴했는데

이런 과정들이 다 의미있는 시간이라고 생각했다.

그 안에서 우리가 "어떻게 사고하는지"에 포커스를 맞춰서

이번 과제를 마무리해봐야겠다.

 

 

어떻게 하는게 좋을지 계속 근거를 찾아가는 과정이 될 것 같다!!

 

 

 

 

 

마무리하며...

이번 집중반이 끝나고 본격 프로젝트를 들어가면 UT, 설문조사 등 제대로 사용자 조사를 진행하고싶고

a/b테스트도 진행하는 과정을 다 거칠것이다..!!!!!

 

그리고 정말 최고의 팀을 만들 것을 다시 다짐하며...^-^

월욜이라 집중이 좀 많이 안됐지만 오늘도 고생했다!!