목록분류 전체보기 (524)
똑같은 삽질은 2번 하지 말자
보호되어 있는 글입니다.
보호되어 있는 글입니다.
개요 flex, grid를 다루면서 고생했던 점들을 다음에는 좀 덜 고생하게 정리하고자 한다. (참고로 tailwindCSS로 프로젝트를 진행중이라 정리하는 코드도 tailwindCSS + React로 할것이다.) 1. grid container의 자식 요소에 고정의 너비길이를 부여했지만, 그 고정 너비보다 넓어질 때 나의 경우에는 컨테이너 너비의 영향이 원인이었다. 그리드 아이템의 최종 너비는 그리드 컨테이너의 너비와 그리드 갭(gap)에도 영향을 받을 수 있는데 만약 그리드 컨테이너의 너비가 아이템들의 합보다 크다면, grid-template-columns에 설정된 너비보다 아이템들이 더 크게 표시될 수 있습니다. {mocks.map(mock => ( ))} w-fit: 이 부분을 추가함으로써 해결 ..
보호되어 있는 글입니다.
개요 리액트로 프로젝트를 진행하게 되면서 이걸 알았으면 삽질을 덜 할수 있었을 듯한 개념에 대해 정리한다. 1. 의존성 배열의 중요성 useCallback 이나 useEffect의 의존성 배열에 상태를 포함시키지 않으면 해당 훅 내의 코드는 상태의 최신 값을 볼 수 없다. 대신에 상태의 값은 훅이 처음 호출될 때의 값으로 고정 된다. 즉 useCallback과 useEffect는 의존성 배열에 명시된 값들이 변경될 때만 새로운 콜백을 생성하거나 코드 블록을 다시 실행한다. 클로저의 개념과 관련이 있는데 클로저는 함수와 그 함수가 생성된 렉시컬 환경의 조합이다. useCallback이나 useEffect의 코드 블록은 그들이 생성될 때의 렉시컬 환경을 캡처한다. 이렇게 캡처된 렉시컬 환경은 훅의 코드 블록..
보호되어 있는 글입니다.
보호되어 있는 글입니다.
개요 Cloudflare Pages와 Workers를 이용해 NextJS v14 + Typescript + App Router를 edge runtime으로 배포해보기 NextJS로 작성된 앱이 있다고 가정하고 Cloudflare Pages를 위한 배포준비를 해보자. 밑의 링크는 제일 많이 참고로 한 공식 문서이다. https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#configure-the-application-to-use-the-edge-runtime Deploy a Next.js site · Cloudflare Pages docs Next.js is an open-source React framework for ..
보호되어 있는 글입니다.
보호되어 있는 글입니다.