전체 글
CSS 모바일 파란 박스 없애기
모바일에서 클릭하거나 할때 파란색 테두리가 생기는 현상이 생길수 있습니다 div:focus { outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 위 코드 적용해주면 됩니다
자바스크립트 자료구조란?
자바스크립트 자료구조에 대해 알아보려합니다. 배열(Array) 순서가 있는 목록을 표현하는 자료구조로, 원소에 대한 인덱스를 통해 접근할 수 있습니다. 자바스크립트에서 배열은 Array 객체를 사용하여 생성하며, 대괄호([])로 감싸진 목록을 사용할 수 있습니다. const arr = [1, 2, 3, 4, 5];객체(Object) 키(key)와 값(value)의 쌍을 저장하는 자료구조로, 자바스크립트 객체는 일반적으로 해시테이블로 구현되어 있습니다. 중괄호({})로 감싸진 아이템들은 키-값 쌍으로 구분됩니다. const obj = { key1: 'value1', key2: 'value2', };해쉬 테이블 해시 테이블(Hash Table)은 키(key)를 값(value)에 ..
Call by value 와 Call by reference
자바스크립트에는 Call by value 와 Call by reference라는 개념이 존재합니다. 자바스크립트에서는 기본적으로 함수의 인자 전달 방식이 Call by value 방식으로 전달하게 됩니다. 예시로 설명하면 다음과 같습니다. Call by value function sample(item) { item = item + 2; } let a = 11; sample(a); console.log(a); // 11; 위 코드를 살펴보면 sample 함수에 a 값을 인자로 전달했고 sample 함수는 전달받은 인자에 2를 더했습니다. 하지만 콘솔로 a를 출력해보면 기본 값인 11이 나옵니다. 즉, 함수에 인자로 전달될 때 값 복사를 통한 방식인 Call by value 방식으로 전달하기에 원래 인자의 ..
웹브라우저의 동작원리
웹상 통신과정 브라우저는 사용자가 서버에 자원을 요청하고 요청한 자원을 브라우저에 표시하는 역할을 합니다. 웹 브라우저에 URL을 입력하면 웹 서버에서 웹 브라우저에 웹 페이지를 제공합니다. 웹 브라우저와 웹 서버는 다른 곳에 위치합니다. 그렇기에 서로 연결하려면 웹 서버가 돌아가고 있는 곳에 주소가 필요합니다. 이것을 IP 주소라고 합니다. IP 주소는 111.111.1.0 와 같이 사람들이 외우기 힘들게 되어있습니다. 그래서 우리가 흔히 알고 있는 google.com 와 같이 사람들이 기억하기 쉽게 문자로 사용하는데요, 이것을 도메인이라고 합니다. 사람들이 도메인 이름으로 URL을 입력하면 컴퓨터가 알아들을 수 있도록 IP 주소로 변환을 해야합니다. 이렇게 변환을 해주는 것을 DNS라고 합니다. 이 ..
사용자 음성을 텍스트로 변경하는 커스텀 훅
이번에 사용할 훅은 사용자가 마이크로 말한 음성을 텍스트로 변경하는 커스텀 훅입니다. 브라우저의 SpeechRecognition API를 사용하여 음성 인식 기능을 지원합니다. 음성 인식할 때 해당 언어를 한국어로 설정합니다 (ko-KR). 음성 인식이 끝났을 때 결과를 반환하고, 인식으로부터 에러가 발생할 경우 에러 메시지를 반환합니다. 음성 인식을 시작하고 종료하는 메서드를 제공합니다. 코드의 간략한 설명: useState를 사용하여 결과(result)와 음성 인식 객체(recognition) 상태를 관리합니다. useEffect를 사용하여 컴포넌트가 마운트될 때 SpeechRecognition을 초기화합니다. initRecognition 함수는 SpeechRecognition 객체를 초기화하고 구성..
TTS 자바스크립트로 구현하기
자바스크립트로 TTS를 구현하는 코드입니다. window 객체를 사용해야하므로 next.js로 ssr를 구현하시는 분은 추가적인 작업이 필요합니다. export const textToSpeech = (text: string, isActionHandler: (isAction: boolean) => void) => { const synthesis = window.speechSynthesis; const utterance = new SpeechSynthesisUtterance(text); utterance.lang = "ko-KR"; utterance.onend = function (event) { isActionHandler(false); }; synthesis.speak(utterance); }; 해당 함..
AWS EC2 리액트 배포 및 Nginx 설정법
Amazon EC2 인스턴스에서 React, Express, 및 Nginx를 설정하려면 다음 단계를 따르세요. 먼저 EC2 인스턴스에 접속하여 Node.js와 npm을 설치합니다. curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh) | bash source ~/.bashrc nvm install node React 프로젝트를 생성합니다. npm install -g create-react-app create-react-app 프로젝트 프로젝트 디렉리에서 Express 백엔드를 추가합니다. npm install ..
Git 브랜치 덮어쓰기
가끔 Git 브랜치를 덮어써야하는 일이 있습니다. 아예 코드를 리뉴얼하거나 깃이 꼬였을때 덮어쓰는 경우가 가끔있었는데요. 이런 상황에서 사용할 수 있는 방법입니다. 사용방법 브랜치는 총 두개입니다. 덮어 씌울 브랜치를 A, 덮으려는 내용이 담긴 브랜치를 B라고 하겠습니다. 먼저 덮어 씌울 브랜치로 이동합니다. git checkout A 그 다음 덮으려는 내용이 담긴 브랜치를 merge 합니다. 여기서 -Xtheirs를 사용해서 merge를 할 겁니다. 이건 덮어쓰겠다라는 뜻이고요 현재 브랜치에 대상 브랜치를 덮어씌운다라고 생각하시면 됩니다. 역순도 있습니다. -Xours를 사용하시면 역으로 덮게됩니다. 여기서 두가지로 나뉘는데요 관련없는 기록 병합 거부 에러 발생 관련없는 기록 병합 거부 에러 미발생 에..
Next.js build시 Image Optimization 설정 에러
에러 Next.js에서 build시에 생긴 에러입니다. 에러 내용을 확인해보면 next.config.js를 확인하라는 것 같습니다. 이미지 로더를 변경해주면 될 것 같습니다. 아래와 같이 loader = "akamai"로 해주고 path 까지 설정해준다면 정상적으로 빌드가 동작합니다. // next.config.js module.exports = { images: { loader: "akamai", path: "/", } } 그리고 에러내용대로 images.upoptimized = true로 만들어주는 방법도 있을 것 같습니다. // next.config.js module.exports = { images: { unoptimized: true } } 참조 https://stackoverflow.com/q..
구글 스프레드시트 API 조회하기 | Node.js
구글 스프레드시트에서 작성한 내용을 API를 통해 조회해서 간단한 DB처럼 사용할 수 있는 방법에 대해서 알아보려합니다. 속도는 느리지만 간단한 DB용도 및 크롤링하기에 좋은 것 같습니다. 방법은 다음과 같습니다. 구글 스프레드시트 설정 1. 상단에 공유 버튼을 눌러 일반 액세스에 링크가 있는 모든 사용자가 볼 수 있도록 설정해주세요 2. 그 다음 링크 복사를 눌러 링크를 확인해보시면 https://docs.google.com/spreadsheets/d/`스프레드시트\_아이디`/edit?usp=sharing d/에서부터 다음 / 까지 적혀있는 문자가 해당 스프레드시트의 ID입니다. 저 부분만 따로 복사해주세요. Node.js 설정 지금 알아볼 것은 단순 조회이기에 fetch나 axios와 같은 HTTP ..