본문 바로가기

분류 전체보기52

프로젝트, 이제 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.
AI위클리톤(스마일게이트 주최) 후기! 1. 시작 본격적인 AI서비스 해커톤은 처음이었다.주최사가 게임사인 스마일게이트란 점에서 +1 점 단순 AI 뿐만이 아니라 AI를 활용한 '서비스'를 만든다는 점에서 +9점이였다. AI맛을 볼 수 있는 해커톤이라니! 게다가 보너스로 상금까지!게다가 처음 주최하는 해커톤이라는게 믿기지 않을정도로 일정이 무척 탄탄했다. 2. 일주일 이라는 여유로운 기간 온보딩 타임이 너무 좋았다. 해커톤에서 온보딩 시간이란, 어떻게 대회에 참여해야 하는지 의도를 알 수 있는 약간의 가이드를 주는 시간이다.무려 AI서비스 전문가에 + 유저 리서치 전문가까지? 해커톤에 진심이라는게 느껴졌다.온보딩 시간은 해커톤에서 이러한 부분에 중점을 둬서 심사한다~ 라는 걸알려주니까 열심히 들었다.  3. 지원서 기획에 진심이라는게 느껴졌던.. 2024. 8. 10.
실전으로 배우는 웹 성능 최적화 for React 강의를 듣는 이유1. Next.js로 성능 개선을 하다보니까 웬만한 건 다 Next.js가 해주는 걸 알게됐다.=> 그럼 리액트는 ?2. 리액트에서 성능개선을 하는 법을 알고싶었다.3. 네트워크 탭, 성능 탭을 잘 이용하는 법을 배우고 싶었다.  1. 프론트 성능 최적화는 두개로 나눌 수 있다.1) 로딩 성능 최적화 : 브라우저에서 리소스를 불러올 때의 성능을 최적화 한다.2) 렌더링 성능 최적화 : 화면에 요소들이 그려질 때의 성능을 최적화 한다.  2. 성능 최적화 방법들1) 로딩성능 최적화이미지 사이즈 최적화 : 이미지의 크기를 줄인다.code spilit : 해당 페이지(ex. 메인페이지)에서 당장 필요없는 코드는 나중에 불러온다.텍스트 압축 : 사용하지 않는 텍스트는 일부분만 불러온다.2) 렌더.. 2024. 7. 20.
next.js 사이트 성능개선기 (1) 요약 : 1. next.js로 만든 웹사이트의 성능을 개선하려고 했다.2. next.js는 Image 태그를 사용하면 자동으로 최적화가 되는데 나는 안됐다. 어째서?3. 나는 unoptimized 옵션으로 next.js의 최적화 기능을 사용 안하고 있었다 ^0^ 1. Next.js로 만든 웹사이트 성능최적화를 해보자 주인공은 이 웹사이트다2.결과 미리보기 처음엔 이랬다 개선 후 LCP가 확 줄어들었다 3. 개선기1. 문제파악하기 구글의 Light House는 최적화를 위한 방법들을 분석하고 제안해 준다. 그 예로 우리 사이트는 이렇다  3.6초나 차지하는 LCP 요소가 무엇일까?메인엔 이미지 밖에 없었다. 나는 이 이미지들을 로드하는데 시간이 많이 걸린다고 생각했다.  방법 1. 배너와 같은 관리자가 설.. 2024. 7. 13.
프론트엔드 성능 측정 방법 프론트 엔드, 성능측정 해야하는 이유아카마이(분산컴퓨팅 및 클라우트 컴퓨팅을 전문으로 하는 미국의기업)의 이커머스 업계 성능 현황 보고서에 따르면 지연속도가 늘어날 수록 이탈률이 급격하게 증가하고, 구매전환율 역시 감소한다고 한다.2초 지역시 62%의 이탈률 증거와 25%의 구매 전환률 감소를 하고있으며 이는 4명중 한명꼴로 꽤 큰 비율이다.성능은 서비스 이용률 및 기업의 이익에 영향을 미친다.⇒ 프론트엔드 성능 측정이 필요한 이유는 사용자 개선을 통해 사업의 이익 증대를 끌어내기 위해서이다.프론트엔드에서 측정해야 하는 성능은 무엇일까?로딩시간FCP(First Contentful Paint) : 첫 요소가 로드될 때까지 걸리는 시간FMP(First Meaningful Pain) : 사용자에게 의미 있는 .. 2024. 7. 6.
[우아한-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.
GDG 인천 Hello,World 24 참여 후기 hello, world 24란? 테크&커리어를 주제로 인천 송도 컨벤시아에서 열리는 컨퍼런스다! 다해서 25개의 세션이 있고 이중에서 듣고싶은 강의를 골라서 타임테이블을 짜서 듣는방식이라 재밌었다. 강의가 다양해서 관심사 별로 스케쥴을 짤 수 있었다! 학생들도 많았고, 현직자들도 꽤있었다. 시니어보단 주니어의 비중이 많았다. ~ 내가 짠 타임테이블 ~ 첫번째 세션 시니어가 보는 성장할 것 같은 주니어 특징 자신의 동료 개발자 분들을 통해 성장하는 주니어의 특징을 물어봤다고 하셨다. 그리고 아래는 연사가 말씀하신, 시니어 개발자가 본 성장하는 주니어 개발자의 특징에 대해 정리한 글이다. 1. 꾸준한 글쓰기 - 성장하는 주니어들의 공통점은 꾸준한 글쓰기에 있었다. 2. 피드백수용 - 모두의 피드백을 수용할 .. 2024. 4. 18.
구름톤(9oormthon) 9기 프론트엔드 참가 후기 구름톤이란? goorm과 카카오가 협력해서 주최하는 해커톤으로 카카오의 크램폴린이란 IDE를 사용해 볼 수 있고 카카오에서 제공하는 클라우드 시스템을 이용해 배포도 해볼 수 있다! 게다가 무려 제주도에서 열린다! 이걸 안해? 당장 해! 24년 목표가 해커톤이 였고 해커톤 할 기회만 호시탐탐 노리던 나는 구름톤 알람 소식에 바로 지원신청을 했다. 성수 모각공시간에 하라는 코딩은 안 하고 3시간 내내 지원서만 열심히 썼다. 하지만 솔직히 기대는 안 했다. 평소 운이 없기도 했고, 구름톤은 경쟁률이 심해서 여러 번 지원하는 분도 있다고 들었다. 합격 네 합격했습니다. 기분 최고로 좋아서 동기랑 빙글빙글 돌았습니다. 바로 5만원 예치금 입금하고 구름 위를 떠다녔던 기억이 납니다. 지원서 팁 단기간에 결과물을 내.. 2024. 3. 9.
Dev Chat" 컨퍼런스 후기 연말이 다가온 12월, 연말이였기 때문에 나는 마음이 싱숭생숭 했다. 지금까지 내가 잘 해 온걸까 하는 의문이 들었다. 반복되는 일상에 내 정신은 무척추 동물처럼 흐물흐물한 상태였다. 그러다가 기회가 생겨서 지인분과 함께 가게되었다. 티켓은 구매할 필요 없이 사전등록만 하면 갈 수 있었다. 다만 연차를 내야하는 스케쥴이였다. 사전등록 이후 아무런 피드백이 없어서 된건가? 된건가? 갈 수 있는건가? 하며 지인분과 마음 졸이다가 하루전에 안내 문자가 와서 안심했다..! (다음 컨퍼런스땐 등록했을때 등록됐다고 피드백이 오면 좋겠다!(후기 읽고 계신가요?!)) 소개 컨퍼런스는 DevRel이란 직업에 대해서 였다. DevRel이라는 직업이 어떤 방식으로 일을 하고있는지, 자신이 왜 DevRel이 되었는지 등등 ... 2023. 12. 8.