CodeHoon

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

안녕하세요 상훈입니다.
이번 달 한빛미디어-나는리뷰어다 에서 제공 받은 도서는 소문난 명강의 : 김범준의 핸즈온 리액트 네이티브 입니다.

리액트에 대한 관심과 공부 시간이 어느 정도 들어간만큼 기초적인 리액트에 대한 개념은 안 상태로 이 도서를 전자책으로 얻게 되어, 작성하였습니다.

🙄 어느 정도 수준의 책인가요?

책 소개에서도 언급이 되었지만, 이 도서는 초급 수준의 리액트 네이티브 개발을 한다고, 말해주고 있습니다. 

그러나, 찬찬히 살펴면 어느 정도 개발을 하셨던 분들도 보시면 중간중간에 도움이 될 만한 내용들이 많이 있는 것 같습니다. 추천드려요!

🎆 목차

간략한 목차부터 말씀드리자면, 이 책은

1. Expo, React-Native, Node.js 등 기초 요소 설명
2. 프로젝트1 : 계산기
3. 프로젝트2 : TodoList
4. 프로젝트3 : 여행 사진 공유 앱 만들기 

로 구성되어져 있습니다.

🚩 Prettier, EsLint 

첫 번 째 챕터인 Expo, React-Native, Node.js 등 기초 요소 설명 부분에서 좋았던 부분은 Prettier, EsLint 를 어느정도 이해할 수 있게 설명해준 부분이었습니다.
예전부터 Prettier, EsLint 는 프론트엔드 개발자들을 꽤 속썩이는 역할을 하고 있었거든요. (물론 주관적인 견해입니다.)

저 또한 Prettier, EsLint 때문에 골치 아팠던 적이 한 두 번이 아니었는데, 우연찮게도 이를 어느정도 설명해주어 덕분에 Prettier, EsLint 에 대해 좀 더 알게되었습니다 😎

🚩 Expo

그리고 리액트 네이티브 개발 공부를 조금이라도 해본 사람이라면 모두 알고있는 Expo.

이 책 또한 편의성을 중점적으로 Expo를 사용하여 앱 개발의 초석을 만들었습니다.

덕분에 오랜만에 Expo를 다시 깔게 되었네요.

🚩 첫 번째 프로젝트 : 계산기

1. prop-types 라는 라이브러리를 처음 알게되었습니다.

npm i prop-types

TypeScript 처럼 javascript 에서도 타입을 명시하여 사용할 수 있게 해주는 라이브러리더라구요.
매우 유익했습니다!

그리고 계산기 앱을 한 개 만들어본 결과 느낀점 🚀

책을 받고 시간이 부족해 기간 내로는 클론 코딩이 어려울 것 같아 계산기 앱까지만 만들고, 리뷰를 시작하게 되었다.

React.js 를 사용하던 사람은 React-Native 를 확실히 조금만 더 공부하면 바로 사용할 수 있다.

React-Native 에 해당하는 새로운 컴포넌트 등이 많기에 그렇게 바로바로 사용할 수는 없다.

이 책은 하나하나 상세한 내용을 만들어주고, 전체적으로 오타도 거의 없는 것 같아 좋았다. 여러 개발 관련 도서들은 오타가 워낙 많아 오류도 많이 발생하게 되는데, 이 책은 그런 경우가 없었던 것 같다. (아닐 수도 있음..)

⚡ 제가 드리는 별점은요

⭐⭐⭐⭐⭐ 5개 드리겠습니다. 추천드립니다!

리액트 네이티브를 사용하고 싶으신 프론트엔드 개발자라면, 입문서로 봐도 무방하겠다는 생각이 들었습니다.

이상입니다.

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

안녕하세요 상훈입니다. Linux Ubuntu 에서 ssh 용 Key를 generate 하는 방법에 대해 포스팅 하겠습니다.

서버에서 ssh-keygen 이라는 명령어를 쳐주세요

ssh-keygen

그러면 아래와 같이 (윈도우로 예시를 들었습니다만 원래는 linux-server 에서 사용합니다.) 
특정 경로에 해당하는 id_rsa 가 생성되었습니다.

그리고 비밀번호를 입력하면되는데, 만약 입력하지 않을 것이면 바로 엔터로 넘어가주시면 됩니다.

그러면 .ssh 라는 폴더 안에 아래와 같이 생성되셨을 겁니다.

