CodeHoon

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

안녕하세요 상훈입니다.

json 객체(object) 형태의 문자열을 json 객체화 하려면 간단하게 

JSON.parse(str);

하면된다. 

추가적으로 배열(Array) 또한 가능하다. (몰랐다)

■ 배경설명

현재 프로젝트가 Web → Native(React Native) → Web 이기 때문에 내 입맛대로 데이터의 형식을 설정할 수 없기 때문에, 배열로 변환하는 방법 또한 알게되었다.

■ 결론

일단 결과부터 말하자면, 방법은 다음과 같다.

// 배열 형태의 문자열
// (JSON객체형태가 곧바로 string으로 변환되어나온 형태)

let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]";

// 문자열 → 배열
arryStr = JSON.parse(arryStr);

배열(Array) 인 것을 알 수 있다.

그러나, 

typeof(arryStr); //Object

라고 출력된다. (으잉?)

위처럼 사용해도 배열에 대한 모든 기능들은 동작하니 문제는 없을 것이다.

하지만 기분이 찜찜하고 이상하니 조금 더 파고들어가보았다.

■ 부연설명

위에서 얻은 arryStr 을 가지고 새로운 배열에 반복문을 통해 push 해서 type을 해보겠다.

let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]";
arryStr = JSON.parse(arryStr);

// ---------------------------------------

let result = []; //새로운 빈 배열 선언

arryStr.forEach( (item, idx) => {  //반복문을 통해
    result.push(item);             //빈배열에 값을 집어넣기
});

console.log(result);               //['안녕하세요.', '안녕히가세요.']
console.log(typeof(result));       //object

????

result 라는 녀석은 배열로 선언해서 배열로 끝났고, 각각의 인덱스도 가지고 있는데, 
type을 확인해보니 객체(Object)로 출력되어져 있다.

비교대상이 배열인지 여부를 확인하는 메서드를 사용해서 판독해보자.

> Array.isArray() :: 비교대상이 배열이면 true, 아니면 false를 반환하는 메서드.

// 비교 대상 ( ) 안에 있는 대상이 배열이면 true, 아니면 false를 출력한다.

// Array.isArray() 를 통해서 한 번 더 배열인지 여부를 판독
console.log(Array.isArray(arryStr)); //true
console.log(Array.isArray(result2)); //true

왜냐하면, 자바스크립트(JavaScript)에서의 배열(Array)는 배열이 아니라 객체(Object)이기 때문이다. 
자세한 내용은 아래의 링크를 참고해주시길 바랍니다.

JSON.parse() 하나로 이렇게 글이 길어질 줄 몰랐지만, 길어졌다.

이상입니다.

참고

미리보기를 해보니 역슬래쉬가 \로 출력되네요.

작성할때는 역슬래쉬 정상적으로 되었는데 말이죠. 유의해주시길 바랍니다!

이미지 참고 ㅎㅎ

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

안녕하세요 상훈입니다.

js를 다루는 개발자라면, console.log, 혹은 debugger를 자주 사용하게 되실텐데요,

console.log 에 대한 미세한 먼지팁을 드리고자합니다.

바로, 색상을 입히는 것인데요,

방법은 아주 간단합니다!

1. 텍스트 내용의 시작에  %c 를 붙여주고 작성한다.
2. 색상을 정의해준다. (스타일)

console.log("%c안녕하세요?","color:red;");

이렇게 결과가 출력되었습니다. 어때요 눈에 잘띄죠?

추가적으로 배경도 줄 수 있습니다!

console.log("%c안녕하세요?","background-color:red; color:white;");

이상입니다. 생각보다 눈에 잘띄어서 좋습니다. 저는 blue를 자주 사용합니다.

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

안녕하세요 상훈입니다. 

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의 값으로 변한 것을 확인할 수 있습니다.

이상입니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다. 

이번에 리뷰 하게 된 IT도서는 "소플의 처음만난 리액트" 입니다.

리액트라는 자바스크립트 라이브러리(프레임워크가 아닙니다.ㅎㅎ) 는 아주 유명한 언어입니다.

전세계에서 프론트엔드 언어로 가장 큰 자리를 잡은 언어가 바로 요녀석이거든요.

비록 러닝 커브가 길고 높다는 단점이 존재하지만, 대규모 프로젝트를 할 때에는 이녀석만한 속도를 내주는 언어가 없습니다.

[리액트, 앵귤러, 뷰 ] 프론트 엔드 3대장 중 제일 큰 인재풀, 시장규모를 갖고 있습니다. 

그래서 신입들도 모두 리액트를 배우고 싶어하며, 회사들에서도 어쩔 수 없이 리액트를 채용하고 있습니다.

자, 서론이 너무 길었네요. 이제 본론으로 들어가보겠습니다.

이 책은 제목값을 한다고 생각합니다.

전체적인 책의 흐름을 따라가보자면, 일단 프론트엔드 분야에서 필요한 전반적인 지식을 알려줍니다.

예를 들면, HTML, CSS .... 등등 기초 지식을 알려주고, 자바스크립트가 무엇인지, 왜 써야하는지 등 여러가지 기초 내용을 잡아줍니다.

그리고 본격적으로 리액트에 대한 내용이 있는데, 서론에서도 언급하였듯이, 단점으로 러닝커브가 높다. 라는 언급을 해줍니다.

러닝커브란 투자 대비 효용이 초반에 좋지 않다는 뜻입니다.
다른 말로는 Vue.js 처럼 공부한 만큼의 퍼포먼스가 바로바로 나오지 않습니다.

