본문 바로가기

전체 글 395

[그래프큐엘] code-gen시에 the following anonymous operation is skipped 처리 Query name 일반적으로 그래프큐엘의 Query name(이하 쿼리이름)은 필수값이 아닌 선택값입니다. 따라서 쿼리이름은 단순히 쿼리를 식별하고 문서화하는데에 사용되면, 쿼리 동작에 직접적으로 영향을 미치치 않습니다. 실제로 쿼리를 확인해보면 첫번째줄에 "reservationByIdQuery"가 없어도 같은 값을 리턴해주는 것을 확인할 수 있습니다. 그래서 쿼리이름은 선택사항이며, 쿼리의 본문이 중요한 부분입니다. 하지만 쿼리이름을 사용하면 클라이언트 및 서버개발자가 코드를 읽는데 훨씬 수월하기에 대부분 쿼리이름을 사용하기를 권장하고 있습니다. graphql-codegen에서의 쿼리이름 위에서는 쿼리이름이 선택사항이라고 하였습니다. 하지만 실제로 쿼리이름이 없는 상태로 code generator를 .. 2023. 11. 5.

[역사판타지] 이성계가 한반도를 팔아치움 - 담배맛동산 작품 소개 여말선초. 모든 백성을 데리고 아메리카로 대이주? “이것은 해볼 만하다!” “불가능!” 미친 짓이라는 것을 아는 김승후는 반대를 외쳤지만, 현대인 김승후와 고려인 이성계의 사고방식은 차원이 달랐다. “가능.” 장르 : 역사판타지 진행 상황 : 총 300화 ( 본편:300, 외전:0) / 완 작가 소개 작가 : 담배맛동산 작가의 다른 작품 : 2023.01.10 - [도서 리뷰/역사] - [역사판타지] 비트타는 수양대군 - 담배맛동산 ★★★★☆ 특징 [회빙환][조선시대][이성계][유튜버][또라이주인공][유교탈레반][완] 리뷰 작가님의 이전작품 비트타는 수양대군도 참 재밌게 읽었는데. 이번 작품도 어김없이 재밌었습니다. 단군할아버지의 위치선정에 불만인 현대인 주인공이 고려말로 들어가 이성계와 함께.. 2023. 11. 4.

