치춘짱베리굿나이스

react-app-env.d.ts 리액트 앱을 CRA로 초기화하고 이 파일을 아무생각 없이 webVitals나 기타등등이랑 같이 지워줬더니 svg 파일을 불러오는 데 오류가 두두디딕 났다 다시 복구하니까 svg 파일도 잘 불러오고 정신을 차리긴 했는데 뭐하는 파일이길래 svg 로딩이 터져버렸는진 잘 모른다 따라서 정리하기로 했다 뭐 하는 파일인가요 열어보기 /// 파일을 열어보면 딱 요 한 줄 적혀있는 것을 알 수 있다 /// /// /// declare namespace NodeJS { interface ProcessEnv { readonly NODE_ENV: 'development' | 'production' | 'test'; readonly PUBLIC_URL: string; } } declare ..

useMemo, useCallback 리액트를 쓰면서 이름만 몇번 들어본 훅이지만 내가 잘 사용할 엄두가 안나서 (…) 사용해 본 적도 정리도 못하고 있었다 (핑계임) 캐싱 비슷한 기능으로 불필요한 연산 수를 줄이는 것이라고만 알고 있었는데 한번 정리하면서 익혀보려고 한다 사실 필수적인 훅이 아니라 성능 최적화를 위한 훅이라 크게 필요성을 못 느낀 것도 있는데 그렇게 배움을 미루는 건 너무나도 게으르다 useMemo 기본 예시 import { useState } from "react"; function multiply10(n: number) { console.log("곱하기 10 계산 중..."); return n * 10; } export const MemoTestPage = () => { const ..

마운트, 언마운트, 렌더링, 리렌더링 맨날 헷갈려서… 마운트 DOM 객체가 (렌더링을 통해) 생성되어 브라우저에 나타나는 시점 클래스 컴포넌트 기준으로, 생성자가 호출된 후 render() 메서드가 호출되면 마운트가 발생한다 컴포넌트의 생명주기 동안 단 한 번, 처음으로 DOM에 컴포넌트가 추가될 때 수행된다 componentDidMount 클래스 컴포넌트에서의 componentDidMount 메서드는 컴포넌트가 마운트된 직후에 호출되며, API 콜이나 이벤트 리스너 설정 등의 작업을 수행할 수 있다 useEffect useEffect(() => { ... }, []); 함수 컴포넌트에서의 useEffect() 는 컴포넌트가 마운트됐을 때 최초로 한 번 콜백을 수행한다 의존성 배열에 값을 아무것도 넣지 ..

useContext 개요 이번에 쪼끄만 자기소개 페이지를 SSR과 SSG를 섞어서 만들어보고 있는데 아무래도 외부 라이브러리를 가져다가 쓸 만큼 프로젝트 규모가 크지 않다 보니… 라이브러리 설치가 조금 꺼려지는 상황에서 상태값을 자식의 자식의 자식한테 내려줘야 하는 일이 생겼다 3~4 depth 정도이니 아예 Prop Drilling 으로 처리할까 했는데, 그보다 먼저 useContext 를 이용하여 상태값의 활동 범위를 넓혀줄 수 있겠다는 생각이 들어서 여태껏 한번도 써 보지 않은 useContext를 써 보기로 했다 useContext란? 각 컴포넌트에서 context를 읽고 구독할 수 있도록 도와주는 React Hook 이라고 한다 쉽게 말해 어떠한 상태값을 context 형태로 감싼 뒤, 이를 다..

Suspense와 Error Boundary를 이용한 로딩과 예외처리 기존의 구현 방식 export const DetailPage = ({ isMine = false }: Props) => { const { id } = useParams(); const nav = useNavigate(); const [data, setData] = useState({ username: '', code: '', language: '', interest: '', techStack: [], worktime: '', worktype: '', email: '', requirements: [], liked: false, // useState 초기화 }); useEffect(() => { fetchUserData(id) .then(..

React를 클론코딩 #1 React를 사용해서 클론코딩은 이제 흔하다 React를 클론코딩해보자 물론 정말 심도있는 .. 마치 리액트의 심연같은 .. 그런 기능까진 놓칠 수 있지만 대략적이고 큼직큼직한 내용을 한번 클론코딩해서 익혀보려 한다 https://github.com/chichoon/Raect GitHub - chichoon/Raect: 리액트 및 자바스크립트 객체들 짝퉁 만들어보기 리액트 및 자바스크립트 객체들 짝퉁 만들어보기. Contribute to chichoon/Raect development by creating an account on GitHub. github.com 참고로 레포지토리 이름은 리액트 짝퉁이라 Raect이다 (래익트 ㅋㅋ) 가상 DOM https://blog.chic..

React 서론 리액트 써도 좀 알고 쓰자!!! 의 일환이다 리액트로 토이 프로젝트 몇번 해 보면서 진지하게 리액트의 원리와 동작 과정에 관해 고찰해본 적이 몇 번이나 되는가? 나는… 없는 듯 하다… 가상 돔을 만들어서 어쩌구….. 이것밖에 모른다 (부끄) 리액트 쓰는 거 좋고 리액트로 프로젝트 다 좋지만 기왕 쓰는거 지피지기면 백전백승이라는데 한번 알아보고 넘어가자 리액트 카테고리에 글을 이렇게 많이 적어놓고 이제 와서 리액트의 동작을 처음 알아보는 것도 개그 포인트이다 (하하하) 리액트 소개 리액트가 뭔가요 싱글 페이지 애플리케이션을 제작하는 데에 초점이 맞춰져 있는 자바스크립트 라이브러리이다 Vue도 프레임워크고 Angular도 프레임워크고 Svelte도.. 그래서 리액트도 프레임워크일 것 같은 느..

useClickOutside 모달을 라이브러리를 쓰지 않고 직접 구현하면서 (react-portal을 사용하였다) 모달 바깥을 클릭했을 때 모달이 닫히도록 구현을 하고 싶었다 유용한 훅을 많이 포함하고 있는 패키지인 react-use를 설치하여 useClickAway 훅을 이용하면 한번에 해결되겠지만, 지금 프로젝트에서 react-use가 설치되어 있지 않기도 했고 (이거 하나 때문에 설치하기도 애매하고) 생각보다 구현이 어렵지 않아 훅을 직접 제작해 보았다 코드 import { useEffect, useRef } from 'react'; const useClickOutside = onClicKOutside => { const ref = useRef(null); const handleClickOutsid..