React
1.[React] .gitignore and package.json
package.json 프로젝트에 대한 요약 설명서
2.[React] 1. Intro
1. Why react? 1-1 Web Application의 발전 애플리케이션의 규모가 커지고 다양한 UI(User Interface), UX(User Experience)를 구현하기 위해서 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지
3.[React] State & Event
State state: 상태 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값 화면에 보여줄 컴퓨넌트의 정보(상태)를 지니고 있는 객체 state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다. State 객체 Class componen
4.Warning: Each child in a list should have a unique "key" prop.
=> list 내의 각 child에는 고유한 "key"prop이 있어야한다.=> 즉, 모든 react의 element들은 유일해야하고, element들을 list 안에 넣을 때, 그 고유성을 잃어버린다. for some reason=> react의 모든 element들
5.[React] Pagination (Query string)
페이지네이션은 목록형 UI에서 데이터를 한 번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 방식을 말한다. 게시판처럼 1~10페이지가 있는 형식, 인스타그램에서 가장 하단의 스크롤로 내려왔을 때 새로운 데이터를 가
6.[React] Hooks (useState)
Hooks 함수 컴포넌트에서 React state의 생명주기 기능(Lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수다. Hook은 class 안에서는 동작하지 않고, class 없이 React를 사용할 수 있게 해준다. Hooks
7.[React] Hooks (useEffect)
React 함수형 컴포넌트(functional component)에서 useEffect를 사용하면, side effect를 수행할 수 있다.side effect: React Component가 화면에 render된 후에, 비동기로 처리되어야하는 효과들useEffect(
8.[React] 함수형 컴포넌트 사이에서 props 전달하기
2차 프로젝트를 하는 도중에, props 전달을 부모에서 자식으로, 자식에서 부모로, 부모에서 다른 자식으로 전달해야하는 경우를 만났다. 이 흐름(flow)을 한번에 이해하는게 어려워서 프로젝트 도중이지만, 기록을 해본다.
9.[React] 함수형 컴포넌트 사이에서 props 전달하기
2차 프로젝트를 하는 도중에, props 전달을 부모에서 자식으로, 자식에서 부모로, 부모에서 다른 자식으로 전달해야하는 경우를 만났다. 이 흐름(flow)을 한번에 이해하는게 어려워서 프로젝트 도중이지만, 기록을 해본다.
10.[TIL] React 같은 역할을 하는 함수 합치기
1. 역할이 같은 함수는 합쳐버리자! 로그인 페이지에서 Enter키와 마우스 클릭으로 로그인 버튼이 경우에 따라서 활성화되는 로직을 구현하였다. 역할이 같은 기능을 두 가지의 함수로 만들었다. 
Webpack? Webpack은 '자바스크립트 모듈 번들러(JavaScript Module Bundler)'다. 모듈은 프로그램을 구성하는 독립적인 요소로서 파일 단위로 구분된 것이라고 보면 되고, 번들러는 여러 개의 파일을 하나의 파일로 만들어주는 라이브러리다. 대표
12.TIL | Props & Event
Props props: properties(속성) 컴포넌트의 속성값 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. Props 객체 위에
13.[React] 라우팅(Routing) 연습 1
링크 https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/practice/17069#questions https://reactrouter.com/web/guides/quick-start 파일
14.[React] 라우팅(Routing) 연습 2
Task Add Routes to load "Users" and "Courses" on different pages (by entering a URL, without Links) 다른 페이지에서 "Users"와 "Courses"를 로드하는 경로를 추가하시오.(Link
15.TIL | Redux(리덕스) - 1
https://www.cronj.com/blog/react-redux-a-complete-guide-to-beginners/ Redux 자바스크립트로 만든 애플리케이션들을 위한 예측 가능한 상태의 저장소 Redux의 특징 1. Single Source of Trut
16.TIL | Redux(리덕스) - 2
Redux(리덕스) - 1에 이어서... mapStateToProps 인수로 전달된 state는 전체를 의미한다는 것에 주의해야 한다. 카운터의 예를 다시 보면, 위 코드가, 로 들어가길 바라면서 state => ({ value: state.value })라고 썼
17.TIL | 버튼 중복 선택(find, filter)
filter와 find 메서드를 사용해서 버튼을 중복 선택하기
18.TIL | React, DatePicker 라이브러리 사용하기 && 버튼 클릭 시, 날짜 변경
https://www.npmjs.com/package/react-datepicker > https://reactdatepicker.com datepicker 설치하기 datepicker을 기본적인 사용 가이드는 위에 있는 웹사이트이 가이드를 따라하면 되지만, css
19.TIL | React 체크박스(전체 선택, 체크 해제)
체크박스 선택, 해제 기능 구현해야할 기능 전체선택/해제 전체선택 후, 하나라도 체크가 사라지면 전체 선택 해제 모든 체크 박스 선택 시, 전체 선택 활성화
20.[React] Refs와 DOM
참고 https://www.udemy.com/course/react-redux/learn/lecture/20787850#questions https://reactjs.org/docs/refs-and-the-dom.html Ref와 DOM Ref는 DOM 노드나 ren