[TIL] D+50 / React입문 / ReactJS(화살표 함수, 조건 연산자, 단축평가)

2024_12_31 화요일

+ 코딩 16일차

 

 

 

📝 Lastday I Did
React입문주차로 넘어와서 Reactd에서 많이 사용하게될 JS문법 중
let, const, var에 대한 부분과 객체와 배열에 대한 부분을 자세히 배우며 복습하는 시간을 가졌고
UX집중반에서 문제 정의단계로 넘어와서 어떤 문제를 정의할 건지에 대해 팀원들과 논의 후
VOC가 많았던 증권에 대한 부분보다는 핵심기능에 포커싱하여 진행하기로 결정했다.

 

 

 

💫 Today I Did

→ React에서 많이 사용하게 될 JS문법에 중 화살표함수, 조건 연산자, 단축평가의 논리합연산자 까지 배웠고,
UX집중반 문제 정의에 들어가기 앞서 리서치 내용들의 인사이트를 추출하고 방향성을 잡았다.🙆‍♂️

 

 

 

 

---

 

 

✅  배운점

 

 

 

 

 

화살표 함수

→ 간결한 문법으로 함수를 선언합니다. return문을 따로 명시하지 않더라도 자동으로 처리된다.
단, 함수의 내용이 multi-line인 경우는 중괄호({}) 및 return문은 꼭 명시해야 해요.

// 화살표 함수 (return이 한줄인 경우)
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;
}

 

 

 

조건 연산자 = 삼항 연산자

→ 조건 연산자는 조건에 따라,코드를 더욱 간결하게 만드는데 사용한다.
if, else를 대체하는 형태를 가지게 된다.

// 조건 연산자를 쓰지 않으면 코드가 이렇게 길어진다
const score = 85;
let grade = "";

if(score >= 80) {
  grade = "A";    // grade가 80보다 크거나 같으면 "A"
} else {
  grade = "B";    // 아니면 "B"를 반환해줘
}
console.log(grade);  // 출력값'A'


// 조건연산자를 쓰면 이렇게 같은 코드를 간결하게 작성할 수 있다.
const score = 85;
const grade = score > 80 ? "A" : "B" ; // grade가 80보다 크거나 같으면 "A",아니면 "B"를 반환해줘
console.log(grade);  // 출력값'A'

 

 

 

단축 평가

→ 자바스크립트에서 단축 평가는 논리 연산자를 활용한다.

논리연산자 → 논리합 연산자(||), 논리곱 연산자(&&), Optional Chaining(?.), Null 병합 연산자(??)

 

논리합 연산자(||)

논리합 연산자는 truthy, falsy한 값이 아주 중요하다

 

falsy한 값 :  자바스크립트가 거짓으로 판단할 수 있는 값

false(boolean타입), 0, ""(빈문자열), null, undefined, NaN

 

truthy한 값 : 자바스크립트가 참으로 판단할 수 있는 값

falsy한 값에 올 수 있는 것을 제외한 모든 것을 포함

 

// 기본제공
const getUserName = () => {
  return user.name;
}

// 유저 이름이 속성에 있을때
const person = {
  name: "르탄이"
}
console.log(getUserName(person)); //출력 값 : "르탄이"

// 유저 이름이 속성에 없을때
const person = {
  age: 30,
}
console.log(getUserName(person)); // 출력 값 : undefined

 

// 1. undefined을 정의하기
const getUserName = (user) => {
  if (user.name === undefined) {
  return "신원미상";
}  
  return user.name;
}

// 유저 이름이 속성에 없을때
const person = {
  age: 30,
}
console.log(getUserName(person)); // 출력 값 : 신원미상


------------------------------------------------------------------------------


// 2. undefined로 고정하기 보다는 truthy한 값, falsy한 값을 이용하기
const getUserName = (user) => {
  if (!user.name) { // 'user.name이 들어오지 않았다면'이라는 표현(=falsy한 값이라면)
  return "신원미상";
}  
  return user.name;
}

// 유저 이름이 속성에 없을때
const person = {
  age: 30,
}
console.log(getUserName(person)); // 출력 값 : 신원미상


------------------------------------------------------------------------------


// 3. 논리합 연산자(||) 사용하기
const getUserName = (user) => user.name || "신원미상";
// 'user.name이 falsy한 값이면 신원미상으로 표현해줘'

// 유저 이름이 속성에 없을때
const person = {
  age: 30,
}
console.log(getUserName(person)); // 출력 값 : 신원미상

 

 

 

---

 

 

 

📊 UX집중반

오늘은 지난주에 카카오 페이 앱에서 VOC중에서 가장 많았던 증권에 대한 내용으로 방향성을 잡고 문제정의로 넘어가려고하던중,

튜터님께 중간 점검 차 피드백을 받으러갔다.

근데 튜터님께서 카카오 페이 증권은 사용자가 많지 않아서 사용자에 대한 조사가 이루어지는 단계에서 사용자를 찾기 힘들어서 시간적으로 힘들 것 같으니, 다른 부분을 포커싱 해보는게 어떤지 권유해주셨다.

 

그래서 팀원들과 논의해본결과 일전의 리서치 결과에서 카카오 페이 서비스 자체의 매출에서 가장 큰 부분을 차지하고 있는 것은 카카오 톡을 통해 이용하는 것이고 카카오 페이 앱을 이용한 실적은 매우 저조함을 확인할 수 있었다.

그래서 이부분으로 방향성을 잡고 설문조사 질문지를 작성하여 현재 설문을 받는 중이다.

 

설문 조사가 끝나면 결과를 가지고 카카오 페이의 공급자의 입장에서의 목적과 사용자의 입장에서의 목적이 다름을 문제 발견 단계 결과로 두고, 카카오 페이의 강점 중 다양한 금융 서비스를 제공한다라는 부분에 초점을 맞춰 문제 정의 단계로 나아갈 예정이다!

 

 

 

 

---

 

 

 

⭐️  느낀점

오늘은 점심시간을 이용해서 강의를 아주...정말...진짜 조금밖에 듣지 못하고,

하루종일 집중반 과제에 전념했다.

아무래도 지난주에 프로덕트가 갑자기 바뀌면서 시간이 많이 부족했던 터라 정리나 방향성 부분을 설정하지 못해서

오늘 그부분을 다시 진행하고 방향성을 설정하느냐고 정말 오랜시간이 걸렸다.

그리고 이번주차의 '문제정의'까지 목요일 21시까지 제출해야하기 때문에 더더욱 바쁜 하루였다.

 

정말 집중반은 하루에 2시간으로 진행하기 어렵다...

이번주가 2주차지만 벌써 지난주도 이번주도 집중반때문에 강의를 들을 시간이 없다

하지만 강의도 들어야하는 기간이 있고,,, 증말 어떻게 해야할지 모르겠다🥺

그렇다고 코딩강의는 대충들을 수 없다 하나도 모르기 때문에 이해하기위해 많은 시간이 드는데 이 시간을 어떻게 분배해야할지,

아직 감이 오지 않는다..

 

일단은 내일 1/1일 신정이기에 쉬는 날이지만 내일 최대한 강의를 들어놔야 앞으로 집중반에 전념할 수 있을 것같다...!😰

다들 새해 복 많이 받으세요....🥹