[상태관리] Zustand란?
·
Front end/React
리액트는 컴포넌트 기반 아키텍처를 따르기 때문에 각각의 컴포넌트는 다른 컴포넌트의 상태에 접근할 수 없다. 하지만 부모 - 자식 관계는 props를 통해 상태를 전달할 수 있다. 리액트는 "단방향 데이터 흐름" 을 따르기 때문에 부모에서 자식으로 데이터 전달이 가능하지만, 자식에서 부모로 데이터 전달은 불가능하다. 사실 부모에서 콜백함수를 전달한다던지, 상태를 끌어올리는 방법을 통해 어느 정도 구현이 가능하지만 이 또한 컴포넌트가 많아진다면 드릴링의 문제가 생길 수 있다. 그래서 상태관리 라이브러리가 탄생했다. 상태관리 라이브러리는 전역의 저장소에서 상태를 관리할 수 있도록 돕는다. 이 저장소는 어느 컴포넌트에서도 접근 및 제어가 가능하다. 그 중 대표적인 라이브러리가 바로 zustand와 redux이..
React Hook 정리 (useState, useEffect)
·
Front end/React
훅(hook) 이란?리액트 16.8버전부터 새로 도입된 개념이다. hook은 class 를 사용하지 않고도 리액트의 기능을 사용할 수 있게 도와준다.기존 리액트의 컴포넌트는 클래스를 이용해 상태 관리를 했었지만 훅이 도입된 이후 보다 간편하게 상태 관리를 할 수 있게 되었다. 기존 리액트의 상태관리class Counter extends Component { // 상태 초기화 state = { count: 0, }; // 버튼 클릭 시 호출되는 핸들러 메서드 handleClick= () => { this.setState({ count: this.state.count + 1 }); // 상태 업데이트 }; render() { return ( 현재 카운트:..
ES6 함수의 추가 기능
·
Front end/JavaScript
자바스크립트는 ES6 이전과 이후로 나뉜다. ES6이후 JS의 많은 부분이 바뀌었는데 함수 부분도 마찬가지이다. 먼저 이전의 함수는 생성자함수와 일반 함수의 구분이 없었다. 따라서 모든 함수는 일반함수로서 호출할 수 있으며 생성자 함수로서 new 키워드를 사용해 호출할 수 있었다. 이러한 유동성은 성능면에서도 큰 문제를 갖는다. 바로 콜백함수 또는 객체에 바인딩 된 함수 모두 cunstructor를 갖는다는 점이다. 이는 불필요한 프로토타입 객체를 생성하게 되며, 함수의 명확한 구분없이 사용되는 점은 코드의 가독성에도 큰 영향을 미친다.  따라서 ES6 이후 함수의 사용 목적에 따라 세가지 종류로 나누었다. 구분constructorprototypesuperarguments일반함수OOXO메서드XXOO화살표..
[JavaScript] 음악 플레이리스트 프로그래스바 제작 (3)
·
Front end/JavaScript
버그를 해결했다. 원인을 찾아보니 크롬을 실행할 때 음원이 나오지 않아도 AudioContext 객체를 생성할 수 없다. 그래서 즉시 실행되던 함수를 묶어 playMusic 에서 실행하도록 바꾸었더니 해결됐다.  다음으로 프로그래스 바를 만들었다. 내용을 요약하자면 오디오 timeupdate 이벤트 리스너를 이용해 내부 함수가 계속해서 실행될 수 있게 했다. 그 뒤로는 현재길이 / 전체길이 를 백분위로 환산한 뒤 프로그래스 바의 width 길이에 대입했다. 재생 시간에 따른 프로그래스 바 크기 조절실행코드 audio.addEventListener("timeupdate", (e) => { // console.log(e); // 프로그래스 바 진행 리스너 const currentTime =..
[JavaScript] 타입별 메서드와 제너레이트
·
Front end/JavaScript
타입별 메서드숫자형(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 (불변) 이다. 따라서 문자열을 수정하기 위해서는 문자를 슬라이싱해 ..
[JavaScript] 클로저 (closure)란 무엇일까
·
Front end/JavaScript
모듈화의 핵심은 "응집도를 높히고 결합도를 낮춘다" 이다. 이 내용을 잘 생각하며 카운트를 증가시키는 함수를 만들어 본다면 어떻게 코드를 작성할 수 있을까let cnt = 0;function count(){ return cnt ++}뭐 대충 이런식으로 작성할 수 있을 것이다. 이 때 cnt 변수가 함수 외부에 선언되었다. 이렇게되면 어떤 곳에서도 접근이 가능해 위험하고, count 함수를 다른곳으로 옮겨야 할때 항상 저 cnt 변수를 같이 가지고 가야하는 문제가 생긴다. 또 다른 경우에는 코드 200줄 아래에서 누군가가 cnt라는 변수를 사용한다면 에러가 날 수도 있다.  이 때 cnt라는 변수를 count 함수 내부에 선언할 수만 있다면 위 문제 모두 해결된다. 그렇지만 count 함수를 호출할 때마다..