개발자의 개발 블로그

서른 초반, 개발 업종에서 떠났다.

자영업을 해보고 싶었다.

흔히들 말하는 나만의 사업을 해보고 싶었다.

개발자를 그만두고 다양한 경험을 했다.

1년동안 미용학원을 다니며 미용사 자격증을 취득했고,

제과제빵을 배우며 베이킹에 발을 담가 자격증을 취득했고,

현재는 식당에 취업해서 주방에서 일을 하며 불 앞에서 일을 했다.

그런데, 개발은 내 머릿속을 떠나지 않았다.

다시 하고 싶지는 않았다.  엄두가 나지 않았다.

어려웠고 재미가 없었고 입사를 하면 매번 퇴사를 할 생각을 하며 살았었다.

그런데, 요즘 들어서 이런 생각이 들었다.

대학생때부터 계산하면 7,8년을 공부하고 일했는데 

왜 실력도 쌓지 못해 헤메고, 재미도 못 느낀 것인가?

왜 그만 둔걸까? 생각을 해보게 되었다.

먼저, 기초가 없었기 때문이라고 생각했다.

요즘 부실공사의 대명사.. 순살자이가 있다면 나도 순살개발자였다.

철근 없이 아파트를 지으려하다가 무너지는 것처럼, 나는 기초없이 '기술'에만 집착했고, 

막혔을 때 멘토 역시 존재하지 않았다. 그렇게 생산성이 제로에 가까웠다.

내가 프로그래밍을  처음 시작한지는 벌써 11년이 흘렀다.

그런데, 지금 다시 시작해보려고 한다.

즉, 11년전 배웠던 것부터 차근차근 다시 시작해보려고 한다.

여태껏 쌓아왔던, 잡다한 분야에 대한.. 야금야금 공부해뒀던 지식이 아깝다.

떠나있는동안 챗GPT라는 멘토가 탄생했다.

현재 일을 하고 있으니 오히려 부담없이 바닥부터 공부를 다시 해보려고 한다.

내 나이 어느덧 서른 중반...  취업을 하기에는 늦지 않았을까?

뽑아주면 좋겠지만  뽑아주겠냐고...!!

일단 '포트폴리오'..라기보다는 내가 만들어보고 싶은 것부터 '재미'로 만들어봐야 겠다.

다시 시작하기 좋은 웹개발부터 다시 시작해보자

그렇지만 오랜만에 HTML부터 차근차근 다시 보니 재밌다. 그리고, 엄청 발전했다.

1달 안에 HTML과 CSS 그리고 자바스크립트 기초를 공부하겠다.

그리고, 관심이 가는 홈페이지를 하나 만들어보겠다.

세련된 반응형 홈페이지를 하나 만들어보며 HTML과 CSS 자바스크립트를 익히고

자바스크립트를 이용한 투두리스트 앱을 하나 더 만들어볼 것이다.

그 다음, 리액트로 넘어가서 실패했던 이유에 대해 돌아볼 것이다.

정녕 어려워서 포기한 것인가? 왜 리액트가 그렇게 어려웠을까? 

올해 목표는 프론트엔드에 대해 전반적인 지식을 쌓는 것이 목표다.

아니... 프론트엔드라고 제한을 하면 안 될 것 같다. 백엔드를 포함한

웹개발 전반적인 구조를 이해해서 "풀스택 개발자"로 성장할 것이다.

할 수 있을까?

할수 있지 왜 없어. 하면 된다.는 건 진리니까...

포기하지 않으면 실패한 게 아니야. 실패란 없어. 포기하지 전에는...

매일 개발일지 블로그를 작성하겠다.

매일 하루 최소 2시간 개발 공부를 하겠다.

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

그럴 경우,

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문을 수행하지 않을 것이다.