본문 바로가기
파파고 음성을 mp3로 바꾸기 TTS는 쓰고 싶고... 근데 무료에다 얼추 쓸만한 것이 없을까... 싶었는데. 사실 찾자면 엄청나게 많다.(해외에는 일레븐렙스가 유명하고, 국내에는 타입캐스트가 유명하다. 브류도 있기는 한데... 타입캐스트가 브류보다는 훨씬 좋다. 비싸서 그렇지)찾다보니, "파파고"에 있는 여성 목소리 TTS가 눈에 들어왔다.보면 내가 번역하고자 하는 한국말도 들을 수가 있다. 당연히 영어도 들을 수 있다. (일본어도 되고, 중국어도 된다. 다른 언어도 물론 가능하다.)이 부분에 착안, 파파고를 쓰는 것은 무료이며, 사용 시간에 제한이 없다. 즉 "무제한"이라는 점.그러면 TTS화 하려면 어떻게 해야 할까? 이 부분에 대한 정답은 밑의 티스토리 글을 참고하자.https://22ww.tistory.com/290 텍스트로.. 2025. 1. 8.
브라우저의 작동 원리 렌더링이나 DOM, 브라우저의 기본 구조 등등에 관한 내용이다. (전반적인 브라우저 작동 원리)https://youtu.be/Mqh13dNI8jc?si=C6H9qRgs5lTPhhDvhttps://yozm.wishket.com/magazine/detail/1338/ 프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 | 요즘IT프론트엔드 개발자에게 있어 브라우저는 거의 모든 것과도 같습니다. 하지만 그렇다고 해서 프론트엔드 개발자가 브라우저의 모든 원리에 대해 잘 알고 있는 것은 아니지만, 복잡한 웹 어플리yozm.wishket.com 2024. 12. 27.
모달 창 구현하는 방법 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미한다. (웹과 앱에 꽤 많이 쓰인다.) - 팝업 창 구현하는 것도 추후에 작성하겠다.자바스크립트를 기반으로 웹/앱 Dom을 조작하거나 직접 CSS style을 수정하는 방식이다.즉, css의 display 상태를 자바스크립트의 DOM요소로 제어하는 것.디테일한 부분은 다음 글들을 참고하자.https://velog.io/@seungmimi/javascript%EB%AA%A8%EB%8B%AC-%ED%8C%9D%EC%97%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [javascript]모달 팝업 구현하기🧐 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 .. 2024. 12. 23.
Netlify Page Not Found 오류 해결 리액트 프로젝트를 진행하고, 백엔드를 연결하는 것까지는 오케이. 문제는 이걸 Netlify에 올렸는데, Page Not Found가 떠버린다. 이걸 해결하는 방법을 작성하고자 한다.방법은 쉽다.public 폴더에 redirects 추가public 폴더에 _redirects 라는 이름의 파일을 만들고 아래와 같은 내용을 작성해 주면 된다.public/_redirects/* /index.html 200즉, 리액트의 public에 _redirects 를 세팅하는 것이 정론이다.https://doooodle932.tistory.com/160 [Netlify] 페이지 새로고침 시 Page Not Found 오류 해결netlify로 올려놓았던 프로젝트에서 페이지 새로고침 시 Page Not Found가 뜨는 오.. 2024. 12. 6.
리액트 - 유튜브 영상 넣기 리액트에 mp4로 영상을 넣는 방법도 있지만, 좀 더 편하게 유튜브 영상을 넣는 방법이 있다.(mp4로 하려면 mp4를 다운로드하고, 라이브러리도 깔아줘야 하고... 아무튼 복잡함)1. 라이브러리 깔기$ npm install react-youtube일단 npm 라이브러리를 깐다. 코드는 위와 같다.2. import 설정import YouTube from 'react-youtube';jsx 파일에 import문을 작성한다. 코드는 위와 같다.3. 예시 코드 >.jsx.youtube { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding-top: 20px; padding-bottom: 20px;}리.. 2024. 11. 27.
카카오 단풍톤 3기를 마무리하며... 예선 해커톤이 마무리가 되었다. 해커톤을 마무리하게 되면 가장 먼저 해야 할 일은 바로 "문서화"라고 생각한다.해커톤을 하면서 내가 느낀 점, 깨달은 점 등을 적어보도록 하겠다. 해커톤에서 가장 중요한 것. 내가 생각하기에, 그리고 대부분이 인정할 것인데.. 그건 바로 "사람"이다.단풍톤을 하면서 시간이 지남에 따라 "아이디어"라던지.. 프로덕트의 기능이라던지 등등. 이런 부분은 점점 시간이 지남에 따라 잊어가지만, "사람"만큼은 계속에 기억에 남을 것이다.그리고 코드를 작성하는 건은 결국 사람이다. 협업도 사람과 한다.그러니 개발자에게 가장 중요한 역량이 뭐냐고 물어본다면 1순위로 "경청과 질문"이라고 보고 있다. (물론 개발 실력도 중요함)이런 역량을 확실히 키우고 성장하여 사람과 같이 더 좋은 프로.. 2024. 11. 24.
깃허브 - REDEME 꾸미기 깃허브에 작성되는 REDEME.md 파일을 꾸밀 수 있다. 여러 방법이 있는데, 밑의 포스팅을 참고하면 된다.사실 별 거는 아니지만, 그래도 이쁘게 꾸미면 소위 "간지"가 난다.https://yoon990.tistory.com/38 [Github] ReadMe 리드미 꾸미기 (및 매우 소소한 팁들)그동안 하고 싶었던 깃허브 리드미를 드디어 간단하게 꾸며봤다. 나도 여러개의 블로그를 보면서 꾸민거라서 수정할 때 언제든지 볼 수 있도록 정리하려고 한다. 우선 리드미를 꾸미기 전에 가yoon990.tistory.comhttps://whkakrkr.tistory.com/m/entry/Github-Readme-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC-%F.. 2024. 11. 22.
깃 충돌 해결법 개발자끼리 깃, 깃허브로 그룹 프로젝트를 하거나 혹은 회사에서 협업을 할 때에 깃허브를 이용하게 된다. 이때 "머지"를 이용해서 코드를 합치게 될 건데, 이러한 방향성에서 깃이 충돌하는 경우가 있다.이때 깃 충돌을 어떻게 해결해야 하는지, 그리고 코드를 어떻게 짜야 깃 충돌을 피할 수 있는지 등..에 대한 영상이다.https://youtu.be/PGQIJE4tHAs?si=drhHJpdoz_yTklmi(출처: 코딩알려주는 누나) 2024. 11. 15.
깃허브로 그룹 프로젝트 본인 혼자서 프로젝트를 진행하면 그냥 본인 편한 데로 깃허브 만들고, 깃도 만들고 하면 된다. 하지만 "그룹"으로 프로젝트를 진행하게 된다면 일종의 "약속"이 필요하게 된다. 특히 깃허브로 코드를 저장하고 이슈를 다룰 것이 뻔한데.. 이에 대한 영상을 여기에 올려본다.https://youtu.be/tkkbYCajCjM?si=bJ5rjCU136uz_wWXhttps://youtu.be/EV3FZ3cWBp8?si=eiBHW-meYkh_xxT-(코딩 애플) - git workflow 2024. 11. 13.
FE - BE , UI/UX Designer 협업 프론트엔드 개발자와 백엔드 개발자의 협업. UX/UI 디자이너와 프톤트엔드 개발자의 협업 등.. 전체적으로 하나의 프로덕트 (혹은 프로젝트)를 완성해나가는 과정에서 협업은 필수이다. 이때 도움이 될 만한 글을 여기에 남겨본다.https://devocean.sk.com/blog/techBoardDetail.do?ID=166014 웹 프론트엔드 개발자와 UI/UX 디자이너가 효과적으로 협업하는 방법 devocean.sk.com(웹 프론트엔드 개발자와 UI/UX 디자이너와의 협업)https://velog.io/@sopt_official/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%98%91%EC%97%85%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2.. 2024. 11. 13.
깃허브 협업 가이드라인 https://github.com/devAon/Eclipse-GitHub-Coraboration-Tutorial GitHub - devAon/Eclipse-GitHub-Coraboration-Tutorial: 🍒 초심자를 위한 Github 협업 방법 튜토리얼 (with Eclipse)🍒 초심자를 위한 Github 협업 방법 튜토리얼 (with Eclipse). Contribute to devAon/Eclipse-GitHub-Coraboration-Tutorial development by creating an account on GitHub.github.com초심자를 위해서 작성해주셨는데, 티스토리에 공유해본다. 2024. 11. 12.
피그마 무료 강의 피그마 툴에 대한 무료 강의를 여기에 올려본다. 이 밖에도 여러 기능이 존재하는데, 이런 부분이 있다면 검색하거나 추후에 티스토리에 올릴 듯하다.https://youtu.be/c6yCZecrMpQ?si=Tg8gaX38RyomaOa5https://youtu.be/AwgbMaxb59c?si=sV8XvyYYDfx4AAST 2024. 11. 8.
피그마를 코드로 변환하기 디자인을 하거나 웹 퍼블리싱을 할 때 피그마를 사용할 수 있는데, 디자인을 하고 그 디자인을 코드로 변환할 수 있다.적재적소에 플러그인을 잘 이용한다면 개발 및 디자인 속도가 엄청나게 빨라질 것 같다.영상이 꽤 많아서 밑에 쭉 나열하겠다.https://youtu.be/qnQItPmcoPU?si=iFjM4v74faN6jBXghttps://youtu.be/RCJbjQNNuso?si=_WDEAe4DVKm1Iepbhttps://youtu.be/fKiTEIPnuyQ?si=vqnFC2OvJRQWsBKW 2024. 11. 6.
피그마로 웹 디자인 빠르게 빌딩하기 피그마에는 정말 많은 플러그인이 존재하고, 그중 html.to.design 플러그인이라는 것이 있다. 이 플러그인을 이용하면 사이트에 있는 디자인을 "그대로" 가져올 수 있고, 이를 기반으로 빠르게 웹 디자인을 만들고 수정할 수 있다. 무엇보다 이미 입증된 "디자인"이기에 더 강력하다.- 출처: 디자인 엔지니어(관련 영상)https://youtu.be/MAdq_B4_4_w?si=KgKjxCyJndLzkZWA 2024. 11. 6.
터치 디바이스(핸드폰/패드) 마우스 hover 해결방법 pc에서 마우스 hover 가상 클래스를 이용해서 이펙트를 주는 경우가 정말 많다.근데 핸드폰이나 패드 같은 "터치" 디바이스에서 제대로 작동하지 않는다는 문제가 존재한다.이를 해결하기 위해서 해결방법을 작성해 본다.https://ykwan0714.github.io/%ED%84%B0%EC%B9%98-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C-hover-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0/ 터치 디바이스, 모바일에서 hover 제거하기 | 잡다한 개발 이야기모바일에서 클릭시 hover 효과가 나타난다. 이를 제거해 보자.ykwan0714.github.io(관련글)핵심핵심은.. 2024. 10. 31.
코딩실력보다 더 중요한 것. https://youtu.be/pkr48S22zH0?si=FQOOPSn4jMlVmvaj그건 바로 "허리"이다.허리뿐 아니라 전체적인 몸의 밸런스를 말한다. 원래 많이 앉을수록 허리 디스크 확률은 올라간다.디테일한 부분은 영상을 보자. 2024. 10. 14.
2의 보수란? (비트 연산) https://yiyj1030.tistory.com/83 2의 보수란?? 쉬운 설명으로 궁금증 해결.. (비트 연산)2의 보수: 컴퓨터가 음수를 저장하기 위해 사용하는 방법 중 하나. 예를 들어 4비트 머신을 생각해보자. 이 머신은 0000부터 1111부터 표현이 가능하다. 총 16개. 양수만을 저장하고싶다면 숫자 0부yiyj1030.tistory.com디테일한 설명은 위의 블로그를 참고하자.2의 보수는 심플하다. 양수를 음수로, 음수를 양수로 바꾸기 위함이다.정수 체계는 양수만 있는 것이 아니라 음수도 있기에, 이 2개의 범위를 "비트"로 표현하기 위함이다.보통 십진수를 이진수로 바꿀 때에는 쉽게 2의 0승부터 시작해서 2의 1승~~ 이런 식으로 커진다.이 점을 이용해서 not 연산에 1을 더하는 방식.. 2024. 10. 12.
미디어 쿼리란? 기초부터 실전까지 미디어 쿼리란 "반응형 웹 디자인"을 위한 훌륭한 명령어라고 생각하면 편하다.인터페이스는 각각 "데스크톱 / 태블릿 / 핸드폰"으로 아주 크게 나눌 수 있다. 근데 이 인터페이스의 크기는 서로 각각 다르며 같은 종류의 장치라도 넓이와 높이가 다르다. (예를 들어 아이폰 12 pro와 갤럭시 s8의 넓이는 다르다.)즉, 다른 사이즈의 디바이스이지만.. 우리는 "동일한 유저 경험"을 제공해야 하지 않겠는가. 이것을 위해서는 미디어 쿼리는 필수라고 볼 수 있다.("동일한 유저 경험" ... 이게 진짜 생각보다 만만치 않다. 어찌 보면 챌린지에 가깝다.)아무튼. 이에 대한 영상을 참고하길 바란다.https://youtu.be/hltvPyLHKPk?si=-xFzEhdmT87IYFEX 2024. 10. 9.
리액트 - 카카오 Map API 이번에는 카카오 지도 api에 대한 글이다. 저번에는 네이버를 이용해서 지도 api를 연동하였다.나의 개인적인 생각이지만, 지도 api에서는 네이버가 1황이라고 생각이 든다. 다만, 한 가지 단점이 "유료"라는 점이다. 그 점에서 카카오 지도 api는 한 달 30만 회의 호스팅을 무료로 버틸 수 있기에 비용 절감의 측면에서 꽤 매력적이다.또한, 저번에 했던 네이버 지도 api의 "API 키 오픈" 문제를 어느 정도는 해결한 글이기도 하다. 시작해 보자.카카오 api 키 받기https://apis.map.kakao.com/여기로 들어가서 애플리케이션을 등록해줘야 한다. 그러면 api 키를 받을 수 있다. 리액트는 자바스크립트 기반이니깐 자바스크립트 api의 키를 쓰면 된다. (강조한다. api 키는 함부로.. 2024. 10. 9.
리액트 - 환경 변수 관리하기 [API key] [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key)환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Passwordrominlamp.tistory.com 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임이다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 존재한다.이런 환경 변수를 세팅해서 노출하고 싶지 않은 key 아이디나 시크릿을 관리할 수 있다.자세한 것은 글을 참고하자. 영상은 밑의 영상을 참고하자.h.. 2024. 10. 9.

티스토리툴바