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

 

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

 

📌To Do List

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

* 리더/부리더 세션 ✅

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

 

 

 

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

✏️컴포넌트, JSX

이런 화면을 만들어야하는데

자꾸 이런 빨간 밑줄이 쳐졌다.

너무 html코드를 써서 그런 것 같은데 그냥 강의에서 정한 답을 보기로했다.

 

 

리액트를 브라우저로 띄우는 방법은

터미널에 yarn dev를 쳐서 local에 나오는 주소를 눌러야만 들어갈 수 있다고 하셨다.

여기서 주의할 점은

yarn dev를 쳤을 때 오류가 뜰 수도 있다.

이럴 땐 현재 있는 위치를 잘... 확인해야한다.

내가 yarn dev할 위치는 my-first-vite-react-app인데

react에서 yarn dev를 했을 때 실제로 오류가 났다. 항상 어디에서 명령을 할 것인지 잘 봐야한다!

 

 

 

 

구현된 화면!!!!

 

 

 

여기서 alert기능을 넣을 때

<Button onclick= {function () {
alert("안녕하세요.");
}}

이런식으로 구현이 가능하지만 우리는 리액트에서 컴포넌트를 쓸 수 있었다는 사실을 잊고있었다.

사실 알고있어도 어떻게 쓰는지도 모르겠음..

 

const handleClick = () => {
alert("안녕하세요."); };

// 그리고 하단에

<button onClick={handleClick}> 클릭! </button>

이런식으로 응용해볼 수 있다.

 

 

이런식으로 할아버지 - 엄마 - 자식 컴포넌트는 어떻게 만들까?

할아버지 안에 엄마, 엄마 안에 자식 컴포넌트를 만들어야함!

function App() {
  return (
    <div>
      <h1>부모-자식 관계 테스트</h1>
      <GrandFather />
    </div>
  );
}

export default App;

function GrandFather() {
  return (
    <div>
      <p>나는 할아버지입니다</p>
      <Mother />
    </div>
  );
}

function Mother() {
  return (
    <div>
      <p>나는 엄마입니다</p>
      <Child />
    </div>
  );
}

function Child() {
  return (
    <div>
      <p>나는 자식입니다</p>
    </div>
  );
}

이런식으로 만들면 된다! 그랬을때 화면은 

 

jsx = HTML품은 JS.

 

DOM = Document Object Model의 약자라고 함.

해석하면 문서 객체 모델.

이게 무슨 뜻이냐면 html, body같은 html 태그가 JS에서 쓸 수 있는 객체로 만들면 그게 문서 객체라고 한다.

여기서  model은 모듈, 모형, 주형 이라는 뜻을 가지고 있다. 

웹브라우저가 html문서를 인식하는 방식, document 객체와 관련된 집합체 라는 의미이다!!

참고 사이트: https://m.blog.naver.com/magnking/220972680805

 

브라우저는 jsx문서를 해석할 수 없어서 babel이란것을 이용해 js로 변환한다고 한다.

 

 

<jsx문법>

1. 여는 태그, 닫는 태그

rafce를 적으면

이런 게 뜨는데 엔터!

 

그러면 자동으로 이런 코드가 입력된다.

 

보통 input태그같은 경우 안에 들어갈 내용이 없다면

<input/>이런식으로 태그를 한 번에 닫아주면 되고

button태그와 같이 안에 들어가라 내용이 있을 땐

<button> 내용입력 </button>이런식으로 여는태그, 닫는태그를 사용한다.

//예시
<input type="text"/>

 

 

 

2. jsx의 return문엔 무조건 하나의 태그만

import React from 'react'

const App = () => {
  return (
    <div>첫 번째 줄</div>
    <div>두 번째 줄</div>
  )
}

export default App

이렇게 코드를 작성하면 오류가 뜬다. 이유는 return문 안에 div태그가 2개가 있음.

따라서 두 div를 묶어줄 부모 div태그를 하나 만들면 오류 해결.

 

import React from 'react'

const App = () => {
  return (
  	<div>
   		<div>첫 번째 줄</div>
    		<div>두 번째 줄</div>
  	</div>
  )
}

export default App

 

 

3.변수 선언할 땐 중괄호 { } 넣기

import React from "react";

const App = () => {
  const NUMBER = 1000;
  return (
    <div>
      <div>첫 번째 줄</div>
      <div>{NUMBER}</div>
    </div>

  );
};

export default App;

 

 

4. className

class지정할 땐 className이라는 속성을 사용해야한다.

//예시
<div id="abc" className="abc"> 야호 </div>

