인프런 워밍업 클럽 스터디 1기 FE - 9번 과제

9번 과제 (Day10) (디즈니 플러스 앱)깃허브 저장소 주소: https://github.com/rslivepark/fe-study.git 과제 사진

인프런 워밍업 클럽 스터디 1기 FE - 2주차 발자국

리액트 강의 정리(섹션1~5)Section 1컴포넌트- 리액트로 만들어진 앱을 이루는 최소한의 단위(함수형/클래스 컴포넌트)가상돔- 인터렉션이 많은 웹의 경우 불필요한 DOM을 조작하는 비용이 큰 문제를 해결하기 위해 나오게 됨- 데이터가 바뀌면 가상돔에 렌더링이 되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용시켜 줌 Section 2SPA Single Page Application- 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한 것- HTML5 History API를 사용하여 페이지 전환 해줌JSX Javascript Syntax eXtension - 자바스크립트, HTML 구조 같이 사용할 수 있음 → 기본 UI에 데이터가 변하는 것을 쉽게 구현할 수 있음 - createElement 쉽게 사용하기 위해 사용React State컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체 Section 3React Hooks- class없이 state를 사용할 수 있는 기능- useAuth(), useState() ...Propsproperties상속하는 부모 컴포넌트에서 자식 컴포넌트에 데이터 등을 전달하는 방법읽기 전용, 자식 컴포넌트 입장에서는 변하지 않음변하게하려면 부모 컴포넌트에서 state 변경해야 함State해당 컴포넌트 내부에서 데이터 전달변경 가능state가 변하면 re-render 됨구조 분해 할당 Destructing → 클린코드 목적- 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식// 구조 분해 할당 function buildAnimal(animalData){ let {accessory, animal, color, hairType} = animalData; ... } // 깊게 들어간 객체 구조 분해 할당 let {address:{zipcode, street, number}} = person;React.memo- React 컴포넌트를 메모이제이션하여 불필요한 리렌더링을 방지하는 데 사용 - 컴포넌트의 props가 변경되지 않으면 이전에 렌더링된 결과를 재사용useCallback- 동일한 콜백 함수가 계속 재생성되는 것을 방지하고, 의존성이 변경되지 않으면 이전에 생성된 콜백 함수를 재사용useMemo- compute함수에 넘겨주는 a,b 값이 이전과 동일하다면 컴포넌트가 리렌더링 되더라도 연산을 다시 하지 않고 이전 렌더링 때 저장해주었던 값을 재활용하게 됨Section4,5Axios- http 비동기 통신 라이브러리, promise api 활용- 인스턴스화 하여 사용React 애플리케이션에서 라우팅을 관리하기 위한 도구라우팅 컴포넌트 및 구조 관련- 중첩 라우팅 : 라우팅 시스템에서 하위 경로에 대한 라우팅을 부모 경로의 컴포넌트 내에서 처리하는 것- outlet : 라우팅 구성 요소 내에서 렌더링된 컴포넌트의 자식 컴포넌트를 표시하는 데 사용라우터 훅 관련- useNavigate : 특정 이벤트 또는 조건에 따라 사용자를 다른 경로로 이동시키고 싶을 때- useParams : 현재 라우팅된 경로의 URL 매개변수에 액세스하는 데 사용- useLocation : 현재 애플리케이션의 위치(경로, 쿼리 매개변수 등)에 대한 정보 제공. 이를 통해 현재 경로나 쿼리 매개변수를 읽을 수 있음- useRoutes : 라우터 구성을 동적으로 생성할 때 사용Debounce- 연이어 호출되는 함수 중 마지막 호출 이후 일정 시간이 지난 후에만 실제로 함수를 실행하도록 하는 기술- 일정 시간 동안 함수 호출을 무시하고, 마지막 호출 이후에만 함수를 실행하여 성능을 향상시키거나 불필요한 작업을 방지할 때 사용useRef- React 함수 컴포넌트 내에서 변수를 유지하고 DOM 요소에 접근하는 데 사용- 컴포넌트 재렌더링 시에도 값이 유지되며, 변경 시에는 컴포넌트가 다시 렌더링되지 않음후기리액트를 처음 접했을 때, 컴포넌트 기반 설계의 아이디어는 매력적으로 다가왔다. 한 페이지에서 모든 요소를 관리하고 조작할 수 있다니!! 하지만 이를 실제로 코드로 구현하는 것은 예상보다 훨씬 복잡했다.컴포넌트 간의 상호작용과 데이터 흐름을 이해하는 데 어려웠다. 예를 들어, 상태가 변경될 때마다 컴포넌트가 어떻게 업데이트되는지 이해하는 것이 쉽지 않았다. 이해하는 것에 매몰되지 말고 일단 구현해보자 하고 예산 계산기 앱 과제를 진행하는데컴포넌트를 나누는 것까지는 어떻게 했는데 props를 전달하는 메커니즘을 생각하는 게 어려웠다. 부모 컴포넌트에서 자식 컴포넌트로 어떤 데이터를 props로 전달해야 하는지, 어떤 형식으로 전달해야 하는지.. 또한, useState와 useEffect 같은 리액트 훅의 개념을 이해하고 적용하는 것도 쉽지 않았다.처음에는 막막했지만, 구글과 챗GPT의 도움을 받으면서 조금씩 이해가 되기 시작했다. 그리고 중간 점검때 강사분께서도 실제로 기능 구현을 많이 해보고 다른 사람의 소스코드도 보면서 공부하라는 조언을 새겨들으면서 남은 3주차도 열심히 해보자!!

