Jaeilit

공식문서 내용 Routing: Linking and Navigating | Next.js Using App Router Features available in /app nextjs.org prefetch? 공식문서 설명을 보면 prefetch 은 페이지를 방문하기 전에 백그라운드에서 미리 로드하는 방법입니다. 미리 가져온 경로의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가됩니다. 클라이언측 캐시를 활용하여 변경되지 않는 세그먼트는 재사용하여 불필요한 작업을 방지합니다. router api 가 달라진점 useRouter() 를 'next/router' 에서 import 하여 router.push( { pathname : '/test/[id]', query : { id: id } } 와 같이 pathn..

웹 성능 MDN 인용문 웹 성능 | MDN 웹 성능은 객관적인 측정치이면서 로드 시간과 런타임을 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 사이트가 로드되는 데 걸리는 시간, 로드 후 상호작용에 반응할 수 있게 되기 developer.mozilla.org 웹의 성능은 객관적인 측정치고 로드 시간과 런타임에 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 로드에 관해서는 사이트의 로드시간, 로드되고나서 인터랙션이 가능하는데까지의 시간에 속하고 런타임에 대한 인식은 인터랙션이 얼마나 부드럽게 작동되는지에 대한 설명입니다. 로드시간과 인터랙션 시간을 나눠볼수있습니다. SPA 를 다뤄보면 리액트에서는 초기에 text/html 파일로 빈 html 을 내려받고 UI + 인터랙션은 번들링 된 JS 가..

arr 에 중복을 제거하는 방법 3가지를 알아보겠습니다. 1. ES6 set MDN 의 설명과 같이 하나의 값만 저장하기 때문에 배열에서 중복값 제거를 쉽게 할 수 있습니다. 2. indexof 와 filter 의 활용 간단한 설명 indexOf 는 배열에서 지정한 값의 첫번째 인덱스를 반환합니다. 비슷하게 findIndex 도 존재하는데 findIndex 는 조건에 부합하는 첫번째 인덱스를 반환 합니다. indexOf 를 활용하여 1번의 숫자가 몇번째 인덱스에 존재하는지 확인 후에 배열의 filter loop 안 index 와 부합한지 확인 후 filter 메서드의 특징의 참인 값만 return 받는 로직입니다. 예를들어 중복 값 1은 인덱스 기준 0, 3,4,5,6~~ 이렇게 나열되어있는데 index..

늘 잘 관리 된 프로젝트를 위해서 고민하고 노력하는 것을 즐기는데 인풋에 대해서 고민을 해봤다. 인풋은 로그인, 회원가입, 검색 등 input 을 다양한 곳에서 사용한다. 위에는 login page 라고 생각하고 email 과 password 2개의 input 을 만들어봤다. 위에서 필요한 속성은 label tag 를 제외하고 input 의 name 과 value 또 type 정도가 있을 수 있다. handler fn 으로는 onChange, form 태그에 onSubmit 까지가 필수 속성일것 같다. input tag 하나에 name, value, type, placeholder 는 동적으로 컨트롤 한다고 하더라도 onChage, onSubmit 정도는 custom hooks 으로 숨길 수 있지 않을까..

공식문서 https://www.apollographql.com/docs/react/caching/overview#data-normalization Caching in Apollo Client Overview www.apollographql.com 캐시 동작방법 예를들어 book5 를 두번 호출했을 경우에 inMemoryCache에 저장 된 캐시 데이터가 반환됩니다. 네트워크 호출을 하지않습니다. 캐시는 어디에 저장하는 걸까요? 데이터를 정규화하여 로컬 메모리내에 저장합니다. 캐시는 어떻게 저장 하는 걸까요? 아폴로 클라이언트의 캐시는 falt lookup table 로 저장합니다. 데이터를 서로 참조할수있는 조회테이블(look up table)로 저장하지만 실제로 반환되는 쿼리는 그렇지 않은 경우가 많습..

https://nextjs.org/docs/testing#quickstart-2 Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library. nextjs.org 1. npm 설치 npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom 2. jest.config.js 설정하기 -- 공식문서의 기본옵션 외에도 커버리지로 테스트 범위를 설정해주는 옵션과 test 시 무시할 파일들,, 필요에 따라 기타..

next가 때문에 ssr이 핫해진건지 ssr 때문에 next가 핫해진건지 여튼 next 와 ssr이 핫해져서 next 를 사용해보기로 했다. 가장 먼저 문제점을 발견했는데 스타일에서 ssr를 적용하면 cra 할때 사용하던 styeld-compoent가 깨진다는 단점이 있었다. 정확히 말하면 깨지는게 아니라 스타일 적용이 늦었다. 네트워크 탭에서 login.html 을 받아올때 적용 된게 아니라 밑에 부분에 page.js 가 모두 로드되고나서야 스타일이 적용됬다. page.html 만 불러오고나서 (page.js)를 불러오기 전 page.js 를 불러오고 나서 nextjs 13 버전에서 app 디렉토리에서 'use client' 부분에서 이 문제가 드러났다. use client는 내용이 많아서 따로 정리를..

https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04

1. 스크립트랑 라우터 지워주기 npm uninstall react-scripts react-router-dom 2. npm install next - @lastest를 하지 않더라도 13버전이라 자동으로 13버전으로 설치됩니다. npm install next 3. 폴더구조 변경해주기 - next 의 폴더구조를 따라줍니다. 13버전 이전에는 src 안에 pages 라는 폴더 안에서 라우팅을 해주었다면 13버전 이후로는 app 폴더 안에서 이루어집니다. 일단 이 부분은 나중에 해주고 지워준 react-scripts, react-router-dom 이 빨간 줄로 뜰텐데 변경해줍니다. 1. 먼저 react-scripts 는 package.json 에서 Next scrpit 로 변경해줍니다. 보통 이런 부분은 ..

중복체크라는 버튼의 활용범위 1. 회원가입 시에 email 체크시 사용 2. 프로필에서 닉네임 변경 시 사용 3. 기타.. 당장 생각은 안나지만 또 쓸일이 있을수도 있다. 밑에 사진의 코드가 회원가입 컴포넌트와 프로필 컴포넌트 2군데에 중복으로 작성 되어있다. 회원가입에만 작성을 하고 export 로 공유하는 방법도 있겠지만? 또는 .. 커스텀훅으로 어찌어찌만들면 되겠지만 훅까지 만들 필요는 없어보였고 중복되는 함수만 분리해내면 될 것 같아서 공통함수 분리라는 타이틀로 작업하게 됬다. 현재도 기타 다른공부로 인해서 온전히 이 프로젝트에만 시간을 할애하는것도 아니기 때문에 충분히 내 머릿속은 복잡한데, 좀 더 복잡해지기전에 체계?폴더구조? 를 확실하게 잡기위해서 따로 빼자는 생각을 했다. 파라미터 1. e..