본문 바로가기

Web/Frontend15

[Next.js] 1시간만에 OpenAI로 영어 회화 도우미 만들기 전화영어처럼 음성으로 영어회화를 하고, 내 회화에서 고칠 점을 AI가 알려주면 좋겠다.. 라는 생각으로 뚝딱 만들어보았습니다. 별로 어렵지 않았습니다! 우선 ChatGPT를 활용해서 대화 주제를 생성합니다. 이 주제에 맞게 대화를 진행할 거예요. 프롬프트도 ChatGPT한테 써달라고 합니다. 뚝딱이죠. Next.js의 API 라우터에서 OpenAI에 요청을 보낼 겁니다. 우선 위의 프롬프트를 활용해서, AI가 내 발화의 문법 오류를 고쳐주는 라우트를 다음과 같이 만들었습니다. import { CONCEPT_PROMPT, PROMPT } from "@/app/constants/prompt"; import OpenAI from "openai"; const openai = new OpenAI({ apiKey:.. 2024. 4. 7.
[Next.js] API route와 firebase로 인증과 글 쓰기 구현하기 파이어베이스 Auth 세팅 우선 파이어베이스에서 로그인 제공업체를 선택합니다. github으로 진행해보겠습니다. github에 접속하여, Settings / Developer Settings / OAuth Apps에서 New OAuth App을 만들고 Client ID와 Client secrets를 복사해둡니다. 복사해둔 ID와 secret을 입력하고, callback URL도 복붙해 깃허브에 입력해줍니다. Next.js 설정 패키지 관리자로 firebase와 firebase-admin을 설치해줍니다. pnpm add firebase firebase-admin 다음과 같이 .env를 구성합니다. 서버 측 코드(route.ts 등)에서는 firebase-admin SDK를 이용해서 접근해야 합니다. NEX.. 2024. 1. 21.
[Web] 초보 웹 프론트엔드 개발자가 백엔드와 통신할 때 오류가 난다면? 일단 네트워크 탭을 뜯어보면 대략적인 파악이 가능합니다. 요청이 의도한 대로 보내졌는지, 맞는 메소드로 맞는 주소에 요청을 보냈는지 확인해 보면 도움이 됩니다. 코드에 오타가 없는지 확인합니다. 네트워크 탭을 까봅니다. 요청 Payload, 요청을 보낸 API 주소, 메소드와 헤더를 파악해 오류가 있다면 수정합니다. Postman에서는 잘 되는지 확인해봅니다. (Postman에서는 잘 된다면, 클라이언트 쪽 문제일 가능성이 높겠죠?) 위의 정보와 응답값을 백엔드 개발자에게 전달하고 확인을 요청합니다. 다음은 흔히 발생할 수 있는 오류들이라서 정리해봤습니다. Q. CORS 에러가 나요. A. 백엔드 개발자에게 CORS를 뚫어달라고 요청합니다. Q. Method Not Allowed 오류가 떠요. A. PO.. 2023. 11. 22.
[Next.js] AWS Polly API를 사용해 TTS 서비스 만들기 AWS API Gateway와 Lambda, Polly, S3를 활용하여 TTS API를 구현한 후, Next.js에서 사용하는 간단한 서비스를 만들어 보았습니다. 구조는 위와 같습니다. 우선 Lambda 함수를 구성해줍니다. index.mjs 파일은 다음과 같이 작성되어 있습니다. import { PollyClient, StartSpeechSynthesisTaskCommand } from "@aws-sdk/client-polly" var polly = new PollyClient({ region: "ap-northeast-2" }); export const handler = async (event, context, callback) => { let message = "지정된 문자가 없습니다."; con.. 2023. 11. 15.
[Next.js] Naver Map API 이용해서 현재 위치 지도 띄우기 [NextJS 지도 개발 #1] next/script를 이용하여 네이버 지도 API를 이용하자 글을 많이 참고하였습니다. 감사합니다. 우선 네이버 지도 API 사용 신청을 합니다. (https://www.ncloud.com/product/applicationService/maps) Application 등록을 클릭하여, 사용할 API를 추가해줍니다. 로컬호스트도 등록 가능합니다. (이후에 배포 시에는 삭제합니다.) 인증 정보를 클릭하면, 클라이언트 아이디와 시크릿이 나오는데, 이를 복사하여 .env에 넣어줍니다. NEXT_PUBLIC_MAP_CLIENT_ID= NEXT_PUBLIC_MAP_CLIENT_SECRET= 맵의 타입을 선언해줍니다. (map.d.ts) pnpm i -D @types/naverma.. 2023. 11. 15.
[리액트] 지뢰찾기 만들기 우선 맵을 만들어봅시다. const sz = 9; const [mp, setMp] = useState(Array.from({ length: sz }, () => Array.from({ length: sz }, () => 0))); const [ms, setMs] = useState(Array.from({ length: sz }, () => Array.from({ length: sz }, () => 0))); 지뢰가 있는 위치를 설정할 mp변수와 근처 지뢰의 개수를 설정할 ms변수를 만들었습니다. const setMap = () => { const initMp = Array.from(mp); initMp[0][2] = 1; initMp[2][1] = 1; initMp[2][2] = 1; initMp[1][.. 2022. 7. 31.
[Figma] 좌충우돌 Figma i18n 플러그인 제작기 회사 블로그 blog.promedius.ai/figma-i18-plugin/ 에 올린 글입니다. 아카이브용으로 가져왔어요. 개발팀 인턴의 좌충우돌 Figma i18n 플러그인 제작기 Figma를 아시나요? Figma Figma는 UI 프로토타이핑 툴인데요. 위처럼 단순히 와이어프레임을 만들 수 있을 뿐 아니라, 이렇게 요소들의 상호작용도 표현할 수 있습니다. 무엇보다 이렇게 여러 사람이 blog.promedius.ai ▲ 글 열심히 꾸며 놓았으니 요 링크에서 봐주세요. 🤗 Figma를 아시나요? Figma는 UI 프로토타이핑 툴인데요. 위처럼 단순히 와이어프레임을 만들 수 있을 뿐 아니라, 이렇게 요소들의 상호작용도 표현할 수 있습니다. 무엇보다 이렇게 여러 사람이 함께 수정도 가능합니다. 게다가 웹 기.. 2021. 5. 4.
[Next JS] Next JS 시작하기 React는 CSR(클라이언트 사이드 렌더링) 방식으로 SPA(싱글 페이지 어플리케이션)를 만들 수 있는 프레임워크입니다. (오늘부터는 존댓말을 쓰기로 했습니다.) CSR 방식인 그냥 리액트의 경우 브라우저가 서버에서 html과 정적 파일을 받아온 후 데이터를 요청해서 받아와 렌더링합니다. 초기에 정적 파일을 다 받아오기 때문에 데이터 요청이 있을 때만 서버에 요청하면 됩니다. 또, JS로 화면에 렌더링되기 때문에 JS를 크롤링 할 수 없는 검색엔진에서는 검색엔진 최적화가 어렵습니다. Next JS는 React 기반으로 만들어진 프레임워크입니다. Next JS를 이용하면 리액트에서 SSR(서버 사이드 렌더링) 방식으로 렌더링을 할 수 있습니다. SSR은 초기에 필요한 데이터를 미리 가져와 데이터가 채워진.. 2021. 2. 6.
[리액트] Scroll indicator 만들기 코드 | import React, { useState, useEffect } from "react"; import * as S from "./styles"; function ScrollTracker() { const pageHeight = document.body.scrollHeight - document.body.clientHeight; const [scrollY, setScrollY] = useState(0); useEffect(() => { const onScroll = () => { const s = window.pageYOffset; setScrollY(s); }; window.addEventListener("scroll", onScroll, true); onScroll(); return () .. 2020. 10. 31.
[리액트] 토스트 메세지 만들기 game-jam-2020.kucc.co.kr/의 참가 신청 버튼을 누르면 '신청이 마감되었습니다.' 라는 토스트 메세지가 뜨도록 만들었다. 일단 토스트 컴포넌트에서 고려해야 할 것들을 먼저 생각했다. 버튼을 누르면 보이기 일정 시간이 지나면 숨겨지기 보이고 숨겨질 때 애니메이션 넣기 토스트 컴포넌트 자체에 isActive (지금 메세지가 보이고 있는지) 라는 state를 넣으려고 했는데, 버튼으로 조작해야 하고, 이 페이지에서 토스트 메세지는 여기에서만 쓰니까 일단 페이지에 state를 만들었다. const [isActive, setIsActive] = useState(false); {setIsActive(true);}}> 참가 신청 토스트 컴포넌트에는 페이지에서 만들어준 state랑 state 세팅 함.. 2020. 10. 26.
[리액트] 이미지 업로더 - 서버에 이미지 Post로 보내기 https://r4bb1t.tistory.com/29를 이용해 클라이언트에서 서버에 이미지를 업로드하면 그 이미지를 표시해주는 업로더를 만들어보자. 클라이언트 | import React, { useState} from "react"; import * as S from "./styles"; import axios from "axios"; import AddAPhotoIcon from "@material-ui/icons/AddPhotoAlternate"; function ImageUploader() { const [imageUrl, setImageUrl] = useState("디폴트 이미지 주소"); const setFile = (e) => {}; return ( setFile(e)} /> ); } expo.. 2020. 7. 20.
[리액트] 드래그 앤 드롭, 리사이징 리스트 만들기 개요 | 드래그 앤 드롭으로 순서 변경 및 리사이징까지 가능한 리스트를 만들어보았다. 코드 예시는 맨 밑에 있다. 모듈 설치 | 우선 React DnD 모듈을 사용하기로 했다. 더보기 $yarn add react-dnd react-dnd-html5-backend immutable 드래그 앤 드롭을 원활하게 사용하기 위해 react-dnd 모듈을, Card들을 배열로 관리하기 용이하게 immutable 모듈을 설치해준다. 컴포넌트 만들기 | - Table Table이라는 전체 총괄 컴포넌트 안에 Card 컴포넌트 여러 개가 있고, 카드의 위치 변경이나 리사이즈 등 변화는 전부 Table에서 관리한다. Card에 props로 주는 정보는 카드의 id, 카드의 내용 (children), 카드의 크기(heigh.. 2020. 6. 2.

티스토리툴바