인프런 워밍업 클럽 스터디 1기 FE - 8번 과제

8번 과제 (Day9) (예산 계산기 앱)깃허브 저장소 주소: https://github.com/rslivepark/fe-study.git 과제 사진

인프런 워밍업 클럽 스터디 1기 FE - 6번 과제

6번 과제 (Day7) (타이핑 테스트 앱)깃허브 저장소 주소: https://github.com/rslivepark/fe-study.git과제 사진

인프런 워밍업 클럽 스터디 1기 FE - 1주차 발자국

강의 정리노션 링크로 대체합니다.https://synonymous-currant-9b2.notion.site/FE-Javascript-542dcc2333df4ef0a2fb9c478011d171?pvs=4미션가위 바위 보 앱컴퓨터가 랜덤으로 가위바위보를 출력하도록 하는 로직을 구성하는게 어려웠다. 랜덤으로 숫자를 생성하는 Math.random()을 이용하면 될 것 같은데 이 함수는 숫자만 랜덤으로 만든다. 가위바위보 결과는 string이다. 어떻게 랜덤으로 출력하도록 할까 검색을 해본결과 랜덤숫자를 배열의 인덱스로 하면 컴퓨터 결과값이 랜덤으로 출력될 수 있음을 알게되었다.1주차 후기타 사이트에서 자바스크립트 강의를 들은 적이 있어서 이번 워밍업 스터디는 기존에 배웠던 것을 한 번 다시 리마인드하는 기분으로 가볍게 생각해야지 했는데 이건 경기도 오산이였다. 배울 때는 겸손한 태도로 임해야 한다는 것과 지식을 아는 것과 그것을 활용하는 것은 다르다는 것을 다시 한 번 깨닫는 1주차였다.강의 들으면서 열심히 정리한다고 했는데 다음날 진도나가기 전에 복습으로 보는데 왜 적었지 하는게 있어서 강의를 집중하고 이해하는 것도 중요하지만 정리할 때도 미래의 나 자신을 위해 정확하게 적어야 하는것도 중요함을 알게되었다.

인프런 워밍업 클럽 스터디 1기 FE 5번 과제

5번 과제 (Day6) (비밀번호 생성 앱)깃허브 저장소 주소: https://github.com/rslivepark/fe-study.git과제 사진

인프런 워밍업 클럽 스터디 1기 FE 3,4번 과제

3,4 번 과제 (Day3) (퀴즈앱, 도서목록 만들기)깃허브 저장소 주소: https://github.com/rslivepark/fe-study.git과제 사진3번 퀴즈앱4번 도서목록4번

인프런 워밍업 클럽 스터디 1기 FE 2번 과제

1번 과제 (Day3) (가위 바위 보 앱)깃허브 저장소 주소: https://github.com/rslivepark/fe-study/tree/main/day3과제 사진

인프런 워밍업 클럽 스터디 1기 FE 1번 과제

1번 과제 (Day2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/rslivepark/fe-study/tree/main/day2과제 사진