CodeHoon

안녕하세요 상훈입니다. 

jQuery - Handlebars.js 를 사용하는데, 다 제대로 한 것 같은데, 아래와 같은 에러를 내뱉습니다.

요놈의 핸들바는 불친절하게 에러를 좀 내뱉는 것 같습니다.

Handlebars Pass a string or Handlebars AST to Handlebars compile ...

undefined 오류도 포함합니다.

확인사항

1. 실제 값이 undefinded 인지.
2. 컴파일 하려는 id의 값과 html-script-handlebar 의 id 를 일치시켰는지 여부
3. 해당 script를 포함하고 싶은 태그가 렌더링 되고 난 이후에 작성이 되었는지 여부

저는 3번에 해당하는 것이었습니다.

<div id="handlebarExample">
	<script id="handlebarExampleTarget" handlebar...></script>
</div>

이렇게 작성을 했었는데, 인식이 안되더라구요.

그래서 해당 <div>의 속을 비워주고, script를 아래로 내려주었더니 해결되었습니다.

<div id="handlebarExample"></div>
...
<script id="handlebarExampleTarget" handlebar...></script>

아무래도 완전히 컴파일이 되기 전에 script가 동작하게 되어 일어난 현상이 아닐까 싶습니다. 

2시간동안 헤매었는데, 논리상 오류가 없다보니 위치를 고려하지 못했었습니다.

이상입니다.

안녕하세요 상훈입니다.

jQuery - Swiper 를 사용하는데, activeIndex가 뭐지?  slideChange는 어떻게 사용하는것이지? 라는 의문이 들어 찾아보고 메모합니다.

일단 기본적으로 적용시킨것들은 이미 하셨다고 생각하고 넘어가도록 하겠습니다.

1. activeIndex 

var swiperExample = new Swiper(".swiper-container", {
	
    ...
     
});

이런 swiper가 있을 때, activeIndex는 간단하게 얻을 수 있습니다.

const swiperIndex = swiperExample.activeIndex

이렇게하면 현재 활성화되어있는 swiper의 번호를 얻을 수 있습니다.

2.slideChange

슬라이드가 변할 때 특정 동작을 실행합니다.

var swiperIndex;

var swiperExample = new Swiper(".swiper-container", {
	
    ...
     
    on: {
    	slideChnage: function () {
        	alert(this.realIndex);
        }
    }
});

slideChange 가 동작할 때마다 alert이 출력될 것 입니다.

이상입니다.

안녕하세요 상훈입니다. 

제이쿼리의 $.extend를 처음 보게 된다면 당황하셨을 수도 있습니다. 하지만 간단한 내용이라는 것을 알아주시기 바랍니다.

객체 A, B가 있다면,
$.extend(A, B) 는 A뒤에 B를 합치는 활동이라고 볼 수 있습니다.

여러개의 객체를 extend 내부에 넣을 수 있습니다.

const A = {age: 12, weight: 52} 
const B = {name: '상훈', height: 200}

const C = $.extend(A,B) // {age: 12, weight: 52, name: '상훈', height: 200}

만약 중복되는 key값을 가지고 있다면, "뒤"에서 덮어씌워집니다.

const A = {age: 12, weight: 52} 
const B = {name: '상훈', height: 200, age: 30}

const C = $.extend(A,B) // {age: 30, weight: 52, name: '상훈', height: 200}

이렇게 age가 뒤에 넣은 객체 B의 값으로 변한 것을 확인할 수 있습니다.

이상입니다.

안녕하세요 상훈입니다.

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 ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

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

안녕하세요 상훈입니다.

MongoDB를 사용하여 node.js 와 연결하려고합니다.

MongoParseError: option usefindandmodify is not supported at parseOptions ...

mongo.connect( ) 의 option에서 에러가 발생하였습니다.

해당 에러는 mongoose의 버전의 상승으로 인해 더이상 필요없어졌기 때문에 에러가 발생하는 것입니다.

옵션을 제거해주세요!

mongoose
  .connect(MONGO_URI)
  .then(() => {
    console.log("Connected to MongoDB");
  })
  .catch((e) => {
    console.log(e);
  });

이렇게 connect 함수 내부에 파라미터로 uri 주소 말고는 옵션을 주지 않고 코드를 작성합니다.

이상입니다.

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

안녕하세요 상훈입니다.

리액트를 다루는 기술이라는 책의 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() 와 같은 긴 코드가 사라지고 위와같이 깔금한 내용만 남았습니다.

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

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스펙에 따라 달라질 수 있습니다.

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