next 15 프로젝트 설치를 위해pnpm create next-app@15 frontend 를 실행하니'This project is configured to use yarn' 에러가 발생했다. 찾다보니 더 문제는 루트 디렉토리에서 pnpm -v 를 실행해도동일한 에러가 난다는 것이었다. 여러모로 찾다가 해결했다(제미나이 땡큐).컴퓨터 루트 경로에서 ls -la 실행했고package.json이 있는 걸 확인했다. 까보니 { "packageManager": "yarn@4.9.1"}가 설정되어있었다.루트 경로에 왜 package.json이 있었는지 모르겠지만 이것 때문이었다. 깔끔하게 remove 해주니 정상 작동했다.문제 해결하고 나니 기분이 상쾌했다.

사이드바에 하위 요소들이 넘칠떄 스크롤 만들고 싶으면컨테이너에 height: 100vh를 주면 된다. 그리고 이건 next쓸때 팁인데 next로 사이드바 만들면(use client),처음엔 하위요소 높이만큼 사이드바가 생성되었다가 나중에 화면에 꽉 찬다.이걸 해결하기 위해선 min-height: 100vh도 같이 줘야 한다.

헤더를 화면 상단에 고정시킬때, 그리고 양쪽으로 꽉차게 하고 싶을때 방법이 있다. 헤더에 postion: fixed; width: 100%를 하거나position: fixed; top: 0; left: 0; right: 0;을 하면 된다.

웹브라우저의 랜더링은 'DOM, CSSOM 생성 -> DOM, CSSOM을 가지고 랜더링 트리(청사진, blue print) 생성 -> 레이아웃 -> 페인트' 과정을 거친다. 여기서 일반 js로 돔을 수정하면 위 4단계가 다시 실행된다. 그런데 랜더링 과정 중 마지막 두단계 ReFlow(=ReLayout), RePaint에서 리소스가 많이 든다. 그래서 일반 js로 돔을 조작할때 돔 조작을 최소화해야한다. 하지만 프로젝트 규모가 커질수록 그 작업은 어려워진다. 이것을 해결하기 위해 리액트가 나왔다. 리액트는 돔 조작을 최소화하는 작업을 추상화해서 개발자 대신 해준다. 그 결과 대부분의 상황에서 업데이트 속도가 더 빨라진다. 리액트에서는 Render phase, Commit phase가 있다. Render..

엘리먼트 요소에 flex: 1을 줘서(예를 들면 input 태그) 컨테이너의 크기에 따라 변하게 하려면(늘었다 줄었다) 컨테이너에 display: flex를 줘야한다.

플레이그라운드에서 테스트해보며 썼던 코드이다. 함수를 쓸때 제네릭을 사용하면 좋다. 리턴 타입을 T로 두고 여기에 다양한 타입을 쓸 수 있음 interface UserInfo { userId: number; id: number; title: string; body: string; } const getUserByUserId = async (arg: number): Promise => { return await (await fetch(`https://jsonplaceholder.typicode.com/posts/${arg}`)).json(); } (async function (){ console.log(await getUserByUserId(23)); })();