[개발회고] 23년 10월 회고 개발 이번 달은 빡센 개발을 한 달이었다. 그리고 그래프큐엘과 프리즈마를 통해 풀스택 개발자에 가까워지도록 노력한 달이기도 하다. 코딩시간 | 98.4시간 이번달 바빴다. 코딩시간은 100시간 아래이지만 마지막주에 해외여행가느라 화-금을 해외여행가느라 코드앞에 있지를 못했다. 이번달에는 flutter, dart가 거의 빠져버렸다. 기존에 했던 사이드플젝이 유지보수단계로 넘어갔으며, 틈틈히 센트리로그만 보고 있는데 아직까진 크리티컬한 이슈가 없는 것처럼 보인다. 2,3주차에 코딩을 많이했는데 4주 놀러가기전에 일을 마무리하고 가려고 많이 달렸다. 4일만에 출근했는데... 여행간지모르고 재택하는줄로만 알았던 동료들이 있는게 웃음포인트..ㅋㅋㅋ 새로운 기술 | graphql, prisma graphql(그래프.. 2023. 10. 31.

[개발회고] 23년 9월 회고 개발 이번 달은 무난한 개발을 하는 달이었다. 저번 달에 클린아키텍쳐와 디자인시스템으로 고민이 많았는데.. 이 고민을 토대로 나름의 구조를 가져가고 있다. 가장 신경쓰느 부분은 코어, 비즈니스, UI레이어를 최대한 분리하면서 개발하는 것이었다. 코어 기능을 만들고 여러 프로젝트에 공유하기 위해 모노레포, 서브모듈 등을 학습하고 있다. 맨 처음부터 구조를 잡고 들어가면 좋겠지만, 시간부족으로 하나의 레포에 폴더단위로 코드를 작성하고 있다. 코어영역이 잡히게 되면 특정기술을 이용해서 잘 처리해야겠다는 생각을 했다. 이때를 대비하기 위해 설정으로 alias를 잡아놓았다. 나중에는 이부분은 갈아치우면 될듯하여 마음이 편하다. 코딩시간 | 106.3시간 몇달만에 다시 월간 코딩 시간이 100시간을 넘었다.ㅋㅋㅋ .. 2023. 10. 9.

[플러터] 비디오 랜더링 이슈 수정기(video-player,dispose) 들어가며 이번 글에서는 플러터에서 20개의 비디오를 재생하면서 발생한 오류를 추적하여 개선을 한 경험에 대한 글입니다. 플러터의 video player부터 사용하는 패키지의 디테일한 설정 및 사용법을 다루진 않습니다. 대략적인 사용법과 이런 점이 문제여서 이렇게 바꿨다의 수준으로만 설명합니다. 에러부터 살펴보자 웹이나 앱 개발자들은 서버개발자와 달리 에러를 추적하기기 쉽지 않습니다. 또한 에러 발생한 것은 알아도 유저의 디바이스나 여러 외부환경에 의해서 달라질 수 있는 만큼 외부 에러추적 서비스를 이용하는 경우가 많은데요. 제가 만들어놓은 앱도 Sentry를 사용하고 있었습니다. 그런중에 어느 순간 반복적으로 특정 에러가 대한 리포트가 오기 시작하고, 실제 유저의 QA문의가 들어와서 해당 이슈를 파헤쳐보.. 2023. 9. 24.

[개발회고] 23년 8월 회고 개발 이번 달은 클린아키텍쳐와 디자인시스템에 대한 고민이 많았던 달이다. 온라인 에디터를 개발하고 있는 상황에서, 점점 복잡해지는 로직, 많이지는 요구사항 생각거리가 한두가지가 아니다. 이럴때 딴딴한 테스트코드와 더 좋은 아키텍쳐가 있으면 어땠을까라는 아쉬움이 많이 드는 달이었다. 조만간 새로운 프로젝트에 들어가는데 이때는 시작부터 빡세게 아키텍쳐를 고민하고 개발해야할듯하다. 이러한 고민을 팀장님께 말씀드렸더니, "그동안 하고 싶은 말이 많았는데, 직접 경험하기 전까지 내가 하는 소리는 잔소리라고 생각할까봐 가만히 뒀어" "개발자는 경험해봐야해, 안타깝지만 꼭 피를 봐야 다음부터 예방하는 족속이지" 이미 피를 본 이상 예방책을 빡세게 세우는 개발자가 될 수 밖에 없는듯하다. 몇달만에 가졌던 여유있는 커피.. 2023. 9. 6.

[Web worker] 웹워커 간단 사용기 들어가며 이번 글은 web worker(이하 웹 워커)에서 postMessage에 대한 에러를 확인하고 이를 수정하는 방법론? 에 대한 글입니다. 이 글에선 웹 워커의 간단한 동작,worker와의 통신, react에서 사용할 때 주의해야 할 점을 다룹니다. Web worker란 web.dev 문서를 잡고하면 웹 워커는 웹 애플리케이션에서 백그라운드 스크립트를 생성하기 위한 API입니다. 이 말보다는 저는 웹 워커는 자바스크립트에 없는 동시성을 주는 브라우저의 기능이다라고 설명합니다. 자바스크립트의 한계 웹 워커는 자바스크립트의 언어 자체가 가진 문제점으로 인해 만들어졌습니다. 자바스크립트는 단일 스레드 환경으로 여러 가지 스크립트를 동시에 실행할 수 없습니다. 그래서 비동기 코드를 작성하거나 setTim.. 2023. 9. 4.

[디자인] 사실은 이것도 디자인입니다 - 김성연(우디) 이 책의 특징 만화책 크기의 작은 책, 만화처럼 술술 읽히지만 내용은 철학책처럼 사유하게 하는 책, 철학책만큼 사유하게 하지만 또 만화책처럼 재밌는 책 이 책의 저자 작가인 김성연(우디)님은 내가 이전에 읽었던 사용자를 사로잡는 UX/UI 실전 가이드의 저자셨다. 책을 많이 안 읽는 나에게 같은 저자의 다른 책이라니.. 얼마나 좋은 인연 혹은 우연인가.. 이 책을 통해 배운 점 김춘수 시인의 시 "꽃"에는 다음과 같은 구절이 나온다. 내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에 지나지 않았다. 내가 그의 이름을 불러주었을 때, 그는 나에게로 와서 꽃이 되었다. 디자인도 비슷하다. 이것을 디자인이라고 생각하지 전까진 인식하지 못한다. 저게 디자인이라고 하니깐 이제야 이해가 되고 보이는 게 디.. 2023. 8. 18.

[Audio] 오디오를 눈으로 보는 2가지 방법(peaks와 wavesurfer) 들어가며 이번 글에서는 오디오를 그리는 방법에 대해 알아보고 간단한 구현 방법을 설명합니다. 그다음으로는 라이브러리 Wavesurfer에 대해 간단히 소개하고 알아보도록 하겠습니다. 다루는 내용은 아래와 같습니다. 오디오를 그리는 방법 Wavesurfer를 다루는 방법 v6 -> v7로 바뀌면서 달라진 점 오디오를 그리는 방법 일단 오디오를 다루는 회사에서 근무하고 있는 저에게 오디오를 그리는 기능은 필연적이었습니다. 그래서 처음에는 직접 waveform를 그렸습니다. 그리는 방법은 생각보다 간단한데요. 직접 구현하기 직접 구현하는 방법은 Canvas를 이용하는 방법입니다. ( 다른 라이브러리도 같습니다만) 데이터 가져오기 로컬에 있는 파일이던 서버에 있는 파일이던 일단 데이터를 가져오는 것부터 시작합니.. 2023. 8. 13.

[무협판타지] 일타강사 백사부 - 간짜장 작품 소개 혈교 최고의 무공교관, 시골 무관의 사부로 환생하다. 장르 : 무협판타지 진행 상황 : 총 658화 ( 본편:658, 외전:0) / 완 작가 소개 작가 : 간짜장 작가의 다른 작품 : 회귀자의 은퇴 라이프 특징 [회빙환][아카데미물][교수물][개그물][킬링타임][완] 리뷰 전생에서 혈교에서 냉혹한 강사로 살고 있던 주인공이 각성 후에는 정파의 강사가 되어가면서 성장해 가는 내용을 다룬 소설입니다.소설 전반적으로 가벼운 문체로 진행되지만 이따금 혈마와 전생 전 이야기들을 다룰 때는 진중해지는 소설입니다.그럼 리뷰 시작합니다. 완벽한 킬링타임 요새 유행하는 소재인 아카데미물 + 교수물을 무협세계관에 적용된 소설입니다.그래서 그런지 막힘없이 술술 읽어집니다.이 소설의 방향성은 크게 3가지로 나눌 수.. 2023. 8. 4.

[개발회고] 23년 7월 회고 개발 이번달은 퍼블리셔와 관련된 공부를 많이 했던 달이다. 어떤 식으로 해야 디자이너의 시안을 좀 더 정확히, 그리고 빠르게 구현할 수 있을까에 대한 고민의 발로이다. 피그마의 개발자모드를 디자이너에게 설명하기도 했고, 내가 최근에 잘 읽었던 도서를 선물하기도 했다. 그리고 나 또한 디자인관련된 책을 추천받아서 읽고 있다. 이게 개발카테고리에 있는 것이 이상해보일지 몰라도, 디자인은 프론트엔드 개발을 하다 보면 마주칠 수밖에 없는 분야이기도 하다. 특히나 스타트업일수록 개발자가 기획, 디자인을 해야할때도 종종 있어서 얼른 이쪽 분야의 익숙해졌으면 좋겠다. 이번달 개발블로그은 5개를 썼다. 다른 동료가 내 글을 어디선가 읽고 잘 읽고 있다고 말을 해줬다. 참 기분 좋은 일이다. 코딩시간 | 85.5시간 전.. 2023. 8. 1.

[개발잡담] 디아블로4와 함께 알아보는 스파게티 코드 들어가며 최근에 디아블로 4 레딧을 보다가 상당히 어이없는 글을 발견했습니다. 오픈월드 게임인 디아블로 4에서 유저끼리 만나는 순간 과부하가 걸린다는 것인데요. 이게 대체 무슨 말도 안되는 소리인가 싶으면서도 블라자드(디아블로4 개발사)의 유명한 스파게티 코드에 대해 살펴보러 가보겠습니다. 스파게티 코드란? 여기서 스파게티 코드를 설명하기엔 짧으니 위키백과 링크로 대체하겠습니다. 스파게티 코드 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 스파게티 면발 스파게티 코드(spaghetti code)는 컴퓨터 프로그램의 소스 코드가 복잡하게 얽힌 모습을 스파게티의 면발에 비유한 표현이다. 스파게티 코드는 정상 ko.wikipedia.org 디아블로 4 스파게티 코드 게임을 하다보면 게임.. 2023. 7. 27.

[유튜브] url로 영상의 정보를 가져오는 기능 만들기 들어가며 이번 글에서는 유튜브 링크를 기반으로 해당 영상의 meta 정보를 가져와 활용하는 예제를 살펴보겠습니다. 최근 업무에서 유튜브 링크로 실제 데이터를 가져오기 전에 브라우저 단에서 10분짜리 영상인지를 판별하는 로직이 필요했습니다. 서버에서 10분 이상인 영상의 경우 처리할 수 없다는 에러코드가 나옵니다. 하지만 모든 업로드 프로세스가 마무리되고 난후에 날아오는 에러코드이기에 UX적으로 불편했습니다. 그래서 이번에는 유튜브 링크로 바로 meta를 가져와 유저에게 알려주는 기능을 개발하게 되었습니다. 유튜브 링크로 바로 meta를 가져와 유저에게 알려주는 기능 본문에 들어가기 전에 완성된 기능을 보고 가겠습니다. 기능 구현 일단 해당 기능을 구현하기 전에 라이브러리가 있나 살펴보았습니다. 여러 가지.. 2023. 7. 25.

[Phoenix] Phoenix LiveView 간단 리뷰 들어가며 이번 글에서는 Phoenix LiveView(이하 라이브뷰)를 다뤄보면서 느꼈던 장단점을 리액트와 비교하면서 느낀 점을 적어보도록 하겠습니다. 리액트는 4년차, 라이브뷰는 이제 막 사용해 본 뉴비입장으로 쓴 글이니 참고 바랍니다. Phoenix LiveView란 Phoenix liveview의 공식 설명을 살펴보고 가겠습니다. Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. - https://github.com/phoenixframework/phoenix_live_view 풍부하고, 실시간의 유저 경험을 지원하는 서버에서 랜더링 된 HTML이라고 되어있습니다. 이것만 보면 그냥 html를 랜더.. 2023. 7. 23.

[프론트엔드] 더 나은 웹 개발을 위한 가이드 - 고승원 이 책의 특징 매우 간결하고 핵심만을 요약한 책입니다. 책 제목 그대로 웹 개발을 위한 가이드문서이지, 모든 것을 다룬 내용이 아니기 때문입니다. 현재 빠르게 발전하고 복잡해져 가는 프론트엔드 환경에서 필요한 기초지식을 매우 다양하고 친절한 예시를 통해 설명하고 있습니다. 이 책의 저자 고승원씨라는 이름이 너무 익숙해서 찾아보니 내가 애독하는 책 "러닝 타입스크립트"의 번역자셨다. 아무튼 책 번역 수준도 매우 좋다고 느끼면서 읽고 있는데 기대할 만한 요소가 아닐까 싶다. 이 책의 특징 이 책은 퍼블리셔를 꿈꾸는 디자이너, 또는 주니어 프론트 개발자에게 선물해 주기 딱 좋은 책이다. 책 제목 그대로 웹 개발을 위한 가이드문서이기 때문이다. 복잡하고 빠르게 발전하는 프론트엔드 생태계에 좋은 기초를 다지기에는.. 2023. 7. 19.

[대체역사] 삼국지에서 살아남기 - 다작 김절필 작품 소개 빙의했는데 서주 호족 아들이다. 아, 그런데 사흘 전에 조숭이 죽었다고? 하하하하. 일단 튀자! 장르 : 역사판타지, 삼국지 진행 상황 : 총 433화 ( 본편:433, 외전:0) / 완 작가 소개 작가 : 다작김절필 작가의 다른 작품 : 포수로 승승장구, 삼국지-정훈전 특징 [삼국지][빙의물][전쟁물][천하통일][인재수집][기술발전][완] 리뷰 요새 삼국지물 중에 추천을 많이 받아서 쌓아뒀다가 출퇴근시간에 틈틈히 읽어 완독한 소설 리뷰 시작하겠습니다.최근에 본 삼국지물중에서 하차한 것들도 많았지만 오랜만에 완독한 것이라 반갑네요.그럼 리뷰 시작하겠습니다. 현실적인 주인공 작품소개에서도 알 수 있든이 현대인이 서주 호족 서준으로 빙의합니다.그래서 그런지 후한말의 사상과 자유로운 주인공이 탄생했.. 2023. 7. 16.

[Phoenix] 피닉스 프로젝트에 tailwind 자동완성 추가하기 들어가며 최근에 시작한 사이드프로젝트에서 엘릭서 +피닉스 + 라이브뷰를 조합하여 프로젝트를 진행해보기로 했습니다. 저는 그중에 tailwind css를 이용한 퍼블리싱을 맡게 되었는데요. 이번 글에서는 vsc상에서 tailwind css의 자동완성과 하이라이팅을 위한 셋팅법을 소개해드리고자 합니다. 여기에선 익스텐션 1개와 vsc의 setting.json에 추가할 값으로 원하는 목표를 달성해보겠습니다. 코드 하이라이팅 아직 여러가지를 써본것이 아니라 어떤것을 추천하기엔 어렵지만 가장 기본적인 익스텐션은 Phoenix Framework입니다. 설명란에도 친절하게 Syntax highlighting support for Phoenix templates. 라고 되어있습니다. Phoenix Framework -.. 2023. 7. 15.

[상태관리] Zustand 조금 더 편하게 쓰기 ( snippet ) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 저번 글에 이어서 이번 글에서는 Zustand를 조금 더 편하게 사용하는 방법에 대해 알아보도록 하겠습니다. [상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교 all-dev-kang.tistory.com Snippet Extension 우리가 개발을 하다보면 많은 Extension를 만납니다. 이미 react snippet를 쓰고 있는 저에겐 snippet extension는 코파일럿보다 훨씬 중요한 도구인데요... 2023. 7. 10.

[개발회고] 23년 6월 회고 개발 이번달의 핵심 개발은 SEO와 유지보수라고 할 수 있겠다. 외주로 만들어진 홈페이지에 대한 유지보수가 시작되었다. 그리고 빠진 기능에 대한 리스트가 왔고.. 내가 이를 넘겨받아서 개발을 해야만 하는 상황이되었다. 우선적으로 수정해야할 기능은 SEO였는데, 기존에 만들어진 블로그에서 SEO를 글어와서 DB에 넣고 이를 새로운 사이트에 올리는 작업부터, 관리자가 임의로 설정한 SEO값을 적용하는 기능까지 SEO의 시작부터 끝을 달려봤다. 특히 Next.js에서 SEO를 위해 Next-seo라는 라이브러리를 사용하는데, 다이나믹한 SEO의 경우 동작하지 않아 이를 변경하는데 상당히 귀찮았다. next-seo의 경우 자바스크립트를 이용해 head의 meta를 건드리는 작업을 대신해주는 라이브러리인데, 카카.. 2023. 7. 1.

[개발회고] 23년 5월 회고 개발 이번달의 중요 개발 크게 2가지라 볼 수 있겠다. 비디오-오디오 싱크를 하는 기능 플러터로 MVVM 패턴을 활용하여 앱 런칭하기 비디오-오디오 싱크를 하는 기능 유저가 올린 비디오와 오디오를 Edit할수 있는 웹기반 온라인 툴을 만들고 있다. (AI를 곁들인) 기존에는 Cli 기반으로 동작했던 모델을 브라우저상에서 돌리면 좋겠다는 목표를 가지고 개발을 진행했고 여차저차 시연일정을 맞출 수 있었고 가장 날 괴롭힌 것은 대용량 미디어 파일에 대한 처리였는데, 에디팅툴이기에 미디어파일을 브라우저에 올리고 사용했는데 이게 1시간이상짜리 비디오 1개와 오디오 N개가 들어갈 수 있는 구조다보니 브라우저의 OOM이 떴다. 개선 방법에 대한 블로그글은 따로 작성중이지만 이 기능을 위해 기존에 사용하던 오픈소스를 .. 2023. 5. 31.

[무협판타지] 오늘도 램프를 주웠다 - 신조 작품 소개 펑! “세 개의 소원을 들어주겠다,주인님아.” 요, 요괴(妖怪)다.요괴가 나타났다. 파란색의 무시무시한 요괴가 내 방에 나타났다. “무엇이든 세 가지 소원을 들어주는 거야?” “나, 램프의 요정 지니는 위대한 몸. 어떤 소원이든 다 들어줄 수 있지!” 대박이다. “막대한 부와 무공을 배울 수 있는 신체 건강한 몸을 줘! 그리고 마지막 소원은…….” “소원은 신중하게 결정하는 게 좋아. 사람들은 늘 후회하거든.” 나는 미소 지으며 답했다. "응. 신중히 고민했어. 너를 만나기 전으로 회귀시켜 줘." 그렇게 난, 오늘도 램프를 주웠다. 장르 : 무협판타지 진행 상황 : 총 363화 ( 본편:350, 외전:13) / 완 작가 소개 작가 : 신조 작가의 다른 작품 : 무림 속 엑스트리로 빙의했다. 대.. 2023. 3. 26.

[삼국지] 삼국지 조조의 장남이 되었다 - 검은방 작품 소개 만화나 인터넷으로 삼국지를 접했던 내가 조앙이 되었다. 나는 전란의 시기에서 살아남아 천하를 제패할 수 있을 것인가. 장르 : 대체역사, 삼국지 진행 상황 : 총 325화 ( 본편:312, 외전: 13) / 완 작가 소개 작가 : 검은방 작가의 다른 작품 : - 특징 [회빙환][삼국지][조조][냉혹한 주인공][완] 리뷰 조조를 구하려다 죽은 조조의 첫째아들 조앙으로 시작하는 대체역사 소설입니다. 역사엔 만약이라는 말은 없습니다만, 책에는 만약이라는 단어만큼 매력적인 소재가 없죠. 과연 운명을 비튼 주인공 조앙은 삼국통일을 이룰수 있을까요? 냉혹한 주인공, 중후한 삼국지 대체역사소설 중에선 가벼운 주인공을 내세워 매력을 얻는 소설이 있습니다. 그런 소설도 매력적이지만 이번 소설속 주인공 조앙은 .. 2023. 2. 24.

[서평단] 러닝 타입스크립트 - 조지 골드버그, 고승원 들어가며 오랜만에 작성하는 한빛미디어 서평단 후기입니다. 다행스럽게도 2021, 2022년에도 이어 2023년에도 서평단에 선정되어 올해 열심히 읽어보겠습니다. 이번에 신청한 도서는 제가 좋아하는 "러닝" 시리즈인 "러닝 타입스크립트"입니다. 서평을 작성하는 2월 24일 기준으로 60%을 읽고 있는데, 읽으면 읽을수록 역시 러닝시리즈라는 감탄이 나오는 책입니다. 그럼 핸디의 서평 시작하겠습니다. 선택 이유 작년 중반 이직후에 여러 프로젝트에 적응하려 또 런칭, 데모하랴 코드의 퀄리티보다는 돌아가는 기능에 중점을 둔 개발을 하고 있었습니다. 올해 초가 되어 약간의 여유가 생긴때에 어떤것을 공부할까 고민하는 와중에 이 책이 눈에 들어왔습니다. 타입스크립트의 기초적인 기능만 쓰는 제게 이 책을 통해 깊게 사용.. 2023. 2. 24.

[리액트] Devtool로 확인하고 성능개선하기 들어가며 안녕하세요. 핸디입니다. 최근에 모바일 버전에 대응하여 반응형 레이아웃과 컴포넌트로 변경했습니다. 다만 데스크톱에서 원활하게 돌아가던 서비스가 구형단말기에서는 랜더링 중에 멈추는 현상이 발견되었습니다. 그래서 이번에는 간단한 성능테스트하는 방법, 리펙토링 하는 방법, 그리고 최종결과에 대해 살펴보도록 하겠습니다. 결과부터 말씀드리면 성능향상의 기준이 각자 다르지만 유휴시간 기준으로 16배, 스크립팅시간으론 4배 빨라졌어요. 성능테스트하는 방법 일단 데스크탑 기준으로 성능을 측정해 보겠습니다. 우리의 영원한 친구 크롬 개발자 도구와 리액트 개발자 도구로 측정해보겠습니다. 크롬 개발자 도구 일단 보시면 Idle 시간이 10초 중에 0.5초밖에 없습니다. 바쁘게 열일하고 있었군요.. 리액트 개발자 도.. 2023. 2. 8.

[Next.js] 분리된 음원을 다시 하나로 (Web Assembly, web worker) 들어가며 만드는 서비스 중에 AI를 통해 음원을 분리해주는 "Source Separation"이 있습니다. 음원을 분리하여 유저에게 분리된 음원소스를 다운로드하는 기능을 제공하고 있습니다. 최근 유저 피드백 중에 분리된 음원을 합쳐서 하나의 파일로 다운로드 하는 기능이 들어와 개발을 하게 되었습니다. 이번 글에서는 간단하게 라이브러리를 이용해 기능을 만들어보았습니다. 이후 속도 개선을 위해 Web Assembly 기반의 FFmepg wasm을 사용하고, UI Block를 방지하기 위해 변환 기능을 Web Worker 상에서 동작하는 방법에 대해 알아보겠습니다. 결론부터 말하자면 웹어셈블리는 매우 짱짱이었고 테스트 데이터 결과 15~30배의 성능개선이 이뤄졌습니다. 대상 독자 브라우저에서 오디오파일을 다루.. 2023. 2. 1.

[포트폴리오] AI로 만드는 연차별 포트폴리오 (ChatGPT) 들어가며 금요일 오후, 퇴근을 업무도 업무를 마무리하면서 ChatGPT를 가지고 놀고 있었습니다. 불현듯 ChatGPT가 써주는 프론트엔드 개발자의 포트폴리오는 어떨까라는 생각을 가지고 한번 물어봤습니다. 아무래도 많은 포트폴리오 데이터를 학습했으니깐 평균적인 데이터가 아닐까 생각됩니다. 그럼 한번 가보시죠. 포트폴리오 주니어 개발자 주니어 프론트엔드 개발자로 기술 스택은 typescript, react, next, aws를 넣어봤습니다. write resume that junior frontend devolper with typescript, react, next, aws 하나의 단락씩 살펴보도록 하겠습니다. ㅋㅋ Summary TypeScript, React, Next.js, AWS에 경험이 있는 .. 2023. 1. 27.

[상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교하고 zustand의 장점부터 사용법에 대해 설명하도록 하겠습니다 대상독자 간단하고 직관적인 상태관리 라이브러리에 대한 기초 지식이 필요한 개발자 zustand와 recoil 사이에서 고민하는 개발자 본문 들어가기 전에 잠깐 살펴본 npm Trend입니다. recoil의 0.7.6의 버전, 가장 많은 zustand의 star수와 압도적으로 작은 사이즈가 눈에 뜹니다. 그럼 이제 편리한 zustand의 세상으로 떠나보시죠. Zustand 독일어로 ‘상태’라는 뜻을 가진 라이브러리입니다. Jotai를 .. 2023. 1. 24.

[Next] 안정감있는 서비스를 위하여 (Sentry) 들어가며 이번 글에서는 프론트엔드 서비스 안정성을 위해 Next.js 프로젝트에 Sentry(이하 센트리)를 도입하는 과정에 대해 다루도록 하겠습니다. 이후 Sentry의 세부 기능을 이용해서 유의미한 에러 로그를 활용하는 방법에도 알아봅시다. 대상 독자는 Next 프로젝트에 Sentry를 도입하여 유저의 안정성을 향상시키고픈 개발자 Sentry 기능을 활용해 좋은 서비스를 만들고 싶은 개발자 Sentry란? Sentry는 실시간 로그 취합 및 분석 도구, 모니터링 플랫폼입니다. 이미 많은 회사에서도 도입하고 있는 검증된 툴입니다. 프론트엔드를 하다보면 가장 난감할때가 어디선가 들려오는 에러입니다. ( ex. 친구한테 링크 공유했는데 안된데요.. ) 유저들의 런타임 환경을 모르기 때문에 이슈를 재연하기가.. 2023. 1. 12.

[역사판타지] 비트타는 수양대군 - 담배맛동산 ★★★★☆ 작품 소개 수양대군으로 다시 태어났는데, 본인 현대에서도 가방끈 짧고 무능한 놈이었다. 그러니 대차게 금수저 라이프를 즐기며 왕 따위 아바마마와 형님저하께서 알아서 하시라고 놔둬야겠다. 장르 : 역사판타지 진행 상황 : 총 375화 ( 본편:375, 외전:0) / 완 작가 소개 작가 : 담배맛동산 작가의 다른 작품 : 이성계가 한반도를 팔아치움(연재중) 특징 [회빙환][수양대군][대체역사][기술강국][세종문종][영지물][완] 리뷰 대체역사물에서 자주 나오는 인물인 수양대군입니다.이번에는 수양대군으로 빙의한 현대인이 빙의과정에서 뇌에 이상이 생겨 음악적 재능이 폭발적으로 개화하면서 벌어지는 대체역사를 다룬 소설입니다.가장 업무가 빡센다고 하던 조선초 세종대왕 치세에서부터 형인 문종에 이르기까지 과연 주인공.. 2023. 1. 10.

[역사판타지] 유황숙네 천재아들 - 섬작 ★★★☆☆ 작품 소개 올림픽 양궁 3연패를 앞둔 천재 금메달리스트 김호준. 유봉이 되다! 유비의 양아들이 된 그가 난세의 한가운데에서 살아남는 방법은. “그러니까 저게 적 지휘관? 장수입니까?” “장수는 아니고 군관입니다만 저들이 지휘를…… 허억!” 활로 쏴 맞히고. “저건 적장인 거죠?” “그, 그렇습니…… 이럴 수가.” 활로 쏴 또 맞히고. “저건 적 우두머리?” “서, 설마. 세상에…….” 활로 쏴 또 또 맞히는, 백발백중 천하제일의 궁술을 유감없이 발휘하는 것! 21세기형 천재의 삼국시대 평정기! 장르 : 역사판타지 진행 상황 : 총 200화 ( 본편:200, 외전:0) / 완 작가 소개 작가 : 섬작 작가의 다른 작품 : - 특징 [회빙환][삼국지][신궁][유봉][저격 원툴][약하렘][완] 리뷰 삼국지의 .. 2022. 12. 26.

이전 1 2 3 4 5 ··· 14 다음

티스토리툴바