5/22 TIL (개인과제 React Accounter Book - 1일차)

Hwi·2024년 5월 23일

TIL

목록 보기

31/96

📚 공부한 것들

알고리즘 탐험반 practice2-2 문제 풀기
React 숙련 강의 복습 시작
React 가계부 개인과제 세팅

알고리즘이 점점 어려워 지는 거 같다.. 그래도 우여곡절 끝에 겨우 풀이 성공

탐험반 문제 : 두 문자열의 교집합 문자 구하기

문제 정의: 두 문자열이 주어졌을 때, 두 문자열에 모두 등장하는 문자를 집합으로 반환하라
조건:
대소문자를 구분하지 않는다.결과는 집합(Set) 형태로 반환한다.
예시:
입력: "apple", "pineapple"
출력: new Set(['p', 'l', 'e'])

나의 풀이

function commonCharacters(s1, s2) {
    // s1, s2를 배열로 만듬
    const arr = [...s1,...s2]
    // s1, s2를 각각 new Set에 담아줌
    const set1 = new Set(s1);
    const set2 = new Set(s2);

    // 교집합 문자를 담을 new Set
    const check = new Set();
    
    arr.forEach((char) => {
        if(set1.has(char) && set2.has(char) && !check.has(char)) { 
            // 논리연산자를 이용해 set1, set2의 조건이 참일 때만
          //check에 들어있지 않은 문자일 경우 check에 추가
            check.add(char);
        };
    });
    return check;
};

이 문제를 거의 1시간 30분 걸렸는데 Set에 대해서 사용법을 까먹은 거 같아서 다시 구글링 하면서 공부를 했다는 점이 뽀인~또

이제 개인과제 폴더에 vite를 이용해서 개발환경구축 먼저 해둬야지 하고 생각이 들어서 바로 실천에 옮겼음

yarn create vite
yarn install
yarn add styled-components
yarn dev

순으로 터미널에 입력 후 잘 가동되는지 확인해봤다

음 굿

📌 주특기 숙련 학습 가이드

🧑🏻‍🎓학습 목적

지난 주 ‘리액트 입문 주차’에 이어 이번 주는 ‘리액트 숙련 주차’가 진행됩니다. 입문주차에서 갈고닦은 기초체력을 통해 본격적인 주특기 학습을 성공적으로 진행하는 것이 금주의 학습 목적입니다.
입문주차에서 맛본 React.js는 확실히 프론트엔드 개발을 위해 특화된 많은 기능을 제공하죠. 하지만, ‘컴포넌트 스타일링’, ‘반복적인 리렌더링 이슈’, ‘Prop Drilling’ 부분에서 아쉬움을 느꼈을 수 있어요. 숙련주차에서는 이러한 부분을 중점으로 학습합니다.
이러한 학습을 통해 좀 더 효율적이고 깔끔한 리액트 개발로 한 걸음 더 다가가보는 한 주가 되길 바랍니다.

🧑🏻‍🎓학습 목표

React
- styled-components에 대해 배우며 CSS-in-JS를 이해할 수 있습니다.
- 기존과 다르게 훨씬 효율적인 컴포넌트 스타일링 기법(조건부 스타일링, 전역 스타일링 등)을 숙지합니다.
- 다양한 React hook에 대해 이해하며 리액트 개발을 할 수 있습니다.
- memoization의 다양한 기법을 숙지 및 활용할 수 있습니다.
- 리액트 컴포넌트 라이프사이클을 이해하고, 각 생명주기와 mount / update / unmount의 관계를 이해할 수 있습니다.
- 리액트에서 브라우저에 화면을 렌더링 하는 방법, 특히 Virtual DOM에 대해 이해할 수 있습니다.
- 전역상태 관리의 필요성에 대해 설명할 수 있으며, 대표적인 전역상태관리 도구인 Redux를 활용하여 프로그램을 구성/구축할 수 있습니다.
- 컴포넌트 라우팅을 이해하며, react-router-dom을 통해 SPA 환경 안에서의 페이지 이동 기법을 구현할 수 있습니다.
- 비동기 프로그래밍 및 RestFul한 설계/개발방법에 대해 설명할 수 있습니다.

과연 저 목표를 다 이룰 수 있을지가 정말.. 깜깜하긴 하다

✅ 체크리스트

inline 방법이 아닌, 리액트 컴포넌트를 스타일링 할 수 있는 방법을 2개 이상 설명해주세요.
조건부 스타일링은 언제 사용해야 하고, styled-components에서는 어떻게 사용할 수 있는지 설명해주세요.
React hook의 다음 종류에 대해 용도와 사용 방법에 대해 설명해주세요.
- useState
- useEffect
- useRef
- useContext
memoization이란 무엇이며, 왜 사용해야만 하는지 설명해주세요. 만일 사용하지 않는다면 어떤 이슈가 발생할 수 있을지도 말씀해주세요.
React 컴포넌트 라이프사이클에 대해 설명하고, mount, update, unmount 과정에서 각 라이프사이클 메서드가 어떻게 동작하는지 설명해주세요.
Virtual DOM이 무엇인지 설명하고, 이가 실제 DOM과 어떻게 다른지, 그리고 왜 필요한지 설명해주세요.
전역상태 관리의 필요성에 대해 설명하고, Redux를 사용하여 전역상태를 관리하는 방법에 대해 예시를 들어 설명해주세요.
React Router를 사용하여 SPA(Single Page Application)에서 라우팅을 어떻게 구현해야 하는지 설명해주세요.
비동기 프로그래밍이 무엇인지, 그리고 Restful 설계 원칙에 대해 설명해주세요.

omg...

일단 헤더 부분, 월별 버튼이 들어갈 부분만 만들어뒀는데 월별 버튼을 누르면 다른 페이지로 이동하게끔 react router dom을 이용해야 할 거 같은 느낌은 알고 있지만 어떻게 써먹어야 할지 감이 안 잡힌다.. 스타일
컴포넌트를 이용해서 컴포넌트를 분리하고 있는데 헤더 부분만 해도 이정돈데 완성하고 나면 컴포넌트가 20개는 넘지 싶다..