TIL (Today I learned)
오늘 나는 무엇을 했나요
- React 입문 1주차
- UX집중반
오늘은 어떤 것을 배웠나요
-React 입문 1주차
화살표 함수를 배웠다.
먼저 사용하는 이유는 결국 더 간단하게 사용하기위해 사용하는것이다.
원래 함수 표현은 이런식으로 간략된것 없이 반환값이 필요한 경우 return까지 명시를 해야한다.
const add = function(a, b) {
return a + b;
};
console.log(add(5, 3)); // 8위에 식을 보면 상수 add를 정의하는데 그 값에 함수를 할당하는 식이다.
이때 함수의 매개변수 a,b를 받고 리턴에서 a+b를 반환하는 식이다.
하지만 화살표 함수를 사용한다면
// 가장 간결한 형태의 화살표 함수
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
// multi-line
const sampleLogging = () => {
const name = "르탄이";
const age = 20;
console.log(`안녕, ${name}`);
return age + 1;
}위에 "가장간결한 형태의 화살표 함수"처럼 상수 add를 정의하는것까진 동일하지만 그 후에 function을 생략한것이 보이며
그대신 => 즉 화살표를 넣어서 간결하게 선언하는것이다.
여기서 주의할점은 멀티라인이 아닌 경우는 return문을 따로 명시하지않아도 자동처리가 되지만 멀티라인인 경우는 중괄호 및 return문을 명시해야한다!
다음으로는 삼항연산자를 배웠다.
이것도 결국 기존의 코드를 더욱 더 간결하게 사용하기 위해 쓰는것이다.
const score = 85;
const grade = score > 70 ? '합격' : '불합격';
console.log(grade); // '합격'위에 식을 보면 삼항연산자에는 ?와 :가 쓰이는데
이 식을 해석하자면 스코어가 70점이상이야? 그러면 합격이고 : 아니라면 불합격이야
이런식으로 해석하면 된다.
let grade;
if (score > 70) {
grade = '합격';
} else {
grade = '불합격';
}
console.log(grade); // '합격'만약 삼항연산자를 사용하지않으면 if문으로 사용해야하는데 그러면 줄이 길어지게 된다
모듈
모듈이라는것은 쉽게 말하면 코드 조각이다.
자주 쓰는 함수나 데이터를 모아두고, 다른 파일에서 꺼내서 쓸 수 있는것이다.
예를 들면 레고 블럭처럼 필요한 것만 가져와서 사용한다는 느낌
모듈은 내보내거나 가져올수있다.
내보낼때는 export를 사용하며 가져올때는 import를 사용하면 된다.
// math.js
export const add = (a, b) => a + b; // 더하기 함수
export const multiply = (a, b) => a * b; // 곱하기 함수
export const ONE = 1; // 숫자 1
export const sample = { one: 1, two: 2 }; // 객체
// app.js
import { add, multiply, ONE, sample } from './math.js';
console.log(add(2, 3)); // 결과: 5
console.log(multiply(2, 3)); // 결과: 6
console.log(ONE); // 결과: 1
console.log(sample.two); // 결과: 2
그렇다면 왜 모듈을 써야할까
1.정리하기가 쉽다.
옛날에는 <script>태그로 파일을 하나하나 불러왔는데 단점은 파일 순서도 생각하며 불러야 하여 오류가 자주 생겼다
하지만 모듈은? 그런거 없다 그냥 자동으로 해결해준다.
2.충돌을 막아준다.
다른 파일에서 같은 이름의 함수나 변수를 써도 문제가 없다.!
3.필요한 것만 가져올수가 있다.
필요한 기능만 가져온다는 소리는 프로그램이 그만큼 빨리 실행이 된다는 소리다
예를 들면 버튼을 누를 때만 무거운 파일을 불러올수도 있다.!
즉 모듈은 필요한 코드만 가져올수있는 레고블록처럼 보면된다.
Async와 Await
비동기와 기다리기는 비동기 작업을 쉽게 처리할수있게 도와주는 도구이다.
어려운 코드도 순서대로 차근차근 읽을 수 있게 만들어준다.
1.promiss
promiss는 해석하면 약속으로 결과를 나중에 줄게 라는 뜻이다.
성공하면 결과를 주고 실패하면 에러를 알려준다.
이때 세가지 상태가 있다!
1.대기 중 (Pending): 아직 결과를 기다리는 중이다
2.성공 (Fulfilled): 약속을 지켰어요! 결과를 받았다
3.실패 (Rejected): 약속을 못 지켰어요. 에러가 발생했다
2.Async
async은 함수 앞에 붙이면 Promiss를 자동으로 반환해준다 방금 설명한 promiss를 처리한 준비가 된것이다.
3.await
말로 풀면 "잠깐 결과가 나올때가지 기다릴게" 라는 뜻이다.
즉 코드가 순서대로 실행되서 읽기 쉽고 깔끔하다.
근데 await를 안쓰면 어떻게 될까?
.then() , .catch()를 계속 써야하여 암튼 많이 복잡해지니깐 쓰는것이 정신건강에 좋다.
즉
Promise는 결과를 나중에 줄게
Async/Await는 결과를 기다리면서 순서대로 처리할게
Async/Await 덕분에 코드가 깔끔하고 읽기 쉬워진다.
- UX집중반 ( UX 프로젝트)
오늘은 저번주차에 한 리서치데이터를 이용하여 발견된 문제들의 핵심문제를 정의하는 주차이다.
우리팀은 발제를 듣고 먼저 핵심문제를 찾기위해 퍼소나, 사용자여정지도,어피니티,5whys를 채택했고
순서를 정하였다.
우리가 리서치한 데이터를 기반으로 퍼소나 후보를 3명을 정하였고, 핵심문제를 찾기위한 방법들을 진행할 순서대로
나열을 하였다.
하지만 여기서 이 순서가 맞는지에 대한것과 이 방법을 전부 해야하는것, 그리고 퍼소나를 지금은 일단 후보로만 정하였는데 퍼소나를 어떻게 정해야 우리에게 필요한 인사이트를 얻을 수 있을지를 고민하다 방향을 잡기위해
피드백질문를 정하고 튜터님에게 피드백을 받으러갔다.
1.이 핵심문제를 찾기위한 4가지 방법들을 전부다 해야하는지
2.지금 순서대로 방법들을 진행해도되는지
3.퍼소나를 정할때 어떤 기준으로 정할지
일단은 이러한 방법들과 그에 따른 순서는 정해진것이 없다고 하셨다.
이렇게 팀원과의 회의끝에 정해졌다면 그 방향으로 해도 되며,
그외 피드백을 다시 해주셨다.
먼저
1.보편적인 문제를 확인해야한다.
문제중에서도 공통적으로 가진 주제가 무엇인지를 확인해야하는것이다.
2.퍼소나의 목적을 설정해야한다.
실 사용자중 어떤 퍼소나를 대표로 할 지 그 유형의 퍼소나가 가진 문제를 퍼소나에 맞춰 검토를 해야한다.
우리로 치자면 퍼소나 후보가 3명이 있는데 여기서 정한다고 한다면 일단
a.퍼소나 유형 제작에 대한 근거가 있어야한다. 여기에는 인터뷰가 있지만, 만약에 인터뷰를 하기가 어려운 조건의
퍼소나라면 일단 팁은 우리가 현재 만날 수 있는 사용자를 퍼소나로 선정하는것도 좋다고 하셨다.
예시로 쏘카의 비즈니스플랜을 이용하는 40대의 사람을 찾기 어렵다면 20대의 여행이나 출퇴근을 목적으로 사용하는
사람을 찾는것이 시간이 부족하거나 데이터가 부족할때 할수있는 방법이라고 하셨다.
b.퍼소나 선정에 대한 기준. 기준을 정할때는 두가지로 정할수가 있다. 비중이 큰순으로 정할지, 아니면 수익창출의 기회가 큰순으로 정할지이다.
여기서 비중이 큰순으로 한다면 서비스 중 가장 많은 비중의 퍼소나로 하면되고, 중요한건 수익창출의 기회로 한다면
예시로 쏘카에서 비즈니스플랜을 사용하는 사람들로 인하여 수익창출이 크다면 그것이 차별화 기능이 맞는지 확인이 필요하며 그 사업에 대한 확장유무가 있는지 리서치한것을 이용하거나 부족하다면 이 단계에서 리서치를 진행해도된다.
이렇게 퍼소나까지 정하였다면 그다음은 핵심가치와 핵심기능을 정리하는것이다.
퍼소나가 여러가지 핵심기능중에서 주로 어떤 기능을 사용하는지를 분석한다
찾아냈다면 이 문제의 근본적인 문제점에 대해 파악하고 실효성 있는 해결방안을 제시한다
그저 표면적인 해결방안이 아닌 근본적인 해결방안으로 해야 나중에 다시 문제가 생길 가능성이 줄어든다.
지금 여기서 할수있는일은 가지고 있는 데이터 (VOC) 에서 1.보편적인 문제를 확인해야한다을 해결하기하는것.
그래서 나는 리서치한 엑셀파일로 가지고있는 사용자리뷰를 정리하여 무엇이 가장 공통적으로 가진 문제인지 찾기 위해 주제별로 나눈다음 각각 얼마나 비중을 차지하는지 정리를 하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
화살표 함수와 삼항 연산자 등 새로운 문법을 배우면서 개념은 이해했지만
실제로 코드에 적용할 때 익숙하지 않아 시간이 걸렸다.
학습한 문법(화살표 함수, 삼항 연산자, Async/Await)을 매일 간단한 예제를 통해 연습을 해야겠다.
핵심 문제를 정의하기 위한 방법론과 순서에 대해 팀원들과 합의가 어려웠지만 일단
리서치한 데이터내에서 최대한 문제를 정의하기위한 방법론과 순서를 정하였고, 방향성을 튜터님의
피드백으로 결정을 하였다