2024/10 10

좋은 개발자가 되려면

개발자가 되고자 하는 사람 또는 개발자로서 '좋은 개발자'가 되는 것을 꿈꾸곤 합니다.하지만 좋은 개발자가 된다는 것은 단순히 기술적 지식을 쌓는 것 이상으로, 더 넓은 관점과 통찰력을 키우는 사람 아닐까요 이 글에서는 '나는 어떤 개발자일까(개발 실무 경험한 지 3개월 됨ㅎ)'를 주제로 생각하며 여러 매체에서 얻은 인사이트를 공유하고자 합니다. 1. 요구사항, 그 이상의 시야뭐랄까요, 요구사항이라는 개념을 들어보셨을텐데.보통 클라이언트에게 서비스를 제공하기 위해서 클라이언트의 요구사항이 담긴 문서 등을 받습니다. 대부분의 개발자는 주어진 요구사항을 해결하려고 노력합니다. 하지만 '좋은 개발자'는 요구사항을 넘어 클라이언트에게 더 좋은 경험을 주기 위해 노력합니다. 예를 들어, 사용자가 정확히 설명하지 ..

일상 2024.10.16

var, let, const 차이점과 일시적 사각지대(TDZ)

JavaScript에서 변수 호이스팅은 중요한 개념이며, 이때 var와 let/const는 서로 다르게 동작합니다.var의 호이스팅: undefined로 초기화var로 선언된 변수는 호이스팅되며, 실행 컨텍스트가 생성될 때 해당 변수는 메모리의 최상단으로 끌어올려져 (hoisting) undefined로 초기화됩니다. 이는 변수 선언이 코드 어디에 있든 간에 자바스크립트 엔진이 실행 컨텍스트의 생성 단계에서 미리 메모리에 할당하고 undefined 값을 부여하기 때문입니다.예시console.log(x); // undefinedvar x = 5;console.log(x); // 5실행 순서자바스크립트는 코드 실행 전 var x를 호이스팅하여 메모리에 등록하지만, 그 값은 할당되지 않고 undefined로 ..

코드/JavaScript 2024.10.15

실행컨텍스트와 호이스팅

실행 컨텍스트(Execution Context)란?실행 컨텍스트는 JavaScript 코드가 실행되는 환경입니다.코드가 실행될 때 변수, 함수, 객체가 어떻게 메모리에 할당되고, 그 순서는 어떻게 되는지를 결정하는 것이 실행 컨텍스트입니다.실행 컨텍스트의 종류JavaScript에는 두 가지 주요 실행 컨텍스트가 있습니다.글로벌 실행 컨텍스트(Global Execution Context): 자바스크립트가 처음 시작될 때 생성되는 전역 컨텍스트입니다. 브라우저에서는 window 객체가 글로벌 실행 컨텍스트의 일부입니다.함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성되며, 각 함수는 고유한 실행 컨텍스트를 가집니다.실행 컨텍스트 생성 단계실행 컨텍스트는 코드가..

코드/JavaScript 2024.10.15

[React] 반응형 웹개발 가이드라인(Custom Hook)

반응형 웹과 모바일 감지의 중요성웹 개발에서 반응형 웹 디자인은 이제 필수입니다. 데스크톱, 태블릿, 모바일 등 다양한 디바이스에 맞춘 최적화된 UI는 사용자 경험을 크게 향상하는 중요한 요소입니다.특히 모바일 사용자의 비율이 증가함에 따라, 화면 크기에 따라 레이아웃과 스타일을 동적으로 변경하는 기능은 더욱 필수적입니다.이 글에서는 React에서 미디어 쿼리를 활용해 Custom Hook을 만들어 모바일 디바이스를 감지하고, 스타일을 효율적으로 변경하는 useIsMobile 훅을 소개합니다.모바일을 감지하는 useIsMobile 훅먼저, 미디어 쿼리를 이용해 모바일 화면을 감지할 수 있습니다.이걸 React에서 쉽게 사용할 수 있도록 useIsMobile 훅을 만들겠습니다. 이 훅은 컨텍스트 API를 ..

코드/React 2024.10.14

[등산] 대전 보문산

아래 블로그에 나온 등반 코스를 그대로 따라갔습니다. https://m.blog.naver.com/fiberboard/221955886833 대전의 남산, 보문산 등산 코스 추천, 시루봉~보문산성 코스오늘은 대전의 남산? 이라고 해야할까요? 대전의 대표 자연공원 #보문산산책로 를 소개하겠습니다. #보문산...blog.naver.com  원점 회귀코스로 보문산 공영주차장 -> 고촉사 -> 시루봉 -> 보문산성 -> 보운대 -> 보문산 공영주차장이며 시간은 약 1시간 20분 정도 소요 되었던 걸로 기억한다. 자차가 있으신 분들은 공영주차장에 주차 후 산이 나올 것 같은 길로 쭉 올라가면 되고, 대중교통을 이용하시는 분들은 잘 모르겠습니다 :0 쭉 올라가다 보면 왠지 산 입구처럼 보이는 곳이 있고, 아래 사진..

