JS 데이터 타입 자바스크립트 변수와 식별자 - 변수 : 변할 수 있는 데이터를 담는 공간 - 식별자 : 데이터를 식별하는 데 사용하는 이름 -> 변수명, 메모리 주솟값 자바스크립트 데이터 타입 primitive type - number, string, boolean, null, undefined - 값이 담긴 주솟값을 변수에 저장 - 값이 달라지면 무조건 새로운 메모리 공간에 새로운 값을 저장하고 해당 새로운 메모리 공간의 주솟값을 변수에 할당한다. => 한 번 만든 값은 바꿀 수 없고 값의 변경은 새로 만드는 동작을 통해서만 이루어진다. 한 번 만들어진 가비지컬렉팅을 당하지 않는 한 영원히 변하지 않는다 : 불변성의 성질! var a = 1; var b = a; // a 와 b는 1이 담긴 같은 메모리 주소를 저장하고.. 2020. 11. 7. 14. Redux-middleware - 리액트 웹 애플리케이션에서는 API 요청에 대한 상태도 잘 관리해야 한다 - 리액트 웹 애플리케이션에서 리덕스를 사용하고 있으며 api 요청과 같은 비동기 작업을 관리해야 한다면 middleware를 사용하여 효율적으로 상태를 관리할 수 있다 middleware란? - 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들 실행하는 액션과 리듀서 사이의 중간자 - 미들웨어가 하는 작업 예시 1 : 전달받은 액션을 콘솔에 기록 - 미들웨어가 하는 작업 예시 2 : 전달받은 액션을 취소하거나 다른 종류의 액션을 추가로 디스패치 - 대표적인 미들웨어 : redux-thunk, redux-saga redux-thunk - 비동기 작업을 처리할 때 많이 사용하는 미들웨어.. 2020. 11. 6. 13. React-Redux React-Redux란? - Redux를 React App에서 효율적으로 사용하기 위해 여러 유틸함수와 Provider 컴포넌트를 제공하는 라이브러리 Presentational Component and Container Component Patterns - 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴 - Presentational Component : 상태관리가 이루어지지 않고, 그저 props를 받아서 화면에 UI를 보여 주기만 하는 컴포넌트 - Container Component : 리덕스와 연동되어 있는 컴포넌트로, 리덕스로부터 상태를 받아오거나 리덕스 스토어에 액션을 디스패치한다. - 리액트 프로젝트에 리덕스를 적용하여 업데이트에 관련된 로직(container)을 리액트 컴포넌.. 2020. 11. 6. 12. Redux 리덕스란? - 상태 관리 라이브러리 - 컵포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능 - 컴포넌트들간에 공유되는 상태를 여러 컴포넌트를 거치지 않고 손쉽게 상태 값 전달 및 업데이트 가능 - 전역상태를 효율적이고 체계적으로 관리 가능 - 미들웨어 기능을 이용하여 비동기 작업을 효율적으로 처리 리덕스 기초 개념 1. 액션, action - 어떤 상태로 변화하는지 'type'이라는 키의 값으로 표현하는 하나의 객체 - type 키의 값 이외의 값들은 상태 업데이트시 참고하는 값 // action example { type:'ADD_TODO', data:{ id:1, text:'redux 공부' } } 2. 액션 생성 함수, action creator - 액션 객체를 만들어.. 2020. 11. 6. 11. Asynchrony (비동기작업) 1. Asynchrony ? 2. axios 3. 예제 1. Asynchrony ? 정의 : 비동기작업은 이전 작업이 끝날때 까지 기다릴 필요 없이 다른 작업을 진행하는 것. Ajax (Asynchronous Javascript And Xml) : 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 callback : 특정 로직이 끝났을때 실핼항 동작을 정의하고 있는 함수 promise : 어떤 작업이 성공했을 때(resolve), promise 객체의 then() 함수에 넘겨진 파라미터(함수)를 단 한번만 호출하겠다는 약속. callback 의 경우 제어권이 호출되는 함수로 넘어가 버리기 때문에 신뢰성이 다소 .. 2020. 10. 25. 10. SPA 와 Routing 1. SPA 2. Routing 3. react-router를 이용한 SPA 4. SPA단점 및 해결방안 traditional page vs SPA 1.SPA, single-page application 정의 : 한 개의 페이지로 이루어진 애플리케이션 기존의 웹 애플리케이션은 화면 전환이 일어날 때마다 html을 서버에 새로 요청하면 사용장의 인터페이스에서 사용하고 있던 상태를 유지하기 어려웠다. 또한 바뀌지 않는 부분까지 새로 불러와 보여주므로 불필요한 로딩이 존재하여 비효율적이었다. SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드한다. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전.. 2020. 10. 25. 이전 1 2 3 4 5 6 다음
