Next.js 15 instrumentation이 프로덕션에서 안 돌아간다면
instrumentation.ts의 register가 개발 서버에서는 돌지만 프로덕션에서는 첫 요청 전까지 실행되지 않았다. 관련 이슈와 커스텀 서버, 모듈 레벨 초기화 같은 대안을 비교했다.
프런트엔드27편
React 와 Next.js, Vue, CSS, 번들러 설정.
React와 Next.js 13
React 19 useActionState 살펴보기
폼 제출처럼 비동기로 상태를 바꾸는 흐름에서 pending, 오류, 낙관적 업데이트를 손으로 다루던 코드가 React 19의 Action과 useActionState로 어떻게 줄어드는지 예제로 비교했다.
React 깜빡임 현상 해결: useLayoutEffect와 이미지 로딩
useEffect 타이밍 때문에 생기는 깜빡임은 useLayoutEffect로, API 응답 뒤 이미지가 늦게 뜨는 깜빡임은 로드 완료 후 렌더링과 스켈레톤 UI로 해결한 과정이다.
virtual DOM 파헤치기
Virtual DOM 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다는…
React [리렌더링 과정]
리엑트가 인기있는 이유는 효율적인 렌더링 방식에 있다.
[JSX]: JS와 JSX 확장자는 무엇이 다를까?
1) Javascript에서 HTML을 사용할 수 있게 하는 리액트만의 문법(syntax)을 말한다.
[styled-components] 타입스크립트에서 사용하기
reset.css, normalized.css의 역할을 하는 것으로, 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것이다.
[React Hook 시리즈 3]: 10가지 Hook들 (useMemo, useRef 등)
- 랜더링 될 때마다 값을 계속 계산하지 않고, 이전에 계산된 값을 메모이제이션하여 불필요한 연산을 줄인다.
[React Hook 시리즈 2]: useEffect()
컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다.…
[React Hook 시리즈 1]: 쓰는 이유, useState()
함수형 컴포넌트는 컴포넌트 내부의 state를 만들 수 없고, 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 그저 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만…
[React Router] 라우터 사용하기(react-router-dom v5)
• SPA는 서버에 하나의 페이지만 요청하여 전체 웹앱을 사용하는데, 이때 리액트 라우터는 CSR, AJAX 기술을 활용하여, 페이지 이동 시 리로드 없이 라우팅할 수 있도록 한다.
[리액트 삼대장]: Component, State, Props
1) 기능을 단위별로 캡슐화하는 리액트의 기본 단위
[React 입문]: 쓰는 이유, 특징, CRA, CRA구축
1. ?: JS언어인데 함수 안에 HTML코드를 작성할 수 있다.(JSX)
Vue 2
모달 컴포넌트 transition 속성 이슈 - Vue 2.X와 Vue3.X
모달에 트랜지션 속성을 넣는 과정에서 Vue 버전차이로 인해 이슈가 발생했다.
Vue.js 환경 구축 시 발생했던 오류(executionpolicy)
vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\User\user\AppData\Roaming\npm\vue.ps
CSS와 마크업 5
CSS 마진 상쇄(Margin collapsing) 이해하기
블록 요소의 상하 마진이 겹치면 한쪽 값만 적용되는 마진 상쇄가 언제 일어나는지, 어떤 규칙으로 계산되는지, 예외는 무엇인지 그림과 함께 정리했다.
[Emmet] 마크업 언어를 좀 더 빠르게 쓰자
#page>#nav>ul>li.item{hello$}*5+dl^dd + tab
[CSS: flex box] flex item의 정렬과 간격 / justify-content /align-items/ align-content
1) flex-start [default]
모바일에서 CSS hover 효과가 사라지지 않는 문제 해결
터치 기기에서는 탭한 뒤에도 hover 상태가 남는다. hover와 pointer 미디어 쿼리로 입력 장치를 구분하고, 필요하면 터치 이벤트로 상태를 지우는 방법을 정리했다.
BEM은 CSS표기법
BEM은 CSS 개발 방법론, 네이밍 컨벤션이다. html 요소들을 각각 Block, Element, Modifier 세 가지로 분류해 작명한다. Block 다음에 Element(내부요소) 혹은…
빌드 도구 7
Tailwind v4 도입하다가 monorepo 빌드 시스템을 뜯어고친 썰
Currency 앱에 Tailwind v4를 올리자 PostCSS 설정이 충돌했다. 원인을 따라가다 pnpm 패키지 격리와 Turborepo 워크스페이스 설정까지 손본 과정과 실험 결과를 정리했다.
SPA(single page app)에서 webpack을 사용하는 이유
2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 다시 그리는 방식이었다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script태그에 넣는 것으로도…
[바벨&웹팩] IE, Safari에서 Javascript가 작동하지 않았던 이유
최종 배포까지 완료했는데, IE와 Safari에서 javascript가 작동하지 않아 시작하기 버튼이 눌리지 않았다.
Babel, Webpack오류 해결 모음
1. babel이 없습니다. babel-node가 없습니다.
웹팩 MAP 파일: js파일 작동하게 하기
MAP파일은 디버깅에 필요한 파일 입니다.
웹팩 이미지 불러오기 실패 이유: 아웃풋 폴더(static)
Q. src\images에 넣으면 html에서 로딩이 안되는데 static에 넣으면 로딩이 된다. 왜지? 똑같은 폴던데?
웹팩(Webpack) 쓰는 이유 / 사용 방법
2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 나타냈다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script태그에 넣는 것으로도 충분했다.…