[01/02 부트캠프] 강의: 리액트 입문 2주차, ③UX집중반: 쏘카 문제정의 과제

 

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

 

📌To Do List

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

* 리더 면담

* UX집중반: ③문제정의  🤔

 

 

 

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

✏️리액트 만드는법: ①CRA

강의에서 강사님이 갑자기 앱을 통해 터미널을 여셔서

저거 어떻게 하셨지..? 윈도우에서는 어떻게 해야할 지 헤맸다.

내가 그냥 인터넷 찾는 것 보다는 튜터님을 방문해서 물어보는 게 더 빠를 것 같아서

그냥 튜터님 방문해서 물어봤다.

 

윈도우의 경우 파일 검색창에 cmd라고 입력하면 

이렇게 명령 프롬프트가 뜬다.

눌렀을때 터미널이 실행되고 혹은 vsc에서도 가능하다.

둘이 다른 기능이냐고 했을 때 대답은 No! 똑같은 기능인데

터미널을 밖에서 실행하냐, 아니면 vsc안에서 실행하냐의 차이였다.

 

그래서 그냥 편한방식대로 vsc안의 터미널을 이용해보기로 했다.

 

터미널에

yarn create react-app my-first-react-app

뒷부분은 원하는 이름을 넣으면 된다.

 

그러면 터미널에서 뭔가가 설치가 되고

최종적으로 이런 명령어를 추천해줌.

*cd(change directory): 폴더 이동하는 명령어

 

* ls: 현재 파일에 어떤 파일이 있는지 실행하는명령어

 

yarn start 명령어를 줬는데 에러가 떠버렸다.

에러가 왜 발생하지..? 저번에 튜터님한테 물어봤을 때 해결했던 것 같은데 또 까먹음 이슈.

그래서 일단 저 문장을 긁고 구글링 고고.

저렇게 에러가 뜨는 이유는 절차대로 하지 않았기 때문이다.

해당 파일로 이동을 해야하는데 해당 폴더에 파일이 없었기 때문!

그래서 파일을 이동시켜주는 cd 명령어와 내가 찾고자하는 파일명을 입력해주니까 바로 실행되었다!

cd my-fisrt-react-app

바로 이렇게 창이 열리며 리액트 실행되었다.

 

<리액트 실행 명령어 절차 요약>

1. yarn create react-app 설정할 파일명 입력

2. cd 파일명 입력

3. yarn start

 

 

 

 

✏️리액트 만드는법: ②Vite

.. : 이전 폴더

. : 현재 폴더

따라서 cd.. 명령어를 실행하면 이전 폴더의 위치로 이동한다.

 

yarn create vite my-first-vite-react-app --template react

비트는 리액트 뿐만 아니라 뷰제이에스,다른 라이브러리, 프레임워크도 생성 가능해서

어떤 라이브러리, 어떤 템플릿을 사용해야할지 지정해줘야한다.

여기서 주의할 점은 띄어쓰기를 잘 해줘야한다는 것.. -- template 이 부분에서 띄어쓰기해줬더니

명령어가 제대로 실행되지 않았다..ㅋㅋ 띄어쓰기도 주의할 것.

제대로 만들어졌다면 이렇게 뜰 것.

저 세개의 명령어를 순서대로 입력해줘야함.

 

- vite 장점: 빠른 속도이기 때문에 이용할 필요가 있다.

- yarn : vite에 필요한 패키지 설치

 

 

 

 

✏️하는 방법은 아는데....왜 안돼?🤬

react를 실행하는 과정에서 오류가 계속.....떴다.

무슨 Exit code: 1 이러면서 에러나고 

command failed with exit code 3221225477

이런 에러도 나서 이게 도대체 무슨 에러인가... 찾아보기도했는데

개발 까막눈이여서 이해할 수 없었다.

 

결국 튜터님을 방문해서 node.js를 다시 깔아보고 해보라해서 다시 깔고

폴더도 다시 삭제했다가 다시 만들어보고 

https://www.inflearn.com/community/questions/1462743/npm-i-vite-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EC%9D%B4%EB%9F%AC%ED%95%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%9C%A8%EB%8A%94%EB%8D%B0?focusComment=386965&srsltid=AfmBOooudXy6HTtMDmxSYxIQ0gQFtwH1dPLe-Cy5ldG5AQ-ygxAb_5yW

 

다시 제자리 돌아가서 깔고 최대한 혼자 찾아보려고 했는데

ㅠㅠㅠㅠㅠㅠ 이해를 못하겠어서 다시 튜터님께...방문!!!

 

