Flik LAB

이미지 파일에 대한 모든 것을 정리하며 기록해 본다. 이미지 파일이란 디지털 장치에서 사진, 그림, 그래픽을 표현하기 위해 사용되는 데이터 파일이다. 이미지 파일은 다양한 포맷으로 존재하며, 각각의 특성과 목적에 따라 사용된다. 파일 크기, 품질, 지원 기능 등이 포맷마다 다르기 때문에 목적에 맞는 포맷을 선택하는 것이 중요하다.이미지 파일의 대표적인 포맷으로는 JPEG, PNG, GIF, TIFF, WebP, BMP, HEIC, 그리고 SVG가 있다. 이들 포맷은 용도와 특성이 다 다르며, SEO나 웹 최적화, 디자인 작업, 또는 고품질 인쇄 등의 작업에서 각각의 역할을 한다.JPEG는 가장 많이 사용되는 이미지 포맷 중 하나다. 손실 압축을 통해 파일 크기를 줄이며, 사진과 같은 복잡한 이미지를 저장..

서론프론트엔드 개발을 하다 보면 서버리스 함수(Serverless Functions)를 사용하는 일이 잦다. 특히 Next.js에서는 pages/api 폴더에 함수만 작성하면 자동으로 서버리스 함수로 동작하는 것은 익숙한 사실이다. Vercel에 프로젝트를 배포할 때 Functions라는 기능으로 서비리스 함수를 구현하는 방식을 제공하는 것이 생각나서 한번 테스트 겸 작성을 해보았다.꼭 Next.js 프로젝트가 아니어도 프로젝트의 api 폴더 안에 작성된 함수 파일을 Vercel에서는 서버리스 함수로 인식하고 동작한다는 것이다. 단순한 HTML 파일만 있는 프로젝트에서도 서버리스 함수를 간단하게 구현해서 api를 만들 수 있다는 것이 가능하다. 간단한 사실이지만, 누군가에는 새로운 사실이 될 수 있을 것..

지난 포스팅에서 소개했던 파이썬으로 이미지를 생성하는 코드입니다.이 코드는 현재 디렉토리의 .txt 파일 이름을 이용해 최대 3줄로 줄바꿈한 텍스트를 포함하는 128x128 크기의 검은색 썸네일 이미지를 생성하고, 이를 thumbnails 폴더에 저장합니다. 텍스트는 흰색으로 중앙에 배치되며, 텍스트 크기는 이미지에 맞도록 조정됩니다.이미지 생성에는 PIL이라는 라이브러리를 사용합니다.코드 실행 시 폴더에 이미 해당 이름의 이미지 파일이 있다면 새로 생성하지 않고 넘어갑니다. 최종적으로, .txt 파일마다 해당 텍스트가 표시된 썸네일이 저장되는 구조로 작동합니다.import osfrom PIL import Image, ImageDraw, ImageFont# Define the path for the th..

Intro이전에 Github Actions로 여러가지 자동화를 할 수 있는 것을 이야기 했는데 구체적인 예시를 소개하고자 합니다.Text 파일 업로드를 하면 해당 텍스트 파일을 기준으로 이미지를 생성해서 업로드 하는 Workflow입니다. 이번 포스팅에서는 각 줄을 좀 더 자세히 하나하나 설명을 적어보았습니다.작동방식텍스트 파일을 깃허브 레포에 커밋하면 파이썬 코드가, 해당 텍스트파일을 가지고 이미지를 만들도록 할 것입니다.어떻게 되는지 한번 보여드리겠습니다.아래 처럼 텍스트 파일을 만들어서 Push 하면.. Github Action이 돌아갑니다. 이미지 파일이 만들어집니다.조금 긴 텍스트는 잘리네요. 하지만 파이썬 코드를 수정해야 할 것 같은데 이번에는 넘어가겠습니다.파이썬 코드이 코드는 현재 디렉토리..

Intro깃허브 액션으로 특정 작업을 등록해두면, 원하는 순간에 작업을 실행하도록 할 수 있습니다.보통은 push가 발생할때, pr이 등록될 때, tag가 올라올 때 등 이벤트를 기준으로 작업을 실행하는 것을 많이 활용하는데요.이번 포스팅에서는 특별한 이벤트가 없어도 주기적으로 작업을 실행하는 방법을 소개해보려고 합니다.이 방법으로 주기적으로 실행이 필요한 작업을 github actions를 활용해서 자동화하는데에 활용할 수 있습니다.주기적으로 업데이트 확인하기, 크롤링이나 데이터 수집, 로그 정리 등에 활용할 수 있습니다.crontab이란?crontab은 특정 시간에 특정 명령어를 실행하는 규칙을 설정합니다. crontab 을 사용하면 원하는 시간에 작업을 실행하게 할 수 있습니다.주로 시스템 관리나 ..

