본문 바로가기

Develog26

프로젝트, 이제 AI를 곁들인... 진행기 (1) 의도현재 기획하는 프로젝트에서 핵심 기능은 ‘친근한 한국어 챗봇 ’ 이다먼저 프로젝트를 진행하기 전 기획하는 기술이 구현 가능한지에 대한 구상, 투자비용 예상, 기능개발을 위한 최적의 솔루션을 조사해 보기로했다.가설 검증서비스 운영 비용이 많이 드는가?모델을 직접 배포그래픽 카드 이용API 이용한국어가 자연스러운가?라포가 형성될 만큼 자연스러운지유저 타겟층 조사 (예정)유사 서비스 조사 AI의 성능이 우리 서비스에서 가장 중요한 부분이었다.하지만 AI는 비용이 가장 큰 걸림돌이라서 이 부분을 가장 먼저 조사하기로 했다.  1. 서비스 운영 비용이 많이 드는가?팀의 요구사항한 달에 5만원 내외였으면 좋겠다.방법 1 모델 직접 배포모델 선택파인튜닝 (모델을 원하는 용도로 학습시키는 것)은 리소스가 부족하기에.. 2024. 9. 7.
[리액트 성능최적화] useCallback 과 useMemo의 차이와 React.memo 1. React 성능최적화에 사용되는 useCallback() 과 useMemo(), React.memo의 차이는 무엇일까?useMemo()는 특정 계산의 결과를 메모이제이션 하며 의존성 배열이 변경되지 않는 한 동일한 결과를 반환하는 리액트 훅이다. 비용이 많이 드는 계산을 반복하지 않도록 방지하여 성능최적화에 쓰인다. useCallback()은 '함수'의 메모이제이션에 사용된다. 컴포넌트가 리렌더링 될 때마다 동일한 함수가 재생성되는 것을 방지하며, 불필요한 리렌더링이나 성능 저하를 방지한다. React.memo()는 자식컴포넌트가 부모컴포넌트에게서 전달받는 props가 변하지 않으면 자식컴포넌트가 리렌더링 되지 않게 해준다. 부모컴포넌트가 자식컴포넌트에 함수를 props로 전달해준다면 useCall.. 2024. 8. 17.
실전으로 배우는 웹 성능 최적화 for React 강의를 듣는 이유1. Next.js로 성능 개선을 하다보니까 웬만한 건 다 Next.js가 해주는 걸 알게됐다.=> 그럼 리액트는 ?2. 리액트에서 성능개선을 하는 법을 알고싶었다.3. 네트워크 탭, 성능 탭을 잘 이용하는 법을 배우고 싶었다.  1. 프론트 성능 최적화는 두개로 나눌 수 있다.1) 로딩 성능 최적화 : 브라우저에서 리소스를 불러올 때의 성능을 최적화 한다.2) 렌더링 성능 최적화 : 화면에 요소들이 그려질 때의 성능을 최적화 한다.  2. 성능 최적화 방법들1) 로딩성능 최적화이미지 사이즈 최적화 : 이미지의 크기를 줄인다.code spilit : 해당 페이지(ex. 메인페이지)에서 당장 필요없는 코드는 나중에 불러온다.텍스트 압축 : 사용하지 않는 텍스트는 일부분만 불러온다.2) 렌더.. 2024. 7. 20.
[우아한-Tech 스터디] Framer-motion을 이용한 애니메이션으로 화려한 웹 페이지 만들기 - 2주차 - 개요Framer-mortion 으로 페이지 전환시의 효과를 구현한다.사용 개념motion.div의 initial ,animate, exit 를 이용했다. + react-router-dom-v6 도 준비물 motion.div, AnimatePresense, react-router-dom-v6, useLocation STEP 1경로에 맞는 페이지 만들기import { AnimatePresence, motion } from "framer-motion";import { useLocation } from "react-router-dom";const About = () => {    const location = useLocation();    return (        AnimatePresence mode="w.. 2024. 6. 20.
[TIL] 2023-09-08 TIL 1. 9월 계획을 세웠다. 사소한 습관과 사고방식부터 바꿔보려 한다. 간단히하자면 귀찮아, 라는 생각와 미루자, 라는 생각을 내 사전에서 없애기로했다. 2. next.js 강의듣기 로그인을 구현하는 방법에 대해 배웠는데 굉장히 쉬웠다. NEXT.js 에서 제공하는 next-auth라는걸 활용하니까 OAuth나 로그인 기능 구현하는게 정말 쉬웠다. jwt,session,OAuth의 개념에 대해 배웠다. 주말에 정리해야 겠다. 회고 어제 가족들과 함께 시간을 보내느라 TIL을 못썻다. 앞으로는 조금도 철저하게 신경쓰자 NIL (Next I learn) 1. 인강 (NEXT.JS) 2. 체크래커 만들기 3. 모든관계는 심리학으로 풀린다 책리뷰 하기 4. 독서-클루지 2023. 9. 9.
[TIL] 2023-09-06 TIL 1. 아침독서 (클루지) 역행자에서 추천한 클루지를 읽고있다. 인간이 유전자의 영향을 많이 받고있으며 불안전한 진화를 해왔다고 주장한다. 인간의 뇌는 세련되게 발전하지 않았다. 수많은 요소에 오염되며 그로 인해 현명하지 못한 선택을 하게된다. 한 예로 인간은 가치보다 비용에 예민하다. 당신은 100달러짜리 미국 여행과 50달러짜리 프랑스여행을 예약했다. 그러나 여행의 시간을 겹치게 예약하는 실수를 범하고 말았다. 이때 당신은 50달러짜리 프랑스 여행이 더 재밌고 즐거울게 확실할텐데도 100달러짜리 미국여행을 선택하게 된다. 즉 가치보다는 손해보는 비용을 택한것이다. 두번째 예로 어떤 금은방의 안팔리는 50달러짜리 목걸이가 있다. 주인은 자신이 휴가갔다올동안 해당 목걸이를 반값에 판매하라고 했다 하.. 2023. 9. 7.
[TIL] 2023-09-05 TIL 1. 아침독서 (클루지) 우리는 맥락기억에 많은 영향을 받는데, 예를 들어 같은 사물을 접했다고 하더라도 열정적인, 즐거운, 귀여운, 긍정적인 이런 단어들을 읽고 봤을때는 긍정적인 느낌을 , 무기력한, 우울한, 부정적인, 험상궃은 단어들을 읽고 사물을 접한다면 부정적인 느낌을 받는것처럼 우리의 기억체계는 객관적인 시각이 아닌 맥락에 따라 왜곡을 일으키기도 한다. 맥락기억의 또 다른 예시로는 쥐들이 미로 달리기를 훈련시키는 연구가 있었는데, 쥐들이 미로자체와는 아무 상관없는 요인들에 매우 민감하다는 사실을 발견했다. 예컨대, 전등이 켜진 방에서 훈련을 받은 쥐는 자연광보다는 전등이 켜진 방에서 검사를 받았을 때, 미로를 더 잘 찾았다. 조명과 미로달리기 과제는 특별한 관계가 없었는데도 쥐가 검사 받.. 2023. 9. 6.
[TIL] 2023-09-04 TIL 1. 아침독서 (클루지) 역행자에서 추천한 클루지를 읽고있다. 인간이 유전자의 영향을 많이 받고있으며 불안전한 진화를 해왔다고 주장한다. 저자는 인간의 마음이 세련되게 설계된 기관이라기보다 클루지(kluge), 곧 서툴게 짜 맞춰진 기구라고 주장한다. 생존 때문에 최선의 선택을 방해받는 진화의 법칙, 즉 진화의 관성 때문에 우리들의 마음과 세계는 불완전하다는 것이다. 저자는 이 책에서 기억, 신념, 선택, 결정, 언어, 행복 등 인간의 삶을 구성하는 중요한 정신 영역을 두루 살피며, 우리들의 세계 곳곳에서 현명한 일상을 방해하는 생각의 함정을 파헤친다. 좀 더 괜찮은 의사결정을 하는 법을 배우고 싶어서 읽고있는데 꽤 괜찮은 것 같다. 사람이 쉽게 빠질 수 있는 심리학적 오류를 알려주고 더 나은 의.. 2023. 9. 5.
[리팩터링]Object.keys() 타입 지정해서 사용하기 type CoffeePrice = { [K in CoffeeName]: number; }; type CoffeeName = "americano" | "latte" | "ade"; const obj: CoffeePrice = { // ~~~ error Property 'ade' is missing in type '{ americano: number; latte: number; }' but required in type 'CoffeePrice'.ts(2741 americano: 10, latte: 10, }; ade 가 없어서 완전히 일치하지 않기 때문에 오류가 나온다. 해결법 ? 연산자를 넣어주거나 부분만 포함하겠다는 partial 키워드를 넣어주면 된다. 위의 기초 연습을 토대로 내 코드를 리팩터링 하기.. 2023. 7. 23.
Drag AND Drop (react.js)구현하기 - 1 drag : 드래그 하고있는 상태의 아이템 dragend : 드래그 동작이 끝났을 때 dragenter : 드롭할수있는 target에 드래그 아이템이 들어왔을 때. dragleave: 드래그 아이템이 드롭타겟을 떠났을 때 dragover : 드래그 아이템이 드롭 타겟에 놓여졌을 때 dragstarg : 드래그 동작이 시작 됐을 때 drop : 아이템이 드롭 타겟에 놓였을 때 const onDragStart=(e)=>{ setX(e.clientX) //시작 위치를 저장 setY(e.clientY) e.dataTransfer.setData("data",e.target.id) e.dataTransfer.dropEffect="copy"; } const onDragOver = (e)=>{ //drop 이벤트가 발.. 2023. 7. 9.

티스토리툴바