튜터님께서는 powershell 권한이 잘못 된 것 같아서 bash 터미널로 써보는 방법을 권유하셨고

그렇게 했을 때 튜터님께서 됐다!!! 이러셔서 오오오오 그렇구나 powershell권한이 뭔가 잘못 설정된게 있구나 하고

다시 자리로 돌아와서 다 삭제하고 처음부터 다시 차근차근 설치하려고했는데

또 똑같은 오류 발생. 이번엔 create react하는 과정 자체도 이제는 오류가 나서 당황스러웠다.

와... 또 튜터님 찾아가야하나? ㅠㅠㅠㅠ 이번엔 혼자 해결하고싶은 마음에

powershell도 해보고 bash를 통해서도 입력해봤지만 모두 에러가났다.

머리 쥐어뜯으면서 아악 이러고있었는데

 

팀원분 중 한 분이 마이크가 켜졌다며... 그래서 어머어머어머 이러고 바로 마이크 끄기..ㅋㅋㅋ

 

 

 

뭐 어떡해😭😭

이번엔 다른 튜터님께 찾아갔다. 상황을 충분히 설명드리고 이런 오류가 떴다 했는데

솔루션은

"폴더명이 한글이어서 인식을 못해서 그런것일수도 있으니, 영문으로 된 폴더를 만들어서 실행해봐라"

였다.

 

여기서 아??? 아??? 이러면서 아 이거다 싶었다.

역시나 이게 문제가 맞았다....!!!

과정이 너무너무 잘 실행돼서 묵은 답답함이 싸악 내려갔다.

그래서 와 튜터님 대박이라고 진짜 최고다 최고다 그러고 엄지쌍따봉 날려주고 기분좋게 룰루랄라 제자리로 와서 TIL적는중.

 

여기서 얻은 꿀팁!

터미널에서 폴더를 만드는 명령어는

mkdir 폴더명 이다.

이거 궁금했었는데 해겨얼~! 찾아봤더니 make directory의 약어라고 함!

 

 

✏️Vite

💡Vite
- Vue.js애플리케이션을 위해 만들어졌지만 react, svelte, vanilla JS등 다양한 프레임웤, 라이브러리 지원.
- 장점: Esbuild를 사용해서 속도가 빠름

실제로 vite로 리액트를 실행했을 때 속도가 CRA보다 압도적으로 빨랐다!

 

<특징>

1) 빠른 콜드 스타트와 HMR(Hot Module Replacement)

콜드 스타트: 엔진 가열되는 시간. 예열이라고 알면 될것 같다!

HMR: 소스코드 수정했을때 브라우저에 얼마나 빠르게 반영되는지

 

A-Z까지 혼자 세팅할거야! 하는 사람은 이런 파일을 생성해야한다~하시면서

app.js 파일도 생성해야하고 스크립트도 추가해야하고 바벨? 이라는것도 설치해야하고 웹팩도 설정해야하고...

이렇게 하기보단 그냥 명령어를 통해서 패키지를 설정하는게 낫겠다고 생각했다 ㅎ^^

 

 

 

✏️리액트에서 컴포넌트란

- 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다.

- JS함수와 유사.

- 입력을 했을 때 화면에 어떻게 나오는지 기술하는 react 엘리먼트 반환.

 

<리액트 컴포넌트 표현하는 두 가지 방법>

1. 함수형 컴포넌트 (이것만 공부할것)

2. 클래스형 컴포넌트

 

함수형 컴포넌트

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

props를 입력해서 return엘리먼츠 반환!

 

class Welcome extends React.Component {
render () {
return <h1>Hello, {this.props.name}</h1>;
}
}

이게 클래스형 컴포넌튼데 함수형 컴포넌트보다 조금 더 복잡하고 기능은 비슷해서 함수형 컴포넌트 쓰는게 더 좋고 그래서 실무에서도 잘 이용된다고 함!

 

💡중요포인트!
리액트 컴포넌트 = 함수 
인풋 = props
reurn = '리액트 엘리먼트' 반환

 

 

 

✏️리액트 함수 보는 방법

최상단엔 주로 이런식의 import되는 주소를 찍는 곳이 있다. 필요한 파일을 가져온다는 의미의 명령어를 입력한다.

 

const App = () => {
	자바스크립트 입력
	return (
		<div>
		{ JSX입력 }
		</div>
	);
};

그리고 하단엔 이런 입력 코드가 있다.

특이한 점은 모든 코드를 저 안에 넣는것이었다.

알수록 특이하고 신비로운 세계다...

