영원히 흘러가는 강

안녕하세요. 이전 회사에서는 직접 id/pw를 입력받아 사용했었지만 소셜 로그인의 필요성이 대두됨에 따라 공부해보자 글을 작성해본다 구현목표! nextjs14 와 nextAuth 를 활용하여 소셜 로그인 구현 프로젝트 설정 next 설치 npx create-next-app@latest nextAuth 설치 npm install next-auth 파일 구조 파일구조때문에 살짝 애먹긴 했다... next13 부터 app 구조로 변경되어 API 활용하려면 route.ts와 같이 사용 app / api / auth / [...nextauth] / route.ts import NextAuth from "next-auth"; const handler = NextAuth({ ... }); export { handle..

next 14에서 발표한 next learn 확인 중 using the clsx library to toggle class names 이와 같은 글을 확인하였고, clsx가 무엇인지 찾아보게 되었다 위에서 소개한 예시는 아래와 같다 import clsx from 'clsx'; export default function InvoiceStatus({ status }: { status: string }) { return ( // ... )} status 조건에 따른 변경이 가능하다는점이다. 추가로 깃헙 페이지 확인시 아래와 같은 문자 합치기도 가능하다 // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects cl..

진짜 너무 늦었다14버전이 나왔다는데 13 버전도 제대로 확인 못한 1인...부랴부랴 node 버전을 확인해보니 Lts 가 20.9.0이네..?   (너 언제 그렇게 높아졌니..?)우선 node 버전을 NEXT.js 14 minimum 버전인 18이상으로 끌어올리기!! (물론 저처럼 게으르지 않은 개발자분이시라면 확인만 하시죠..)이상 글쓴이의 푸념은 각설하고 진짜 늦었으니 당장 시작해보자!우선 Next에서 큰 꼭지로 4가지를 잡았다. (공식문서 링크 첨부)🚀 Turbopack💻 Server Actions (stable)🪬 partial Prerendering (Preview)📑 Next.js Learn  🚀 Turbopack최근 Next 문서를 확인해보셨던분이라면 알겠지만 핵심 키는 최적화와 ..

두개의 문자열을 받아 대소문자 비교까지 완벽히 일치하는지 판별 function solution(str1, str2) { let answer = "Yes"; let hash = new Map(); for (let x of str1) { if (hash.has(x)) hash.set(x, hash.get(x) + 1); else hash.set(x, 1); } for (let y of str2) { if (!hash.has(y) || hash.get(y) === 0) return "NO"; hash.set(y, hash.get(y) - 1); } return answer; } let str1 = "AabbcC"; let str2 = "cbCaab"; console.log(solution(str1, str2));

문제는 위반 될수 있으니 패스! 가장많은 수를 차지한 문자를 선택하는 방법! 자바스크립트 맵 객체를 활용한 문제 function solution(s) { let anwser = ""; let max = Number.MIN_SAFE_INTEGER; let hash = new Map(); for (let x of s) { if (hash.has(x)) { hash.set(x, hash.get(x) + 1); } else { hash.set(x, 1); } } for (let [key, value] of hash) { if (value > max) { max = value; anwser = key; } } return anwser; } let string = "BACBACCACCBDEDE"; console.l..

문제는 위반 될수 있으니 패스! 배열 주어지고 3개의 값을 더했을때 최댓값을 구하기 ex) arr= [10,7,3,5,4] answer =20 슬라이딩 윈도우 문제라고 한다 function solution(k, arr) { let anwser = 0, sum = 0; for (let i = 0; i < k; i++) sum += arr[i]; anwser = sum; for (let j = k; j < arr.length; j++) { sum += arr[j] - arr[j - k]; anwser = Math.max(anwser, sum); } return anwser; } let a = [12, 15, 11, 20, 25, 10, 20, 19, 13, 15]; console.log(solution(3,..

많은 분들이 NEXT js에서 react-quill 사용하려 노력하신 결과로 아래의 코드는 많이 있을테니 간단히 설명하고 넘어가기~ 변경전 import ReactQuill from 'react-quill' 변경후 const ReactQuill = dynamic(() => import("react-quill"), { ssr: false, }); next js에서 제공하는 dynamic import 활용하여 빌드타임이 아닌 런타임에 불러오도록 함 이제 문제는 그안에 Quill도 어떻게 가져오는지 그리고 안에서 어떻게 Quill에 저장하여 사용하는지 인거 같다 많이 찾아봤지만... 그어떠한 것도 확실한 답이 되지 않았다... 나도 더 찾아보고 수정해봤지만 나의 경우를 설명해보려한다.!! import dynam..

{children} 내부에 값을 내려주고 싶은 상황이 있어 찾아보다가 cloneElement() 가 있어서 확인 및 정리해보고자 작성해본다 React 에서의 cloneElement() 에 대한 설명이다. React.cloneElement(element,[config],[...children]) element를 기준으로 새로운 React 엘리먼트를 복사하고 반환합니다. config는 key와 ref 그리고 모든 새로운 props를 포함합니다. 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props가 새로운 props와 얕게 합쳐진 뒤 주어집니다. 새로운 자식들은 기존의 자식들을 대체합니다. config에 key와 ref가 없다면 원본 엘리먼트의 key와 ref는 그대로 유지됩니다. 아래의 구문과 동일하다고 ..

크롤링 처음 해보는데 처음이라 그런지 어렵다.. 아래는 Delenium + BeautifulDoup + ChromeDriverManager import time from selenium import webdriver import csv import pandas as pd from bs4 import BeautifulSoup as bs from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.common.by import By total_list=["제목","작성시간","조회"] f=open('crawl.csv','w',encoding="utf-8",newline='') wr=csv.writer(f) wr.writero..

css 미디어 쿼리처럼 js에서도 사용할수 있다 window.matchMedia("(min-width: 400px)").matches