728x90 반응형 리액트를 다루는 기술13 리액트를 다루는 기술 _ 21장 내게는 Django 뿐일 줄 알았는데... 21장. 백엔드 프로그래밍 : Node.js 웹 애플리케이션을 만들 때, React와 같은 프론트엔드 기술만으로 필요한 기능을 모두 구현할 순 없다. 왜? 데이터를 여러 사람과 공유하려면... 저장할 공간이 필요하니까! 이를 위해 우리는 서버를 만들어 데이터를 저장해 여러 사람과 공유한다. 그러나 서버에 데이터를 무작정 담는 것은 아니다! → 이러한 규칙을 지정하는 것이 백엔드(서버) 프로그래밍이라 생각하면 좋을 듯! 21-1) Node.js 알아보기 Node.js는? 웹 브라우저뿐만 아니라 서버에서도 JS를 사용할 수 있는 런타임! Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용한다. 여기서는 K.. 2021. 3. 23. 리액트를 다루는 기술 _ 16장 이제 50% 다 와간다... 와우! 16장. 리덕스 라이브러리 이해하기 앞서 얼핏 들었던 리덕스! React 상태 관리에서 가장 많이 사용되는 녀석이다. 16-1) 개념 정의하기 난생처음 접하는 여러 키워드들이 등장한다..! 1. 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다. 얘는 하나의 객체 형태며 { type: 'TOGGLE_VALUE' } 요런 형식으로 이뤄져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 하며(얘를 액션의 이름이라 생각하면 된다), 그 이외에는 이후 상태 업데이트를 할 때 참고해야 할 값들이 들어간다. (작성자 임의로 넣으면 됨!) { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: .. 2021. 3. 19. 리액트를 다루는 기술 _ 15장 목요일은 역시 목요일이군. 15장. Context API Context API는 React 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능! (ex 로그인 정보, 애플리케이션 환경 설정, 테마 등) 여태 사용했던 stlyed-components, 리액트 라우터 등의 라이브러리도 Context API를 기반으로 구현되어 있다. 15-1) Context API를 사용한 전역 상태 관리 흐름 이해하기 그런데 전역 상태를 관리한다는 게 무슨 뜻? 지금껏 우리는 프로젝트 내에서 환경 설정, 사용자 정보와 같이 전역적으로 필요한 상태를 관리할 때 → 주로 최상위 컴포넌트인 App의 state에 넣어 관리했다! 왼쪽 그림에 해당하는 건데... App이 지닌 value를 F나 J에 전달하려면 여러 컴포넌트.. 2021. 3. 18. 리액트를 다루는 기술 _ 14장 눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1. 비동기 작업의 이해 2. axios로 API 호출해서 데이터 받아오기 3. newsapi API 키 발급받기 4. 뉴스 뷰어 UI 만들기 5. 데이터 연동하기 6. 카테고리 기능 구현하기 7. 리액트 라우터 적용하기 출발! 14-1) 비동기 작업의 이해 동기적 처리 : 요청이 끝날 때까지 기다리는 동안 중지 상태 → 그동안 다른 작업 불가 비동기적 처리 : 웹 애플리케이션 멈추지 않음 → 동시에 여러 요청 처리 가능! 그런데 이미 비동기 작업을 사용해본 적이 있다! JS의 setTimeout 함수가 그 예. setTimeout이 사용되는 시.. 2021. 3. 18. 리액트를 다루는 기술 _ 11장 여기는 어디... 나는 누구... 11장. 컴포넌트 성능 최적화 지난번 열심히 만들었던 Todo List! 지음은 사용하는데 전혀 불편함이 없지만... 만약 추가할 데이터가 무수히 많아지면? 체감할 수 있을 정도로 지연이 발생하고 만다. 이를 방지하기 위해 컴포넌트 성능 최적화에 대해 알아볼 예정. 11-1) 많은 데이터 렌더링 하기 랙을 경험할 수 있을 정도로 많은 데이터를 렌더링해 보자! App.js 기존 App 컴포넌트에 createBulkTodos 함수를 추가! 요 녀석의 return값이 usesState의 초깃값에 해당되게 된다! (만약 useState(createBulkTodos())라고 적으면? App이 렌더링 될 때마다 createBulkTodos가 호출되고 만다!) 엄청난 스크롤의 향연... 2021. 3. 16. 리액트를 다루는 기술 _ 10장 - 2 2021.03.14 - [Frontend/React] - 리액트를 다루는 기술 _ 10장 리액트를 다루는 기술 _ 10장 어찌저찌 10장까지 도착! 10장. 일정 관리 웹 애플리케이션 만들기 지난번 JS 만으로 만들었던 To-Do App! 이번에는 React로 도전해보자. 10-1) 프로젝트 준비하기 새로운 앱을 만들어주자! 우리의 친구 23life.tistory.com 이어지는 글! 10-3) 기능 구현하기 1. App에서 todos 상태 사용하기 나중에 추가할 일정 항목들은 모두 App 컴포넌트에서 관리! App.js 우선 todos라는 상태를 정의(useState 사용)하고, 이를 TodoLiust의 props로 전달해줬다! 이때 todos 배열 속 객체에는 각 항목의 고유 id, 내용, 완료 여부.. 2021. 3. 16. 리액트를 다루는 기술 _ 10장 어찌저찌 10장까지 도착! 10장. 일정 관리 웹 애플리케이션 만들기 지난번 JS 만으로 만들었던 To-Do App! 이번에는 React로 도전해보자. 10-1) 프로젝트 준비하기 새로운 앱을 만들어주자! 우리의 친구 Sass도 설치! index.css 프로젝트의 글로벌 스타일 파일이 들어 있는 index.css를 수정! 배경을 회색으로 변경해주자. 10-2) UI 구성하기 총 4개의 컴포넌트를 만들 예정! 1. TodoTemplate : 일정 관리 부분을 보여주는 컴포넌트. 2. TodoInsert ; 새로운 항목 입력하고 추가하는 컴포넌트. 3. TodoLisItem : 각 할 일 항목에 대한 정보 보여주는 컴포넌트. 4. TodoList : 여러 개의 할 일을 보여주는 컴포넌트. 이들을 src/co.. 2021. 3. 14. 리액트를 다루는 기술 _ 9장 폭풍 같던 Hooks를 지나.... 오늘도 뚠뚠뚠... 9장. 컴포넌트 스타일링 아무리 디자인에 무심한 편이라 해도... 지금껏 만든 컴포넌트들은 눈 뜨고 봐줄 수준도 못된다! 그나마 좀 괜찮은 디자인을 위해 → 컴포넌트 스타일링 방법을 배워볼 예정. 오늘 해볼 방식은 총 4가지! - 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식. - Sass : 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 도움. - CSS Module : 스타일을 작성 시 CSS 클래스가 다른 CSS 클래스 이름과 절대 충돌하지 않도록 고유 이름을 자동 생성. - styled-components : 스타일을 JS 파일에 내장 → 스타일 작성과 동시에 해당 스타일이 적용된 컴포넌트를 만듦. 오늘도 c.. 2021. 3. 11. 리액트를 다루는 기술 _ 8장 머리가 핑핑. 7장 컴포넌트의 라이프사이클 메서드는 클래스형 컴포넌트에만 사용된다! 따라서 패스... 그만큼 8장을 더 주의 깊게 봐야지. 8장. Hooks ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks는 React v16.8에 새로 도입된 기능으로, 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 돕는다! 앞서 맛을 봤던 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하며, 공식 문서에서도 클래스형 컴포넌트보다 함수형 컴포넌트 & Hooks 사용을 권장하는 중! 실습 흐름은... Reac.. 2021. 3. 10. 이전 1 2 다음 728x90 반응형