하지만 재사용성이 중요하고 렌더링 속도가 매우 뛰어나기 때문에 리액트를 채용했다고 합니다.

리액트에서는 state가 매우 중요합니다. 데이터를 매번 연산하면 product의 렌더링 속도가 그만큼 떨어지니까요.

[state와 LifeCycle 챕터] 를 봐주시면 state(상태)에 대한 설명이 간결하고 이해하기 쉽게 설명을 해줍니다.

그리고 놓칠 수 없는 부분이 바로 Hooks (훅) 입니다. 

가장 흔히 사용하고 중요한 훅 중 하나인 useState 훅입니다.

const [myInfo, setMyInfo] = useState("");

myInfo 라는 state 가 있는데, 해당 state은 기본값을 "" (공백) 으로 가진다.
그리고 set(_)을 통해 해당 state의 값을 변경할 수 있다.

여기서 myInfo는 객체({ })가 될 수도 있고, 숫자가 될 수도 있고, 단순 string 값이 될 수도 있습니다.

훅에 대한 자세한 설명을 확인하고 싶으시다면, [7장 훅] 을 봐주세요!

역시나 코딩의 시작은 클론코딩이죠!

마지막에는 교재에서 가르쳐준 내용을 토대로 나만의 간단한 미니 블로그를 만들게 됩니다.

기본적인 CRUD를 모두 한다고 생각하면 됩니다.

게시글을 작성하고, 읽을 수 있고, 수정하거나 삭제가 가능한 기능을 만듭니다. [16장 블로그 만들기] 를 확인해주세요!

마치며,

"소플의 처음 만난 리액트" 교재는 리액트의 기초부터 간단한 프로젝트까지를 직접 다 코딩해볼 수 있게 도와준다.

설명도 요목조목 잘 따져가며 깔끔하게 설명이 되어있다. 

리액트를 처음 접한다면 추천합니다. 

추가적으로 해당 교재를 구매하시면 [무료 동영상] 이 있으니 확인 바랍니다!

확실히 리액트는 처음 보면, 이게 무슨소리야? 왜? 이런 소리를 할 수 밖에 없을 것입니다.

제가 그랬거든요.ㅋㅋㅋ 

프론트엔드에 대한 전반적인 지식이 부족해서 그런건지 몰라도, 리액트는 뷰에 비해서도 진짜 어렵다고 느껴졌습니다.

왜냐하면 라이브러리를 직접 하나씩 하나씩 찾아서 원하는 부분을 보고 수정하고 해야하는 번거로움이 있기 때문입니다.

원하는 라이브러리에 대해 사용을 해봐서 익숙하고 편해했다면 리액트만큼 자유분방하고 여러 라이브러리들을 폭넓게 사용할 수 있는 건 없을겁니다. 

P.S.

사실 6월 IT 리뷰 신청 시기를 놓쳐서 담당자님께 메일도 직접 보내고 폼도 늦게 작성하여 신청하였습니다.

다른 책이었으면 상관없었을 텐데, 제가 리액트 책을 내어달라고 맨날 한빛소프트에 문의넣었거든요.

그렇게 채근해서 리액트 교재가 딱 나왔는데, 당사자가 안봤다? 이건 진짜 벌받아야하는 겁니다.

다행히도 한빛소프트에서 교재를 보내주어 이렇게 글을 작성하게 되었습니다.

감사합니다. 덕분에 리액트에 대한 갈증이 채워지는 것 같았습니다.

이상입니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다. 

제이쿼리를 이용하여 (1) radio 버튼이 체크되어있는지 여부, (2) 체크 되어있는 값을 가져오기의 예제를 작성해보도록하겠습니다.

html

<input type="radio" name="item" value="1">
<input type="radio" name="item" value="2">
<input type="radio" name="item" value="3">
<input type="radio" name="item" value="4">

이렇게 4개의 이름이 같은 radio 버튼이 존재하고, 모두 값이 다를 때,

1. 버튼이 체크 되어있는지 여부 확인하기

const itemChecked = $('input[name=item]').is('checked');

item 이라는 name 속성을 가진 radio 태그 중 체크 되어있는 것의 노드를 가져옵니다.

 2. 체크 되어있는 값을 가져오기

위를 좀 더 단축하여 사용하겠습니다.

const itemValue = $('input[name=item]:checked').val();

이렇게 item이라는 name 속성을 가진 녀석 중 체크 되어있는 노드의 값을 가져옵니다.

이상입니다.

안녕하세요 상훈입니다. 

요즘 jquery를 무척 많이 접하게 되어 저도 하나씩 모르는 것들을 알아가고 있습니다.

예를 들어... show(), hide()..? ㅋㅋㅋㅋ

제이쿼리를 이용하여 특정 버튼을 활성화 / 비활성화 하는 방법에 대해 포스팅하겠습니다.

<button type="button" id="myButton" onclick="change()" disabled>  click  </button>

위와 같이 id : myButton,  onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다.

그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요,

attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다.

1. attr()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').removeAttr('disabled');
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').removeAttr('disabled');
    } else {
    	$('#myButton').attr('disabled');
    }
}

이렇게 하는 방법이 있구요~

2. prop()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').prop('disabled', false); // 비활성을 비활성 = -1 x -1 와 같음
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').prop('disabled', false);
    } else {
    	$('#myButton').prop('disabled', true);
    }
}

이렇게 사용하시면 됩니다. 

Prop() 을 사용하시는 것을 권장드립니다.

이상입니다.