LuiGee's Mansion LuiGee's Mansion

최근에 LLM을 이용한 서비스를 개발하고 있는데 스트리밍 응답으로 오는 텍스트가 너무 뚝뚝 끊겨보여서 방법을 찾다가 좋은 커스텀 훅과 이 훅을 작성한 Sam Selikoff가 설명해주는 유튜브 영상을 찾을 수 있었습니다. 이해하기 쉬우면서도 정리해보면 좋은 내용이 많아서 공유해보려고 합니다. 코드와 원본 영상 링크를 먼저 보여드리면서 시작하겠습니다. 직접 만들어보기먼저 간단하게 시작해봅시다. 텍스트를 애니메이션으로 보여주려면 전체 텍스트를 처음부터 다 보여주는게 아니라 하나씩보여줘야하기 때문에 일단 텍스트를 잘라서 보여주는 것을 생각해봅시다.function useAnimatedText(text: string) { return text.slice(0, 1);}저 1이 점점 늘어난다면 텍스트가 늘어나는..

https://developer.comento.kr/post/code-review-culture-24-10-15 리뷰는 버릇이다: 코드 리뷰 문화 되살리기우리 코드 리뷰, 잘 되고 있을까? 코드 리뷰를 하기 싫어서 하지 않는 개발팀이 있을까요? 수많은 개발팀이 채용 공고에서 우리는 코드 리뷰 문화가 있다고 내세웁니다. 그렇지만 하루하루 빠르developer.comento.kr 회사 블로그에는 나름대로 열심히 글을 썼는데 개인 블로그는 사실상 방치 상태였습니다. 마침 티스토리의 챌린지도 있을 때 회사 블로그 글 링크를 걸면서 조금이나마 부활시켜보려고 합니다. 그냥 글 링크만 걸고 끝내기는 그렇고, 일종의 블로그 비하인드처럼 간단히 첨언을 해보려고 합니다. 글 내용처럼 코드 리뷰를 제대로 했으면 좋겠다 마음..

이직 이야기를 했던 글에서 면접을 대비해서 답변을 짧게 준비했다는 내용이 있었는데 오랜만에 메모장을 보니 그 내용이 남아있어서 공유해볼까 한다. 당시에는 꽤나 여기저기 참고해서 적었던 내용이라 참고한 문서가 기억나거나 괜찮은 문서가 있다면 같이 링크를 걸어보려고 한다. 하지만 만약에 참고하시는 분이 있다면 어디까지나 참고만 하시고 내용을 파악하고 면접을 갔으면 하는 마음이다. 클로저: 외부 변수를 기억하고 참조할 수 있는 함수 자바스크립트 클로저: 함수가 생성된 렉시컬 환경을 기억한다. 렉시컬 환경은 지역 변수를 저장하고 있는 객체다. 클로저 사용 예시: 데이터 접근을 제어할 때(private), 상태를 가진 함수를 만들고 싶을 때(값이 변경되고 그에 따라 리턴이 변경), 전역 변수 생성 억제(초반 페이..

프로그래밍을 배워보거나 나중에 라이브러리 등을 배워본 사람은 'Hello world'라는 문장을 수도 없이 봤을 것이다. 나도 아직 버릇이 되어 뭔가 처음 해보거나 일단 작동은 하는지 간단하게 테스트할 때는 저 문장을 출력해보는 것으로 시작한다. 심지어 이것을 언어별로 어떻게 출력하는지 모아놓은 웹 사이트도 존재한다. 최근에는 저 World라는 단어는 배우는 라이브러리나 기술로 대체되거나 강의 제목으로 대체되는 경우도 많다. 'Hello React'같은 식으로. The Hello World Collection The Hello World Collection "Hello World" is the first program one usually writes when learning a new programmi..

첫 회사에서 첫 외부 프로젝트를 마무리하는 동시에 이직을 하게 되었다. 예전에 수없이 본 제목과 똑같이 글을 적게 된다는 것이 참 기분이 묘하다. 이번에도 많은 분들이 정리해주신 자료에 도움을 많이 받았기 때문에 나도 하나라도 도움이 되었으면 하는 마음으로 정리해보려고 한다. 0. 이직 결과 개별 지원까지 약 25개 기업에 지원했고 먼저 제안 준 곳까지 합쳐서 6곳에서 서류 합격이 되었다. 그 중 4곳은 과제 전형을 진행했고 2곳은 바로 면접을 진행했다. 과제 전형은 4곳 모두 통과했고 최종 면접까지 통과한 곳은 2곳, 그 중 1곳을 선택하여 최종 이직 결정을 했다. 1. 기본에 충실함과 모른다의 차이 나는 회사에서 React나 Vue 등 프론트엔드 라이브러리, 프레임워크를 다룰 기회가 없었고 그나마 혼..

동네 오락실에 태고의 달인이 거의 10년 만에 다시 들어왔다. 그것도 최신 버전으로. 그 동안은 어쩌다 간 곳 근처의 오락실에 태고가 있으면 해보는게 전부였는데 모처럼 동네에 왔으니 제대로 해보려고 카드도 구입하고 서열표도 참고하면서 하려고 이미지로 저장을 미리 해뒀는데... 생각보다 잘 안보였다. 보려면 못볼 건 없는데 가뜩이나 제목 표시도 다르니 보면서 곡을 찾다보면 100초가 금방 다 가버렸다. 그래서 마침 프론트엔드 사이드 프로젝트를 하나 했으면 하는 참에 잘됐다 싶어서 이 서열표를 웹 페이지로 구현하기로 결정. 현재는 일단 데이터가 전부 들어가진 않았지만 페이지는 구현한 상황이다. 태고의 달인 난이도 서열표 (focused-bartik-b7a742.netlify.app) 이번엔 절대로 실수를 반..

지난 글 마지막에 필요함을 느낀 확인용 서버를 별도로 만들기로 했다. 매번 라즈베리 파이에 SSH로 붙어서 확인하는 건 너무 귀찮은 일이 될 것 같았고 CSS로 꾸미는 것도 없이 단순히 HTML과 서버 REST API가 통신하는 정도로만 만들기로 했다. 서버에 포함될 기능은 다음과 같다. 1. 타임랩스 촬영 프로그램 동작 여부 2. 타임랩스 촬영 프로그램 로그 확인 3. 촬영 영상을 브라우저에서 재생 4. 촬영 영상을 브라우저에서 다운로드 1. 프로그램 동작 여부 router.get('/status', function (req, res) { let status; try { cp.execSync('ps -e -o command | grep "^node sunlapse.js"'); status = 200; ..

https://youtu.be/fDGwROPqNtA 샘플 영상 제대로 촬영하는 결과를 얻는데 꽤나 오래 걸렸다. 일단 하루를 보내야 테스트 결과가 확인 가능한 이유도 있었고 내가 처음에 생각했던 부분이 원활히 되지 않았던 점도 있었다. 그래도 여러 시도 끝에 꽤나 만족할 만한 결과를 얻을 수 있었는데 위의 영상이 촬영 후 영상 제작에 성공한 결과다. 깃허브의 커밋 기록을 보면서 어떤 시도를 했는지 확인해본다. 1. FFmpeg의 setpts 옵션 사용 처음에 이 프로젝트를 떠올린 계기는 바로 이 옵션이었다. 간단하게 이야기하면 영상의 속도를 조절할 수 있는 옵션이다. 그래서 처음 생각은 영상을 해가 뜬 시간 동안 촬영하고 이 영상을 이후에 이 옵션을 이용해 후처리하려고 했다. 그러나 굉장히 당연한 문제가..