CodeHoon

React-native 로 font 를 설정하려던 와중 에러가 발생하였다.

'Lobster Regular' 이라는 구글 폰트명으로 폰트를 설정하려고 하는데 expo 설정과 연동하여도 에러가 발생하였다.

버전 참고 바랍니다.

expo install expo-font

expo-font를 설치해주고, App.js 에서 코딩해주었다.

loaded 라는 변수에 useFonts() Hook을 사용, font의 경로(src/assets/fonts/-.ttf) 를 찾아 삽입해주었다.

저 부분에서 조건문에 다른 컴포넌트를 라이브러리에서 끌어다가 사용하였었는데, 에러가 나서 null로 바꿔주었다.

(혹시나 같은 오류가 발생한다면 참고바란다.)

에러 해결되었슴

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

expo 공식 사이트에 어떻에 font 적용이 가능한지 설명되어있으니 참고 바랍니다.

'firebase.apps.length' 부분에서 객체에 대한 길이를 반환시켜 값의 존재유무에 따라 app의 값을 다르게 앱에 적용하려고하는데 해당 내용에서 자꾸만 에러가 출력되었다.

기존 코드는 login auth() 관련해서 기능을 구현하려고하였다.

바뀐 부분은 import 부분.

firebase의 버전은 v8이다. 

// 변경 전
import * as firebase from "firebase/app";

// 변경 후
import * as firebase from "firebase";

// 하단의 전체 코드

const firebaseConfig = {  ...  };

let app;
if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig);
} else {
  app = firebase.app();
}

const auth = firebase.auth();

export { auth };

이것 때문에 오전내내 시간을 사용하였다. 그래도 해결되었으니 기쁘구먼,,

그런데 왜 공식 페이지에서는 import 부분을 저대로 명시해놓았을까 의문이 든다.

1. redux/toolkit

npm install @reduxjs/toolkit

redux를 사용할때에 매우 유용한 라이브러리다.

Extension의 redux를 설치해야하며, 타임머신 기능을 제공하여 에러를 찾기도 편리하다.

2. date-fns

npm i date-fns

날짜 형식을 사용할때 편리하게 사용하고 귀찮게 일일이 시간 타입을 선언하여 사용할 필요가 없다.

// 현재와의 시각 차이를 만들 수 있음

// Slicer.js
date: sub(new Date(), { minutes: 10 }).toISOString()

// ParseTime.js
const TimeAgo = ({ timestamp }) => {
  let timeAgo = "";
  if (timestamp) {
    const date = parseISO(timestamp);
    const timePeriod = formatDistanceToNow(date);
    timeAgo = `${timePeriod} ago`;
  }
  return (
    <span title={timestamp}>
      &nbsp; <i>{timeAgo}</i>
    </span>
  );
};

formatDistanceToNow 함수를 사용하여, 현재 시각과의 시간 차이를 출력하기 쉽다.

-> 게시글 같은 곳에서 사용하면 편리할듯

사실 이 date-fns 의 기능을 추천해주고 싶어서 어그로 끌었다. 미안하다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다.

그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다.

ecmaVersion은 2016이상으로 맞춰주시길 바랍니다.

제 eslintrc.json 입니다.

"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },

sourceType: module 을 추가해주시거나, 변경해주시거나

package.json에서 type: 'module' 을 추가해주세요.

이제 import 를 사용하실 수 있습니다.

덤으로 export const ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

리액트를 다루는 기술이라는 책의 21강에서 사용되는 koa-router는 현재의 리액트 버전(17)에서는 사용할 수 없습니다.

설치방법

npm i koa-tree-router

사용 방법

const Koa = require("koa");
const Router = require("koa-tree-router");

const app = new Koa();
const router = new Router();
router.get("/", function(ctx) {
  ctx.body = "hello, world";
});

app.use(router.routes());

app.listen(8080);
// 혹은
app.listen(8000, () => {
  console.log('listening...8000...');
})

기존의 사용방식은 일치하고, 다른점은 하단의 app.use 부분입니다.

allowedMethods() 와 같은 긴 코드가 사라지고 위와같이 깔금한 내용만 남았습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

1.  .eslintrc.json
2.  .prettierrc

파일에 대해서 간단한 설정 몇 가지를 작성해보려고 합니다.

1.  .eslintrc.json

일단 사용환경이 React.js 라서 ecmaFeatures 와 같은 경우 jsx 문법을 사용하고 있습니다.

commonjs를 적용해 eslint를 설치하였습니다.

- 사용하지 않은 변수에 대한 알림 및 에러 처리

하단에 보시면 no-unused-vars: "warn" 이라는 항목이 있는데, 해당 항목을 error, warn, off 로 설정이 가능합니다.

2.  .prettierrc

1) singleQuote: 싱글 쿼터로할지 더블 쿼터로 할지 설정입니다.

Vue.js 에서는 싱글을 추천하고, React.js 에서는 더블을 권장하고 있습니다. 그래서 false로 무조건 더블 쿼터 처리를 하게하였습니다.

2) semi: 코드의 맨 뒤에 콜론을 자동으로 삽입하게 할지 말지 적용하면 됩니다.

3) tabWidth: 1번 tab을 눌렀을 때 띄워줄 space의 개수입니다. 저는 2개로 했습니다. (2개로 하는게 대세더군요)

도움이 되셨길 바랍니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

React.js, function component style

RestAPI 등 외부 API를 적용하여 데이터를 외부에서 받아와서 useEffect Hooks 내에서 데이터를 풀어줄 때의 주의사항 중 한개를 서술한다.

기본적으로 REST API와 같은 외부 데이터들은 promise.then 형식으로 데이터를 받는다.

그럴 때 async await을 사용하는데,

React.js useEffect() Hook에서는 async를 직접적으로 사용하면 안된다.

useEffect ( async () => {
	await something...
})

이렇게 사용하면 안된다는 뜻이다.

async await을 사용하려면, 내부에서 사용해야한다.

useEffect (() => {
	const result = async () => {
    	const something = await axios.get( ) ...
    }
})

이런 식으로 말이다.

왜냐하면 useEffect() Hook은 void 속성을 가져, 반환하는 값이 없다.

그러나 async await이 내뱉는 결과물은 객체 형태이기 때문이다.

이상 메모 끝~

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

React.js 17 버전은 다르게 다운로드 받아야합니다.

에러 내용

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.3.0 || ^16.0.0-alpha" from react-virtualized@9.22.3
npm ERR! node_modules/react-virtualized
npm ERR!   react-virtualized@"9.22.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

버전이 안맞기 때문에 아래와 같은 명령어로 다운받아주세요

 npm install react-virtualized --legacy-peer-deps

설치가 잘되었고 퍼포먼스가 훌륭해진것을 확인하실 수 있습니다.

기존의 작업 시간보다 훨씬 줄었더군요.

물론 pc스펙에 따라 달라질 수 있습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.