내가 정말 왕 똑똑이었다면 좋았을텐데ㅋㅋ!!!

 

그리고 마지막엔 export default 파일명;

으로 해서 반환값을 넣어주면 된다!

 

여기서 컴포넌트 첫 글자는 대문자로 만들기.

폴더는 소문자로 시작하는 카멜케이스로.

컴포넌트 파일은 대문자로 시작하는 카멜케이스로 짓는다.

 

💡카멜케이스(Camel Case)란?
ex. myReactViteFirstPage
이런식으로 처음 글자를 소문자로 시작해서 다음으로 이어지는 단어를 대문자로 표현하는 방법.
이렇게 했을 때 길어져도 가독성이 좋아진다고 한다.
- 클래스, 타입이름 만들 때 사용한다고 함

카멜은 낙타라는 뜻인데 대문자가 낙타의 등 처럼 보이는 데에서 유래됐다고함.

💡파스칼케이스(Pascal Case)란?
ex. MyReactViteFirstPage
첫글자도 대문자로!!!

💡스네이크케이스(Snake Case)란?
ex. my_react _ vite _ first _ page
이런식으로 밑에 언더바로 단어를 구분함. 뱀처럼 생겻다해서 스네이크케이스!

 

 

 

 

 

 

02 리더/부리더 지원

✏️리더 지원 면담

나도 중요하게 생각하고 있는 마지막 부트캠프 프로젝트.

이번엔 리더에 도전하게 되었다.

 

오늘 알게된 부분이지만 팀원들도 중요한 프로젝트인 만큼

마지막 팀원의 조합이 어떨지 걱정된다고 했다.

리더를 지원한 사람뿐만 아니라 팀원들도 걱정하고 있다는 점에서

모두가 마지막 프로젝트에 대해 다들 우려하고있다는 것을 알 수 있었다.

그렇기에 내가 지원한 리더 역할에 더 책임감을 느끼게 되었다.

알려줄 수 있는 정보는 다 알려주고싶었고

팀의 분위기, 결과물 두 개를 모두 가져가는 게 목표다.

 

이전에 내가 프로젝트를 진행했을 때 피드백을 알려주셨는데

팀원들과 충분히 상의하지 못하고 넘어간 경우가 있었던 것 같고

내 의견이 확고해서 피드백을 수용하는게 제한적이라는 피드백을 받았다.

 

처음 내가 불안해하고 마음이 조급한 마음에 실무라고 생각하고

내 주장을 좀 명확하게 해야한다고 생각했는데

사실 실무에서도 주장이 강한 사람한테 의견을 내는 게 쉽지 않다는 생각이 들었다.

그 부분을 생각해보고 팀원들의 피드백을 생각해보니 팀원들에게 미안해졌다.

내가 너무 내 의견이 맞다고 생각했던 것 같다. 어느 정도 존중을 했었어야했다.

조금 미숙했던 것 같다. 내 의견이 다 맞는게 아니었는데.

의견이 좀 확실해야 설득력 있는 사람이라고 생각했던 것 같다.

경청하는 태도가 중요한 것임을 뼈저리게 느끼고있다.

 

마음이 좀 아팠지만 이런 점을 반성하면서 내가 성장할 수 있는 기회라고 생각했다.

이때 아니면 성장 못한다~~ 이러면서 ㅋㅋ 오히려 좋기도 하고 아프기도하고 그랬다!

 

어떻게 팀을 꾸리는게 좋을지 매니저님과 함께 얘기도 해본 결과

1. 팀원의 의견 경청하기

2. 팀원 전체의 목표를 우선시하기 (개인의 목표보단) → 이건 정말 주의해야겠다.

3. 모범적인 태도 : 시간약속, 책임감 → 신뢰 쌓을 수 있다.

4. 회의를 자주 하자.

큰 틀은 이거였고 이후에 내가 팀원들과 유대관계를 어떻게 쌓아갈지 계속 고민하는 중이다!

 

내가 생각하는 방향과 같은 사람을 찾아보라고 하셨고

그런 목표를 가진 부리더를 찾기로 방향을 틀었다.

 

그래서 내가 생각했던 분께 dm을 드리고 그 분도 마침 함께 의논한 리더가 없다고 하셨다.

그래서 대화를 좀 진행해봤는데 분위기 안 좋은 팀은 망하더라 라는 결론이 나왔다..ㅋㅋㅋ

방향성이 잘 맞다고 생각들어서 기분이 좋았다 :-)

 

그리고 내일은 리더/부리더 자기소개가 있는 날이다.

