본문 바로가기

react30

[React] 18. React.memo() 안녕하세요. 박기린입니다. 이번엔 React.memo()에 대해 알아보겠습니다. 사전 정의 React.memo()의 구체적인 설명을 위해, 어떠한 앱이 있다고 가정을 하겠습니다. 이 앱은 아래 4개의 파일을 가지고 있습니다. 프로그램의 구조 App.js - Demo.js - MyParagraph.js - Button.js // App.js import React, { useState } from 'react'; import Button from './components/UI/Button/Button'; import DemoOutput from './components/Demo/DemoOutput'; import './App.css'; function App() { const [showParagraph, .. 2023. 12. 26.
[React] 16. 리액트 Hooks의 규칙을 알아보자 안녕하세요. 박기린입니다. 이번엔 React에서 state를 다루는 데에 주로 사용되는 Hooks의 규칙에 대해 알아보겠습니다. * 리액트 훅 : use로 시작하는 것들은 전부 리액트 훅이라고 보면 됩니다. -> useState, useEffect, useReducer, useContext .. 1. 리액트 안에서만 사용하기 리액트 훅은 리액트 함수 내부에서만 사용할 수 있습니다. 리액트 함수는 - 리액트 컴포넌트 함수 - custom hooks 를 의미하고, 이 안에서 사용하지 않으면, 위 사진처럼 VSCode에서 에러/경고문을 표시합니다. 2. 리액트 훅을 중첩으로 호출하지 않기 위 1번 항목과 연결되는 문제입니다. 리액트 함수 내부에서만 사용이 가능하기 때문에, 다른 함수의 내부에서 호출되지 않습니.. 2023. 12. 11.
[React] 15. 리액트 Context API란 무엇일까? 안녕하세요. 박기린 입니다. 이번엔 React의 state 관리 방법 중 하나인 Context API에 대해 알아보겠습니다. Context API (w. 기존 props 방식의 한계) 리액트는 props라는 걸 통해서 여러 리액트 컴포넌트를 걸쳐 state 데이터를 전달합니다. 리액트 앱이 위와 같은 구조로 이루어져 있다고 가정을 합니다. LoginForm에 있는 Login state를 장바구니 Cart 컴포넌트에서 접근하려고 합니다. 하지만 바로 접근하는 것은 불가능합니다. 위 사진처럼 props를 이용해서 root 컴포넌트로 데이터를 올린 다음, 밑으로 다시 뿌립니다. 이 과정 속에서, 해당 state 데이터를 필요로 하지 않는 다른 컴포넌트들도 지나가야만 하는 상황이 발생합니다. 코드와 구조가 복잡.. 2023. 12. 4.
[React] 13. useEffect() 사용법 총정리 안녕하세요. 박기린 입니다. 이번엔 React Hooks 중 하나인 useEffect()에 대해 알아보겠습니다. Effect(Side Effect)란 무엇일까? useEffect()를 알기 위해선, Effect가 무엇인지를 먼저 알아야 합니다. 여기서 Effect는 Side Effect와 동일한 의미를 지닙니다. React의 주요한 임무는 UI 렌더링입니다. 유저가 키보드를 누르든 클릭을 하든, 입력에 반응하여 필요할 때 UI를 다시 렌더링합니다. React의 역할 - state, props를 관리한다. - state와 props를 기반으로 JSX와 DOM을 평가하고, UI를 렌더링한다. - 유저의 입력을 실시간으로 확인한다. 이러한 React의 역할들은 '화면에 무언가를 가져오는 것(Bringing s.. 2023. 7. 20.
[리디저널 제작기] 6. 크롬 웹 스토어에 확장프로그램 출시하기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 크롬 웹 스토어 개발자 등록 크롬 확장프로그램을 공식 웹 스토어에 등록하기 위해선, 먼저 개발자 등록을 해야 합니다. 약관 동의와 함께 5달러를 결제해야만 합니다. 한 번 결제로 등록이 완료되며, 이후 추가 비용을 요구하진 않습니다. 수수료 결제를 위해 카드 등록을 해야 하는데, '국가/지역'에 대한민국이 없습니다. 그래서 '미국'으로 지정하고, 청구지 우편번호를 '12345'로 지정했습니다. 아무렇게나 입력해도 딱히 문제가 발생하지는 않는 것으로 보입니다. (제가 사용하는 카드는 한국에서 발급받은 카카오뱅크 체크카드임에도 문제 없이 등록이 됐습.. 2023. 4. 12.
[리디저널 제작기] 5. 크롬 웹 스토어에 올릴 아이콘 디자인 만들기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 필요한 아이콘의 포맷 Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG. 공식 크롬 확장프로그램 API 문서의 글입니다. PNG 확장자(포맷)의 이미지 파일을 아이콘으로 사용하는 것을 적극 권장한다고 나와있습니다. BMP, GIF, ICO, JPEG도 가능은 하지만, 웬만하.. 2023. 4. 11.
[리디저널 제작기] 4. 더보기 버튼을 자동으로 눌러주는 기능 구현 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 리디 독서노트 페이지의 더보기 버튼 리디 독서노트 페이지를 들어가면 형광펜(밑줄)을 친 글귀들이 보입니다. 근데 글귀의 수가 20개를 넘어가게 되면, 사진의 '20개 더보기'버튼이 생깁니다. 다음 20개의 글귀는 위 버튼을 눌러야만 볼 수 있고, 일일이 다 눌러줘야 모든 글귀를 확인할 수 있는 구조입니다. 크롬 확장프로그램은 탭의 현재 DOM에 올라온 텍스트만 긁어올 수 있기 때문에, '20개 더보기' 버튼을 전부 누른 후에 글귀를 긁어와야만 모든 글귀를 긁어올 수 있습니다. 만약 버튼을 누르지 않으면, 당장 보이는 몇 개의 글귀만 긁어와집니다... 2023. 4. 10.
[리디저널 제작기] 3. 팝업 UI 디자인 만들기 (styled-components) 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. UI 디자인 만들기Figma에서 직접 팝업창의 UI 디자인을 만들었습니다. 다크모드에 어울리는 색상에 심플한 디자인으로 구성했습니다. styled-componets로 스타일링하기React의 스타일링 모듈인 styled-components를 사용했습니다. TypeScript를 사용하기에, @types/styled-componets 모듈도 설치했습니다. 모은 독서노트 개수 : {texts.length}개 독서노트 모으기 클립보드에 복사하기 Made by ParkGiraffe JSX에 기본적인 틀을 만들어줍니다. 이제 styled-components를.. 2023. 4. 9.
[리디저널 제작기] 1. React로 크롬 확장프로그램 만들기 위한 기초 설정 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 프로젝트 업무 정리 방식 선정 프로젝트의 모든 업무는 '칸반 보드' 방식을 이용해서 계획 / 정리 / 실행을 하였습니다. 칸반 보드 앱으로 FirstSeed Tasks 앱을 사용했습니다. 칸반 보드의 업무 계획 / 상황표에 맞춰서, 모든 과정을 차례대로 Upnote에 정리했습니다. 그리고 이 Upnote의 기록을 바탕으로 블로그에 개발 과정 글을 적습니다. create-react-app with TypeScript chrome extension은 자바스크립트로 제작되어야 합니다. 그리고 자바스크립트 라이브러리를 사용할 수 있습니다. RIDI-Jo.. 2023. 4. 5.

티스토리툴바