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, 이미지 파일 등 다양..
항해 플러스에서 주최하는 토이프로젝트 대회인 제 2회 코육대에 참여한 후기입니다. 원래 생각했던 것 눈치우기는 여러 스테이지로 이루어져있다. 눈은 계속 제조된다. 산타 할아버지가 제빙기(?)에서 눈을 제조한다. 여기서 generative하게 눈이 생성된다. 눈 제조가 완료되면 눈이 귀퉁이로 내려온다. 눈은 마우스로 치울 수 있다. 밀면 밀리기도 하는데, 최종적으로 쓰레받기 모양의 통안에 눈이 갇혀야 치운것으로 인정된다. 눈을 얼마나 치웠나 포인트로 쌓인다. 3d로 구현하고 싶지만... 이번 기간 내에는 어려울 것 같다. 실제 만든 것 기획시에 생각했던 많은 부분이 생략되고 화면을 가득 채우는 눈 파티클을 구현하는 것으로 마무리되었습니다. 눈은 화면위를 채우고 눈을 닦아야 하는데 잘 상상이 안되어서 어려웠..
항해 플러스에서 주최하는 토이프로젝트 대회인 제 2회 코육대에 참여한 후기입니다. 여러가지 주제를 조금씩 개발하다가 결국 마지막 마무리는 타로 컨셉의 신년 카드 개발을 하게 되었습니다. 여러 우여 곡절이 있었는데 프로젝트 소개를 중심으로 이번 회고를을 구성하려고 합니다.간단 소개새해 인사 대신 상대방에게 운세를 봐주는 컨셉으로 타로카드를 열면 상대방의 운세가 나오는 컨셉입니다. 보낸 사람이 상대방의 관심사를 미리 적어 보내기 때문에 관련있는 메시지가 등장합니다. 메시지와 카드는 입력한 정보에 따라 AI가 맞춤으로 제작합니다. 시연하기기획 의도그냥 신년 인사는 열어보는 없을 것 같아서 어떻게 하면 더 궁금하고 흥미로운 것을 만들까 하다가 운세+개인 맞춤형 문구를 조합하면 좋겠다는 생각이 들었습니다. 그렇게..
아직 기본적인 기능 위주로 제작된 상태입니다. 만들면서 추가로 업데이트될 수 있습니다. 항해플러스에서 주최하는 코육대의 과제 중 "개발자의 편지"를 수행하기로 하고 빠르게 작업을 해보았습니다. 여러 주제 중 스캔을 하는 과정에서 빠르게 기본 작업만을 마치고 나서 작업을 공유해봅니다. Repository 바로 가기 / 게임 시연하기 GitHub - fliklab/p5-jumping-game: A Jumping Game made with p5.js A Jumping Game made with p5.js. Contribute to fliklab/p5-jumping-game development by creating an account on GitHub. github.com 코육대 대회 관련 정보는 여기를 참고..
항해플러스에서 주최했던 1회 코육대가 인기가 많아서 이번 크리스마스 시즌에 다시 2회 코육대를 한다고 합니다. 저는 1회 때에는 다른 일로 바빠서 참가를 못했는데 이번에 코육대 참가를 해볼 겸 궁금하신 분들을 위해 참가하기 전 저의 전략을 공유하면서 관련 정보를 소개 드리려고 합니다. 코육대가 돌아왔다... 코육대는 코딩 육상대회의 줄임말로 이번 크리스마스를 포함하는 도전기간동안 주어진 주제로 토이프로젝트를 완성하는 프로젝트입니다. 최우수프로젝트에게는 엄청난 선물을 준다고 하며, 참가만 해도 항해플러스 수강 할인권을 준다고 합니다. 저는 연휴 때에 특별히 일정이 없으면 스스로 프로젝트 거리를 찾아서 하곤 했는데 저와 비슷한 생각을 가진 사람들이 많나봅니다. 코육대가 있으니 크리스마스를 알차게 보낼 수 있..
정적(Static) 웹사이트라 함은... 정적으로 로딩되는 사이트이다. 다르게 말하면 페이지를 로딩하는데 html파일을 불러오는 것 외에 서버와의 통신은 하지 않는다는 것이다. 대부분의 Github 기반의 블로그가 이런 방식으로 만들어져있다. (Github page 혹은 Netlify, Vercel을 통해 배포하는 사이트들이 보통 이런 케이스이다) 이런 방식의 사이트는 정보를 일방적으로 게시하는 페이지는 만들 수 있지만 게시판이나 방명록처럼 사용자가 직접 글을 올리는 페이지를 만들기는 쉽지 않다. (다만 꼼수를 쓰면 가능은 할지도 모른다.) Git based CMS는 여러 꼼수(?) 중 하나로, 이 방식을 통해 사이트 내에서 에디터를 통해 글쓰기가 가능하다. 대부분의 사람들은 사이트 관리를 기성블로그(네..
ChatGPT를 리눅스처럼 만드는 방법이 있다고 해서 직접 해봤는데 놀라운 것 같습니다. 방법은 아래 텍스트를 복사하면 됩니다. 출처: https://techbukket.com/blog/chatgpt-linux-terminal 앞으로 프롬프트 엔지니어라는 직업군이 생긴다고 할정도로 프롬프트를 어떻게 쓰느냐에 따라 AI가 해주는 일이 차이가 나네요. 과연 AI를 잘 활용하는것도 결국 인간의 판단력과 창의성이 필요 한 것 같습니다 프롬프트: i want you to act as a linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only reply with the te..
유튜브에서 특정 채널의 shorts영상만 일괄로 다운받고 싶을 때가 있다. 아래의 코드로 받을 수 있다. 코드를 응용하면 다른 조건의 영상들도 한번에 받을 수 있다. import os import google.auth from googleapiclient.discovery import build from pytube import YouTube def download_shorts(channel_id): # Authenticate with YouTube Data API credentials, project = google.auth.default() youtube = build('youtube', 'v3', credentials=credentials) # Retrieve channel's uploads pla..