이미 정해졌지만 혹시 모르니 어떤 생각을 가졌는지 또 탐색해봐야겠다!

 

 

 

 

03 UX집중반: 문제정의

✏️페르소나

페르소나/유저 져니맵 인원 따로, 인터뷰 내용 인원 따로 이렇게 진행하다보니

어떤 것을 기준으로 페르소나를 설정해야할지 좀 헷갈렸다.

마침 튜터님께서 순회를 돈다고 하셔서 바로 이부분을 물어보기로했다.

 

페르소나를 어떻게 설정해야하는지... 물어봤는데

쏘카를 사용하는 사용자들은 많고 문제도 다양하다.

그렇기 때문에 우리가 정의한 문제를 갖고있는 사용자한테 인터뷰해야한다.

'전체'사용자가 아닌 '문제정의'를 한 사용자를 페르소나로 설정해야한다는 것.

 

근데 내가 헷갈리는 부분은

쏘카의 사용자 중 대다수는 여행 목적이 많다.
하지만 만약 우리가 설정한 문제정의에서 여행 목적이 아닌 사용자들이 많다면
어느 사용자에게 초점을 맞춰서 페르소나를 만들어야 하는지? 헷갈렸다

 

사실 문제를 기반으로 페르소나를 정의하기도 하고

페르소나를 기반으로 문제를 정의하기도 한다고한다.

페르소나는 우리가 정의한 문제 안에서 페르소나를 정해야한다고한다.

그런 문제가 가장 많은 사용자 집단! → 그럼 이걸 어떻게 판단하지? ....... 이건 다시 물어봐야겠다!!!!!

설문조사, UT를 통해 파악해볼 수 있는데. 그러기위해서는 페르소나를 먼저 설정을 하고 거기에 맞게 설문조사지를 작성해야되는거같은데 순서가 뭐가 맞는지 모르겠다 ㅠㅠㅠ!!!

 

그리고 튜터님께서 해주셨던 피드백 중 계속 중복되고 있는 것은 '인사이트'였다.

우리가 만들 장표는 총 3장이긴 했는데 계속해서 문제를 찾고 거기에 인사이트를 찾아서 계속해서 비교/분석하는 것이었다.

1번째 장표, 2번째 장표, 3번째 장표를 또 합쳐서 인사이트를 모아 우선순위를 또 정해봐도 되는 것이다.

 

만약, 여러가지 문제가 공통적인 게 많다! 했을 땐 그 문제를 삼으면 되고

문제들도 많은데 다 다르네? 했을 땐 그때부터는 어떤 것이 중요할지 다양한 데이터를 비교분석하여 우선순위를 정하고

그 우선순위가 맞는지 검증할 수 있는 또 다른 방법론 등을 활용해서 한 번 더 분석해야한다는 것.

으악 복잡하다 복잡해!!!

 

이 피드백을 기준으로 우리 팀에서 페르소나를 다시 재수정 했는데

일단 단기/장기 위주로 퍼소나를 나누었고

단기: 여행목적

장기: 업무목적으로 퍼소나를 나누어 다시 구성해보기로 했다.

 

이번에 팀원 전체가 느꼈던 것은

페르소나를 먼저 확실하게 정하고 인터뷰, UT 등을 진행해야겠다고 생각했다.

페르소나를 먼저 잡아야 거기에 맞는 사용자 대상으로 방법론 등을 진행할 수 있다.

하지만 이것도 상황에 따라서 달라질 것 같다. 또 헷갈려..ㅋㅋㅋ!!ㅠㅠ

 

 

 

✏️심층 인터뷰지 작성

심층 인터뷰지를 작성할 땐 괜찮았는데 막상 직접 인터뷰를 진행해보니까

중복질문이 계속 겹쳤고 인터뷰 질문의 내용이

어떤 게 문제인지 몰라서 그걸 사용자한테 자꾸 찾아서 물어보는 느낌이라는 피드백을 받았다.

우리가 문제로 정의했던 내용을 물어보는 것이 목표였는데 그게 제대로 수행되지 않았다.

이유는 닫힌 질문형태로 많이 구성해서 그런 것 같다.

 

반납 과정이 간편하다고 느끼셨나요? 
했을 때 네. 라고 하면

나도 당황스럽고 인터뷰이도 당황스러워한 것 같다.

뭔가 문제가 있다고 해야할 것 같은 기분을 유도하는 느낌.

 

사용자의 니즈, 본질적인 불편함을 끌어낼 땐

우리가 생각한 답을 유도하는 질문을 하는게 아니라

