Dev 40

babel? SWC? "next/font" requires SWC although Babel is being used due to a custom babel config being present. Jest SWC로 typescript, ES6 적용

Jest 테스트코드에서 ES6 문법과 typescript를 사용하고 싶어서 babel 설정을 하고 빌드를 돌렸더니 해당 에러가 발생했다.친절하게 에러 메시지에서 next/font 가 SWC를 필요로 하고, 바벨 설정이 있어서 충돌이 났다 이런 의미인 것 같다.next/font를 사용하는 곳이 현재 layout 에서 기본 폰트인 Inter를 로드하는 곳에밖에 쓰이고 있지 않아서 이걸 제거해 빌드는 성공했다.바벨과 SWC 가 뭐가 다르고 왜 둘이 다른 걸 써서 골치 아프게 하는 건지 알아보자 ... Babel먼저 바벨은 자바스크립트 컴파일러다.Babel transpiles modern, newer versions of JavaScript such as ES6 or TypeScript into old fash..

Dev 2024.09.24

FP->LCP 시간을 줄여보자

서론ux를 위해 빈 화면이 뜨는 시간이 적고 빠른 피드백이 필요하다에는 이견이 적을 것이다.실제로 내 웹이 어떻게 전달되는지 개발자도구를 통해서 살펴봤는데, 개선점이 많아 보강도 할 겸 정리해본다. 본론현재 내 홈페이지를 개발자도구 performance 탭으로 찍어봤다.LCP가 2.85s로 조금 느린 것을 확인할 수 있다.FP는 208.8ms로 0.2088초니까...FP -> LCP 가 2.6412s 가 걸린다! 2.5초 내로 LCP가 마무리되는 것이 적절하다고 한다. https://pagespeed.web.dev/analysis/https-www-rryu09-com/u7utvt3zu5?hl=ko&form_factor=desktop PageSpeed Insights올바른 URL을 입력하세요.pagespe..

Dev/리팩토링 2024.09.13

타이포랩 리팩토링: 가이드 페이지

넥제로 약 1년 전에 급하게 만든 프로젝트를 심심해서 까봤는데 문제가 아주 많았다1년 전의 똥코드를 박제하고 리팩해보자 .. UserGuide.tsx 페이지를 살펴보면 VIEW GUIDE 버튼을 누르면 로딩 이미지가 뜨고, 로딩이 완료되면 지피티가 만들어준 설명이 렌더링된다 코드를 살펴보면 문제가 많다. 0. 구조분해할당???린트 설정이고 뭐고 냅다 tsrafce 해서 만들어진 Props 에 필요한 걸 갖다 넣어둔 모습이다.심지어 props:Props 로 받아와서 이후 모든 받아온 값에 props.element 처럼 접근해야 한다. 컨벤션의 문제이기는 하지만.. 타입 이름에 페이지명을 포함시켜줬고 구조분해할당을 시켜준 후 모든 props. 를 제거했다.스타일적인 부분들은 린트 설정 후 한번 정리하는 게 ..

Dev/리팩토링 2024.09.03

최대 증가 부분 수열

n = int(input())m = list(map(int, input().split()))dp = [0]* ndp[0]=1for i in range(1, n): li =[] for j in range(i): if m[j]0: dp[i] = max(li)+1 else: dp[i] =1print(max(dp)) 지나는 j 인덱스 중 가장 값이 큰 걸 dp[i] 에 넣고 싶어서m[j] 가 m[i]보다 작은 경우에 배열에 넣어서 반복이 끝난 뒤 max 값을 뽑고길이가 증가했으니까 1을 더했다m[j] 가 m[i]보다 작은 경우가 나올 경우 max를 구할 수 있는 배열의 요소가 없고, 길이가 1부터 시작하기 때문에 1을 넣어줬다. 하지만 배열을 써서 max 값..

Dev/Algorithm 2024.08.29

ELB 없이 SSL 인증서 적용: ipv4 과금에 따른 VPC 에서의 public ip 주소 사용하지 않도록

