개발자의 개발 블로그

동적으로 바꾸고 싶을 때, 자바스크립트를 사용할 수 있다.

그럴 경우,

let htmlStr = "";

let htmlStr = '';

htmlStr += `
                     
                        <ol>
                          <li>테마</li>
                          <li>이름</li>
                          <li>평점</li>
                          <li>썸네일</li>
                          <li>제목(title)</li>
                          <li>주인공이름</li> 
                        </ol>
                        
                        <br />
                        ....
                        `;
                        
var list = document.getElementById("list");
list.innerHTML = htmlStr;

이런식으로 div부터 문자열로 만든 뒤, HTML의 div에 한번에 넣을 수도 있다.

    <div id="list"></div>

에, 삽입된다.

또는, HTML에서 구조를 먼저 레이아웃을 만든 뒤, id를 일일히 불러 삽입할 수 있다.

https://coupa.ng/b3PHrb

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

https://www.10000duck.com/ducks/45

이렇게  배열안에 객체가 여러개 있을 경우, 값을 어떻게 갖고 올까? 물론 값을 직접 찍어서 보여줄 수도 있다.

arrname[0].title (첫 번째 객체의 title이라는 값) 이렇게 불러올 수 있다.

하지만, 어떻게 일일히 저렇게 쓸까... 불가능하다.

따라서, 자바스크립트 배열 안에 존재하는 객체를 처리하는 것을 알아봐야한다.

const student = [
  { "name": "jang", "age": 31 },
  { "name": "hong", "age": 25 },
  { "name": "jung", "age": 45 }
];

HTML와 자바스크립트로 뭔가를 테스트할 일이 생겼다.

그런데, 문제가 있었다. 많이 까먹었다는 것이다.

일단,

자바스크립트로 서버에 접속해 데이터베이스에서 값을 가져오는 것까지 성공을 했다.

그런데, HTML에 그 값을 찍어보고 싶은데 어떻게 하더라???

"HTML에서 자바스크립트 변수를 어떻게 사용하더라? 어떻게 불러오지?"

검색을 해봤다... 그 결과 결론은

HTML은 프로그래밍 언어가 아니라 마크업 언어기 때문에 단지, 페이지의 구조(모양)을 나타내는 역할을 한다.

따라서, HTML에서 변수를 불러와서 호출할 수 없다.  자바스크립트에서 HTML태그에 값을 넣어줄 뿐이다.

...

그랬다. 맞다. 생각났다. 알고 있었다. 진짜다. 

const name = document.getElementById("name").value;

이런식으로 HTML의 id를 호출해서 값을 받아올 수도 있고, 넣는다.

Gatsby 프로젝트를 다운로드 받아서, npm install을 할 때 다음과 같은 에러가 발생하며, 제대로 설치가 되질 않았다.

아오 빨간색 에러는 보기만해도... 무섭다... 에러야... 꺼져주겠니?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from google-map-react@2.1.9
npm ERR! node_modules/google-map-react
npm ERR!   google-map-react@"^2.1.9" 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 ERR! 
npm ERR! See /Users/jangseongho/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jangseongho/.npm/_logs/2021-06-08T05_27_26_143Z-debug.log

 도대체 무슨 에러인지 몰라서, 검색을 해봤다. 생각보다 빠르게 해답을 찾을 수 있었다.

https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages

npm install --legacy-peer-deps

아...내가 낸 에러는 스트레스 덜 받는데...환경 세팅이나, 설치 도중 발생하는 이런 시스템 충돌 에러는 정말 싫다.

다행히도 빠르게 해결할 수 있었다.

단건 결제는 한 번의 결제로 지불이 완료되는... 쉽게 말해서 우리가 어떤 상품 판매나 비용 지불 시 흔히 사용하는 게 단건 결제입니다.

반대로, 정기 결제는 주기적으로 여러 차례에 걸쳐서 결제가 발생하는 것입니다. 

단건 결제 시 가맹점 코드(CID)가 필요합니다. 테스트 결제는 가맹점 코드로 'TC0ONETIME'를 사용합니다. 

실제로 결제하려면 카카오페이와 제휴를 맺어 가맹점 코드를 발급 받아야 합니다.

이제 단편 결제를 알아봅시다.

https://developers.kakao.com/docs/latest/ko/kakaopay/single-payment#approve

카카오페이를 연동해보고 싶습니까?. 그럼 하면 되죠. 그럼 시작합니다.

https://developers.kakao.com/docs/latest/ko/kakaopay/common

제공해주는 서비스

도메인 등록

카카오페이 API를 사용하려면 [내 애플리케이션] > [플랫폼] > [Web]에 서비스 웹 사이트 도메인을 등록해야 합니다.

도메인은 최대 10개까지 등록할 수 있습니다.

아래 경로로 들어갑니다.

