CodeHoon

안녕하세요 상훈입니다.

Vue.js 혹은 React.js (프론트 프레임워크) 에서 카카오로그인을 구현하려고 합니다.
그런데 401 에러가 자꾸 뜨면서 코드 값을 줬는데도 토큰을 내뱉지 않더라구요. 그래서 찾아보다가 KakaoDeveloper 에서 작성된 내용중에 저와 같은 케이스가 있는지 여러 사례들을 확인할 수 있었습니다. 
+ 어떤 블로그를 보면서 진행하고있었는데, 거기서는 code만 보내는 걸로 해서 계속 나오는 에러였습니다.
+ axios를 사용하고있었는데, 지속적인 오류가 출력되어 성공하지 못하고 fetch 방식으로 변경하였습니다.

✔ 사전 환경 체크!

- Backend(Spring)을 거치지 않고 JS 프론트 프레임워크 (Vue.js, React.js) 에서 전부 처리하려고 합니다.
- 현재는 2단계(token 가져오기)입니다.
   (1단계는 code를 가져오는 단계입니다.)
- 결과 데이터로 [token_type, access_token...] 을 얻어옵니다.

✔ 시작!!

일단 필요요소는 다음 사진과 같습니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,  // 1단계에서 발급받은 코드
    client_secret: CLIENT_ID
  }

1) client_id : 내 어플리케이션 > 앱설정 > 요약정보 > REST API 키
2) redirect_uri :  내 어플리케이션 > 제품설정 > 카카오로그인 > Redirect URI
3) code : 1단계에서 받아온 code의 값
4) client_secret :  내 어플리케이션 > 제품설정 > 카카오로그인 > 보안 > ClientSecret :  코드

이렇게 body에 들어갈 내용들을 전부 가지고 REST API (비동기 통신) 으로 값을 요청하고 받아옵니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,
    client_secret: CLIENT_ID
}

const queryStringBody = Object.keys(bodyData)
    .map(k => encodeURIComponent(k) + '=' + encodeURI(bodyData[k]))
    .join('&')


fetch('https://kauth.kakao.com/oauth/token', {
    method: 'POST',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    body: queryStringBody
})
.then(res => res.json())
.then((data) => {
  console.log(data)
})

저 같은 경우는 Vuex-store를/을 사용하여 action에서 이 내용을 처리하였습니다.

actions: {
	async KakaoLogin ({state, commit}, payload) {
	  const bodyData = { ... }
        
	  const queryStringBody = Object ...
        
	  fetch(... )
	    .then(
	      commit() // 여기서 결과 받아서 처리
	    )
	}
}

✔ 결과

console 로 출력하도록 일단 설정하였는데요, 해당 내용은 이제 성공하였습니다.

안녕하세요 상훈입니다.

Vue3 + Spring 를 비동기 통신 axios 로 서버의 데이터 불러오기를 하려고합니다. 

2가지 이슈가 있었습니다.

1) Spring에서 사용하는 Post 방식.
2) Axios 통신에서 생기는 자체적인 문제

해당하는 부분에 적용해서 봐주시면 될 것 같습니다.

😱 1번째 이슈 😱 

- GET방식만 사용하다 보니, POST 방식을 똑같이 적용하는데에 오류가 발생하였다.

그래서 AXIOS를 사용하여 데이터를 백에서 받을 때 자체가 정상적으로 이루어지지 않았다.

@RestController
@RequestMapping("/rp")
public class RPController {
	@Autowired
	RPService rpService;
    
	@ResponseBody
	@PostMapping("/getItems")
	public List<SearchListOut> searchLists (@RequestBody SearchListIn searchListIn) {
		return rpService.searchLists(searchListIn.getRSeq());
	}
}

 - RestController 를 설정, ReqeustMapping을 통하여 "/rp"에 대한 모든 경로를 받을 것을 선언.

- Service를 연결.

- ResponseBody, PostMapping 을 통하여 post 통신방식으로 데이터를 받을 것을 선언.

- @RequestBody SearchListIn searchListIn 
   ㄴ searchListIn.java  DTO 에서 선언한 내용을 값으로 받겠다고 선언

- searchListIn.getRSeq() 를 통해 해당 값을 전달.

✔ SearchListIn  DTO

// SearchListIn DTO
import lombok.Data;

@Data
public class SearchListIn {
	private int rSeq;
}

이렇게 처리하여서 값을 받아왔습니다!

