[TIL] 240124(수) React 숙련주차 시작 / map( ), filter( ) 메소드 복습

오늘 공부한 내용 정리💁🏻‍♀️

1. Basic 세션 2회차 수업

1) map 과 filter

.find, .findIndex, .indexof : 순회하면서 처음 만난 값을 가지고 온다. 그 뒤로는 더이상 찾지 않는다.
.reduce(acc + curr) : 배열 내 값들의 합 구하기/ 하나로 합치기 => 배열 내 값이 4개였는데, 1개로 나온다

✅ map : 원본과 같은 길이의 새 배열을 생성할 때 사용.

array.map((element) => {/* 변환 로직 */});

✅ filter : 콜백 함수의 조건을 통과하는 요소로 원본과 같거나 짧은 길이의 새 배열을 생성

array.filter((element) => {/* 조건 */});

!!질문!!
filter 메소드를 진행하는 코드에서, user.isActive의 true와 false는 filter.((user) => user.Active) 이부분은 user.Active가 있으면 true를 반환한다는 말인건가요? YES
js => truthy falsy한 값들 복습하기!!!

2) 함수의 인자와 return

입력값 : input(매개변수)
출력값 : output (반환값)

function sum(a,b) {
    console.log(a+b); // 실행 됨.
    return a + b ;

      //return을 만나서 함수가 이미 종료됨. 함수를 빠져 나가버림~
    console.log(a+b); // 실행 안 됨.
}

3) semantic HTML

: 태그만 봐도 알아보기 쉬워, 가독성이 좋다.

• 접근성 향상 : 스크린 리더와 같은 보조 기술에 의미 있는 정보 제공 // 접근성을 잘 지키면 자격증을 받을 수 있다.
• SEO 최적화 : 접근성을 잘 지킨 사이트들을 봇들이 위에 올려줌
• 유지보수 용이성

semantic html을 잘 지키면 프론트엔드의 필살기가 될 수 있다.

• html semantic tags 기본 태그 공부하기

4) CSS flex

Flex Container : Flexbox 레이아웃을 적용할 부모 요소이다. 주로 display : flex;를 사용하여 설정한다.
Flex Item : Flex Container 내부의 자식 요소들을 의미한다. Flexbox의 속성을 통해 정렬, 크기 등을 설정할 수 있다.

📌 Flex의 주요 속성
- flex-direction : 아이템이 흐르는 방향을 결정/ 주로 row / colume 사용
- justify-content : main axis 정렬 / center, space-between, flex-start 등 사용
- align-content : cross-axis 정렬 / center, baseline, flex-start

flex를 사용하기 전에 머릿속으로 어떻게 구현을 할 것인지 그려보자.

5) 다양한 사이트 많이 알아보기

✅ draw.io
: 개발자들이 그리는 그림판 중 하나이다.

✅ mobbin
: 레이아웃이 어떻게 구성 되었는지 사이트 많이 찾아보기.

✅ Can I Use
: html 속성/css 속성/js 속성 등을 검색하면 브라우저에서 지원하는지 확인 할 수 있다.

2. 새롭게 배운 내용

React 숙련 주차 강의를 통해, styled-component에 대해서 배우게 되었다.
항상 CSS만 사용을 하다가, styled-component를 사용하는 것이 익숙하지 않았는데, 반복되는 코드를 줄일 수 있고, className을 찾아서 css 파일에 새로 작성하는 것이 아닌, jsx 파일 내에서 html과 css 작업을 한 번에 할 수 있는 방식이었다.

📌 styled-component 만드는 방법

styled.div 뒤에 벡틱을 사용하여 template literals를 사용한다.

const StBox = styled.div``

벡틱 내부에는 css 코드를 작성하고, ${}(place holder)를 활용하여 함수를 생성해준다.

//  styled-components를 만든다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; 
  margin: 20px;
`;

이후 html 요소에서 해당 style이 적용되고자 하는 곳에 컴포넌트를 사용하여 작성해준다.

const App = () => {
  return (
    <div>
    // borderColor 변수를 사용하여 -> StBox 컴포넌트로 값을 전달한다. 
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

하루를 마치며...🤔

또다시 새로운 개념과 내용들이 머릿속으로 들어오고 있는 중이다. 하지만 javascript 언어를 사용하여 react 프로젝트를 생성하기에 무엇보다 js 기본 문법이 가장 중요하다고 생각한다. 머리가 절대 좋은 편도 아니고, 기억력이 좋지도 않는 나로서는 반복 학습과 꾸준한 노력만이 살 길이라고 생각한다. 조금은 느리더라도 기초부터 차근차근 기초공사를 잘 다져서 탄탄하게 실력을 쌓아 올리도록 노력해야겠다.