우당탕탕 개발일지

Count   Color   ChangeCount & ChangeColor  Counter

ReduxRedux와 React는 독립적인 별개의 다른 라이브러리자바스크립트 어플리케이션에서 흔히 쓰이는 상태관리 라이브러리Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리, 프레임워크에서도 사용 가능 특징컴포넌트들의 상태 관련 로직들을 다른 파일로 분리하여 효율적으로 관리글로벌 상태 관리 용이상태값을 컴포넌트에 종속 X & 상태 관리를 컴포넌트의 바깥에서 관리 가능 주요개념store모두 한 곳에서 집중 관리컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.actionAction(액션)은 앱에서 스토어에 운반할 데이터를 말한다. (주문서)Action(..

메인 화면  로그인유효성 검사: 아이디 & 비밀번호로그인 실패실패 팝업 발생실패 문구 노출로그인 성공로그인 -> 로그아웃로그인 계정 이름 노출 로그아웃로그인 팝업 발생사용자 이름 숨김  게시물 목록 게시물 작성로그인 전게시물 작성 불가로그인 후게시물 작성 화면 접근 가능유효성 검사: 제목 & 내용게시물 작성 후, 게시물 목록 이동   게시물 상세 내용게시물 목록에서 제목 클릭 시, 상세 내용 확인 가능

useReducer()React에서 컴포넌트의 상태 관리를 위해서 useState를 사용해서 상태를 업데이트를 하는데, useReducer를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용할 수 있다.  [사용법] const [state, dispatch] = useReducer(reducer, initialState); state : 현재 상태dispatch : action을 발생시키는 함수reducer : state와 action를 받아 새로운 state를 반환하는 함수initialState : 초기값  Test01: useReducer (1) COLOR 값 설정  ..

웹 스토리지HTML5에서 추가된 기술로 로컬스토리지와 세션스토리지로 구분된다. 특징- 웹 스토리지는 Key와 Value 형태로 이루어졌다.- 웹 스토리지는 클라이언트에 대한 정보를 저장한다.- 웹 스토리지는 로컬에만 정보를 저장하고 쿠키는 서버와 로컬에 정보를 저장한다. 종류로컬스토리지 (localStorage) : 클라이언트에 대한 정보를 영구적으로 저장세션스토리지 (sessionStorage) : 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제장점- 서버에 불필요하게 데이터를 저장하지 않는다. (백엔드에 절대로 전송되지 않는다.)- 저장 가능한 데이터의 용량이 크다. (약 5Mb, 브라우저마다 차이 존재) 단점- HTML5를 지원하지 않는 브라우저의 경우 사용 불가. (현재는 거의 없..

[ day03 ]Test07  Test08 - img사진 클릭 시, 해당 정보 크게 보임  Test09 - src/image  Test10 - Ref  Test11 - 전체 선택 & 해제   [ day04 ]Test01 - useEffectuseEffect란?useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수이다.useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있다.렌더링 후 useEffect는 무조건 한번은 실행된다. [형식]  1. 컴포넌트가 나타날 때 딱 1번만 함수가 호출 useEffect( () => { }, [ ]); 2. 특정 props가 ..

1. Data 전달1. Cat 2. SungJuk        2. Hooks-useRef리액트에서 제공하는 대표적인 훅 중 하나이다. JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 선택리액트에서는 직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능input태그와 같이 사용자가 값을 직접 입력하는 html태그에 직접적으로 접근하여 값을 가져오는 것을 가능리액트 컴포넌트는 State가 변할 때마다 다시 렌더링이 되면서 컴포넌트 내부 변수들이 초기화..

비구조할당const dog = { name : '멍멍이', age : 2}console.log(dog.name, dog.age)console.log(dog['name'], dog['age'])// 비구조 할당const {name, age} = dogconsole.log(name, age)console.log('-------------------------')const data = { name2 : '홍길동', kor : 95, eng : 100, math : 85}console.log(data.name2, data.kor, data.eng, data.math)console.log(data['name2'], data['kor'], data['eng'], data['math'..