😱 2번째 이슈 😱 

알고보니 axios에서 2번째 파라미터로 값을 보내게 되는데, 이 부분에서 제대로 적용이 안된다는 이슈가 있었습니다.

그래서 3번째 파라미터로 전달하도록 처리했습니다.

function _fetchRP (url, payload) {
	return new Promise ((resolve, reject) => {
		axios.post(url, null, {params: {...payload} })
		...
	}
}

3번째 인자는 원래 config 옵션인데, 이상하게 그렇게 오류가 뜬다고 알려져 있더라구요.

후일 2번째 파라미터로 정상 동작하게 된다면 현재 옵션이 오류가 발생할 것으로 보입니다.

유념해주세요!

안녕하세요 상훈입니다.

React-Remix 프로젝트에서 개별 css 파일(스타일 적용)을 삽입하는 방법에 대해 포스팅하겠습니다.

app
ㄴcomponents
   ㄴNewNote.css
   ㄴNewNote.jsx
ㄴroutes
   ㄴindex.jsx
   ㄴnotes.jsx
ㄴstyles
   ㄴhome.css
   ㄴmain.css

파일 트리가 이렇게 되어져 있을 경우,

1. 기본 형태 
2. Surfacing Styles

두 가지를 작성하도록 하겠습니다.

1. 기본 형태 ✔

routes/index.jsx 의 경로에서 스타일(css)을 삽입해보도록 하겠습니다.

2가지만 적용해주시면 됩니다.

1️⃣ import
2️⃣ function declare

// 1
import homeStyles from '~/styles/home.css';

// 2
export function links() {
  return [{ rel: 'stylesheet', href: homeStyles }];
}

특별히 설정해줄 것?  - 없습니다.

links 라는 함수명을 remix <Links> 에서 감지하여 하위 요소로 끌고가줍니다.

root.jsx 파일에서 보시면,  @remix-run/react  에서 import 한 Link 컴포넌트가 있습니다.

그리고 이 컴포넌트는 html > head 태그 내에 들어가있습니다.

마치 html 에서 기본적으로 삽입하는 link, script 태그들 처럼요. (이해가 딱 되셨을겁니다😎)

그러면 곧바로 2번째 surfacing styles. 시작해보겠습니다.

2. Surfacing Styles - 개별 파일에서 import 하기 ✔

NewNote : 자식 컴포넌트
NotesPage : 부모 컴포넌트

자식 컴포넌트에서 선언한 스타일을 부모컴포넌트에서도 사용하려면 다음과 같습니다.

✔ 자식컴포넌트-NewNote 에서 export 한 links 를 부모에서 별칭으로 import 하여 links 함수 내에 넣습니다.

✔ 그리고 links 함수에서 spread연산자로 links를 return 시켜줍니다.

주절주절 이야기가 길어졌지만 내용은 생각보다 매우 간단했습니다. 흥미롭고 특이한 점(Surfacing😎)도 있었고요.

이상으로 포스팅을 마치도록 하겠습니다.

안녕하세요, 상훈입니다.

React.js + remix + typeScript 에서 data를 load 하는 내용을 포스팅 (이라 쓰고 기록을 한다.)을 하도록 하겠습니다.

<Link to="/"> </Link>

태그에 관한 내용을 반복문 map을 이용하여 목록으로 표시하려고합니다.

전체적인 설명은 아래 이미지있는 곳에서 하도록하겠습니다.

전체코드1. 

import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node'
import { Link, useLoaderData } from '@remix-run/react'
import { getLists, getPosts } from "~/models/posts.server"

//type 선언
type LoaderData = {
  posts: Awaited<ReturnType<typeof getPosts>>,
  lists: Awaited<ReturnType<typeof getLists>>
}

export const loader: LoaderFunction = async () => {
  const posts = await getPosts()
  const lists = await getLists()
  return json<LoaderData>({posts, lists})
}

export default function PostRoute () {
  const { posts,lists } = useLoaderData() as LoaderData

  return (
    <main>
      <h1>Posts!</h1>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link to={post.slug} className="text-blue-600 underline">
            {post.title}
          </Link>
        </li>
      ))}
      
      {lists.map((list) => (
        <li key={list.mapper}>
          <Link to={list.mapper}>
            {list.title}
          </Link>
        </li>
      ))}
    </main>
  )
}

전체코드2 - data