id는 그대로 사용.

이름을 다르게 사용하는 이유는 JS에서 class문법과 혼동되지 않게 하기위함이라는데....

아직은.. 뚜렷하게 이게 무슨 말인지 이해하지 못했다.

그냥 jsx에서는 className으로 사용한다 정도만 습득하자.

 

 

5. 스타일 적용법

css를 적용하고 싶을 땐 style태그를 써주고 '객체'형태로 사용된다.

<div style={{ color: "orange", fontSize: "20px" }}>첫 번째 줄</div>

여기서 중괄호가 2번 들어가는 이유는

먼저 자바스크립트 요소가 들어가야하기 때문에 중괄호 한 번 사용,  

그 안에 객체가 들어가야하니까 중괄호를 또 써준 것.

 

그리고 여기서 한 가지 더!

color: orange 이렇게 하면 적용안됨. 큰따옴표로 "orange"를 감싸줘야한다.

 

이런식으로 변수를 선언해서 하단에 변수를 재사용했을 때도 똑같은 값이 나온다.

 

 

 

 

 

02 리더/부리더 세션

✏️리더 지원

리더/부리더를 지원한 인원은 앞에서 1분 자기소개를 하는 시간을 가졌다.

각자 최종 프로젝트를 향해 갖고있는 목적이 모두 달랐다.

 

내 1순위는 무조건 팀의 분위기였다.

팀의 분위기가 좋아야 그 뒤에 팀워크, 결과물이 따라온다는 논리다.

분위기를 빼고 결과물을 1순위로 두었을 때 절대 좋은 분위기는 나올 수 없다고 생각했다.

지금까지 여러개의 팀을 거친 결과도 딱 그렇다.

결과물만 보고 달렸을 때 절대 모두가 만족하는 결과를 얻을 수 없다는 것을 알았기 때문에

분위기와 팀원을 1순위로 생각했다.

 

다른 리더/부리더의 자기 소개를 듣고 저렇게도 생각할 수 있구나.

저렇게도 이끌어가면 좋겠다는 인사이트를 얻었다. 

 

구성원이 최고의 퍼포먼스를 낼 수 있게 도와주는 리더,

포폴에 넣을 수 있게 만들어준다는게 인상깊었다.

사실 제일 중요한 문제를 짚어서 그거를 해주겠다! 라는게 팀원입장에서 믿음직스러울 것 같다.

리더는 부드럽게 조정해야한다고도 말씀해주셔서 아, 그렇지 이러면서ㅋㅋㅋ 혼자 반성했다.

그런 포부를 들으며 정말 리더 역할을 잘 해내고싶어지기도 했다 ㅋㅋㅋ

 

어떤 리더는 협력, 소통이 중요한 사람도 있었고

어떤 리더는 UX를 잘 아는 리더, 어떤 리더는 툴을 다방면으로 잘 활용할 줄 아는 리더,

계획적인 리더, 목표를 잡고 추진력있게 나가는 리더,

최고의 결과물을 낼 수 있는 리더 등 추구하는 리더상이 모두 달라서 색다른 경험이었다.

 

나와 맞을 것 같은 리더의 이름을 적어가며 ㅋㅋㅋ 알아보려고 했는데

이것 역시 시간이 별로 없었다.

처음 점찍어둔 부리더와 대화를 나누면서 서로의 가치관과 일 하는 스타일이 맞는지 확인하는 과정을 가졌다.

 

생각보다 추구하는 가치와 방향성이 비슷해서 

재밌게 해볼 수 있겠다는 느낌을 받았고 최종적으로 리더/부리더를 이 사람과 함께 지원했다!

 

함께 맞는 사람을 찾아가는 게 쉽지 않았지만

이 과정을 통해 내가 어떤 사람인지 알 수 있었고

사람을 어떻게 대해야 하는지, 내가 어떻게 주장을 해야하는지,

어떻게 팀을 이끌어야하는지, 어떻게 사고해야하는지 배울 수 있어서

의미깊었던 경험들이었다.

 

 

 

 

 

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

✏️문제정의 피드백

8조 써베이에서 중요한 점만 추려서 결과로 가져왔다.

목적에 맞는 질문을 설정한게 맞는지 검토해야한다.

설문의 목적하고 맞는지. 포괄적인 질문이 되는 건 아닌지 파악필요하다.

유튜브 시청자의 대표성을 가질 수 있을지?

모수가 적어서 오차 생길 가능성↑. -> 심층인터뷰를 진행했다면 더 좋았을 것.

 

페르소나: 

페르소나가 겪은 문제가 1개밖에 나오지 않은 듯..

