개발자R의 삶

mui 라이브러리를 사용하지 않고 처음부터 끝까지 AutoComplete 를 구현했다. 생각보다 신경쓸게 많았다. 제일 빡셌던건 방향키로 목록을 탐색할 때 스크롤을 자연스럽게 움직이게 하는 것이었다. 처음엔 자바스크립트 기본 함수인 scrollIntoView() 를 사용해볼까 했는데 내가 생각하는거랑 전혀 다르게 움직여서 그것까지 직접 구현했다. (그래서 코드가 좀 더러움;) AutoComplete.tsx import { useState, useRef, useEffect } from "react"; import { getLocalStorageValue } from "./utils/localstorage.util"; import styles from "./AutoComplete.module.css"; im..

리액트의 가장 큰 특징 중 하나는 가상 DOM을 사용한다는 것이다. ReactDOM이 "실제 브라우저에 그려진 DOM"과 가상DOM을 비교하여 동기화 한다. 실제 DOM을 직접 다시 그리면 안좋은걸까? DOM을 조작하는 것이 비효율적인 걸까? 여러 문서들을 본 결과, DOM을 직접 조작하는 것 자체가 비효율적인 건 아니다. 다만 DOM을 한번 수정하게 되면 지난 번에 공부한 것 처럼 ( https://life-of-erin.tistory.com/48?category=1035457 ) 브라우저에서 화면이 그려지는 원리 브라우저를 구성하고 있는 요소 렌더링 엔진의 동작 원리 파싱 - HTML 파싱 HTML 파서의 특징 1. 오류에 너그럽다. HTML Tag가 정확하게 쓰여있지 않더라도 브라우저가 자체적으로 ..

어떻게 검색을 해야하는 건지, 검색을 해도 잘 안나와서 어찌저찌 개발을 했다. 앱을 쓰다보면 상단 타이틀이 페이지마다 바뀌는 UI를 본적이 있을 것이다. 예를 들어 카카오톡 같은 경우에도 친구 / 채팅 / 뷰 이런식으로 현재 페이지 이름이 상단에 나와있다. 그런데... 레이아웃은 아래처럼 되어있다. 페이지는 여기만 바뀌는데 의 속성을 어떻게 바꿀 수 있지? {props.children} 열심히 생각하다가, react의 Context API를 사용해야하나, redux를 사용해야하나 고민을 했고 redux를 활용하기로 했다. 우선 store 폴더를 먼저 만들어주었다. store 폴더에 index.js 파일과 title.js 파일을 만들어준다. title.js는 state를 관리하는 곳이고, index.js는..

리액트로 프로젝트 진행 중... 하단 네비게이션을 만들어야했다. 모바일화면으로 구성을 하려고 해서 찾아보니 react navigation 라이브러리가 있었는데 React Native 전용이었다. 그래서 그냥 만듦! 위와 같은 모양을 만드는 것이 목표! BottomNav.js import { NavLink } from "react-router-dom"; import classes from "./BottomNav.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome, faListDots, faCirclePlus, faGear, faUsers } from "@fortawesome/free-sol..

1. 설치 https://fontawesome.com/v6/docs/web/use-with/react/ Set Up with React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 위 사이트에서 npm 명령어로 설치를 해준다. 사용 방법은 두가지로 나뉜다. 한 컴포넌트에서만 쓰는 방법, 글로벌로 쓰는 방법. 나는 우선 하단바에서만 사용할거기 때문에 individual 방식을 사용했다. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' //사용할 아이콘을 임포트 해준다. import {..

https://github.com/flatlogic/one-react-template/ GitHub - flatlogic/one-react-template: Flatlogic One - React Template and Theme Flatlogic One - React Template and Theme. Contribute to flatlogic/one-react-template development by creating an account on GitHub. github.com 우측 상단에 Use this template 을 눌러서 내 레포지토리로 가져올 수 있다. node 16버전을 쓰고 있었더니 설치가 잘 안됨... 옛날 노드 모듈을 많이 쓰고 있는 템플릿인 것 같다. 그래서 노드 버전을 14로 낮..

웹개발을 하다보면 절대 빼놓을 수 없는 라우터! 라우터를 사용하기 위해서 react-router-dom 라이브러리를 사용해야한다. index.js import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App_router_practice"; ReactDOM.render(, document.getElementById("root")); 최 상위 컴포넌트인 컴포넌트를 컴포넌트로 감싸주어야 한다. App.js import { Route, Switch, Redirect } from "react-router-dom"; import Layout fro..

Lazy Loading이란? 특정 코드가 필요할 때만 그 코드를 로드하는 것. SPA로 개발을 하면 모든 코드 번들이 로드되기 때문에 비효율적일 수 있다. 코드를 여러 번들로 나누고, 각각 필요할 때만 다운로드 하는 것. 라우트별로 나누어 그 라우트로 들어갈 때 다운로드한다. import React from 'react'; import { Route, Switch, Redirect } from 'react-router-dom'; import AllQuotes from './pages/AllQuotes'; import QuoteDetail from './pages/QuoteDetail'; import NewQuote from './pages/NewQuote'; function App() { return (..