Streamlit이란?얼마전 AWS의 워크샵에 참여하면서 Streamlit을 처음 알게되었다. Streamlit은 Python 기반의 웹 애플리케이션 프레임워크로, 데이터를 시각화하거나, 머신러닝 모델을 공유하거나, 데이터 분석용 대시보드를 쉽게 만들 수 있게 도와주는 도구이다. 특히, Python 코드로만 웹 애플리케이션을 개발할 수 있는게 특징이다. html, javascript 를 전혀 작성하지 않아도 웹 어플리케이션이 뚝딱 만들어진다.Streamlit의 가장 큰 장점은 간결하고 직관적인 문법인데 Python으로 간단한 코드만 작성하면 대화형 웹 애플리케이션이 만들어진다. 코드를 수정할 때마다 실시간으로 애플리케이션이 업데이트되기 때문에, 개발 중간에도 결과를 바로바로 확인할 수 있다.UI 요소(버..

영상 편집을 할수 있는 방법은 여러가지가 있는데리액트 코드로 영상을 편집할 수 있는 remotion이라는 것을 알게 되어서 사용해 보았다. https://www.remotion.dev/웹서버를 실행하고 코드를 수정하면 프리뷰에 반영되어 보인다. 타임라인 등의 동작이 깔끔하게 동작한다. 하지만 개발문서를 읽어가면서 수정할 부분이 존재하고, 웹 개발에 능숙한 사람이 아니라면 다루기 쉽지는 않을 것 같다.코드로 영상을 단독으로 만드는 것은 일반적으로 활용하는 방법은 아니다 보니 활용 사례가 많이 알려져 있지는 않다. 그래서 내 나름대로 장점을 정리 할 수 있을 것 같다.1. 영상 편집 프로그램으로 만들 때는 굉장히 까다로운 스타일의 영상이 코드로는 쉽게 만들 수 있다. 인트로나 자막 특수효과 등을 삽입할 때 ..

React의 useEffect 훅은 외부 시스템과의 동기화나 Side Effect를 관리할 때 사용됩니다. 그러나 모든 상황에서 useEffect가 필요한 것은 아닙니다. 직접적인 렌더링 로직이나 이벤트 핸들러 내에서 처리할 수 있는 경우에는 useEffect를 사용하지 않음으로써 코드를 더 단순하게 만들고, 실행 속도를 빠르게 하며, 오류 가능성을 줄일 수 있습니다. 이런 경우에는useEffect 사용을 재고해야 합니다. 리액트 공식문서의 You Might Not Need an Effect를 참고로 하여 useEffect를 사용하지 않아야 하는 대표적인 패턴들을 정리해보았습니다. useEffect의 활용 사례 먼저, useEffect를 잘 사용하는 예시입니다. useEffect는 외부 데이터를 가져오..

React에서 useEffect 훅의 적절한 이해와 사용은 효과적인 컴포넌트 생명주기 관리의 핵심입니다. 이 포스팅은 useEffect의 실행 시점, 컴포넌트의 마운트, 리렌더링, 그리고 마운트 해제 과정에서 useEffect가 어떻게 작동하는지에 대한 세밀한 이해를 제공합니다. 또한, React의 렌더링과 마운트 과정에 대한 기본적인 이해도 함께 다룹니다. useEffect의 기본 useEffect는 함수형 컴포넌트에서 사이드 이펙트를 처리하기 위해 사용되는 React 훅입니다. 사이드 이펙트에는 데이터 fetching, 구독 설정 및 해제, 수동 DOM 조작 등이 포함됩니다. 이 훅은 컴포넌트 렌더링 결과가 DOM에 반영된 후에 실행되어, 컴포넌트 로직과 부수 효과 로직을 분리할 수 있게 해 줍니다...

웹팩은 현대 웹 개발에서 중요한 역할을 하는 도구입니다. 복잡한 자바스크립트 애플리케이션의 개발과 배포 과정을 효율적으로 관리해주는 모듈 번들러로, 개발자들 사이에서 필수적인 도구로 인식되고 있습니다. 이 글에서는 웹팩의 기본 개념을 설명하고, 웹팩 사용과 관련된 자주 묻는 질문들에 대해 답변하고자 합니다. 웹팩이란 무엇인가요? 웹팩은 여러 개의 파일(자바스크립트, CSS, 이미지 등)을 하나 또는 여러 개의 파일로 합쳐주는 모듈 번들러입니다. 이 과정에서 웹팩은 파일들을 최적화하고, 불필요한 부분을 제거하여 웹사이트의 성능을 향상시키는 역할을 합니다. 웹팩의 핵심 기능들 1. 모듈 번들링(Module Bundling) 개념: 웹팩은 웹 애플리케이션을 구성하는 자바스크립트, CSS, 이미지 파일 등 다양..