Psychogrammer

🌕 Front/⚛️ React JS 검색 결과

해당 글 14건

Next.js 15 instrumentation이 프로덕션에서 안돌아간다면

Next.js 앱에서 서버 시작 시점에 딱 한 번만 실행되는 초기화 로직이 필요했다. 데이터베이스 연결, 캐시 설정, 외부 서비스 연결 같은 것들 말이다. 공식 문서를 보니 instrumentation.ts 파일을 만들면 앱 시작 시점에 한 번 돌아가는 기능이 있었고 register 함수를 export하면 된다고 나와있었다.// instrumentation.tsexport async function register() { console.log('서버 초기화 중...'); // 초기화 로직}개발 환경에서는 잘 되더라. npm run dev 하면 콘솔에 로그도 잘 찍히고, 초기화도 정상적으로 실행됐다. 그런데 프로덕션 빌드 후 실행하니까 아무것도 안 된다. npm run buildnpm start콘솔에 ..

🌕 Front/⚛️ React JS 2025. 6. 20. 22:17

Tailwind v4 도입하다가 monorepo 빌드 시스템을 뜯어고친 썰

Currency 앱에 새로 나온 Tailwind v4를 적용해보고 싶었다. 기존 앱들은 v3를 쓰고 있었는데, "각각 따로 빌드하니까 상관없겠지"라고 생각했던 게 착각이었다. PostCSS 설정이 충돌하면서 빌드가 망가지기 시작했고, 이를 해결하려다 보니 결국 전체 monorepo 구조를 뜯어고치게 됐다. 일단 Tailwind v4 적용했던 것Tailwind v4의 새로운 CSS 엔진이 궁금해서 Currency 앱에 적용한 코드다. 공식 문서를 보니 설정 방법이 꽤 달라져 있었다.// apps/currency/vite.config.tsimport tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwin..

🌕 Front/⚛️ React JS 2025. 6. 1. 19:01

React-19 useActionState 살펴보기

Action: 비동기 전환을 사용하는 함수 (Before) Example1. passive processfunction OrderCoffee({}) { const [coffee, setCoffee] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setIsPending(true); const error = await orderCoffee(coffee); setIsPending(false); if (error) { setError(error); retur..

🌕 Front/⚛️ React JS 2024. 5. 26. 16:48

[React] 깜빡임 현상 해결 (useLayoutEffect, API호출)

분명 다 만들었지만, 보기엔 흉한 깜빡임 현상!! 이 글에선 두 가지 깜박힘 현상에 대해 다룰 것이다. 1. useEffect 호출에 의한 깜빡임 2. API 호출에 의한 깜빡임 1. UseEffect 호출에 의한 깜빡임 const [duckUrl, setDuckUrl] = useState(''); useEffect(() => { setDuckUrl('/duck.png'); }, []); Hook Flow에 의하면 DOM 배치 → 페인트 작업 → useEffect 호출 순서를 따른다. 따라서 useEffect로 이후 페인트 작업이 한 번 더 이루어짐에 따라(리페인트) 깜빡이는 현상이 나타난다. 2. UseLayoutEffect 을 통한 해결 const [duckUrl, setDuckUrl] = useSt..

🌕 Front/⚛️ React JS 2022. 3. 30. 13:02

virtual DOM 파헤치기

Virtual DOM 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다는 뜻이다. 이 이부분에서 Virtual DOM 이 빛을 발한다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해준다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이다. Virtual DOM 이 해결 하려고 하는건 무엇이냐? DOM fragment를 관리하는 과정을 수동으로 작업 할 필요 없이, 자동화하고 추상화하는것이다. 그 뿐만 아니라, 만약에 작업을 직접 한다면, 기존 ..

🌕 Front/⚛️ React JS 2021. 12. 9. 20:40

React [리렌더링 과정]

들어가기 전 리엑트가 인기있는 이유는 효율적인 렌더링 방식에 있다. ReactDOM은 엘리먼트를 랜더링할 때, 이전 엘리먼트와 비교하여 변경된 부분만 업데이트한다. render() render()함수는 내부 컴포넌트 재귀적 렌더링, 뷰의 정보를 담은 객체로 변환하여 반환을 한다. 랜더링 시작: 내부 컴포넌트를 시작으로 최상위 컴포넌트를 렌더링해간다. 마크업 생성: 최상위 컴포넌트 렌더링 작업이 끝나면, HTML 마크업을 만든다. DOM 주입, 표시: 해당 마크업을 실제 페이지의 DOM요소 안에 주입하여, 화면에 표시한다. 리 렌더링 https://felixgerschau.com/react-rerender-components/ When does React re-render components? React ..

🌕 Front/⚛️ React JS 2021. 9. 8. 12:26

[JSX]: JS와 JSX 확장자는 무엇이 다를까?

JSX: Javascript XML 1) Javascript에서 HTML을 사용할 수 있게 하는 리액트만의 문법(syntax)을 말한다. 2) html안에 변수를 넣으려면 { }로 감싼다. 3) html의 attribute를 다르게 쓴다. class대신 className, onclick대신 onClick 등 JSX는 react 파일의 확장자로써의 상징적인 의미를 갖는다. ECMAScript가 Javascript의 표준과 규격등 문법에 관해 사용할 때 쓰는 것처럼, JSX도 JS의 파일에 React 라이브러의 표준을 따른다는 의미로써 사용되는 확장자다. 다만, 둘을 구분지으면서 얻는 이익이 딱히 없고, JS파일에 JSX로 코드를 작성하면, CRA와 같은 툴체인에 의해 JS 코드로 변환해주기 때문에 실제로 ..