import {prisma} from '~/db.server'
export async function getPosts () {
  const posts = [
    {
      slug: 'my-first-post',
      title: 'My First Post!'
    },
    {
      slug: 'trail-riding-with-onewheel',
      title: 'Trail Riding with Onewheel'
    }
  ]
  return posts
}

export async function getLists () {
  const lists = [
    {
      title: 'First Title',
      mapper: 'frist-title',
    },
    {
      title: 'Second Title',
      mapper: 'second-title',
    }
  ]
  return lists
}

기존 영상(Remix Tutorial 영상)을 참고하여 리스트를 출력해보았습니다.
(대신 하나 추가해서 따라해봤어요.)

Remix 에서 데이터를 컴포넌트에 불러오는 방식을 위와같이 합니다.

저 loader 함수는 클라이언트가 볼 수 없는 함수가 됩니다. ==> remix의 장점

1) useLoaderData 라는 remix 훅을 import 합니다.
2) loader 라는 이름의 함수를 생성하여 그 내부에서 데이터를 불러옵니다. (async await 부분)
3) LoaderData 라는 형식을 선언해줍니다. (type LoaderData)
4) loader 함수 내에서 LoaderData 타입으로 데이터를 반환한다고 말합니다.
(--- json 이라는 라이브러리를 import 합니다.)
5) 데이터를 호출할 때 useLoaderData 함수를 LoaderData 형식으로 선언한다고 합니다.

엄청 왔다갔다 했네요. 이제 다 왔습니다. 
데이터만 뿌려주면 되네요.

map 이용하여 데이터를 loop 돌리도록 하겠습니다.

사이드 프로젝트를 하게되어 remix, react.js, typescript를 하게되었는데... 뭔소린지 하나도 모르겠어서 열심히 공부중입니다.....

화이팅.

불로소득 진짜 원한다.

어디서 로또 안떨어지나.

#이모티콘11주년

안녕하세요. 상훈입니다.

✔ 발생 환경

Java - springfox 를 의존성 주입하여 프로젝트 git에 push 한 것을 pull 받아 바로 구동하려고하는데 

환경 : VSCode.

빨간줄이 떠버렸습니다.

The import springfox cannot be resolvedJava(268435846)

이런 안내문구와 함께요.

✔ 오류 발생 원인 

😢 이 에러가 발생한 건 Build 때문입니다.

✔ 해결 방법

✨Build를 진행하도록 하겠습니다.

build.gradle  > 우클릭  > Reload Projects 를 해주세요.

이렇게 새로운 빌드가 되는것을 보실 수 있습니다.

build가 완료되면 에러표시가 사라진것을 보실 수 있습니다.

만약 그래도 안사라지시면, vscode를 한 번 종료 후, 재구동 시켜서 build를 진행해주세요!

이상입니다.

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

putty ssh-key 발급방법입니다.

1. puttygen 접속

2. Generate 클릭

3. 진짜로 마우스 오버해서 흔들어야 됨..

4. 사용할 id, pw 작성

Key comment : id
Key passphrase : pw
Confirm passphrase : pw chk

5. Save Private Key 클릭

저장해주세요. (putty 에서 파일 불러오기 할 것이기 때문에 삭제 하시면 안됩니다)

6. putty 실행

7. ppk 파일 open 해주세요

완료.

8. 만약 GCP (구글 클라우드 플랫폼) 을 사용중이라면,
권한이 있는 사람에게 key 값을 보내주어 해당 key 의 접속허용을 설정해야한다.

참고

gcp(google cloud platform)으/로 Ubuntu linux 서버를 만들고, ssh 외부 접속 허용을 해놨는데 계속 접속이 안되나 했네요.

안녕하세요 상훈입니다.

Nuxt 3 (+Vue 3) 와 Tailwindcss, typeScript로 프로젝트 생성시 정상적으로 안되는 경우가 있어 정상구동을 확인한 간단한 기초 내용을 포스팅하려고 합니다.

1) Nuxt.js 3
2) Vue.js 3
3) TailwindCss
4) TypeScript
5) Vue Router
6) Vuex
7) gh-pages

를 기본적으로 사용하려고 합니다. ( *5,6,7 은 선택사항 입니다.)

1. 디렉터리 구조

2. nuxt.config.ts

//nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

3. postcss.config.js

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. tailwind.config.js

// tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. tailwind.css (기호에 따라 파일명 설정 index.css, main.css 등)

// assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

이렇게 설정하고 구동시 정상출력을 확인하였습니다.