두 사람의 페인포인트를 좀 더 검토해봤으면 1개가 아닌 2개가 될 수 있을 텐데.

 

페르소나를 1개에서 2개로 좁혀지는 과정이 필요할 것 같다. 왜 그것을 핵심문제로 꼽았는지?

 

표본 오차 5%미만. 95% 이상. 모수. 최소 파악하기 위하면 380개 이상이어야한다.

이정도가 아니어도 대표성 갖고있는 답변이 많다면 모수가 확보됐다고 볼 ㅜㅅ 있다.

대표성있는 사용자를 만날려면 제대로된 섭외도 중요하다. (인터뷰, 설문조사등)

 

 

voc분석시 주의사항:

- 작은 불편한 점. 안적는게 좋다.

- 대표적인 사용자가 겪고있는 데이터의 voc를 해야한다.

 

 

 

유저 저니맵:

-> 데이터 기반으로 만들어졌으면 좋겠는데 가정, 우리팀의 의견이 포함되지 않았는지 검토해야한다. 유저저니맵도 모든 건 데이터 위주로 해야함.

 

 

5whys의 답변도 데이터를 기반으로 판단해야한다. 개인적인 주관이 있으면X

 

 

다른 쏘카 리서치 분석.

선정사유까지 적음으로써 왜 이거를 선정했는지명확하게 데이터 근거로 알 수 잇었다.

이런 불편사항을 겪어서 핵심사용자 목표, 공통 사용자 목표에 어떻게 영향을 미치는지 파악.

 

여기 팀에서는 각 인원마다 넘버링을 매겨가며 아이스프레임을 진행한 게 인상적이었다.

 

이번 문제정의 세션을 통해 생각의 과정을 담는 게 중요하다고 생각하고

어떻게 디자인 씽킹을 하는지 배울 수 있었다.

 

처음엔 아무것도 모르는 상태여서 너무 답답하고

어떤 근거를 들어서 주장을 해야하는지도 잘 몰라서 답답하고 불안한 마음이었다.

하지만 집중반을 통해서 장표를 '잘'만들기 보다는

생각하는 과정에 집중할 수 있었고 그 과정에 집중하면서

어떻게 근거를 대면서 의견을 내야하는지도 알 수 있었다.

 

 

 

✏️1조: 쏘카 튜터님 피드백

- 아이스프레임워크: 잘 고민해야하는 점. 보통 이 방법을 솔루션에 우선순위 정할때 많이 사용한다. 그때 방법 사용하는 이유는 임팩트, 컨피던스, 이즈니스를 할때 비즈니스 목표, 사용자 핵심 행동과 관련있는지가 중요.

이 솔루션이 얼마나 확신있는지. 를 위해 하는건데

문제 우선순위 정할때 기준을 반대로 해야할것같다. 이 문제가 사용자의 경험, 비즈니스에 미치는 부정적인 경험이 크냐. 를 기준으로 문제를 정의해야한다. 

컨피던스는 해결할 가치가 있는지 확신하는지. 그 기준으로 잡아줬다면 잘 잡아준 것 같다. 보통은 솔루션 우선순위를 잡을 때 사용한다! 

 

페르소나 두명인데 저니맵을 1개로 합쳤더라. 이유가 무엇일까? 생각해봤다.

두가지 이유가 있다고 생각했다. 두 사람이 환경적인 모습이 다른데 비슷한 니즈가 있었고 저니맵을 하나로 합쳐도된다고 판단한게 아닌가.

 

이게 과연 표면적인 문제인가? 근본적인 문제인가? 헷갈리면 해결책을 내보고 " 어? 이렇게하면 이 문제만 해결할 수 있을것같은데.. "라는 생각이 들면 다시 검토해야한다.

이게 왜 문제라고 생각하는가?에 대해 같이 명시하는게 좋다. 

어떤 생각을 거쳐 최종적으로 이문제가 정의됐는지 생각의 흐름을 적어주면 더 좋을 것 같다.

 

 

 

WIL

Facts

이번 일주일 동안 있었던 일, 내가 한 일

 

-  리액트 개발강의를 듣고 직접 리액트를 설치해보며 리액트가 무엇인지 배웠다. UX집중반을 하기 때문에 그렇게 집중을 잘 할 수 있었던 것은 아니었지만 모르는 부분이 있을 때마다 튜터님 방에 찾아갔다. 

- 리더를 지원했다. 앞으로 어떻게 팀을 꾸릴지 고민했고, 매니저님과 면담도 받으면서 더 나은 리더의 자질과 모습에 대한 얘기를 나누며 내 성장을 독려해주셨다. 앞으로 기대가 된다고 말씀해주셔서 그 점이 감사했다.

