놀러와요 버그의 숲

1. 스타일드 컴포넌트의 장단점 팀원 중의 한명이 정확한 styled-components의 장점을 물어보는데, 다른 것에 비해 굳이 styled-components를 쓰라고 설득을 잘 못하겠다. 그래서 우리가 쓰는 styled-components의 장점을 적어보려고 한다. 장점 1. 컴포넌트를 기반으로 CSS를 작성할 수 있게 해주는 라이브러리이다. 2. CSS in JS 방식으로 자바스크립트 코드에서 CSS를 작성할 수 있게 해준다. (기존의 웹사이트는 HTML, CSS, JavaScript를 각자의 별도 파일로 두었는데, React, Vue와 같이 모던 자바스크립트 라이브러리가 인기를 끌고 '컴포넌트 기반 개발 방법'이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JS를 포함하는 패턴이 많이 ..

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

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: 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())라고 작성하면 리렌더링 될 때마다..

작성일: 2022.2.5 (토) 문득, 원범 멘토님과 얘기를 나누던 중, 내가 왜 next.js를 쓰는지에 대한 인지도 하지 못한채, 감귤마켓 프로젝트를 진행하고 있다는 느낌이 들었다. 간단하게 Postman으로 get 요청을 보내봄으로 써, 둘의 차이를 알아보려고 한다. 클라이언트 사이드 렌더링(리액트) 리액트를 통해서 api get을 요청하니까, body안에 내용물이 div하나 밖에 보이지 않았다. 아마 브라우저에 입장에서는 body안의 내용을 제대로 인지하지 못할까 싶지 않다. 서버사이드 렌더링 이런식으로 Postman을 통해서 요청을 보내보니, body안의 모든 내용들이 나와있다. 이러한 성격 때문에 next가 SEO에 좋다고 한다는 것을 느꼈다. (body의 여러 태그들과 내용들을 알 수 있으니..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습범위: 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: 컴포넌트를 ..