React
1.[ 06.04 ] 리액트 기초
리액트의 세가지 특성 알기jsx 의 이해, 몇가지 규칙을 이용하여 바르게 작성할 수 있다.map 을 이용한 반복적인 데이터 렌더링을 할 수 있다.리액트 컴포넌트의 필요성에 대해 이해, 설명 할 수 있다.create-react-app 으로 간단한 개발용 리액트 앱 실행할
2.[ 06.07 ] SPA (Single Page Application)
HTML에서만 작업 시, 페이지가 이동할 때마다 새로운 페이지를 불러오는 방식으로 사용했기 때문에 화면의 로딩속도는 느려졌고, 사용자 또한 빠른 인터페이스를 체감하기 어려웠다.하지만 싱글페이지 어플리케이션은 하나의 페이지 안에 자바스크립트로 여러 컴포넌트를 두어, 이벤
3.[ 06.07 ] React Router
라우팅의 개념에 대해 알 수 있다.React Router DOM의 컴포넌트를 사용 할 수 있다.BrowserRouterSwitchRouteLink앞서 SPA 는 하나의 페이지 안에서 변경이 필요한 컴포넌트만 조작한다고 하였는데, 조작후 새로운 페이지로 이동 할 일이 생
4.[ 06.08 ] State & Props
state, props 의 개념에 대해 이해한다.state hook 을 이용하여 state 를 정의, 변경 할 수 있다.리액트 컴포넌트에 prop를 전달 할 수 있다.이벤트 핸들러 함수를 만들고 리액트에서 이용할 수 있다.실제 웹/앱 의 컴포넌트를 보고 어떤 데이터가
5.[ 06.28 ] React 데이터 흐름
💎 React 데이터 흐름React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.💎 State 끌어올리기의 개념을 이해할 수 있다.상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는
6.[ 06.29 ] React 비동기 요청
Achievement Goals Effect Hook 💎 Side effect가 어떤 의미인지 알 수 있다. React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. Side effect의 예를 들 수 있다. 💎 Effect Hook을
7.[ 07.16 ] React Hook ( Modal / Tag / Tab - 리액트 라우터 돔)
리액트 훅에서 css in js 인 스타일드 컴포넌트를 활용하여모달창과 tag 창을 만들어 보았다.예전에 배웠던 라우터도 까먹지 않기 위해서 tag / tab 에 라우터기능도 괜히 넣어본다 .. Modal 창 구현하기Tag / Tab 창 구현하기 첫화면에서 (랜딩페이지
8.[10.11] React-slick
✅ SimpleSlider 사용법✅ AsNavFor로 슬라이더 동기화시키기 ✅ Custom Arrows,appendDots이번 4주 프로젝트에서 주로 사용된 React-slick, 하지만 제대로 알지못해 잘못 사용하고 있었던 React-slick 에 대해 소개도 할 겸