728x90
반응형

전체 글 107

[React] useState 제대로 이해하기 | state | 리렌더링 | setState | 함수형 업데이트 | 객체 | 배열 상태

React 프로젝트를 처음 만들면서 제일 먼저 만나게 되는 Hook, useState!포트폴리오 히어로에서는 로딩 바를 그릴 때 useState를 썼다.useState를 처음부터 끝까지 정리해보려고 한다.state가 왜 필요할까?먼저 일반 변수로 숫자를 올려보면 이렇게 된다.function Counter() { let count = 0; return ( { count = count + 1; }}> {count} );}버튼을 눌러도 화면의 숫자는 계속 0이다. 이유는 두 가지다.1. 값을 바꿔도 React는 화면을 다시 그려야 한다는 걸 모른다.2. 설령 다시 그려진다고 해도, 컴포넌트 함수가 다시 실행되면서 let count = 0이 처음부터 다시 실행된다.그래서 필요한 게 ..

[React] 스크롤하면 동영상처럼 재생되는 히어로 만들기 | 프레임 시퀀스 | padStart | Canvas | useEffect | useState | GSAP | ScrollTrigger

포트폴리오 웹 사이트를 만들어보고 싶어서 만드는 중! 하면서 배우는 개념들을 정리해보려고 한다. 내가 하고싶었던 것은 스크롤 내리면 동영상이 재생되는 것 처럼 진행되는 히어로를 만들고싶었다.여기서 히어로(Hero Section 또는 Hero Image)는 사용자가 웹사이트에 접속했을 때 가장 먼저 눈에 띄는 화면 상단의 핵심 영역을 뜻합니다. 내가 만들고 싶은 히어로를 구현하는 방법은동영상을 프레임(사진 여러 장)으로 나누어 저장 후 스크롤 할 때 한 장씩 보여주는 방법이다. 나는 198개의 프레임으로 동영상을 나눠서 스크롤 할 때 보여주는 것으로 했다. 구현 방법프레임 파일 준비하기일단 나는 영상은 구글 FLOW 에서 만들었다.영상에서 프레임으로 나누는 작업은 직접 하지 않고 Claude에게 맡겼다...

위아래가 잘린 바코드는 왜 읽힐까? | 바코드 구조 | UPC-A | 레이저 스캐너 원리

퀴즈 하나! 영수증에 찍힌 바코드가 잘려 있다!- **A**는 위아래가 잘렸고- **B**는 좌우가 잘렸다.계산대에서 둘 중 하나만 정상적으로 읽힌다.어떤 게 읽힐까?? 🤔스크롤 내리기 전에 딱 3초만 생각해보기! A는 읽히고 B는 안 읽힌다.처음 보면 좀 이상하다.A가 훨씬 많이 잘려 보이고, B는 가운데 막대가 멀쩡하게 남아있으니까..!근데 스캐너 입장에서는 "많이 잘렸냐"가 중요한 게 아니다.딱 한 가지만 보면 되는데, 그걸 이해하려면 스캐너가 어떻게 읽는지부터 알아야 한다.#1. 스캐너는 그림을 보지 않는다 레이저 스캐너는 빨간 빛을 바코드 위에 **한 줄로 쭉~** 훑는다.그리고 스캐너 안의 센서가 되돌아오는 빛의 양을 잰다.- 흰 공간 → 빛을 반사 → 신호 **높음**- 검은 막대 → ..

WORK 2026.10.22

새로운 언어로 프로젝트 해보기 | 개발 프로젝트 기획 | IA 구조도

올 해 새롭게 새운 목표!개인 프로젝트 시작해서 용두사미 말고, 꼭 완료해서 배포까지 해보기!그리고 최~대한 AI안쓰고, 한글로 검색도 안하고!!  공식 문건과 구글링을 이용해서만 할것!!! 일단 동일한 구조/기능을 가진 서비스를 iOS, Android, Web으로 배포하는게 목표이다. 내가 정한 목표는 영화/책 등의 후기를 적어 간직하고, 후기를 기반으로 다양한 작품을 추천해주는 서비스이다.(책까지 하면 너무 복잡해지니 일단 영화부터 시작하려고 함) 새로운 언어 익히기일단 iOS개발이 완전 처음이기 때문에, 기본기를 익히기 위해 유튜브 강의를 듣고 있다.언어 자체는 Kotlin이랑 비슷함!IDE 자체도 익숙하지 않기 때문에 유튜브를 보고 있는 중보고 있는 유튜브 공유👇👇👇https://www.yo..

SELF STUDY 2025.01.26

[Python] VSCode 가상환경 설정 | 가상환경 생성 | 활성화 | python3 | Venv

