TIL (Today I learned)
오늘 나는 무엇을 했나요
- React 입문 1주차
- UX집중반
오늘은 어떤 것을 배웠나요
-React 입문 1주차
리액트 기초에 들어가기전에 리액트 변수의 종류와 사용이유, 사용방법, 주의할 점 배웠다.
1.변수
먼저 변수를 사용하는 이유는
데이터를 저장하고 관리를 하여 프로그램의 복잡성을 관리하고 재사용성 및 유지보수를 향상시키기위함이다.
이때 변수는 총 3가지로
1.let
2.const
3.var
스코프로 분류
let과 const 은 블록 스코프 변수로 선언된 블록 내에서만 접근이 가능하고
var은 함수 스코프 변수로 선언된 함수 내에서 유효하다.
이것이 var을 사용 지양해야하는 이유이다.
함수 스코프를 가진다는것은 함수 내부 어디에서든 접근이 가능하다는것으로 예상치 못한 범위에서 변수가 접근 가능하게 되어 후에 문제가 발생할수도있다.
재할당 가능성에 따른 분류
const는 값을 재할당 할 수 없는 상수를 선언할때 사용
let은 값을 재할당할때 사용
그래서 변수를 사용할때 먼저 const를 최우선으로 하고 재할당을 필요할 경우에는 let으로하기
2.객체
개객체는 키와 값을 가지고 있는 데이터 구조로 거의 모든 것이 객체로 다루어진다고 볼 수있다.
객체에는 속성이라는것이 있는데 이것을 추가 및 수정하거나 삭제를 할 수있다.
// 객체는 const 또는 let으로 변수화 시켜 선언합니다.
// value에는 어떤 데이터 타입이라도 올 수 있음을 기억해요.
let user = {
name: "르탄이",
age: 30,
isAdmin: true,
printHello: () => console.log("hello!")
};
// 객체접근방법1 : dot notation(점 표기법)
console.log(user.name); // 르탄이
console.log(user.age); // 30
user.printHello();
// 객체접근방법2 : Bracket Notation(괄호 표기법)
// 키 값이 변수일 때 주로 사용합니다.
// example 1
// console.log(user['name']);
// console.log(user['age']);
// example 2
let attribute = "name";
// console.log(user.attribute); // 이 케이스는 안돼요!
console.log(user[attribute]);이때 객체에 데이터에 접근하기 위한 방법은 2가지가 있으며 점 표기법, 괄호 표기법이있고 사용방법은
점으로 구분을 하냐 괄호로 구분을 하냐의 차이이다.
객체에 새로운 속성추가하거나 기존속성에 수정을 하려면 객체 이름.속성이름 = "속성값" 이런식으로 수정을 하게된다.
user.email = "john.doe@example.com";
user.age = 31;
console.log(user);
삭제는 쉽게 delete 키워드를 사용하면된다.
delete user.email;
console.log(user);
3.배열
배열은 같은 타입의 여러 데이터를 하나의 변수에 순차적으로 저장,관리할때 유용합니다.
배열또한 접근하거나 수정하기위해서는 객체와 비슷하다.
console.log(numbers[0]); //배열 접근하기
numbers[2] = 10; //배열 수정하기
console.log(numbers); //[1, 2, 10, 4, 5]
4.객체 배열에 대한 실용적인 주요 메서드
객체와 배열에는 주요 메서드가 있으며 대부분 객체안에 데이터를 어떤값을 추출할지 그값을 어떻게 추출할지에 대한 방법이다.
객체의 메서드
1.Object.keys()
객체의 키만을 추출하여 배열로 반환
2.Object.values()
객체의 값만을 추출하여 배열로 반환
3.Object.entries()
객체의 키와 값을 쌍으로 하는 배열을 반환
4.Object.assign()
하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용
배열의 메서드
1.push, pop
pop은 배열의 마지막 요소를 제거하고, 그 요소를 반환
push는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새 길이를 반환
2.reduce
배열의 각 요소에 대해 주어진 함수(리듀서 함수)를 실행하고, 결과물을 누적시켜 반환합니다.
그외 map과 filter sort가 있는데 이 셋은 이해가 잘 안갔는데 다행히 강의에서 튜터님이 비유를 해주시면서 알려주셔서 이해에 도움이 되었다.
Map은 가장 중요한것은
- 배열 내의 모든 요소 각각에 대해
- 주어진 함수를 호출한 결과를 모아
- 새로운 배열을 반환
한다는 것이다..
아래 예시가 있는데
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]이런식으로 원래의 배열에 요소를 Map으로 원래 숫자에서 주어진 함수를 호출하여 나오는 결과를 모아
numbers의 값을 새로운 squared값으로 반환하는것이다.
이때 filter는 우리가 늘 사용하는 필터와 같은것인데 이것은 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 역할을 하는것이다.
const 동영상리스트 = [{
아이디: 1,
제목: "동영상01",
썸네일이미지: "image01.jpg"
},{
아이디: 2,
제목: "동영상02",
썸네일이미지: "image02.jpg"
},{
아이디: 3,
제목: "동영상03",
썸네일이미지: "image03.jpg"
}];
const 새로운_필터링_된_리스트 = 동영상리스트.filter(function(동영상) {
return 동영상.제목.includes("01");
});위에 코드처럼 동영상 리스트를 예시로 했을때 제목이 01이 들어가는 동영상 리스트를 반환하고싶을때 filter를 사용할수가있다!
마지막으로 Sort메서드는 배열의 요소를 적절한 위치에 정렬하고 배열을 반환한다.
기본적으로는 문자열로 변환된 요소들을 각 유니코드 코드 포인트에 따라 정렬을 하기 때문에 숫자를 정렬할때 예상과 다른 결과를 낼 수 있기 때문에, 이때는 정렬 순서를 비교하는 함수를 제공해야 한다.
// 기본 사용법
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]// 숫자 배열 정렬
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]
- UX집중반 ( UX 프로젝트)
오늘은 팀원들 전부 장표만들기에 집중하였고,
최대한 잘 모르는 사람들도 한눈에 알 수 있도록 제작을 하였다.
예시로 사용자의 니즈를 만들때에는 아래 사진처럼
볼 때 한번에 이 데이터의 목적과 내용이 보일 수 있게 하고 그 아래에는 전반적인 사용자 니즈를 보여주면서 한눈에 알 수 있도록 제작을 하였다.
항상 장표를 만들때는 이것이 정말 인사이트를 담고있고 그것을 충분히 알려주고있는가를 생각하며 만드는것같다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 객체와 배열의 주요 메서드를 배웠는데 이것이 어떻게 작동하는지 왜 사용하는지는 알겠는데 실제로
어디서 사용하는지는 알기 힘들고 그것때메 사용을 할때도 헷갈릴것같았다.
그래서 이것은 각 메서드마다 사용하는 예시를 ai에게 부탁을 하여 예시상황을 들으면서 다시 복습을 해보니깐 조금 더 머리에 남아서 좋았다.