놀러와요 버그의 숲

하단처럼 CRA로 template이라는 이름으로 하나 만들어준다. yarn create react-app template code . // 터미널에서 vsc로 열 수 있다. CRA 프로젝트 구조 설명 .gitignore 같은 경우는 버전 관리에 포함이 되면 안되는 파일들에 대한 정보를 담는 파일이다. package.json 내 프로젝트에 쓰이고 있는 라이브러리와 버전들이 명시되어 있다. public은 정적인 요소들을 담는 곳이다. 컨텐츠가 변하지 않는 것들을 담는 폴더이다. (HTML, 리소스, 이미지 등이 포함된다.) src는 컨텐츠가 다양하게 변화되는 우리의 소스코드들을 담는 폴더이다. manifest.json 은 pwa를 만들때 (모바일에서 저장하는 웹 어플리케이션) 필요하다. robots.txt는..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 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 어플내에서 데이터를 보관하고, 자동으로 리렌더링을 일으킬 ..