나의 코딩일지

데이터 요청 최적화로더로 페이지 진입 전에 데이터 요청해서 캐시하기react-router-dom의 loader는 컴포넌트 라우팅 이전에, 데이터 패칭을 진행 한 후 응답값을 컴포넌트에 전달한다. 나는 클라이언트에서 이 응답값을 활용하고자 하였기에, loader에서 데이터 패칭을 하고 그 값을 캐시하여 활용하면 페이지 렌더링보다 데이터 패칭을 먼저할 수 있어서 빠를 것이라고 생각했다. loader의 데이터 요청 => 렌더링 => 캐싱 => 마운팅 react-router-dom에서 url을 전달받고 요청을 보낸 후 컴포넌트 안에서 tanstack query의 initialData에 응답값을 넣어주면 캐시를 할 수 있다고 믿었다. 그러나 네트워크 요청이 loader에서 한번, tanstack query에서 한..

인자의 타입 지정하기일반적으로 인자의 타입을 지정한 후, 해당 타입의 값을 호출할 때 넣어주면 해당 타입에 들어있는지 확인 후 타입 에러를 결정한다. 이를 좀 더 편리하게 하기 위해서 객체에 값들을 필드와 값으로 추가해주면 하드코딩을 하지 않을 수 있다.const ObjectBooks = { novel: { label: "Novel", code: "N" }, essay: { label: "Essay", code: "E" }, poem: { label: "Poem", code: "P" },} as const;const BOOK_KEYS = { NOVEL: "novel", ESSAY: "essay", POEM: "poem",} as const;function testObjectGetCode(sta..

단순히 매핑하는 것보다 타입을 활용하면 더 유연한 필터링이 가능해진다. 하지만 객체 내부에서 다른 타입이 들어오게 된다면, 여전히 에러를 보이게 된다. 이때 zod, ts-io 등의 라이브러리을 통해 더 엄격한 타입 검증을 할 수 있다. 타입 검증 라이브러리ts-io HomeRuntime type system for IO decoding/encodinggcanti.github.io ts-io는 타입스크립트 기반의 타입 검증을 제공한다. 복잡한 데이터 구조나 타입이 필요한 경우 유용하며, 규모가 큰 프로젝트에서 유리하다.zod GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-firs..

API의 응답값이 바뀌는 경우 배열이 갑자기 객체로 변하거나, 빈 배열이 아닌 null로 오거나 하는 경우가 종종 있다. 이렇게 되면 변경된 API가 배포되었으나, 클라이언트는 아직 배포를 못해 페이지 전체가 에러로 나타나기도 한다. 이러한 상황을 피하기 위해 예상하지 않은 타입은 거부하는 것이 좋다.기존 API 매핑기존에는 viewModel을 활용해서 아예 속성명을 다르게 가져왔다.import { CourseCardType } from "@/components/Courses/CourseCard";export type ResponseCoursesType = { id: number; title: string; short_description: string; is_free: boolean; enro..

임시  리액트BrowserRouter 대신 HashRouter를 사용한다.Next output: "export"Next.js를 Static Generation 배포할 때, 빌드된 파일들을 보면 각 페이지가 index.html과 페이지명.html로 구성된 것을 확인할 수 있다. trailingSlash: true를 추가해주면 된다./** @type {import('next').NextConfig} */const nextConfig = { output: "export", exportTrailingSlash: true };export default nextConfig; next.config.js Options: trailingSlash | Next.js next.config.js Options: trailin..

임시저장으로 놔둘땐 그냥 룰루랄라 빨리 끝나고 자야지 였는데 6시간동안 못잤다카페인보다 효과 좋은 에러파티.. DB도 쓰지 않는 회사 소개 페이지였기 때문에 SEO가 가장 중요했다. 그래서 처음에 리액트로 진행하다가 SSG 시도해보고 바로 Next.js로 갈아탔다. 그러고 순조롭게 진행되나 했더니 배포에서 6시간 걸렸다..^^ 반응형이나 호환성은 진짜 홍보 페이지다보니 신경쓸 수 밖에 없었고, 신경쓰다보니 결과물이 맘에 들어서 배포도 만만하게 봤던듯하다.. 배포 왜 하는지 흥미안생겨서 모른척 했던 과거를 너무 원망함..가비아 컨테이너호스팅도메인은 이미 구입하신 상황이어서 호스팅도 가비아 업체로 희망하셨다. 알아보면 알아볼수록 웹페이지 유지비용 너무 크다. 모든게 다 구독경제.. 찾아보면서 워드프레스나 아..

처음에 스크롤 난리였지만,, 특정 너비에서는 적용이 안되니까 일단 마크업부터 진행을 했다.그러다가 이정도면 괜찮지~라고 정신승리하고 그냥 냅다 overflow:hidden이랑 스크롤 없앴다.body { overflow-x: hidden; overflow-y: auto;}이러면 묘하게 센터는 아니지만 그래도 불편하지 않게 마크업을 진행할 수 있다. 하지만,,모바일에서 보면,,엉망진창!애꿏은 패딩과 마진만 찾아다니다가 너비를 지정해보면서 찾아낼 수 있었다.스크롤 단위의 문제였다.. width: 100%width: 100vw 100%는 스크롤을 제외한 너비를 의미한다.100vw는 스크롤을 포함한 너비를 의미한다.  {children}  :root { --vh: 100vh; /* 전체..

영어로 쓰면 어휘력이 실종된다. 원래없었던거같기도 ~_~ /* 사실상 결과물이 같은데 굳이 고집할 이유가 없어서 Next로 이동했슴니다 next.config.js에 output: export만 추가하면 SSG가,,*/CSR(Client Side Rendering)Think about Single Page Application(SPA) and Client Side Rendering(CSR). They provide an empty HTML file to the client. In this HTML file, JavaScript files are called. CSR means that, by using this empty HTML, the web page loads quickly, and the con..

최근 모바일 찍먹하면서 느끼는건,, 브라우저가 천사라는 점이다. 모바일은 처음에 프로젝트 시작하는 것부터 중간에 하나하나 코드 수정하는 것까지 다 빌드해서 진도를 나갈 수가 없다. 코드 수정하는 순간 노트북 멈출까봐 무섭다. 최종적으로 빌드할 때만 마음 졸이면 되는 웹이 그립다..! 앱등이들의 핍박도 이겨낸 갤럭시 + 윈도우지만 심각하게 맥북으로 갈아탈까 고민중이다.. 어쨌든 기다리는 이유라도 알고 싶지만 그럴려면 일단 웹부터 알아야 한다. 브라우저의 기본 구조브라우저 엔진네트워크 모듈HTML, CSS, JavaScript 파일을 서버에서 받아온다.렌더링 엔진브라우저는 렌더링 엔진을 활용하여 HTML 문서를 파싱하고 DOM(Document Object Model) 트리를 생성한다. DOM은 웹 페이지의 ..

초기에 시작할 때 margin collapse가 발생한다고 배웠었다가, 어느샌가부터 예상하지 못한 margin이 일어나지 않아 잠시 잊고 있었다. 그러다 관련한 질문에 대한 답변을 생각해보다가, 정리가 필요함을 느꼈다. 문제는 아래와 같다.margin의 경우 margin collapse가 발생할 수 있다.최근에는 margin에 대해 신경쓴 적이 없다.margin이 수평 배열인 경우에는 margin collapse가 발생하지 않고, 수직 배열인 경우에 발생한다.수직 배열을 할때 margin에 대해 신경쓴적이 없다.???답은 flex에 있었다. Flex item 에 margin을 주면일반적으로 flex item을 주면 요소마다 각각 적용이 된다. 2번 아이템의 margin-left를 70px로 주고 나머지를..