- UX문제정의를 다같이 논의했는데, 전에는 그래도 장표에 좀 힘을 실었던 반면 이번엔 정말 씽킹을 하는데 집중했다. 

 

 

Feelings

나의 감정적인 반응, 느낌

 

- 개발은 특히 이론으로 들었을 때와 실제로 했을 때 응용하는 법을 알아야하기 때문에 어렵게 느껴졌다. 우리가 눈으로 보이는 모든 것들은 너무 쉬워보이지만, 실상 컴퓨터언어는 이렇게 복잡하게 구성돼있었다... 특히 함수를 응용하는 부분이 어려웠고 아직까지 어떤거에서 .이 들어가야 하는지, 대문자가 들어가야하는지, 중괄호가 들어가야하는지, 명령어가 들어가야하는지 파악하지 못해서 어렵게 느껴졌던 것 같다.

 

-리더/부리더를 뽑을 때 자기소개를 진행했는데 모두 하나의 목표를 가지고 달려가는 모습이 멋있기도 했다. 어떻게보면 큰 부담으로 다가올 수 있었을 텐데 다들 용기있게 도전하는 모습이 감명깊었다.

 

-ux문제정의를 다같이 논의하는 과정에서 다들 색다른 시선으로 문제를 보고있어서 신기하기도 했고, 이래서 팀원이 참 중요하다고 생각했다. 내가 리더로 지원했는데 데려가고싶은 인재가 많았다.

 

Findings

그 상황으로부터 내가 배운 것, 얻은 것

 

- 개발은 정말 세세한 것 하나하나 다 언어로 설정해야하는 것을 알 수 있었고, 특히 함수가 리액트의 이곳 저곳에 어떻게 유용하게 쓸 수 있는지 배울 수 있었다. 

특히 html과 JS에서 했던 방식과 다르게 함수를 통해서 재사용을 할 수 있어 참 편리하다고 느꼈다.

 

- 목적을 어떻게 설정하느냐에 따라 팀의 방향성이 달라지겠지만, 그럼에도 팀원 하나하나 중요하게 생각해서 잘 이끌어가야겠다고 생각했다.

 

- 다른 조들이 하는 것도 보면서 생각하는게 체계적이고 저럴 땐 저렇게 표현해도 좋겠다! 혹은 저런 방법론을 다른 방법으로 새롭게 만들어서 적용시킬 수도 있다는 것을 알 수 있었고, 특히 최종 문제를 정의할 때도 한 번 더! 고민해보는 태도가 필요한 것을 배웠다.

이게 근본적인 문제인지, 표면적인 문제인지 파악해보는 것이 중요하다! 특히 실제 회사에서 적용된다면 이는 매출에 큰 영향을 끼칠 수 있기 때문에 더 주의하고 조심해야겠다고 생각했다.

 

Future

배운 것을 미래에는 어떻게 적용할 지

 

- ux문제정의할 때 이게 근본적인 문제인지, 표면적인 문제인지 파악해보는 것이 중요하다! 특히 실제 회사에서 적용된다면 이는 매출에 큰 영향을 끼칠 수 있기 때문에 더 주의하고 조심해야겠다고 생각했다.

계속 팀플이고 데이터를 완전하게 볼 수 없기 때문에 한계점이 있긴했지만 그럼에도 계속 근본적인 문제를 찾아가야겠다.

 

- 항상 팀원으로서 팀장님, 부장님, 대표님을 바라봤는데 그분들의 니즈가 무엇인지 이번 리더를 지원하며 확실하게 알 수 있었다.

그리고 내가 팀원이 됐을 때와 리더가 됐을 때 어떤 점을 불만스럽게 생각하는지, 어떤 점은 좋다고 생각하는지를 확인할 수 있어서 추후에 회사에 들어갔을 때 그 부분을 해결할 수 있는 사람이 되어야겠다고 생각했다.

 

리더 입장에서 봤을 때 선호하는 팀원은 모두 다 잘하는 게 좋겠지만, 특정 하나를 잘 하는 팀원을 선호할 것 같다.

그리고 팀원 입장에서는 내가 의견을 냈을 때 경청해주고, 문제가 생길때 적극적으로 앞장서서 해결할 수 있는 리더를 선호할 것 같다.

 

나는 앞으로 좋은 리더가 되기 위해 팀원의 입장에 앞장서서 잘 전달할 수 있는 그런 리더가 되어야겠다.