CODING STORY

[React] Array.from, map 이해하기 | 화살표 함수 | 배열 만들기 | 배열 변환

오늘 프로젝트를 진행하면서 Array.from 이라는 함수를 처음 봤다. 비슷한 함수로 기존에 사용했던 map이 있는데, map 함수랑은 뭐가 다른지 궁금해졌었다.그래서 그 두가지 개념을 완전히 익히고 가기 위해 포스팅 작성 중! #1. 화살표 함수 (arrow function)Array.from과 map은 둘 다 함수를 받는 함수라서, 먼저 함수를 짧게 쓰는 방법부터 알아야 코드가 읽힌다.원래 함수는 이렇게 쓴다.function (element, index) { return index;}이걸 화살표 함수로 바꾸면 function이라는 단어가 사라지고 => 가 들어간다.(element, index) => { return index;}중괄호 안에 return 한 줄뿐이면 중괄호와 return도 뺄 수 ..

[React] useEffect 이해하기 | 의존성 배열 | 클린업 | 타이머 | 이벤트 리스너 | StrictMode

seState로 값을 기억하는 법을 배웠다면, 이번에는 화면이 그려진 뒤에 무언가를 실행하는 Hook, useEffect!useEffect를 처음부터 끝까지 정리해보려고 한다.#1. useEffectReact 컴포넌트는 함수다.그리고 이 함수는 화면을 그리려고 실행될 때마다(렌더링) 처음부터 끝까지 다시 실행된다.그래서 렌더링 중에는 계산만 하는 게 원칙이다.그런데 이런 일들은 계산이 아니다.- 타이머 만들기 (setInterval)- 창 크기 변경 같은 이벤트 등록하기 (addEventListener)- 서버에서 데이터 가져오기 (fetch)- 이미지 미리 불러오기- 브라우저 제목 바꾸기 (document.title)이렇게 컴포넌트 바깥 세계에 영향을 주는 일을 부수 효과(side effect)라고 부..

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

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

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

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

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

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. 빠른 개발 속..

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..

유튜브 링크를 이용하여 해당 동영상을 오디오 파일로 저장해보겠습니다.  라이브러리 설치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', ..