리눅스-우분투의 경우 기본 경로는 ~/.ssh 이기 때문에 cd ~/.ssh 하면 확인 가능합니다.

저 id_rsa 파일 중 확장자 .pub 를 가지고 있는 파일이 public key
그리고 확장자가 없는 것이 private key 입니다!

이제 자유롭게 사용하시면 됩니다!

이상입니다.

안녕하세요 상훈입니다.

Github Action 기능을 사용하여 Ubuntu 서버에 소스를 push 했을 때 자동으로 build, deploy 를 하는 방법을 기록하도록 하겠습니다.

환경 🚩

Ubuntu 18.04
Code: Spring boot (Java, jdk11, gradle)
Action 동작 시기 : push 후
동작 방법: ssh

목차 ✅

1. Server 에서 ssh private_key 발급
2. GitHub Action 작성
3. GitHub secret 변수 설정
4. Activate

그 다음에는 Github Action 코드를 작성할건데요,

set up a workflow yourtself 를 눌러서 진행하거나, 아래 MarketPlace 에 이미 작성되어져 있는 초안을 가져와도 무방합니다.

*.yml 이라는 파일 형식을 지키고 원하는대로 만들어줍니다. (파일명이라 원하는대로 만들어도 무방합니다.)

name: Gradle Package

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-18.04  #build 하는 환경 설정
    permissions:
      contents: read
      packages: write

    steps:
    - uses: actions/checkout@v3        
    - name: Set up JDK 11        
      uses: actions/setup-java@v3            
      with:
        java-version: '11'              #java 버전 설정
        distribution: 'temurin'
        server-id: github # Value of the distributionManagement/repository/id field of the pom.xml
        settings-path: ${{ github.workspace }} # location for the settings.xml file
        
    #grant : 권한 할당을 통하여 gradlew 명령어를 통해 build 가능하도록 설정
    - name: Run chmod to make gradlew executable
      run: chmod +x ./gradlew
      
    #build : 위에서 권한을 준 명령어로 build
    - name: Build with Gradle
      run: ./gradlew build
      
    #전송할 파일을 담을 디렉토리 생성
    - name: Make Directory for deliver
      run: mkdir deploy

    #Jar 파일을 deploy 디렉토리에 Copy
    - name: Copy Jar
      run: cp ./build/libs/*.jar ./deploy/
      
    #서버에 Deploy 
    - name: Deploy to server
      env:
          PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}        # private key
          HOST: ${{ secrets.SERVER_HOST }}                   # server host (ip addr)
          USERNAME: ${{ secrets.SERVER_USERNAME }}           # username (로그인할 id)
          PORT: ${{ secrets.SERVER_PORT }}                   # port (포트포워딩한 포트번호)
          #password: ${{ secrets.NPC_DEV_SERVER_PASSWORD }}  # 비밀번호설정했을 경우 작성(저는 enter로 뺐습니다.)
      run: |
          echo "$PRIVATE_KEY" > private_key.pem              # private key 값-> private_key.pem 로 생성
          chmod 400 private_key.pem                          # 권한 설정 600이상일경우 안되는 경우가 있음
          
          # scp: 서버간 파일전송 명령어 : 위치= /var/www/html/test에 넣었는데, 원하는 경로로 변경해주세요
          scp -i private_key.pem -P $PORT -o StrictHostKeyChecking=no -r build/libs/*.jar $USERNAME@$HOST:/var/www/html/test/
          
          # ssh 통해서 서버에 접속하여 bash 명령어 실행, 마찬가지로 위에서 변경한 경로와 일치시켜주세요
          ssh -i private_key.pem -p $PORT -o StrictHostKeyChecking=no $USERNAME@$HOST 'bash -s' <<- EOF
            pgrep java | xargs kill -9 || true
            nohup java -jar /var/www/html/test/*.jar > /dev/null 2>&1 & disown  
            exit
          EOF
          rm -f private_key.pem   #작업완료 후 pem 삭제

env: 의 내용은 github action 의  [3. GitHub secret 변수 설정] 에서 설정할 것입니다.

각각의 내용의 주석을 꼼꼼히 읽어주시고, 작성 후 create commit 을 해서 remote 에 넣어주세요!

.yml 파일 생성 완료!

3. GitHub secret 변수 설정 🔨

위에서 작성한 내용중 env : 에서 써놓은 key 값들을 작성하려고 합니다.

분리하는 이유: 누군가 제 repository 에 들어와서 모든  값들을 yml 파일로 확인할 수 있기 때문에 github 의 secret 기능을 설정. (환경변수 설정과 동일)

[ Settings - Secrets and variables - Actions ] 탭에 들어갑니다.

New repository secret 을 눌러 새로운 키를 생성한다고 말해줍니다.

json 형태의 Key: value 라고 생각하면 간단합니다.

이녀석들을 작성합니다.

여기서 다른것들은 그냥 작성하면 되는데, PRIVATE_KEY 는 양식이 있었습니다.

이미지처럼 BEGIN~ 에 해당하는 내용을 입력해서 넣어야합니다. (그래야 저같은 삽질을 하지 않을 수 있습니다 ㅎㅎ)

ssh-gen 을 하게되면 public 과 private  Key가 각각 생성되는데, .pub 자가 붙지 않은 것이 private key 입니다. 참고 바랍니다.

4. Activate ✨

그리고 이제 대망의 action을 활성화 해본다면?

끝입니다.

제가 고생한 흔적

gradlew Permission Denied

에러 발생

내용인즉슨 권한이 없어 거부됨

chmod 명령어로 권한 할당

chmod +x gradlew

안녕하세요 상훈입니다.

ChatGPT OpenAI 의 API 를 사용하려고 하는데, 위와같은 에러가 발생하였습니다.

이와 같은 경우, 기준치 사용량을 초과했다는 뜻입니다. 

제 경우에는 반대로 billing 설정을 안해서 이렇게 되었더군요.. ㅎㅎ

그래서 Free Trial 에서 Upgrade 해주었습니다.

이상입니다.

ChatGPT가 활성화가 되면서 블로그의 값어치가 뚝 떨어졌다는 것이 느껴졌습니다.

기존에 10개의 글을 검색했을 때는 여러 블로그를 살펴보았지만, 지금은 저로서도 ChatGPT 를 사용하고 블로그를 들어가지 않게 되네요.

또한 Bing 의 AI 도 웹 서칭엔진 등을 이용하여 웹 스크래핑하기에 무척 뛰어나더군요. 그래서 있던 광고들을 모두 내렸습니다. 수익성이 거의 전무하다보니 그냥 내려버리는 게 나을 듯 싶더라구요.

이상 주저리 끝

안녕하세요 상훈입니다.

AWS - MySQL - DBeaver
ec2 Ubuntu 에 올려진 MySQL에 DBeaver로 접속하는 도중 에러가 발생하였습니다.

Public Key Retrieval is not allowed

서버측 문제인줄 알고 계속 서버쪽을 뒤지고 방화벽 건드려보고 해도 안됐었다. 결국, 서버측 문제가 아니었다.

😎 해결방법

Driver properties - allowPublicKeyRetrieval 를 true 로 변경하고 test connection 을 시도해보도록 하자.

MySQL 8.0 버전이후부터 ssh 연결 시, publicKey를 사용할 경우 위의 옵션을 켜주어야한다고 한다.

그것도 모르고,,, ㅠ

도움이 되셨다면, 여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

안녕하세요 상훈입니다.

오늘 제가 구현한 내용은 해외 개발자들에게는 익숙한 Buy me a coffee☕ 입니다!

한국에서 제대로 처리되는 내용은 아직 없기 때문에 한국 버전으로 제가 만들어보았습니다.

QR-code 를 이용한 방법입니다.

사용환경 🏠

- React.js, TypeScript

개발결과 🚀

1. Real Link with Netilfy

2. GithubLink

만약 같은 내용으로 링크, 혹은 텍스트만 변경하고자 하신다면, 2.GithubLink를 방문하셔서 소스를 다운로드 하신후 사용해주세요!

특별한 디자인 요소를 넣지않고 개발해놓았습니다.
간단한 자기 소개 내용으로 처리했습니다. 

- Kakao, Toss 버튼에 따라 각각의 QR코드가 띄워지게 처리했습니다!

- 글을 작성하면서 떠오른 생각인데, 모바일 or 웹을 구분해서 버튼 클릭시 동작이 다르게 처리가 되면 좋겠다고 생각이 들었네요. 
추가 구현이 가능하면 구현하도록 하겠습니다.

여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

안녕하세요 상훈입니다.

graphQL을 사용하는데, syntax highlight를 시키고 싶다면, 아래처럼 생긴 확장자를 사용하면 됩니다.

이 링크에서도 확인이 가능합니다. 참조해주세요!

감사합니다

안녕하세요 상훈입니다.

한빛미디어의 '나는 리뷰어다' 활동으로 위 책을 받게 되었고, 직접 코드도 따라 짜보게 되었습니다.
e-book으로 받아 Google Play Book 에서 웹으로 읽으며 코딩 해보았습니다.

내가 별점을 매긴다면 ❔

★★★★★★★☆☆☆ ( 7/10 ) 점 드리도록 하겠습니다.

- 여러 API 에 대한 미흡한 소개 및 작성
- 프로젝트를 제대로 완료하지 못한 찝찝함

😎 결론부터

1. 어떻게 하면 좀 더 나은 환경의 로드 퍼포먼스를 볼 수 있을지 다시 생각하게 되었어요.
2. 몇 가지 우수한 API, Libraries 를 알게 되었습니다! (ex. Hygraph, auth0, ... )
3. 현업자들도 프로젝트를 진행할때 계정 관련 소스들을 직접 건드리려고 하지 않고 외부에서 따로 사용하려고 한다는 것을 알게되었어요! (기존엔 무조건 내가 만들려고했었음)

일단 잘 배웠습니다!

상세하게 배우지는 못했지만,,,
Nuxt.js는 해보았지만, Next.js는 아예 안해본 입장으로서 좋은 경험이었습니다.
(그렇다고 바로 적용하기는 어려울 것 같네요)

Nuxt.js 를 Vue.js 로 혼자 공부했던 적이 있었는데, 프레임워크의 기능들을 제대로 사용하지 못한 기분이 들었고, 이번 기회로 인해 좀 더 알게되었다는 생각이 듭니다.

이 책에서는 클론 코딩과 같은 느낌이 아니라, 대표적인 기능들만 잘게 쪼개어 몇 가지를 알려주신 듯한 기분이었습니다.

그래서 오히려 클론코딩 스러운 내용을 기대하고 보신다면 실망하실 수도 있어요ㅎㅎ.
- 그래도 읽어보시는 건 꽤나 멋진 선택이실 것 같습니다.

✔  책을 읽으며...

첫 번째로 중요하다고 느낀 것은, [서버와 클라이언트의 분리]🎎 부분이었습니다. (보안과도 관련되어있고)

서버에서의 역할과 클라이언트에서의 역할을 명확하게 구분 지을 수 있었습니다.

2번째로, Router를 이용하여 페이지에 로드 할때 기본적으로 동작하는 것들. (마치 Javascript 로 따지자면 document.ready~ 에 해당하는 내용과 같음) 이 생각보다 더 중요한 것처럼 느껴졌어요.

_app.js 와 같은 파일에서 Client 가 App을 사용할 때 기본적으로 실행되고, 거쳐야하는 것들. 등등...

마지막으로, React.js 에 대해 조금 더 알게되었습니다.

🤬  불편한 Styling

style 부분에서 너무나도 많은 컴포넌트를 import 하고 props를 내려주게 되어 오히려 불편하더라구요.
  → 리액트 자체가 아니라 ui 부분에서 특별히 공부를 많이 해야할 것처럼 느껴졌습니다. (내가 왜..? 라는 생각이 들정도)
  → 이 책에서는 css 파일을 git repo에 넣어놓고 독자들이 다운로드 할 수 있도록 진행했다면 더 편했을 것 같습니다. (서로가)

😥 내가 느낀 Next.js 의 단점

(책에 대한 비판이 아니고, Next.js에 대한 내용임을 미리 말씀드립니다.)

- React.js 기반이어서 그런지.. 코드가 Vue.js 에 비해서 너무 지저분합니다(대충 길어서 보기 힘들다는 뜻)  
  Typescript 까지 적용하면 얼마나 더 길어질지....무섭네요.

👍  마무리는..

제가 프론트엔드 개발자로서 아직 짧은 경력을 가졌지만, 음... Vue.js 에 익숙해진 눈과 머리가 살짝 React.js 의 코드를 불편하게 느끼는 것 같기도 하지만, 제가 기업급의 개발팀장이었다면 유지·보수 측면에서도 React 대신 Vue.js 를 선택할 것 같습니다.

그래도, React는 '자유롭다' 라는 장점이 있으니까요. 

이상입니다.

개발 내용

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

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

안녕하세요 상훈입니다.

Next.js + Auth0 를 사용하는데, 로그인 포맷을 띄우려고하는데 오류가 나왔습니다.

내 Application 에서 auth0의 issuerBaseURL == Domain 은 이렇게 써져있었고 [ dev-3c... ] 

🤬에러발생

저는 아무생각없이 그대로 복+붙 해서 .env.local 에 작성하였었습니다.

여기서 문제가 발생하더라구요

🚀 해결방법

https:// 를 써주는 것을 잊지말고...

base url 에 https:// 를 꼭 추가하자

이상입니다

안녕하세요 상훈입니다.

React.js 에서 onclick 이벤트로 state 값을 boolean 형태로 true/false 만들려고 하는데 아래의 무한 루프 에러가 발생하였다.

Too many re-renders. React limits the number of renders to prevent an infinite loop.

😎 결론부터

<button type="button" onClick={} >
  {state ? '숨기기' : '관련영상'}
</button>

//변경전
onClick = { !state }

//변경후
onClick = { () => { !state }}

이렇게 처리하여 에러가 발생하지 않았다.
그냥 콜백함수로 처리했어야했다.

😶 처리하고나서 곰곰히 생각해보았는데..

운동할때랑 자기 전, 그리고 출근할 때 문득 위 에러가 생각났는데,

Callback Function을 위 onClick 내에 넣어줘야 무한루프 에러가 발생하지 않는다는 것을 깨달았다.

만약 콜백 함수가 아니라, 그냥 함수를 바로 써준다면, 위 !state 기능이 렌더링 되자마자 동작해버리고 또 동작하여 무한루프가 발생하는게 아닌가 싶었다.

공식문서에서도 자바스크립(Javascript)의 onClick 과는 다르다! 라고 써있었는데 간과한 것 같았다.

그리고 테스트를 실시해보았다.

1) onClick 내부에 바로 썼을 경우

<button type="button" onClick={setUpdateitem(!updateitem)}>clickevent</button>

2) 함수로 따로 빼서 사용

const updateItemWithClickEvent = () => {
    setUpdateitem(!updateitem)
    alert(updateitem)
  }

<button type="button" onClick={updateItemWithClickEvent}>clickevent</button>

3) 함수를 따로 빼기 + 호출

<button type="button" onClick={updateItemWithClickEvent()}>clickevent</button>

-> 무한루프 발생

4) 콜백함수 return 으로 선언

<button type="button" onClick={() => updateItemWithClickEvent}>clickevent</button> 
// 동작하지않음

<button type="button" onClick={() => updateItemWithClickEvent()}>clickevent</button> 
// 정상동작

당연한 얘기지만, [함수] 로 사용해야 정상적으로 동작한다. 

2) 상수에 함수를 할당해놓았기 때문에 정상동작함
4) CallbackFunction으로 함수를 호출해야 정상동작함

참고

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

안녕하세요 상훈입니다.

Vue.js 를 사용하던 와중, 모달(modal) 팝업을 사용하려고 하는데, 음.. css 로 z-index를 설정하고 뭐하고~ 해도 모달팝업이 정상적으로 안나오더라구요?

그래서 공식문서를 조금조금 뒤져보곤 했습니다.
공식문서에서도 Teleport를 Modal-Popup 에서 사용했습니다. (맨 아래 링크)

그래서 알게 된 <Teleport>

😎 How to Use

네, Vue.js 답게 사용자에게 편의성을 제공해주죠. 매우매우 간단합니다.

<Teleport to="body" v-if="updateClicked">
  <UpdateItemModal @closeModal="closeModal" /> <!--모달 컴포넌트-->
</Teleport>

저는 이렇게 사용하였습니다.

 to  속성(attribute)이 태그의 대상을 나타내어 body 태그 ( 단 한개의 body가 있으니까요) 를 바라보게 되어 element의 최상단에 위치하게 된다고 합니다.

그래서 z-index 999 로 설정하고 출력하였더니 정상적으로 출력되었습니다. (이렇게 부족한 css 실력을 메웁니다.)

😶 부연설명 

- v-if 를 통해 어떤 내용을 클릭하면 modal 창이 출력되도록 설정하였습니다.
- closeModal 이벤트를  emit으로 받도록 하였습니다.

결과물 이미지입니다.

이상입니다.