전체 글21 [펌][React] 리액트에서 파이어베이스를 이용한 구글 로그인 구현 [원문] https://velog.io/@jjonggang/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B5%AC%EA%B8%80-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84 시작서비스를 만들다 보면 소셜 로그인이 필요한 경우가 생깁니다!백엔드에서 OAuth를 사용하여 소셜로그인을 구현할 수 있지만, 이번에 저는 파이어베이스를 사용해서 간단하게 로그인을 구현하기로 했습니다!파이어베이스는 Backend-as-a-Service(Baas) 방식의 서비스로.. 2025. 5. 2. [펌] Next14와 Next-auth를 이용해 OAuth 구현하기 [원문]https://velog.io/@hoonnn/Next14%EC%99%80-Next-auth%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-OAuth-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 최근 프로젝트에서 next-auth를 이용해 소셜 로그인 기능을 구현한 과정에 대해 공유하려고 합니다.시작하기에 앞서, 본 게시글에서는 소셜 로그인 구현에 필요한 각 소셜 서비스의 CLIENT_ID와 CLIENT_SECRET_KEY의 발급 과정은 생략하였습니다. 해당 과정이 필요하신 분들은 다른 게시글을 참고하세요 !기술 스택사용된 기술 스택은 다음과 같습니다.Next14next-auth v4.24.61. Next-Authnext-auth란 Next 프로젝트에서 로.. 2025. 5. 2. 텍스트 요약 (transformers 라이브러리 Hugging Face AI Model) transformers 라이브러리와 Hugging Face의 사전 학습된 모델을 활용하여, 텍스트를 요약합니다. 요약 모델로는 BART나 T5와 같은 모델을 사용할 수 있습니다.[transformers torch 설치]pip install transformers torch pipeline: transformers 라이브러리에서 제공하는 pipeline을 사용하여 요약 모델을 불러옵니다. (facebook/bart-large-cnn 모델을 사용)raw_text: 요약 할 텍스트 입력summarizer: 주어진 뉴스 텍스트를 요약하고, max_length와 min_length로 요약 길이 설정 from transformers import pipeline# 요약 파이프라인 로드summarizer = pipel.. 2024. 11. 19. Log4C / Log4Cpp / Log4++ MFC 프로젝트에 설정 Log4Cpp 소스코드 다운로드https://log4cpp.sourceforge.net/ 1. Log4Cpp 헤더 파일 추가프로젝트의 stdafx.h 또는 필요한 소스 파일에 Log4Cpp의 헤더 파일을 추가합니다.cpp#include #include #include #include #include 2. Log4Cpp 라이브러리 파일 링크Visual Studio 프로젝트의 속성에서 링커 설정을 통해 log4cpp.lib 파일을 링크해야 합니다. 아래 단계를 따르세요.프로젝트 속성을 열고 링커 -> 입력 -> 추가 종속성에 log4cpp.lib를 추가합니다.C/C++ -> 일반 -> 추가 포함 디렉터리에 Log4Cpp 헤더 파일이 있는 디렉터리를 추가합니다.링커 -> 일반 -> 추가 라이브러리 디렉터.. 2024. 11. 10. 오픈 API와 웹 크롤링을 활용한 최신 뉴스 제공 시스템 구축 [원문] https://f-lab.kr/insight/building-news-system-with-api-crawling-20240718 오픈 API와 웹 크롤링을 활용한 최신 뉴스 제공 시스템 구축이 블로그 포스트에서는 오픈 API와 웹 크롤링을 활용하여 최신 뉴스를 제공하는 시스템을 구축하는 방법에 대해 설명합니다. 오픈 API와 웹 크롤링의 개념을 설명하고, 이를 활용하여 최신 뉴스f-lab.kr 오픈 API와 웹 크롤링을 활용한 최신 뉴스 제공 시스템 구축2024-07-18AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!오픈 API와 웹 크롤링을 활용한 최신 뉴스 제공 시스템 구축오늘날 정보의 홍수 속에서 최신 뉴스를 빠르게 제공하는 시스템은 매우 중요합니다. 특히, 인공지능 모델과 결.. 2024. 11. 5. [Narcissus] 소스 코드 및 텍스트 파일 라인 수 카운트 계산기 [Narcissus]- 파일의 라인 수를 세어주는 유틸리티입니다. [다운로드 및 사용법]- 다운로드 (클릭)1. 위의 "다운로드 (클릭)" 링크를 클릭 파일을 다운로드 합니다.2. zip 압축을 해지 합니다. 3. "Narcissus.exe" 파일을 실행합니다. [사전 정의 언어]C / C++ / C# : h;c;cpp;hppJAVA : javaObject C : h;m;c;cpp;hppASP / ASP.net : asp;aspx;cs;vbHtml : htm;htmlJavaScript : jstext : txt;textUser Defined : 사용자 정의 확장자[기타 기능]ALT + 더블클릭 : 선택한 파일 위치를 탐색기로 열기Left Shift + 더블클릭 : 선택한 파일 메모장으로 열기 2024. 11. 3. [vue3] ckeditor5 붙이기 Vue3를 기반으로하는 프로젝트에서 에디터 적용이 필요하여 여러가지 대조군을 비교하며 정리하였다.최초에 대상이 되던 플러그인은 총 3가지로 다음과 같았다.Sun Editor —> 이미지 resize 선택하여 가능 (Vue지원)Tiptap EditorCkeditor5 ckeditor5-Vue 지원. 그러나 이전 js버전의 경우 image resize가 정상적으로 동작안한다고 함. 확인이 필요하다. 위와 같은 리스트업중 필요성과 접근성 등등 여러가지를 고려해서 확인 해보았다.sun editor를 사용할까 했었는데.. Vue를 지원하는것 같지만 들어가보면 소스가 없다. (텅 비어있음.)Tiptap과 ckeditor5는 모두 image resize를 제공하는듯 보였다.사람들이 이미 익숙하게 사용중인 ckedit.. 2024. 10. 21. [nextjs] router 에서 구글 애널리틱스(Google Analitics) google tag manager 적용 https://tagmanager.google.com/구글 태그매니저로 구글 애널리틱스 적용하려면, 자바스크립트 코드를 추가해야하는데, 고대로 복붙하면 적용되지 않는다. 다음을 참고하면 된다. https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries Optimizing: Third Party Libraries | Next.jsOptimize the performance of third-party libraries in your application with the `@next/third-parties` package.nextjs.org 설치npm install @next/third-parties@latest.. 2024. 10. 13. NEXTAUTH_SECRET 적용하기 (NextAuth) [참고] https://next-auth.js.org/configuration/options#nextauth_secret Environment VariablesNEXTAUTH_URLWhen deploying to production, set the NEXTAUTH_URL environment variable to the canonical URL of your site.NEXTAUTH_URL=https://example.com If your Next.js application uses a custom base path, specify the route to the API endpoint in full. More information about the usage of custom base path her.. 2024. 10. 12. [nextjs] 구글 로그인 구현하기, 구글 클라우드 플랫폼에 사이트 등록 nextjs에서 구글 로그인 구현하기 1. 구글 클라우드 플랫폼 로그인https://console.cloud.google.com/ Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com 2. New Project 만들기이름 입력 후 create 3. API 메뉴로 접속 - OAuth consent screen으로 접속 4. 진행하면서 해당 칸을 채운다. 구글로그인할때 보이는 화면 구성 5. Credentials - Create Credentials - Oauth Client ID 6. 마찬가지로 계속 진행 7. 저장하면 나오는 Client id 복사해서 .env.local에 저장한다. .env.localGOOGLE_CLIENT_ID .. 2024. 10. 12. 이전 1 2 3 다음
