Develog32 [기술부채 해결하기] SSE(Server-Sent-Event)와 WebSocket 주제선정이유 사이드 프로젝트 CHIT을 개발하고 있습니다. CHIT의 주요 핵심기능은 순번대기 기능인데요. 다들 티켓팅 해보셨나요? 티켓팅 화면에서 서버대기 화면 한번쯤 다들 보신적 있을텐데, 그거랑 비슷한 기능이라고 보시면 됩니다! 이 기능을 구현하기 위해 SSE(Server-Side-Events) 를 사용하고 있습니다. 간단히 말하자면 SSE는 서버로부터만 이벤트를 받는 단방향 통신입니다. 채팅과 달리 서버로부터 일방적으로 메시지를 받기만 합니다. 사용하는 기술인 SSE를 제대로 알고싶었고 겸사겸사 WebSocket에 대해서도 알아보려합니다. (부채질중) 1.✅ 개념알아보기SSE(Server-side-events) 란 무엇인가 보통 웹브라우저에선 웹이 request를 보내면 서버가 respons.. 2025. 2. 16. 코테플랫폼 코드트리 찍먹 솔직후기 1. 발단- 코드트리 한 달 무료체험권을 얻었다. 2. 현재 나의 수준은?- 나는 코테가 필요할 때 마다 여기저기서 코테 문제를 풀었다.프로그래머스, 백준, 리트코드 경험이 있으며 각각의 사이트의 대한 장단점은 다음과 같다. 프로그래머스- 기업연계, 이 플랫폼으로 기업 코테를 본 적있음, 많이 안 풀어봄- 장점 : 다양한 문제, 실제 코테에서 이 IDE를 사용한 경우가 있어서 실제 코테 대비하기 좋음, 프로그래머스 사용하는 코테일땐 이 플랫폼으로 대비를 했다. 카카오 기출이나 여러 기출을 제공- 단점 : 문제 유형별이 아닌 난이도 별로 되어있음, 그래서 조금 불편했던 것 같다. 백준- 가장 많이 풀었던 플랫폼- 장점 : 다양한 문제, solve.ac를 이용한 랭크시스템 (재밌음), - 단점 : 개념보다.. 2025. 2. 2. [꼬랑지랑] next.js 사이트 개선기 (2) 이커머스 상세페이지 더보기 구현 안녕하세요 주니어 프론트엔드 개발자입니다!이번엔 사이드 프로젝트로 만들었던 꼬랑지랑(이커머스 사이트)의 상세페이지 더보기 기능을 구현하겠습니다.- 상세페이지 탭 고정, 미리보기 이미지의 화면 상단에 보이게 하기 등 꼬랑지랑에 적용하기상품정보 더보기 기능상품상세 메뉴바가 위에 고정되는 기능BeforeAFTER 문제정의문제 : 미리보기 페이지가 이미지의 중간부터 보여줌=> 미리보기 부분이 이미지의 가장 윗부분 으로 바꾸기문제 : 화면을 펼쳤을 당시 아랫부분에 렌더링되야하는 상품후기 탭 레이아웃이 깨진다=> 이미지 더보기를 클릭해도 레이아웃이 깨지지 않고 그 하단에 탭이 생성되게 하기기존코드 상품설명 .. 2024. 10. 26. UnionFind(합집합 찾기) 알고리즘 class UnionFind{ constructor(size){ this.parent = Array.from({length:size}, (_, i)=>i) } find(x){ if(this.parent[x] === x){ return x; } return (this.parent[x] = this.find(this.parent[x])); //부모의 값을 넣음으로써 경로 단축 } union(x, y){ const rootX = this.find(x); const rootY = this.find(y); if (rootX !== rootY){ this.parent[rootX] = rootY; .. 2024. 10. 12. 프로젝트, 이제 AI를 곁들인... 진행기 (2) 설문조사 발단 : 나름 해커톤에서 기획을 배웠습니다AI위클리톤에서 배운 기획의 기본을 써먹기로 했다. 바로 문제정의와, 가설세우기, 그리고 설문조사(가설검증)!내가 실제로 생각한 유저의 니즈와 실제 유저의 니즈는 다를 수 있기 때문에 리서치 과정이 꼭 있어야한다고 하셨다.(강의내용)실제로 해커톤을 진행했을 때에도 우리는 이러한 기능이 필요할거야~ 하고 기획했는데인터뷰 결과 응 안필요해요, 나와도 안쓸것같아요~이런 적이 훨씬 많았다. 유저와 배포, 유지보수까지 목표였던 우리는 철저하게 기획하기로 했다.그렇게 이번에 할 일 관리 앱에 우리의 가설을 검증하기 위해 타겟층을 설정하고 설문을 진행했다. 1. 우리는 가설을 세웠다 누가 : 기존의 투두리스트를 사용하던 유저들이언제 : 혼자 투두 리스트를 만들고 지켜야 할 때.. 2024. 9. 28. 프로젝트, 이제 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. [꼬랑지랑] 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. [우아한-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. 이전 1 2 3 4 다음