EC2 프리티어에 딸린 퍼블릭 ip 주소 하나는 과금되지 않는다. 원래는 ELB 에 인증서 붙여서 https 설정을 했었는데VPC 를 보니까 public ip 를 많이 쓰고있어서 과금이 많이 됐었다구성할 때에는 로드밸런서가 있어야 https 달 수 있는 줄 알고.. 그땐 검색해 봤을 때 저렇게 달면 된다고 쓰인 블로그 포스팅들이 많았다도전학기 마감한다고 배포에 신경 쏟을 시간도 없었던 터라이제 여유가 생긴 겸 한달에 만 얼마씩이나 뜯어가는 AWS를 단단히 손봐주리라 생각했다..프리티어 기간이 거의 되어 가기도 하고도메인도 한번 갈아야 하는데 프론트 도메인은 계속 사서 가는 게 좋을지 고민이긴 하다더 업글해서 GA 달고 유입을 늘려보는 게 더 좋을 것 같기는 한데 시간을 좀 들여야 할 것 같다아무튼 이번 ..

Dev/Cloud 2024.08.27

Next.js 라우팅

잘 되어있는 React를 사용하고 있는데, 왜 Next.js가 필요할까요??오늘 다루어 볼 주제는 Next.js의 라우팅인데, 먼저 Next.js가 무엇인지 알아봅시다.Next.js 란?Next.js는 Vercel에서 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 기능들을 제공합니다. 리액트는 클라이언트 사이드에서만 작동하기 때문에, 첫 화면을 제대로 표시하기 위해 실행 초기에 성능 부담이 생기기도 하고 SEO 효과를 거의 볼 수 없었습니다.이 문제를 해결하기 위해 웹 어플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작했고,서버 사이드 렌더링을 통해 리액트 앱을 HTML 페이지로 미리 렌더..

Dev/React 2024.05.08

React Google translate + tts API 로 텍스트 번역, 읽기

졸업 프로젝트로 부분해설을 지원해주는 도슨트 어플리케이션을 제작하고 있습니다. 도슨트 어플리케이션이라고 하면.. 해설 정보를 번역하고 오디오 해설을 들을 수 있도록 해주어야겠지요. 웹앱으로 제작하고 있으니 react와 google cloud API를 이용해 구현하는 방법을 알아볼까요? 목차 이번 글은 다음과 같은 순서로 이루어져 있어요. 구현해야 할 사항 파악하기 서버에서 해설 데이터 받아오기, react-query를 이용해 받아온 데이터 캐싱 translate API를 이용해 캐싱한 해설 번역해 표시 text-to-speech API를 이용해 해설 음성 데이터로 받아오기 Audio 컴포넌트 제작, 일시정지/배속 등 기능 구현 결과 확인! 👍 전체적인 흐름을 그림으로 표시하면 다음처럼 될 거예요. 1. ..

Dev/졸프 2023.11.14

Custom object detection(YOLOv5)

Index Roboflow를 이용한 yolov5 custom training tflite로 변환 리얼타임 카메라로 그림의 중요한!부분을 감지한 뒤 부분별 해설을 제공하는 모바일 어플을 제작하고자 합니다. 관람객이 그림을 카메라로 비추면, 그 그림 안의 부분들을 object detection으로 찾으려고 합니다. 우선 custom training을 위해 colab으로 yolov5 학습을 시키는 과정입니다. 결과물은 pt 파일로 나오는데, 이걸 tflite로 변환시켜 flutter에서 플러그인을 이용해 리얼타임 카메라와 연결할 예정입니다. Custom Object Detection 다양한 곳에서 많고 훌륭한 데이터셋을 제공하고 있지만... 미술작품을 부분별로 감지하려면 그리고 원하는 부분에 대한 설명을 하려..

Dev/졸프 2023.05.26

RN Platform adapter testing

YOLO (You Only Look Once) is a popular real-time object detection algorithm that can be used to detect objects in images and video. 모바일 환경에 custom object detection model 적용하기 object detection 모델 트레이닝 TensorFlow / PyTorch 이용 mobile-friendly format으로 모델 변환 TensorFlow Lite / Core ML 등 사용 앱에 적용 테스팅 최적화 size reducing / speed improvement Cross-platform development framework에 ML model 적용 데스크탑이나 서버 환경에 ..

Dev/졸프 2023.05.07