🌕 Front/⚛️ React JS 2021. 9. 7. 09:37

[styled-components] 타입스크립트에서 사용하기

테마 정의 //styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { colors: { '--color-gray': string; '--color-gray800': string; '--color-gray700': string; }; } } //theme.ts import { DefaultTheme } from 'styled-components'; export const theme: DefaultTheme = { colors: { '--color-gray': 'rgba(58,58,58,1)', '--color-gray800': 'rgba(58,58,58,0.8)', '..

🌕 Front/⚛️ React JS 2021. 9. 2. 17:20

[React Hook 시리즈 3]: 10가지 Hook들 (useMemo, useRef 등)

1. useMemo() useMemo(() => value, deps), useMemo(fn, deps) const memoizedValue = useMemo(()=>computedExpensiveValue(a,b),[a,b]) - 랜더링 될 때마다 값을 계속 계산하지 않고, 이전에 계산된 값을 메모이제이션하여 불필요한 연산을 줄인다. - 새롭게 계산하는 기준은 두번째 인자, dependency에 적는다. import { useMemo, useState } from 'react'; const App = () => { console.log('리랜더링'); const [isOn, setIsOn] = useState(false); const [users, setUsers] = useState([ { activ..

🌕 Front/⚛️ React JS 2021. 8. 3. 17:28

[React Hook 시리즈 2]: useEffect()

1. useEffect 란? 컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다. 컴포넌트의 정보를 다른 데서 가져와 나중에 내용을 업데이트 한다거나, 네트워크 통신 등의 작업을 하는 작업들에 해당한다. DOM 업데이트, Browser Paint가 완료된 후에 UseEffect가 호출된다. 참고로 useEffect는 클래스 컴포넌트의 componentDidMount, componentDidUpdate 를 함수형 컴포넌트에서 구현한 것이다. 2. useEffect 사용하기 1) callback : render()함수가 실행될 때마다 호출되며, return ..

🌕 Front/⚛️ React JS 2021. 7. 22. 11:36

[React Hook 시리즈 1]: 쓰는 이유, useState()

1. React hook 이란? 함수형 컴포넌트는 컴포넌트 내부의 state를 만들 수 없고, 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 그저 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만 사용됐다. 하지만 16.8 버전부터 훅(hook)이라는 개념이 도입되며, 이 둘을 해결할 수 있게 됐다. 두 가지 기능을 함수형 컴포넌트에 "hook into”, 끌어와 연결 한다고 해서 "hook"이라고 부른다. 또한 클래스 컴포넌트에서 귀찮게 사용되는 didMount, render, this 등 대신, 함수형 프로그래밍 스타일로 가독성 있게 코드를 작성할 수 있게 됐다. Class Component import { Component } from 'react';..

🌕 Front/⚛️ React JS 2021. 7. 20. 21:56

[React Router] 라우터 사용하기(react-router-dom v5)

1. SPA와 라우터의 관계 • SPA는 서버에 하나의 페이지만 요청하여 전체 웹앱을 사용하는데, 이때 리액트 라우터는 CSR, AJAX 기술을 활용하여, 페이지 이동 시 리로드 없이 라우팅할 수 있도록 한다. • MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고, 여러 페이지 간의 스타일, 컴포넌트를 재활용하여 구현한다. • 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 된며, 서버로 부터 데이터만 받아온다. SPA의 기술적 장점 • 서버에서 페이지를(서버 랜더링) 만들 필요가 없으므로 CDN에 캐싱이 가능하다. • 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다. • 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다. • ..

🌕 Front/⚛️ React JS 2021. 7. 20. 16:20

[리액트 삼대장]: Component, State, Props

1. 컴포넌트 1) 기능을 단위별로 캡슐화하는 리액트의 기본 단위 2) 사용자가 보는 뷰는 컴포넌트들을 조합하여 만든다. 3) 함수 혹은 클래스로 만든다. 4) 상위 컴포넌트에서 props를 입력받고, 내부적으로 각자의 state를 관리한다. 5) 컴포넌트의 이름은 대문자로 시작한다. import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import Milk from "./Milk"; ReactDOM.render( , document.getElementById("root") ); 컴포넌트는 반드시 하나의 태그만 리턴할 수 있기 때문에, 최상위 태그 안에 태그/컴포넌트들을 배치한다. 2. State - 변수..

🌕 Front/⚛️ React JS 2021. 2. 2. 16:49

[React 입문]: 쓰는 이유, 특징, CRA, CRA구축

1. React is Javascript UI Library 웹 앱은 app처럼 만들어 놓은 웹 페이지를 말한다. 모바일앱으로 발행이 용이하며, 뛰어난 UX를 자랑한다. (버벅거림이 없고 반응속도 빠름) 이는 비즈니스적 강점, 구매전환율이 높아지는 효과를 불러일으킨다. 컴포넌트를 조합하여 페이지를 구축하기 때문에 유지보수가 편리해진다. 2. 기술적인 세 가지 이유​​ 1. 👍: JS언어인데 함수 안에 HTML코드를 작성할 수 있다.(JSX) 2. 👍: 데이터바인딩이 수월하다. 3. 👍: bolierplate(code)과정이 생략된다. => 프로젝트를 진행할 때 마다 써줘야 하는 장황한 코드와 셋팅이 줄어, 프로젝트 시작이 빠르다. 4. 👍: 컴포넌트별로 코드를 나눌 수 있다. 사용자 정의 태그를 만들어 ..

🌕 Front/⚛️ React JS 2021. 1. 26. 09:54