React30 2021.08.20 React 코드 스플리팅 2021.08.20 React 코드 스플리팅_정리노트 약간 이제는 리액트의 개념보다는 다양한 기능들을 리액트에 적용시키는 느낌으로 가고 있다..! 프로젝트를 빼면 리.다.기 완독이 얼마 남지 않았다..! 화이텡 코드 스플리팅 리액트뿐만 아니라 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로 하나의 파일에 모든 로직들이 들어가게 되는데, 프로젝트의 규모가 커질수록 자바스크립트 파일의 용량이 커지겠지!! 그러면 인터넷이 느린 환경에서는 첫 페이지 로딩 속도도 현저히 느려질 것이다. 코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리 시켜서 , 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통해서 페이지의 로딩속도를 개선! 이는 웹팩이라는 도구가 담당하는데, 꼭 리액트뿐만 아니.. 2021. 8. 20. 2021.08.18 React react-redux, redux-middleware 2021.08.18 React react-redux, redux-middleware_정리노트 오늘은~~~ 리덕스 미들웨어에 대해서 포스티ㅣㅣㅣㅣㅇ~~~~ 흑흑.. 사실 저번 리액트에서 리덕스 연결하기에 대한 포스팅이 개인적으로 마음에 들지 않는다. 개념을 이해하고 썼다기 보다는 개념을 나열한 것뿐.. 그래서 이어서 이 미들웨어에 대한 포스팅을 적는 것에서도 많은 걱정이 들지만, 이 개념들을 나열하면 언젠가 쓰면서 다시 정리할 기회가..? 생기지 않을까 하는 긍정적인 마인드....ㅎ..로 조심스럽게 미들웨어 포스팅 또한 쓰려 한다! https://korinkorin.tistory.com/75?category=974678 2021.08.16 React-redux 2021.08.16 React-redux_정리.. 2021. 8. 18. 2021.08.16 React-redux 보호되어 있는 글 입니다. 2021. 8. 16. 2021.08.10 redux library-tutorial 2021.08.10 redux library-tutorial_정리노트 오늘은 드디어 리덕스를 들어간다...! 리덕스는 리액트뿐만 아니라, Js App 에서 예측 가능한 상태들을 관리하는 컨테이너 라이브러리! 그러니 리액트에서 사용하려고 만들어진 라이브러리지만, 다른 라이브러리/ 프레임워크와 함께 사용할 수 있다는 말! 리덕스는 바닐라 자바스크립트와 함께 사용할 수도 있음. ( 라이브러리, 프레임워크 없이 사용하는 순수 자바스크립트 그 자체. ) 오늘은 그래서 리덕스를 어떻게 쓰는지. 각 키워드가 무슨 역할을 하는지 등등에 대해 튜토리얼처럼 포스팅할 예정. 키워드의 개념부터 정리하고 흐름에 따라서 코드 작성을 해봅시다~!!!!!!!! action 상태에 어떠한 변화가 필요하면 action 이란 것이 발생... 2021. 8. 10. 2021.08.08 React Context API 2021.08.08 React Context API_정리노트 오느른~~~~ 전역상태를 관리하는 Context API 에 대한 정리노트! 리액트 v16.3버전부터 Context API 가 많이 개선되어 별도의 라이브러리 없이 전역 상태를 관리할 수 있다. 전역 상태 관리?? 라는 것은 사용자 정보, 환경설정과 같은 모든 컴포넌트에 전역적으로 필요한 상태를 관리할 때를 말한다. 지금까지 우리는 모든 컴포넌트에 대한 정보를 제공하는 최상위 컴포넌트인 App 에서 관리를 했는데 구조가 단순하다면 상관없지만, 만약 이런 경우라면 ? 책에 있던 그림을 캡쳐해서 들고 왔다.. 조금 화질이 깨지지만 구조를 보면 이렇게 부모 자식간의 관계도를 보면, App 에서는 const [value,setValue] = useSta.. 2021. 8. 8. 2021.08.07 React 외부 API 호출 2021.08.07 React 외부 API 호출_정리노트 드디어 ~!!!!!!!! 아기다리고기다리던 API 요청 받아오기 파트..꼭..내가 마스터해서...장고에서도 불러오리라... axios 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트 . HTTP 요청을 Promise 기반으로 처리한다. 이제 프로젝트 만들고 시작! $ yarn create react-app news-viewer $ cd news-viewer $ yarn add axios 프로젝트 만들고 axios 까지 설치해줍씨단. 내가 이번 프로젝트에서 사용될 코드 포맷팅을 .prettierrc 파일을 만들고, 이렇게 설정! 요게 뭔지 모른다면 해당 포스팅 참고 ㅎㅅㅎ! https://korinkorin.tistory.com/68 .. 2021. 8. 7. 2021.08.03 리액트 라우터로 SPA 개발하기 2021.08.03 리액트 라우터로 SPA 개발하기_정리노트 드디어....SPA 까지 왔다... 힘들어따...... SPA(Single Page Application) 말 그대로 한 개의 페이지로 이루어진 애플리케이션 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html를 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 받아서 해석한 뒤 화면에 보여준다. 사용자에게 보이는 화면은 서버가 제공함!! 그래서 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html 을 생성해주는 템플릿 엔진을 사용하기도 했다. 하지만 웹에서 제공하는 정보가 많아지면서 새로운 화면을 보여줄 때마다 모든 뷰를 준비하다보니 성능에 문제가 발생할 수 있어졌다. 예로 트래픽이 너무 증가한다거나, 사용자가.. 2021. 8. 3. 2021.07.30 React Todo-List 성능 최적화, immer 2021.07.30_React Todo-List Component 성능 최적화,immer_정리노트 11장~12장 정리를 한꺼번에 해봅씨단. 10장에서 간단하게 만든 Todo-List 는 렌더링할 데이터가 많아지면 자동으로 리렌더링 되는 시간이 늘어남. 의도적으로 데이터를 많이 발생시키고 최적화 해볼 것임! 또 간단하게 객체의 구조가 복잡할 때 업데이트를 간단하게 해주는 immer 라이브러리도 간단하게 다뤄봅씨다! src/App 이렇게 2500개의 데이터를 강제로 넣어주고, state 기본값을 함수를 넣어주었다. 여기서 만약에 createBulkTodos() 라고 작성하면, 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, createBulkTodos 의 형식으로 넣어주면, 컴포넌트가 처음.. 2021. 7. 30. 2021.07.28 React To-do List 2021.07.28 React To-do List_정리노트 오늘은 드디어 이론 공부만 줄줄하다가 프로젝트 한다니까 넘나 행복쓰 ㅎㅅㅎ 프로젝트 전체코드를 다 다루진 않고, 흐름 정리하며, 놓치기 쉬운 것들 위주로 블로그에 포스팅할 예정이다! 스타일적인 부분들은 다ㅏㅏ 빼고 기능적인 부분만 다룰 것임 먼저 프로젝트 생성 $ yarn create react-app todo-app 필요한 라이브러리도 설치해주었다. // to-do app directory 이동 $ cd todo-app // classnames >> 조건부 스타일링을 편하게 해줌. // sass 사용 위해서 낮은 버전 ( 호환이 되는 ) 으로 지정해서 설치 // react-icons 는 리액트에서 다양하고 예쁜 아이콘을 제공하는 라이브러리 $ .. 2021. 7. 29. 이전 1 2 3 4 다음
