놀러와요 버그의 숲

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 1.1 리액트의 이해 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 (View)만 신경 쓰는 라이브러리입니다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습목표 1. 리덕스 기본 용어에 친숙해진다. 2. 리덕스에서 미들웨어의 역할을 이해한다. 3. 비동기 작업을 더욱 효율적으로 관리해주는 미들웨어 redux-thunk 와 redux-saga가 있음을 인지한다. 리덕스 기본 개념 복습 스토어 비유적으로 표현한다면 '은행(bank)'을 떠올리면 된다. 💰 store는 나의 data를 넣을 수 있는 장소를 생성한다. 정보가 저장되는 곳이라고 생각하면 된다. 한개의 프로젝트는 단 하나의 스토어만 가질 수 있다. import {createStore} from 'redux' const store = createStore() 이런식으로 만드는데, 아마 에러창이 뜰 ..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p354 ~p390 14.1 비동기 작업의 이해 동기: 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업 불가능. 비동기: 동시에 여러가지 요청 처리 가능. 기다리는 과정에서 다른 함수 호출 할 수 있음. 14.2 axios로 API 호출해서 데이터 받아오기 axios : 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점이다. import { useState } from "react"; import axios from "axios"; function App() { const [da..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p324 ~p352 학습목표 1. 전통적인 웹페이지의 어떤 문제를 SPA가 해결해주었는지 설명할 수 있다. 2. Route path와 comonent 를 이용하여 url별로 페이지를 다르게 보여줄 수 있다. 3. Link 컴포넌트를 사용할 수 있다. 13.1 SPA란? SPA(Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션 전통적인 웹 페이지 방식 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 이렇게 사용자에게 보이는 화면은 서버 측에서 준비를 했..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p290~p310 새로 알게된 내용 1. useState안에 함수 넣어주기 useState(createBulkTodos()) vs useState(createBulkTodos) function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); // 고윳값으로 사용될 id // ref를 사용하여 변수 담기 const nextId = useRef(2501); (…) }; useState(createBulkTodos())라고 작성하면 리렌더링 될 때마다..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: p254~p288 1. react-icons를 처음 써봤다. 링크: https://react-icons.github.io/react-icons/ 장점 같은 경우는 SVG 형태로 이루어진 아이콘을 리액트 컴포넌트처럼 쉽게 사용을 할 수 있다는 점이다. material UI보다 불편했던 점은 import ~ from ~ 이거를 일일이 다 써주는게 불편했다. 2. rem 아직도 어떻게 쓰는지 잘 모르겠다. 기준을 모르겠다. const ItemCont = styled.div` padding: 1rem; display: flex; align-items: center; &:nth-of-type(even)..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p218 ~p.252 Today I Learned 1. CSS Module: 타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션. 2.styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 3. 기본 CSS 이름짓는 규칙: 이름이 컴포넌트 이름-클래스 형태로 지어져 있다(예: App-header). 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p190 ~p.215 학습목표 1. Hook을 대체 왜 쓰는가? 2. useState와 useEffect는 왜 쓰고, 어떻게 쓰는가? 3. 그외에 Hook들은 개념만 알아두고, 실전에 쓰일 상황에 필요할 때 다시 찾아보자! Hooks란? Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 useState 리액트 JS 어플내에서 데이터를 보관하고, 자동으로 리렌더링을 일으킬 ..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p172 ~p.188 새로 알게된 사실 1. 모든 리액트 컴포넌트에는 라이프사이클(생명주기)이 존재한다. 2. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 3. 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 4. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이다. 5. Did 접두사가 붙은 메서드는 어떤 작업을 작동 한 후에 실행되는 메서드이다. 6. 라이프 사이클은 총 세가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다. ※중간정리 마운트 • constructor: 컴포넌트를 ..