열린 질문을 해서 그 사람이 생각하고 있는 본질적인 문제점을 이끌어 내야 하는 것이었다.

안그러면 그저 네. 아니오 식의 데이터만 얻을 뿐, 정성적인 데이터를 얻을 수 없다는 것을 알게되었다.

 

하지만 그 질문을 구성하는게 생각보다 쉽지 않았다... 

실질적으로 하기 전에 충분한 파일럿 테스트는 필수라고 생각했다.

같이 진행했던 팀원분과... 이렇게 하면 안되겠다고 느꼈다ㅋㅋㅋ 

 

 

 

 

✏️인터뷰 데이터 우선순위 정하기

쉬울줄 알았는데 우선순위가 또 나를 힘들게한다 ^^

너무 헷갈려서 기절....

한 팀원분께서 ice framework를 통해서 정리하면 되지 않을까요? 에 대한 의견을 내주셨다.

그게 뭐지?했는데 공유해주신 내용을 보니 아.. 이런게있었지!!! 했다 ㅋㅋ

완전 잊고있었던 이론..... 생각도 안났는데 이걸 이렇게 적용할 수도 있다니.

우리가 했던 인터뷰내용을 토대로 불편한 점, 니즈를 적어서

임팩트, 근거, 리소스를 기준으로 점수를 매겨 우선순위를 논의했다.

의견이 조금 나뉠 땐 각자 근거를 들면서 생각을 말했다.

이 과정이 조금 오래 걸리긴했는데 서로의 생각을 들을 수 있는 좋은 기회라고 생각했다.

나름 점수를 매기는 과정이 재밌기도 하고 그런 근거로 생각할 수 있구나 하고

새로운 접근법에 신기하기도 했다. 사람마다 생각하는 건 참 다르다!

 

 

내가 생각한 접근법 중 하나는

데스크 리서치의 데이터를 이용한 방법이었다.

쏘카플랜같은 경우 30대 이상 고객이 전체 76%를 차지할 정도로 장기대여하는 유저가 늘었고 주행거리도 늘었다고 한다. 그리고 무엇보다 중요한 것은 쏘카플랜이 꾸준히 성장세라는 것!!!

 

어? 그렇다면 우리가 이걸 비즈니스적인 목표로도 생각할 수 있지 않을까? 생각해서

장기 대여하는 유저는 어떤 것을 불편해하고있을까?

주행거리가 늘어남에 따라 쏘카를 사용하는 유저는 어떤 것이 불편할까?

각 질문에대한 대답을 정리하고 인사이트를 도출해서 이 비즈니스적인 목표와 맞는 데이터의 점수를 조금 높게 줘도 되지 않을까?

생각해봤다.

하지만 시간이 없는 관계로.........그냥 무산되었다!ㅋㅋㅋ 

이런 생각이 이제 자연스럽게 드는게 신기했다.

나 이렇게도 생각할 수 있잖아? 좀 더 다양한 시각에서 바라봐야겠다고 생각들었다 :)

 

이 접근법을 알려줬는데 한 팀원분이 장기 대여와 단기 대여를 하는 것의 불편함에 사실상 큰 차이가 없을 것으로 보이긴 한다고 의견을 내주셨다. 찾아보기 전까지 모르는 거겠지만 어느정도 일리있다고 생각이 들어서 아쉽긴했다 ㅎㅎ 뭐처럼 새롭게 찾은 접근법이었는데 에잇

이런 과정들이 재밌었던 것 같다.

 

한 가지 아쉬웠던 점은 우리가 쏘카를 하는 이상

우리가 이 서비스에 정말 진심으로 공감을 할 수 없다는 점이었다.

직접 이 서비스를 이용하고 불편함을 느껴봐야하는데

그걸 실질적으로 느끼지 못해서 많이 아쉬웠다.

 

다음에는 직접 경험할 수 있는 서비스를 선정하고싶다!

 

 

 

마무리하며...

그냥 조그마한 앱이지만 알아야될 게 왜 이렇게 많은지.

돈 벌기 쉽지 않다고 느꼈다.ㅋㅋㅋㅋ

돈을 떠나서 내가 하고싶은 게 생겼고 그 일에 흥미를 느껴하는 거 자체가 큰 발전이라고 생각했다.

팀원들과 같이 의논하는 과정도 재밌고

그 팀원의 생각을 들어보는 것도 재밌었다.

그럴 땐 반응도 참 좋게 나온다...ㅋㅋㅎ

 

내일은 코딩 2주차 강의 까지는 꼭 들어야겠다 ㅠㅠㅠ!!!!