테스트 폴더에서 테스트를 마치고,배포를 위해 새로운 프로젝트를 생성해서 진행하던 중이렇게 파이썬 파일 자체는 실행이 가능하지만, pip 사용이 안되는 문제를 만남!! zsh: command not found: pip 이게 뭐지!!! 찾아보니 가상환경 설정이랑 관련이 있었다. 가상환경?가상환경이란 프로젝트 별로 라이브러리 등의 의존성 관리를 해주기 위한 것.설명은 여기에 자세히 나와있다 참고 (suhyen블로그) 파이썬의 가상환경에는 conda / venv 가 있다. Venv는 파이썬 3.3 이상 버전에 포함되어 있어 별도의 설치가 필요없다고 한다!그래서  Venv로 설정을 해주는 방법을 알아보겠다. Venv 가상환경 설정1. 가상환경 생성python3 -m venv {가상환경 폴더 이름}다른 블로그들을 ..

SELF STUDY/Python 2024.08.19

[Python] FastAPI란? | FastAPI 사용해보기

FastAPI라는게 있는지 이번에 처음 알았다. Python을 이용하는 프레임워크에는 3가지가 있다.-1. Djangohttps://www.djangoproject.com/-2. Flask APIhttps://flask.palletsprojects.com/en/3.0.x/-3. Fast APIhttps://fastapi.tiangolo.com/ 세 가지를 비교하는 포스팅이 아주아주 많다.  나는 여기서 FastAPI를 사용해보기로 했는데, 이유는1. 나는 micro service를 만들 것 이기 때문에 Django는 너무 큰 프레임워크라고 생각했다.   내가 만드는 서비스는 기존 운영중인 node.js 서버에서 내가 만든 기능을 불러서 쓰기 위해 만드는 서비스이기 때문에 매우매우 간단!2. 빠른 개발 속..

SELF STUDY/Python 2024.08.15

[Python] Google Cloud Speech-to-Text API 연동하여 audio 파일에서 스크립트 추출하기 | 단어 단위 | 문장 단위 | 시간

Google Cloud Speech 연동하는 방법은 https://m.blog.naver.com/korca02220/221724072642 블로그 참조  단어 단위로 끊어서 추출from google.cloud import speechimport iodef transcribe_audio_with_word_time_offsets(audio_file_path): # Initialize the Google Cloud client client = speech.SpeechClient() # Load the audio file with io.open(audio_file_path, "rb") as audio_file: content = audio_file.read() # Conf..

SELF STUDY/Python 2024.08.11

[Python] 유튜브 영상 전체 다운로드 | 오디오 파일만 다운로드 | yt_dlp |ffmpeg

유튜브 링크를 이용하여 해당 동영상을 오디오 파일로 저장해보겠습니다.  라이브러리 설치python 파일 생성 하기 전 필요한 설치 작업은 두 가지!- yt-dlp : 다양한 사이트의 동영상을 다운로드하기 위해 사용하는 소프트웨어- ffmpeg : 다양한 멀티미디어 포맷을 다루는 코덱brew install yt-dlpbrew install ffmpeg 유튜브 영상 다운로드import yt_dlpdef download_video_with_ytdlp(youtube_url, filename): """yt-dlp를 사용하여 YouTube에서 MP4 비디오를 다운로드하고 파일 이름을 반환합니다.""" ydl_opts = { 'format': 'bestvideo+bestaudio/best', ..

SELF STUDY/Python 2024.08.10

[FullStack] 풀스택 웹 개발 도전기 - Spring Boot | React | MongoDB

지금 나는 풀스택 웹 개발에 도전 하고 있다.  개발 툴과 프레임워크는백엔드 : 스프링부트 프론트엔드 : 리액트DB : 몽고DB  이렇게로 도전하고 있드아! 블로그에 정리도 하면서 해야하는데,조금 더 해보고 여유 있을 때 블로그에 포스팅도 해야겠다! 웹 개발 처음이라 너무 재밌고 설렌다. >_ https://github.com/hayoung-selina-lee/SmartChatWeb GitHub - hayoung-selina-lee/SmartChatWebContribute to hayoung-selina-lee/SmartChatWeb development by creating an account on GitHub.github.com 여기에서 확인 가농!

[책리뷰] 당신의 뇌는 최적화를 원한다 - 가바사와시온 지음

오랜만에 책을 읽었는데, 술술 읽히던 책!https://product.kyobobook.co.kr/detail/S000001024711  밀리의 서재 랭킹에 있어서 무슨 내용인지만 보자 하고 열어봤는데, 너무 재미있어서 끝까지 쭉 읽게 되었다. 이 책을 읽기 전에 도파민에 절여진 나를 위해 도파민네이션 이라는 책을 읽었었는데, 도파민네이션과 비슷하게 뇌과학을 주제로 한 책이라 매우 흥미롭고 재미있었다. 무엇보다 재미있다고 느낀 것은내가 행동하고 있는 것들이 뇌에 의해서 제어되고 있다는 것이다. 확실히 일찍 일어나고 일찍 자는 습관이 중요한 것 같다.하지만 요새 너무 밤 낮이 바뀌어서 걱정 ㅠ_ㅠ 뇌에 대해 이해하면 무슨 일을 하던지간에 좀 더 효율적으로 할 수 있을 것 같은 느낌? 책은 뇌 신경물질 큰..

DAIRY/REVIEW 2024.05.15
728x90
반응형