서론사이드 프로젝트를 진행하며 '동적 매개변수'를 가져와 사용해야 하는 일이 생겼다. 처음에는 useParams를 사용해 값을 가져왔지만 빌드를 해보니 에러가 엄청나게 떠 있었다. 에러의 이유는 useParams를 서버 컴포넌트인 page.tsx에서 사용했던 것이 문제였다. useParams란?useParams는 현재 페이지의 URL 파라미터 값을 가져오는 Next.js의 훅이다. 예를 들어 아래와 같은 URL 경로가 있다면 [locale]는 동적 세그먼트이다. useParams는 이 값을 가져오는 훅이다. /app/[locale]/page.tsxuseParams는 런타임에서 URL 값을 읽기 때문에 서버 컴포넌트에서 사용한다면 브라우저의 현재 URL 정보를 직접 읽을 수 없다. 클라이언트 컴포넌트와 서..

리액트는 컴포넌트 기반 아키텍처를 따르기 때문에 각각의 컴포넌트는 다른 컴포넌트의 상태에 접근할 수 없다. 하지만 부모 - 자식 관계는 props를 통해 상태를 전달할 수 있다. 리액트는 "단방향 데이터 흐름" 을 따르기 때문에 부모에서 자식으로 데이터 전달이 가능하지만, 자식에서 부모로 데이터 전달은 불가능하다. 사실 부모에서 콜백함수를 전달한다던지, 상태를 끌어올리는 방법을 통해 어느 정도 구현이 가능하지만 이 또한 컴포넌트가 많아진다면 드릴링의 문제가 생길 수 있다. 그래서 상태관리 라이브러리가 탄생했다. 상태관리 라이브러리는 전역의 저장소에서 상태를 관리할 수 있도록 돕는다. 이 저장소는 어느 컴포넌트에서도 접근 및 제어가 가능하다. 그 중 대표적인 라이브러리가 바로 zustand와 redux이..

훅(hook) 이란?리액트 16.8버전부터 새로 도입된 개념이다. hook은 class 를 사용하지 않고도 리액트의 기능을 사용할 수 있게 도와준다.기존 리액트의 컴포넌트는 클래스를 이용해 상태 관리를 했었지만 훅이 도입된 이후 보다 간편하게 상태 관리를 할 수 있게 되었다. 기존 리액트의 상태관리class Counter extends Component { // 상태 초기화 state = { count: 0, }; // 버튼 클릭 시 호출되는 핸들러 메서드 handleClick= () => { this.setState({ count: this.state.count + 1 }); // 상태 업데이트 }; render() { return ( 현재 카운트:..

자바스크립트는 ES6 이전과 이후로 나뉜다. ES6이후 JS의 많은 부분이 바뀌었는데 함수 부분도 마찬가지이다. 먼저 이전의 함수는 생성자함수와 일반 함수의 구분이 없었다. 따라서 모든 함수는 일반함수로서 호출할 수 있으며 생성자 함수로서 new 키워드를 사용해 호출할 수 있었다. 이러한 유동성은 성능면에서도 큰 문제를 갖는다. 바로 콜백함수 또는 객체에 바인딩 된 함수 모두 cunstructor를 갖는다는 점이다. 이는 불필요한 프로토타입 객체를 생성하게 되며, 함수의 명확한 구분없이 사용되는 점은 코드의 가독성에도 큰 영향을 미친다.  따라서 ES6 이후 함수의 사용 목적에 따라 세가지 종류로 나누었다. 구분constructorprototypesuperarguments일반함수OOXO메서드XXOO화살표..

버그를 해결했다. 원인을 찾아보니 크롬을 실행할 때 음원이 나오지 않아도 AudioContext 객체를 생성할 수 없다. 그래서 즉시 실행되던 함수를 묶어 playMusic 에서 실행하도록 바꾸었더니 해결됐다.  다음으로 프로그래스 바를 만들었다. 내용을 요약하자면 오디오 timeupdate 이벤트 리스너를 이용해 내부 함수가 계속해서 실행될 수 있게 했다. 그 뒤로는 현재길이 / 전체길이 를 백분위로 환산한 뒤 프로그래스 바의 width 길이에 대입했다. 재생 시간에 따른 프로그래스 바 크기 조절실행코드 audio.addEventListener("timeupdate", (e) => { // console.log(e); // 프로그래스 바 진행 리스너 const currentTime =..

타입별 메서드숫자형(number)e의 사용숫자를 입력할 때 100000000과 같은 큰 수를 입력해야 한다면 0을 치는게 헷갈릴 수 있다. 따라서 e를 쓰고 그 뒤에 0의 개수를 입력하면 된다.const billion = 1000000000;const _billion = 1e9Math 함수삼각함수Math.sin(radian) : 라디안의 사인값을 반환하는 함수이다.Math.cos(radian) : 라디안의 코사인값을 반환하는 함수이다.최대/최소Math.max( num ) : 인수들 중 가장 큰 값을 반환하는 함수이다.Math.min( num ) : 인수들 중 가장 작은값을 반환하는 함수이다.문자형 (string)문자는 Immutable (불변) 이다. 따라서 문자열을 수정하기 위해서는 문자를 슬라이싱해 ..