분류 전체보기
-
예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각이 들어서 무심코 yarn create next-app 을 입력했는데 왠걸... NextJS를 익숙할 만큼 접하지는 않았지만, 매우 어색한느낌이었다. 이유인 즉슨 NextJS에서 13버전을 출시하면서 라우팅 방식이 변경되었다. 기존에는 page 방식이었다면, 13부터는 app 방식이라고 한다. 아직 뭔말인지는 모르겠지만... NextJS 13이 궁금해서 못참겠다... 신기술 못참지!!! 13으로 가즈아~ 우선 NextJS의 공식 블로그를 확인해보자. https://nextjs.org/blog/n..
[NextJS] NextJS 13예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각이 들어서 무심코 yarn create next-app 을 입력했는데 왠걸... NextJS를 익숙할 만큼 접하지는 않았지만, 매우 어색한느낌이었다. 이유인 즉슨 NextJS에서 13버전을 출시하면서 라우팅 방식이 변경되었다. 기존에는 page 방식이었다면, 13부터는 app 방식이라고 한다. 아직 뭔말인지는 모르겠지만... NextJS 13이 궁금해서 못참겠다... 신기술 못참지!!! 13으로 가즈아~ 우선 NextJS의 공식 블로그를 확인해보자. https://nextjs.org/blog/n..
2023.07.24 -
구독 채널의 최신 영상을 가져오고싶은데, youtube API에 구독자의 최신 영상을 한 번에 가져오는 방법은 없는 듯 하다. Subscriptions: list 는 현재 내가 구독중인 채널의 정보를 받아올 수 있다. 생각하고 있는 로직은 Subscriptions: list를 통해 구독 채널 정보 리스트를 받아온 다음, 그 안에 있는 채널 id를 사용하여 해당 채널의 최신 영상을 받아오는 방법을 생각하고 있다. export const getSubscriptionsList = async () => { const accessToken = getAccessToken(); const params = { part: "snippet", mine: true, maxResults: 5, }; try { const re..
[WONTUBE] 구독 채널의 최신 영상 가져오기구독 채널의 최신 영상을 가져오고싶은데, youtube API에 구독자의 최신 영상을 한 번에 가져오는 방법은 없는 듯 하다. Subscriptions: list 는 현재 내가 구독중인 채널의 정보를 받아올 수 있다. 생각하고 있는 로직은 Subscriptions: list를 통해 구독 채널 정보 리스트를 받아온 다음, 그 안에 있는 채널 id를 사용하여 해당 채널의 최신 영상을 받아오는 방법을 생각하고 있다. export const getSubscriptionsList = async () => { const accessToken = getAccessToken(); const params = { part: "snippet", mine: true, maxResults: 5, }; try { const re..
2023.07.07 -
20230705 며칠동안 바빠서 chat gpt 프로젝트를 진행 못했다가 진행하려니 자꾸 에러 메세지가 날아왔다. cors 문제 해결과정을 포스팅하려고 했는데, cors 문제 해결한 다음에도 계속 에러가 나오길래 뭐지 했는데, chat gpt api 무료 사용기간이 초과돼서 그런거였다.... 그냥 재미로 하는 side project에 돈을 쓰고싶지는 않은데 ... 무료 credit도 얼마 써보지도 못하고 끝나버렸다... 빨리빨리 할 걸 .... 나중에 여유가되면 유료 결제하고 한 번 해봐야겠다. ChatGPT 채팅을 웹으로 배포해보자. 프론트엔드 구성 vite를 사용해서 프로젝트 빌드를 구성하고, 질문을 받을 수 있는 인풋 제어 컴포넌트를 만들었다. import { useState } from "reac..
[Chat-GPT] Open AI API로 Chat GPT 사용해보기(2)20230705 며칠동안 바빠서 chat gpt 프로젝트를 진행 못했다가 진행하려니 자꾸 에러 메세지가 날아왔다. cors 문제 해결과정을 포스팅하려고 했는데, cors 문제 해결한 다음에도 계속 에러가 나오길래 뭐지 했는데, chat gpt api 무료 사용기간이 초과돼서 그런거였다.... 그냥 재미로 하는 side project에 돈을 쓰고싶지는 않은데 ... 무료 credit도 얼마 써보지도 못하고 끝나버렸다... 빨리빨리 할 걸 .... 나중에 여유가되면 유료 결제하고 한 번 해봐야겠다. ChatGPT 채팅을 웹으로 배포해보자. 프론트엔드 구성 vite를 사용해서 프로젝트 빌드를 구성하고, 질문을 받을 수 있는 인풋 제어 컴포넌트를 만들었다. import { useState } from "reac..
2023.07.05 -
Open AI 의 API로 Chat GPT와 간단한 터미널 채팅을 구현해 보자. Open API Key 발급 https://openai.com/ 회원가입 로그인 후 https://platform.openai.com/docs/introduction 로 이동 (메뉴에 Developers로 이동해도 된다) 우상단 프로필 아이콘 클릭 Veiw API Keys 클릭 Create new secret key 를 눌러 api key 를 발급받는다. ChatGPT API 호출 fetch() 함수를 이용하여 ChatGPT API에 "안녕"이라는 메시지를 전송해보자. // chat.js function chat() { return fetch("https://api.openai.com/v1/chat/completions", ..
[Chat-GPT] Open AI API로 Chat GPT 사용해보기(1)Open AI 의 API로 Chat GPT와 간단한 터미널 채팅을 구현해 보자. Open API Key 발급 https://openai.com/ 회원가입 로그인 후 https://platform.openai.com/docs/introduction 로 이동 (메뉴에 Developers로 이동해도 된다) 우상단 프로필 아이콘 클릭 Veiw API Keys 클릭 Create new secret key 를 눌러 api key 를 발급받는다. ChatGPT API 호출 fetch() 함수를 이용하여 ChatGPT API에 "안녕"이라는 메시지를 전송해보자. // chat.js function chat() { return fetch("https://api.openai.com/v1/chat/completions", ..
2023.06.22 -
문제 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 ski 에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나 지 "ukks" 또한 위 규칙대..
[Programmers - lv01] 둘만의 암호문제 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 ski 에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나 지 "ukks" 또한 위 규칙대..
2023.06.14 -
문제 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 ..
[Programmers - lv01] 카드 뭉치문제 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 ..
2023.06.14 -
현재 완료 목록 Google OAuth 로그인 사이드바 토글 메인 인기 영상 목록 검색 결과 현재 영상 목록을 라우팅으로 처리하지 않고, Recoil을 사용하여 상태(인기영상 인지, 검색 결과 영상인지)로 뿌려주고있다. 왜 그랬는지 모르겠는데 ... 라우팅 처리하지 않고 진행해야한다는 생각에 갇혀있었다... 그런데 실제 Youtube를 들어가보면 그렇지 않고 라우팅으로 처리되어있다. 전역상태를 써서 뭔가 해봐야겠다 ... 였던건가... 그래도 헛수고는 아닌것같다. 예전에 써봤긴했지만 Recoil atom과 selector에 더 확실히 알 수 있었기 때문이다. 앞으로 해야할 것 라우팅에 따라 영상 목록 및 검색 결과 출력 구독 채널 영상 불러오기 쇼츠 영상 불러오기 될지 안될지는 모르겠다지만.. 알림 프로필
[WONTUBE] Youtube API 갖고놀기 중간 정리현재 완료 목록 Google OAuth 로그인 사이드바 토글 메인 인기 영상 목록 검색 결과 현재 영상 목록을 라우팅으로 처리하지 않고, Recoil을 사용하여 상태(인기영상 인지, 검색 결과 영상인지)로 뿌려주고있다. 왜 그랬는지 모르겠는데 ... 라우팅 처리하지 않고 진행해야한다는 생각에 갇혀있었다... 그런데 실제 Youtube를 들어가보면 그렇지 않고 라우팅으로 처리되어있다. 전역상태를 써서 뭔가 해봐야겠다 ... 였던건가... 그래도 헛수고는 아닌것같다. 예전에 써봤긴했지만 Recoil atom과 selector에 더 확실히 알 수 있었기 때문이다. 앞으로 해야할 것 라우팅에 따라 영상 목록 및 검색 결과 출력 구독 채널 영상 불러오기 쇼츠 영상 불러오기 될지 안될지는 모르겠다지만.. 알림 프로필
2023.06.01 -
카테고리 API를 이용해서 카테고리 리스트를 쭉 불러왔다. 그런데 실제 Youtube 메인페이지의 카테고리와 달리 너무 많은 데이터가 넘어왔다. 아마 내가 보는 영상을 기반으로 카테고리를 따로 정리해서 메인에 뿌려주는 것 같다 내 유튜브 메인 카테고리 Category API로 불러온 데이터 우선은 카테고리는 구현하지 않고 아래와 같이 구성하기로 했다. 메인 : 인기 영상 목록 구독 : 구독 채널 영상 목록 Shorts : 쇼츠 영상 목록
[WONTUBE] Youtube API 갖고놀기 (4)카테고리 API를 이용해서 카테고리 리스트를 쭉 불러왔다. 그런데 실제 Youtube 메인페이지의 카테고리와 달리 너무 많은 데이터가 넘어왔다. 아마 내가 보는 영상을 기반으로 카테고리를 따로 정리해서 메인에 뿌려주는 것 같다 내 유튜브 메인 카테고리 Category API로 불러온 데이터 우선은 카테고리는 구현하지 않고 아래와 같이 구성하기로 했다. 메인 : 인기 영상 목록 구독 : 구독 채널 영상 목록 Shorts : 쇼츠 영상 목록
2023.06.01