전체 글 179

2023.12.18+ 커스텀 훅

custom hook 생성규칙 함수이름은 use로 시작한다 함수 내에서는 다른 리액트훅이나 커스텀훅을 사용할 수 있다. 함수 내에서는 return 문을 통해 특정 값이나 함수를 반환해야 한다. 주의사항 1.이름 규칙 준수 2. 훅의 순서에 대한 의존성에 주의해야 한다. 3. 컴포넌트 범위에서 훅 호출: 반드시 함수 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다 4. useeffect usecallback의 의존성 배열을 이해해야 한다. 5. 커스텀훅은 순수함수로 구성되어야 한다. import { useEffect, useState } from "react"; export default function useProduct() { const [productList, setProductList] = use..

nextjs aws를 이용한 이미지 업로드

가입 후 s3라는 서비스에 접속 버킷을 만든다 버킷리스트는 누구와도 겹치지 않는 고유아이디 같은 개념이기 때문에 유니크하게 만들고 모든 퍼블릭액세스 차단은 해제시켜준다 만들어졌으면 권한에 가서 버킷정책과 cors를 설정해 준다 { "Version": "2012-10-17", "Statement": [ { "Sid": "1", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::방금만든버킷이름/*" }, { "Sid": "2", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam:AWSID:root" //awsid는 우측 내 id를 드롭다운하면 복사할수있음..

백준 2903 노드

문제 상근이는 친구들과 함께 SF영화를 찍으려고 한다. 이 영화는 외계 지형이 필요하다. 실제로 우주선을 타고 외계 행성에 가서 촬영을 할 수 없기 때문에, 컴퓨터 그래픽으로 CG처리를 하려고 한다. 외계 지형은 중앙 이동 알고리즘을 이용해서 만들려고 한다. 알고리즘을 시작하면서 상근이는 정사각형을 이루는 점 4개를 고른다. 그 후에는 다음과 같은 과정을 거쳐서 지형을 만든다. 정사각형의 각 변의 중앙에 점을 하나 추가한다. 정사각형의 중심에 점을 하나 추가한다. 초기 상태에서 위와 같은 과정을 한 번 거치면 총 4개의 정사각형이 새로 생긴다. 이와 같은 과정을 상근이가 만족할 때 까지 계속한다. 아래 그림은 과정을 총 2번 거쳤을 때까지의 모습이다. 초기 상태 - 점 4개 1번 - 점 9개 2번 - 2..

nextjs 소셜로그인 구현

npm i next-auth pages/api/auth/[nextauth].js 파일생성 import NextAuth from "next-auth"; import GithubProvider from "next-auth/providers/github"; export const authOptions = { providers: [ GithubProvider({ clientId: 'Github에서 발급받은ID', clientSecret: 'Github에서 발급받은Secret', }), ], secret : 'jwt생성시쓰는암호' }; export default NextAuth(authOptions); https://next-auth.js.org/ NextAuth.js Authentication for Next...

백준 반례를 못찾은 문제, 2745번, 2738

진법 변환 실패 시간 제한메모리 제한제출정답맞힌 사람정답 비율 1 초 128 MB 40537 20406 17436 50.164% 문제 B진법 수 N이 주어진다. 이 수를 10진법으로 바꿔 출력하는 프로그램을 작성하시오. 10진법을 넘어가는 진법은 숫자로 표시할 수 없는 자리가 있다. 이런 경우에는 다음과 같이 알파벳 대문자를 사용한다. A: 10, B: 11, ..., F: 15, ..., Y: 34, Z: 35 입력 첫째 줄에 N과 B가 주어진다. (2 ≤ B ≤ 36) B진법 수 N을 10진법으로 바꾸면, 항상 10억보다 작거나 같다. 출력 첫째 줄에 B진법 수 N을 10진법으로 출력한다. 예제 입력 1 복사 ZZZZZ 36 예제 출력 1 복사 60466175 https://www.acmicpc.ne..

파이썬 설치 및 기본문법

https://www.python.org/ Welcome to Python.org The official home of the Python Programming Language www.python.org print('안녕') python app.py 실행 이름 = '슈퍼 에이전트 하이퍼 초필살 드래곤' print(이름[0:2]) 변수 // 결과는 슈퍼 중고차 = ['k5', 'white', 5000] print(중고차[0]) 리스트 자료형 중고차 = ['k5', 'white', 5000] 중고차[1] = 'black' print(중고차[1]) // 결과 black 중고차 = ['k5', 'white', 5000] 중고차2 = {'brand':'bmw', 'model' : '520d'} print(중고차2..

몽고디비 next js 연동

import { MongoClient } from "mongodb"; const url = "사이트에서 받은 url 입력하기"; // 여기만 수정 const options = { useNewUrlParser: true }; let connectDB; if (process.env.NODE_ENV === "development") { if (!global._mongo) { global._mongo = new MongoClient(url, options).connect(); } connectDB = global._mongo; } else { connectDB = new MongoClient(url, options).connect(); } export { connectDB }; database.js파일 및 폴더..

몽고디비 글작성 insertOne

import { connectDB } from "@/util/database"; export default async function New(req, res) { if (req.method == "POST") { console.log(req.body); if (req.body.title.trim() === "") { return res.status(500).json("너 왜 제목안씀"); } const db = (await connectDB).db("디비명"); let result = await db.collection("컬렉션명").insertOne(req.body); return res.status(200).redirect("/list"); } } db.collection('컬렉션명'). insert..