요약 정보에는 앱 키가 보이는데, 카카오페이에서는 네 번째 항목인 Admin Key를 사용해야합니다.

또한, 카카오페이를 이용하기 위해서는 위 메뉴 -> 플랫폼 -> 하단에 사이트 도메인 추가 --> 자신의 도메인을 추가해줍니다.

로컬에서 작업중이라면 , localhost를 써줘도 됩니다.    http://localhost:3000 이런식으로 포트까지 붙여주세요

제휴 안내

카카오페이 API를 실제 서비스에서 이용하려면 제휴를 맺어야 합니다. 카카오페이 제휴 신청 페이지에서 제휴 제안할 수 있습니다.

물론, 제휴하지 않고 카카오페이 API 테스트는 가능하므로 걱정은 하지 마세요. 단, 실제 서비스를 사용하기 위해서는 제휴해야한다는 사실!!

결제 프로세스

카카오페이를 통한 결제는 크게 네 단계로 나뉩니다.

1. 결제 준비:

- 가맹점 코드, 가맹점이 부여한 주문번호, 상품 총액 등 상세 정보를 카카오페이 서버에 전달하고 결제 과정을 시작하는 단계.

2. 정보 확인 및 사용자인증

- 사용자 정보 입력 및 카카오페이 결제 수단 선택과 인증이 이뤄지는 단계.

3. 인증 완료

- 사용자의 인증이 완료되고, 승인에 필요한 인증 값을 응답주는 단계.

4. 결제 승인

- 결제 필수 값으로 카카오페이 서버에 승인요청하여 최종적인 결제완료 처리를 하는 단계.

__dirname & __filename :

실행하는 파일의 디렉토리 경로를 출력해준다. OS마다 경로 설정 방식이 다른데, (맥 ㅇㅇ/ㅇㅇ/ㅇㅇ/...) (윈도우 ㅁㅁ\ㅁㅁ\ㅁㅁ\...)  

__dirname을 사용하면 편하게 출력할 수 있다.

__filename을 사용하면, __dirname + 해당파일의 이름까지 붙여서 출력할 수 있다.

[URL 구조]

예전에 사용하던 말이 많았던 var... 요즘에는 const와 let으로 대체되었다.

하지만, 완전 대체되진 않았다. 스코프(유효 범위) 때문이다.

const와 let은 블록 스코프를 지니고 있다.

var는 함수 스코프를 지니고 있으므로 일반적인 if문의 블록이나 for문의 블록과 상관없이 동작한다.

const는 쉽게말해서 한 번만 할당한다( = )고 생각하면 된다. 한 번 값을 할당하면 그 이후로 값을 재할당할 수 없다.

또한, 초기화할 때 값을 할당해야 에러가 나지 않는다. 

즉,

const a;

a = 20;

이렇게 작성하는 것은 불가능하다. 무조건 첫 선언과 동시에 할당해야한다.

let은 값이 언제든지 변할 수 있는 변수를 선언할때 사용한다. const에 비해 var와 유사하다.

const b;

b = 20;

둘 중 언제 어떤 것을 쓰면 될까?

변수는 초기화했던 값이 다른 값을 다시 할당하는 경우는 적을뿐만 아니라 실수로 변수의 값을 변경할 가능성도 존재한다.

따라서, 기본적으로 const를 사용하고 다른 값을 할당해야한다는 확신이 있을 때 let를 사용하면 된다.

다음과 같은  7가지를 제외한 모든 값은 true입니다.

1. 값이 없거나 

2. 0 또는 -0

3. null

4. false

5. NaN,

6. undefined,

7. 빈 문자열 ("")

문자열 "false"를 포함한 그 외 모든 다른 값은 초기값을 true로 설정합니다.

심지어, 빈 객체{}  또는 빈 배열[] 역시 true입니다.

그래서, 코드를 간결하게 사용할 수 있게 된다.

예를 들어, 홀수와 짝수를 구별하는 코드를 작성할 수 있다.

  if (num % 2) {
    return odd;
  }
  return even;
}

num이 짝수라면?

나머지가 0이 나올 것이고, 위에서 보았듯이 0은 false이므로 if문을 수행하지 않을 것이다.

뽑는 메소드

pop() : 가장 마지막 요소를 뽑는다.

shift() : 가장 첫 요소를 뽑는다.

배열에 추가하는 메소드

push() : 가장 마지막에 추가한다.

unshift() : 가장 첫 번째에 추가한다.

조합을 해보자.

var a = [];

var b = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (var i = 0; i < 3; i++) {

var randomNum = b.pop();

a.push(randomNum);

}

pop

pop으로 뒤에것부터 3개를 빼면 9 8 7

push로 마지막에 추가해서 집어넣으면 그대로 9 8 7

pop은 그대로 가고, push가 아니라 unshift였다면? 

앞부터 채워 넣으니까  7 8 9