Frontend

[Chrome/Safari] 웹에서 음성 녹음 사용하는 법 (ngrok 사용하기 & 브라우저 보안 정책)

next.js로 웹앱 프로젝트 개발하는 도중에 음성 녹음 기능이 필요해서 적용 중에 있었는데, 분명히 컴퓨터로 (localhost)로 테스트했을때 잘실행이 되었으나, 핸드폰으로 네트워크 주수로 ( 192.xxx.xxx.xxx:3000) 들어갔을때 (나 같은 경우에는 아이폰 사파리) 음성 녹음 기능 자체가 아예 안되는 오류를 마주했다.분명히 컴퓨터에서 접속했을때는 잘되는데, 왜 안되는지 찾던 와중에 브라우저의 보안 정책 때문에 안된다는걸 알게 되었다. 원인: 브라우저 보안 정책 때문에 막혀있다!결론적으로, 이 문제는 브라우저의 보안 정책 때문이었습니다.브라우저는 마이크와 카메라 권한을 기본적으로 HTTPS 환경에서만 허용합니다.그런데 localhost는 특별히 예외가 적용되어, HTTP여도 안전한 도메인으..

[JS] slice()로 복사 활용하기, 얕은 복사인 이유 (깊은 복사하는 방법)

이번에 코딩 테스트 대비하려고 알고리즘 공부하다가 slice() 메서드는 배열을 자르는 역할도 있지만 복사를 해서 기존 배열에 영향을 주지 않고 변형을 시킬 때도 쓸 수 있다는 사실을 알게 됐다. 근데 문서 보니까 slice()는 얕은 복사를 한다고 해서 순간 헷갈렸다. 내가 알기론 얕은 복사는 서로 참조를 공유하니까 변형하면 원본에도 영향이 가는 거 아닌가? 그래서 조금 찾아보게 됐다. 결론부터 말하자면, slice()는 얕은 복사를 하는 게 맞지만 배열에 원시값(숫자, 문자열 등)만 들어있으면 참조가 일어나지 않아서 원본에는 영향이 안 간다. 대신 배열 안에 객체가 들어 있다면 얕은 복사이기 때문에 원본에도 영향이 간다. 여기서 잠깐 얕은 복사랑 깊은 복사를 정리하면얕은 복사 vs 깊은 복사얕은 복사..

[TailwindCSS v4] next/font/local 커스텀 폰트 적용이 안될 때 해결법

1. 문제 개요오류 상황: Next.js 14 앱 라우터 프로젝트에서 next/font/local로 불러온 커스텀 폰트들이 정상적으로 로딩되었음에도, 실제 페이지에서는 시스템 기본 폰트(Malgun Gothic, Segoe UI 등)만 렌더링발생 배경: 커스텀 폰트 적용하는데, 네트워크 + 파일 경로 둘다 문제 없는데도 텍스트에는 기본 폰트만 적용이 되는 상황2. 오류 코드 및 오류 메시지오류 메시지: 없어서,,, 파악하고 해결하는데 어려움이 있었다...3. 원인 분석오류 원인: tailwindcss가 v3에서 v4로 업데이트 되면서 커스텀 폰트 적용하는 방식이 바뀜. v3 방식대로 구조적 이해: Tailwind CSS v4는 기본적으로 fontFamily를 theme.extend.fontFamily로 ..

[CH.08] 제어문 control flow statement

8.1 블록문 block statement⇒ 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록이라고도 함JS는 블록문을 하나의 실행 단위로 취급함블록문 끝에는 세미콜론을 붙이지 않// 블록문{ var foo = 10;}// 제어문var x = 1;if (x 8.2 조건문 conditional statement⇒ 주어진 조건식(boolean값으로 평가될 수 있는 표현식)의 평가 결과에 따라 코드 블록의 실행을 결정함if else문// else if 문은 여러 번 사용 가능var num = 2;var kind;// if 문if (num > 0) { kind = '양수'; // 음수를 구별할 수 없다}console.log(kind); // 양수// if...else 문if (num > 0) { kind..

[CH.07] 연산자 operators

7.1 산술 연산자 arithmetic operator⇒ 수학적 계산을 수행해 새로운 숫자 값을 만듬산술 연산이 불가는하면 NaN을 반환함이항 산술 연산자 binary arithmetic operator⇒ 2개의 피연산자를 산술 연산해 숫자 값을 만듬모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과 side effect가 없음여기서 side effect의 의미 → 피연산자의 값이 바뀌는 경우 X, 새로운 값을 만듬이상 산술 연산자 의미 부수효과+뎟셈X-뺄셈X*곱셈X/나눗셈X%나머지X단항 산술 연산자 unary arithmetic operator⇒ 1개의 피연산자를 산술 연산하여 숫자 값을 만듬단향 산술 연산자 의미 부수효과++증가O--감소O+효과 X 단, 숫자타입이 아닌 피연산자에 사용하면 피..

[CH.06] 데이터 타입 data type

자바스크립트에서는 7개의 데이터 타입이 존재함구분 데이터 타입 설명원시타입숫자(number)타입숫자. 정수와 실수 구분 없이 하나의 숫자타입만 존재 문자열(string)타입문자열 불리언(boolean)타입논리적 참(true)과 거짓(false) undefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입ES6에서 추가된 7번째 타입객체타입 원시 타입을 제외한 모든 것6.1 숫자 타입 number type하나의 숫자 타입만 존재한다. 모든 수는 실수로 처리되기 때문에 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있는 이유다.// 숫자 타입은 모두 실수로 처리된다.console.log(1 === 1...

[CH.05] 표현식과 문 expression & statement

5.1 값 value값 value 는 표현식 expression 이 평가 evaluate 되어 생성된 결과다.평가 evaluate 는 식 expression 을 해석하여 값을 생성하거나 참조하는 과정을 말한다.예를 들어 var sum = 10 + 20;이 있을 때, sum에 할당되는 것은 10 + 20 식 자체가 아니라 평가 결과인 30이다.5.2 리터럴 literal리터럴 literal 은 사람이 이해할 수 있는 문자나 특수 기호를 사용해 값을 생성하는 표기법이다.자바스크립트에서 { } 뒤에는 세미콜론을 붙이지 않는다. 이는 코드 블록이 자체 종결성을 갖고 있기 때문이다.5.3 표현식 expression표현식 expression 은 값으로 평가될 수 있는 문이다.표현식이 평가되면 새로운 값을 생성하거나..

[CH.04] 변수 Variable

4.1 변수란? 변수의 필요성변수 variable프로그래밍 언어에서 변수 variable는 데이터를 관리하기 위한 핵심 개념이다.예를 들어, 10 + 20이라는 간단한 식을 실행할 때, 컴퓨터는 메모리에 10, 20, 그리고 연산 결과인 30을 저장하게 된다.하지만 여기서 문제는, 결과로 나온 30을 재사용하기가 쉽지 않다는 문제점이 있다. 메모리 주소에 직접 접근해야만 값을 다시 사용할 수 있지만 JS는 개발자가 임의로 메모리 주소를 직접 다루는 것을 허용하지 않는다.직접 메모리 제어가 위험한 이유메모리 주소는 실행할 때마다 달라질 수 있고(OS나 런타임 환경이 임의로 배정).특정 메모리 주소를 직접 건드리면, 의도치 않은 영역의 데이터를 덮어쓰거나 읽어 오류를 일으킬 가능성이 큼.결국 JS에서는 직접..