전체 글103 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. 2021.07.24 React styling 2021.07.24 React styling_정리노트 ㅎㅎㅎㅎ 오늘은 9장 정리 웃는 이유는 내가 유일..하게 재밌었던 부분이 스타일 컴포넌트였기 때문..^^ ㅎ 그냥 css 만 사용해서 그런지 몰라도 오늘은 모르는거 위주로 정리! 리액트 스타일링 방식 CSS Sass CSS Module styled-component 생각보다 많이..^^ 다양하네...ㅎ.. https://korinkorin.tistory.com/48?category=974678 2021.02.04 React Style 적용,Styled Components 정리 2021.02.04_React Style 적용, Styled Components_정리노트 드디어 프로젝트가 시작됨 ㅊㅊㅊㅊ 근데 아직 쓰면서도 많이 헷갈리는 것 같다. 오늘은 그.. 2021. 7. 24. 2021.07.23 React Hooks 2021.07.23 React Hooks_정리노트 오느른~~~~~ 리액트를 다루는 기술 8장이다 8장 !! 나름 꾸준히 보는즁 ㅎㅅㅎ 드디어 나타난 함수형 컴포넌트에서 생긴 Hooks 들을 정리할 예정 제일 궁금했던 곳인만큼 걱정 반 + 기대반으로 정리 시작! Hooks 리액트 16.8v 부터 새로 도입된 기능. 함수형 컴포넌트에서도 상태 관리를 할 수 있으며, 렌더링 직후 작업을 설정하는 등, 기존의 클래스형 컴포넌트에서만 가능했던 기능들을 이제는 함수형에서도 할 수 있게 되었음! 책에서도 새로운 리액트 프로젝트를 팠으니 나도 똑같이 새로 생성하고 하기 $ yarn create-react-app hooks-tutorial 6개의 Hook 과 함께 커스텀 Hook 사용하는 것까지 ㄱ ㄱ useState .. 2021. 7. 23. 2021.07.19 React Life Cycle 2021.07.19 React Life Cycle_정리노트 오늘도 역시 7장 정리! 오늘은 라이프사이클 ( 수명주기 ) 정리..! 렌더링 되는 시점을 제어하는거구.. 어렵지만 책따라서 차근차근 해볼 예정 모든 리액트 컴포넌트에는 라이프사이클이 존재. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남. 그렇기에 프로젝트를 하다보면, 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트 하기 전 후로 어떤 작업을 처리해야할 수도 있다. 또, 불필요한 업데이트를 방지해야할 때가 오는데, 이 때 라이프사이클 메소드를 통해 처리한다. 함수형은 새로 생긴 Hooks 에서 처리하기 때문에 오늘은 전반적인 흐름을 클래스형 컴포넌트를 이용해서 정리.. 2021. 7. 21. 2021.07.19 React Component 반복 2021.07.19 React Component 반복_정리노트 오느른~~~~ 자바스크립트 map 문법 위주의 컴포넌트 반복 정리노트! 오늘도 리액트를 다루는 기술 6장임 ㅎㅅㅎ map 함수 배열에서 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환! arr.map(callback, [thisArg]) 형태는 이렇게 쓰고, 함수니까 각각 파라미터의 역할을 정리하면, callback 새로운 배열의 요소를 생성하는 함수 callback 함수 파라미터 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 thisArg callback 함수 내부에서 사용할 this .. 2021. 7. 19. 2021.07.16 React ref 2021.07.16 React ref_정리노트 오늘은 5장 정리! http://www.yes24.com/Product/Goods/62597469 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com ref refrence 줄임말. html 에서 id 선택자를 이용해 특정 id 를 가진 요소에 DOM 작업을 하는 것처럼 리액트에서도 ref 작업이 가능하다. DOM 이 먼지 모른다면 이렇게 또 글 홍보 ㅎ https://korinkorin.tistory.com/38 2020.11.27 nav bar active 활성화 기능.. 2021. 7. 16. 07.13 React event handling 07.13 React event handling_정리노트 이제 본격적으로 저번 3장에서 잠시 온클릭으로 맛본거대로 여기 4장에 있는 이벤트 핸들링 정리하겠음! http://www.yes24.com/Product/Goods/62597469 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com event 사용자가 웹 브라우저에서 DOM 요소와 상호 작용 하는 것. 클릭을 했을 때는 onclick 이벤트, 마우스 커서를 올렸을 때는 onmouseover, html form 요소에서 값이 바뀔 때 onchange 이벤트 등등이.. 2021. 7. 14. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
