반응형 React17 어도비 XD 설치된 폰트 활성화 안될때 해결방법 누락된 글꼴 어느날 그냥 여느때와 같이, adobe XD로 디자인파일을 열었는데, "누락된 글꼴"이라고 설치된 전체 폰트가 활성화가 안되는 문제가 생겼다. 윈도우-폰트 경로에서 확인을 하면 분명 설치는 되어있는데 왜 글꼴 활성화가 안될까? 그 전까지는 폰트를 재설치하여 해결했었는데 매번 이렇게 하니 번거롭고 시간도 오래걸리고, 다음날 재부팅을 하니까 다시 글꼴이 누락되었다... . 글꼴이 누락되는 근본적인 해결방법을 알아보자. 해결방법 글꼴 누락 문제는 윈도우에 저장된 폰트 캐시 서비스를 재시작(삭제)하면 해결이된다. 윈도우 운영체제에서 자주 사용하는 글꼴 데이터를 캐시하여 응용 프로그램의 성능을 최적화하고있는데 이 부분에서 캐시와 파일이 충돌이 일어나는 것 같다. 폰트 캐시 서비스 재시작 방법 윈도우키.. 2024. 1. 23. [Next.js] pocketbase로 Create, Read..하는 튜토리얼2 (13버전 이후) NextJS 13 버전 포켓베이스를 이용하여 간단한 게시판 리스트와 뷰페이지, 글쓰기 기능을 갖춘 웹페이지를 만들것이다. Nextjs 13버전 설치 npx create-next-app --next=13.1.1 ./ --ts // 이렇게 설치했는데 14버전이 설치됨... 포켓베이스 설치와 설정(백엔드) https://pocketbase.io/docs/ 다운로드해서 압축풀고 pocketbase.exe 파일을 프로젝트안의 최상위 경로에 넣는다. 실행방법은 간단하다.. . ./pocketbase serve Admin UI주소로 들어가보면 계정생성하여 로그인한다. posts라는 이름의 데이터테이블을 만드는데 여기서는 collection이다. new field로 컬럼추가 가능 그리고 세팅 > API Rules > .. 2024. 1. 17. [Next.js] 튜토리얼 블로그 메인 페이지 UI 만들기(마크다운 파일 생성) 튜토리얼 블로그 폴더 생성 후 npx create-next-app ./ --typescript 넥스트+타입스크립트 템플릿으로 설치 기본 화면 메인페이지 UI만들기 layout.tsx에서 favicon이나 head안의 데이터를 수정할 수 있다. page.tsx에서는 메인페이지의 UI를 만들 수 있다. md파일안에 포스트 생성하기 블로그 튜토리얼 공식문서 서버가 없기때문에 여기의 블로그 데이터를 md(mark down)파일로 만들어서 사용할것이다. posts 폴더 생성 각 포스트별로 md파일을 만든다. 마크다운 파일을 데이터로 추출하기 markdown 형식의 데이터를 일반 글로 전환하는 함수가 필요. post에 사용할 함수 생성 여러 모듈을 사용하면서 파일 읽고.. 2024. 1. 17. [Next.js] Next.js 기본 Nextjs 기본 NextJS 란? (리액트는 라이브러리, Next.js는 프레임워크이다. ) React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. 리액트로 개발할때 SPA을 이용하며 CSR(Client Side Rendering)을 하기때문에 좋은점도 있지만 단점도 있다. 검색엔진최적화(SEO)에 취약하다는 것이다. CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기때문에 포털검색에 거의 논출될 일이 없다.(크롤링 안됨) 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달 할 수 있게.. 2024. 1. 17. 리덕스 툴킷과 많이 사용하는 미들웨어(redux-saga, redux-thunk 등) 리덕스 툴킷은 Redux를 편리하게 사용할 수 있도록 도와주는 도구이다. 여기에는 몇 가지 흔히 사용되는 미들웨어가 있다. redux-thunk 비동기 작업을 처리하기 위한 미들웨어로, 함수 형태의 액션을 생성하여 비동기 작업을 수행할 수 있다. const fetchData = () => { return async (dispatch) => { dispatch(fetchDataRequest()); try { const data = await api.fetchData(); dispatch(fetchDataSuccess(data)); } catch (error) { dispatch(fetchDataFailure(error)); } }; }; redux-logger 액션의 디스패치와 상태의 변화를 콘솔에 로깅하.. 2023. 12. 22. 리덕스와 리덕스 툴킷(createSlice, handleActions) 사용해야 하는 도구나 함수의 선택은 개인적인 취향, 프로젝트의 규모, 팀의 선호도 등 여러 요소에 따라 다를 수 있다. 그러나 Redux Toolkit은 Redux 코드를 작성하는 데 있어서 편의성과 효율성을 제공하므로, 많은 프로젝트에서는 Redux Toolkit을 선호하는 경향이 있다. 여기 몇 가지 고려해야 할 사항이 있다: 프로젝트 규모와 복잡도: 작은 규모의 프로젝트에서는 Redux Toolkit의 편의성이 더 큰 장점이 될 수 있다. 큰 규모의 복잡한 애플리케이션의 경우에는 더 많은 커스터마이징이 필요할 수 있으므로 해당 요구에 맞게 Redux의 기본 기능을 직접 사용할 수도 있다. Redux Toolkit의 특징 활용: Redux Toolkit은 createSlice, configureSto.. 2023. 12. 22. [React] 헷갈리는 리액트 이벤트 핸들러 작성법 import React from 'react' const Counter = ({ number, onIncrease, onDecrease }) => { return ( { number } +1 -1 ) } export default Counter 이걸 작성하다가 궁금한점이 생겼다. onClick={onIncrease()}를 하지 않는 이유는 뭘까? ChatGPT씨에게 물어보았다ㅎㅎ onClick={onIncrease()}와 onClick={onDecrease()}를 사용하는 것은 함수를 호출하려는 시도를 나타냅니다. 그러나 일반적으로 React에서는 함수를 직접 호출하는 것이 아니라, 이벤트 핸들러로 함수 참조(reference)를 전달해야 합니다. 만약 onClick={onIncrease()}를 사용하면.. 2023. 12. 8. [React] 포켓몬도감 만들기8 - Typescript로 변경하기 완성한 포켓몬도감 배포 주소이다. 완성된 포켓몬도감 01. 타입 스크립트를 사용하기 위한 준비하기 typescript 설치 npm install -D typescript @types/react @types/react-dom vite.config.js -> vite.config.ts 확장자 변경 tsconfig.json, tsconfig.node.json, vite-env.d.ts(/src/) 가져오기 vite로 typescript + 리액트 프로젝트 생성하면 기본으로 생성되는 파일을 가져온다. main.tsx 확장자 변경 index.html에서 main.tsx로 변경 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).r.. 2023. 12. 8. [React] 포켓몬도감 만들기7 03. 로그인 페이지 생성하기 01. Firebase에 대해서 Firebase란? 모바일 및 웹 애플리케이션을 만들기 위해 구글에서 개발한 플랫폼이다. 대부분의 앱을 만들때 필요한 부분들 인증 / 데잉터베이스 / 스토리지 / 푸시알림 / 배포 등등 을 자동으로 만들어주는 플랫폼이다. firebase를 이용한 앱 구조 02. Firebase와 애플리케이션 연결하기 firebase 사이트 firebase 바로가기 회원가입 & 로그인 콘솔로 이동 프로젝트 생성 firebase연결하기 npm install firebase firebase.js 파일 생성 export default app;추가 03. 로그인 페이지를 위한 경로 생성 및 Navbar 생성하기 router, Layout 생성 const Layout .. 2023. 12. 8. [React] 포켓몬도감 만들기6 16. React Portal 로 모달 생성하기 Portals란 ? Portal은 부모 컴포넌트의 DOM 계층구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공한다. ReactDOM.createPortal(child, container) 첫번째 인자 child는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식이다. 두번째 인자 container는 DOM 엘리먼트이다. Portal을 이용한 모달 생성 테스트 프로젝트 생성 npx create-react-app react-portal-modal 실행npm run start 문제점 첫번째 div와 두번째 div가 같은 z-index(1)가지고 첫번째 div안에 자식인 모달이 z-index 100.. 2023. 12. 8. [React] 포켓몬도감 만들기5 11. Damage Relations 컴포넌트 생성하기 데미지 관계 데이터 포켓몬의 타입이 어떤 타입에 강한지, 약한지 관계를 표현하는 부분 앞서 받아온 DamageRelations데이터를 살펴보자. console.log(pokemon?.DamageRelations); 한 포켓몬이 가진 타입에 따라서 더블데미지를 주는 타입(double damage to), 더블데미지를 받는 타입(double damage from), 하프데미지를 주는 타입(half damage to), 하프데미지를 받는 타입(half damage from), 데미지를 안주는 타입(no damage to), 데미지를 안받는 타입(no damage from) 여섯가지 관계를 시각화한다. UI에 넣어주기 위한 가공된 데이터 최종 형태 가공 첫.. 2023. 12. 8. [React] 포켓몬도감 만들기4 01. React Router Dom App.jsx에서 라우팅 설정 import { BrowserRouter, Route, Routes } from 'react-router-dom'; ... 02. React Router Dom APIs 중첩라우팅(Nested Routes) 리액트 라우터의 가장 강력한 기능중 하나. 복잡한 레이아웃 코드를 어지럽힐 필요가 없다. 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용한다. Outlet 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet을 사용해야한다. 이렇게 하면 하위 경로가 렌더링될때 중첩된 UI가 표시될 수 잇다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트.. 2023. 12. 8. 이전 1 2 다음 반응형 최근댓글 최근글 인기글 © Copyright 2023 jngmnj
최근댓글