본문 바로가기

코딩이야기45

[Next.js] build할 때 checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>() 오류 기록 문제상황next.js 프로젝트 빌드 과정에서 빌드가 안되는 오류가 발생하였습니다.  해결과정아무리 구글링을 해도 오류에 대한 원인이 분명하게 나오지 않아서 github의 next.js에  Discussions 부분에 동일한 문제가 있나 살펴보았습니다.빌드 시 이런 오류가 뜨면  app의 page중에 같은 이름으로 된 파일이 있는지 확인 해야 됩니다.이 오류가 뜬 이유가 components의 layout.tsx와 app의 layout.tsx가 똑같은 이름으로 export 되어 충돌이 일어나서 생긴 오류였습니다.components의 layout을 layout-bar로 이름을 변경하니 오류가 사라졌습니다.참고 : NextFont gives a type error on Build mode · vercel/nex.. 2024. 4. 18.
[React] React에서 SVG 쓰는 방법 기존에 쓰고 있던 png, jpeg 등의 파일에 비해 svg 파일은 생소하기도 하고 다루기 까다롭다고 느껴서 쓰지 않고 있었는데 최적화를 진행중 이미지가 너무 커서 어떻게 할까 생각을 하다 svg를 사용하기로 했습니다. -SVG란 'Scalable Vector Graphics' 의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식입니다. -XML이란? HTML과 같은 마크업 언어이고 HTML이 브라우저가 분석할 수 있는 태그로 기술되어있는 문서라면, XML은 웹페이지에서 데이터를 주고받기(통신하기) 위한 태그들로 기술된 문서입니다. png, jpeg와 svg의 차이점 1. png, jpeg는 비트맵 기반의 이미지라서 원래의 크기보다 크게 보여지게 될 경우 이미지가 깨진.. 2023. 10. 31.
[React기초] 리액트 Routing & SPA & CSR html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.공식문서Routing이란? -어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 -ROUTER = 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 -ROUTE + ING = 경로를 정해주는 행위 자체, 그런 과정들을 다 포함하여 일컫는 말 -요청받은 내용을 브라우저 화면에 표시하는것 PAGE ROUTING이란? -웹서버가 요청이 명시되있는 경로에 따라 알맞은  페이지를 선택하고 페이지를 반환하여 사용자가 페이지에 접속하는 과정 자체 여러개의 페이지를 가진 어플리케이션 => MultiPage Application (MPA)라고 부른다  .. 2023. 6. 21.
[React 기초] JSX와 바벨(babel)은 무엇인가? *JSX는 무엇인가? JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 줍니다.(객체를 표현) 리액트는 JSX문법을 사용하며 브라우저에서 실행되기 전에 바벨(babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 참조 : https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org [JSX 문법 규칙] -html에서 class값을 정의할 때는 와 같이 하면 되었지만 class라는 단어가 ES6의 클래스 문법과 겹치는 예약어이기 때문에 JSX에서는 class.. 2023. 4. 19.

티스토리툴바