놀러와요 버그의 숲

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

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p158 ~p.170 6.2.1 예제를 하면서 실수를 하였다. .map()함수를 이용해서 를 반복적으로 렌더링해주는 예제였는데, 실수로 fashion을 {}로 안치니까 그냥 fashion 글자 그대로 렌더링이 되어서 당황하였다. 올바른 코드는 다음 아래와 같다. const IterationSample = () => { const data = ["스트릿", "아메카지", "캐쥬얼", "데님", "포멀"]; const dataList = data.map((fashion, index) => {fashion}); // 여기서 그냥 {}쓰지 않고, fashion 해버리면 fashion이라는 글자만 반..

2022.1.18일 부터 리액트 스터디를 본격적으로 시작한다. 멋쟁이 사자처럼 1기 스터디원들과 새롭게 '리액트를 다루는 기술' 이라는 책(김민준 저- 길벗출판사) 으로 스터디를 하기로 했다. 월/화/수/목/금 매일 18시 30분에 디스코드 방에서 모이기로 했다. 각자 한 파트씩 맡아서 발표를 하는 형태로 스터디를 진행하기로 했다. 내가 이 글을 쓰는 이유는 자바스크립트 딥다이브 스터디에서 느꼈던 한계나 단점에 대해서 이번에는 보완을 하고 싶어서이다. 그리고 딱 한가지 목표만 잡아서 그것을 이 책을 통해서 이루고 싶다. 그래서 여러모로 생각을 정리하고자 블로그에 글을 작성하기로 했다. 목표를 뭘로 잡을까? 딥다이브 스터디때 아쉬웠던 점은 이론만 공부해서 뭔가 공중에 날라간 느낌도 들었다. 물론 여러 전문..