일상 2024.10.12

tts와 감정분석 기술의 결합

text-to-speech (TTS)의 이해TTS의 기본 개념정의: TTS는 입력된 텍스트를 사람이 말하는 것처럼 자연스러운 음성으로 변환하는 기술이다.목적: TTS의 주된 목적은 텍스트 정보를 음성으로 전달하여, 시각적인 정보 접근이 어jundev717.tistory.com gTTS를 활용한 text-to-speechgTTS(Google Text-to-Speech) 사용하기gTTS는 Google의 TTS API를 사용하여 텍스트를 음성으로 변환하는 라이브러리입니다.온라인 서비스를 사용하기 때문에 인터넷 연결이 필요하지만, 사용이 매우 간단합jundev717.tistory.com pyttsx3를 활용한 text-to-speechpyttsx3 사용하기pyttsx3는 오프라인 TTS 라이브러리로, 인터넷 연..

pyttsx3를 활용한 text-to-speech

pyttsx3 사용하기pyttsx3는 오프라인 TTS 라이브러리로, 인터넷 연결 없이도 사용할 수 있습니다. 여러 TTS 엔진을 지원하며, Windows, macOS, Linux에서 모두 사용 가능합니다.   gTTS를 활용한 text-to-speechgTTS(Google Text-to-Speech) 사용하기gTTS는 Google의 TTS API를 사용하여 텍스트를 음성으로 변환하는 라이브러리입니다.온라인 서비스를 사용하기 때문에 인터넷 연결이 필요하지만, 사용이 매우 간단합jundev717.tistory.com  tts와 감정분석 기술의 결합text-to-speech (TTS)의 이해TTS의 기본 개념정의: TTS는 입력된 텍스트를 사람이 말하는 것처럼 자연스러운 음성으로 변환하는 기술이다.목적: TT..

gTTS를 활용한 text-to-speech

gTTS(Google Text-to-Speech) 사용하기gTTS는 Google의 TTS API를 사용하여 텍스트를 음성으로 변환하는 라이브러리입니다.온라인 서비스를 사용하기 때문에 인터넷 연결이 필요하지만, 사용이 매우 간단합니다.설치먼저, 터미널에서 다음 명령어를 실행하여 gTTS 라이브러리를 설치해야 합니다.pip install gtts코드 예시간단한 코드로 TTS를 구현할 수 있습니다.from gtts import gTTSimport os# 변환할 텍스트text = "안녕하세요!"# TTS 객체 생성 (언어는 한국어로 설정)tts = gTTS(text=text, lang='ko')# 음성 파일로 저장tts.save("output.mp3")# 저장된 음성 파일 재생# os.system("start ..

text-to-speech (TTS)의 이해

TTS의 기본 개념정의: TTS는 입력된 텍스트를 사람이 말하는 것처럼 자연스러운 음성으로 변환하는 기술이다.목적: TTS의 주된 목적은 텍스트 정보를 음성으로 전달하여, 시각적인 정보 접근이 어려운 사람들에게도 정보를 쉽게 전달하는 것이다.또한, 자동화된 시스템에서 자연스럽게 의사소통할 수 있도록 돕는다.TTS의 작동 원리TTS 시스템은 일반적으로 텍스트 처리(Text Processing)와 음성 합성(Speech Synthesis) 두 가지 주요 단계로 구성된다. 텍스트 처리(Text Processing)이 단계에서는 입력된 텍스트를 음성 합성에 적합한 형식으로 변환한다.텍스트 정규화: 텍스트에 포함된 숫자, 기호, 약어 등을 사람이 말하는 방식으로 변환한다. 예를 들어, "21kg"은 "이십일 킬로..

Vite - FE 빌드 도구

Vite란?Vite는 차세대 프론트엔드 빌드 도구로, 특히 React, Vue, Svelte 같은 모던 프레임워크와 함께 빠른 개발 환경을 제공한다.Vite의 주요 목표는 빠른 개발 서버와 최적화된 프로덕션 빌드이다.왜 Vite가 빠를까?Vite는 기본적으로 ES 모듈을 사용한다. 전통적인 빌드 도구들은 프로젝트 전체 파일을 번들로 묶어서 하나의 큰 파일로 만든다.하지만, Vite는 ES 모듈을 이용해 필요한 파일만 브라우저로 바로 전달해 준다. 이게 왜 빠르냐면:예전에는 빌드 과정에서 모든 파일을 한 번에 처리해야 했지만, Vite는 필요한 파일만 바로바로 가져다 쓴다.변경된 파일만 핫 리로드(Hot Module Replacement, HMR)를 통해 빠르게 반영된다. 즉, 코드 변경을 즉시 브라우저에..