삐제제의 개발 노트

https://pjj186.github.io/genshinplayer/#/ Genshin Music pjj186.github.io 각 캐릭터의 테마곡이 나오는 뮤직플레이어에요! 리액트를 사용했고 이미지나 음악파일은 파이어베이스 저장소를 활용했어요! 쉬엄쉬엄해서 만드는데 한 일주일정도 걸린것같아요! 일단은 캐릭터 다섯개 정도로 구성했지만 나중에 다시보시면 더 추가되어 있을수도 있어요! PC에서 크롬브라우저로 보는게 가장 좋아요! 모바일로 링크를 들어가도 작동은하지만, 작동이 안되는것들도 있더라구요.. 카카오톡에서 링크타면 나오는 브라우저에서는 잘 동작하지만, 네이버앱에서는 시작버튼 - 빨리감기 - 시작버튼 두번을 눌러야 음악이 나와요. 그래서 처음부터 들으려면 다시 뒤로감기 버튼을 눌러야하는 번거로움이 있..

useCallback 은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하게 되는데, 이 Hook 을 사용하면 만들어놨던 함수를 재 사용 할 수 있다. 이게 무슨 의미나면.. 내가 제대로 이해를 한 지 모르겠는데 보통 우리가 일반적으로 생성하는 함수는, 컴포넌트가 렌더링 될 때마다 새롭게 다시 생성된다고한다. 즉 똑같은 기능을 하지만 다시 렌더링 할때마다 이 함수가 새롭게 다시 생성된다는것. 예를들어 박씨를 가진 사람(함수) 이 있는데 하루가 지날때마다 (리 렌더링) 성씨가 바뀌는 느낌이랄까? 어제는 박씨였는데 오늘은 김씨 내일은 이씨가 될수도 있다는것! 사람인건 똑같은데! 그래서 useCallback을 사용하면 성씨를 그대로 유지할 수 있다는.. 느낌으로 이해..

useReducer는 useState와 비슷하게 함수형 컴포넌트에서 State값을 컨트롤 할때 사용하는 Hook 인데, useState 더 다양한 상황에서 사용 할 수 있다. 그리고 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 그리고 리듀서를 이용하여 상태에 변화를 줄 때는 반드시 불변성을 지켜주어야 한다. 리듀서 함수는 다음과 같이 구성한다. const reducer = (state, action) => { return{}; } }; 이런식으로 리듀서 함수를 작성하고, useReducer 훅을 이용하여 이 함수를 사용한다. 리액트의 기초 예제인 카운터 예제 코드를 보면, import React, { useReducer, useSt..

useRef : Component의 어떤 부분을 선택 할 수 있는 방법. document.getElementByID()를 사용한 것 과 같은 효과 사용법 + 간단한 예제 import React, { useRef, useEffect } from "react"; const App = () => { const input = useRef(); useEffect(() => { setTimeout(() => { input.current.focus(); }, 5000); }, []); return ( Hi ); }; export default App; const 변수이름 = useRef(); . . . 이런식으로 사용한다. document.getElementByID() 와 같은 역할을 한다고 생각하면 편하다. 위 코..

useEffect : ComponentDidMount / ComponentDidUpdate / ComponentWillUnMount 의 역할을 하는 React hook 사용법 : useEffect(function, deps); 첫번째 인자는 리액트가 componentDidmount / componentDidUpdate 됐을때 실행 할 함수 두번째 인자는 dependency 이고 만약 이 두번째 인자가 존재한다면, 인자로 들어온 리스트에 있는 값이 변할때만 function이 실행되도록 활성화 된다. 간단한 예제 import React, { useEffect, useState } from "react"; const App = () => { const sayHello = () => console.log("He..

useState : 함수형 컴포넌트에서, state를 제어 할 수 있게 해주는 React Hook 사용법 : const [value, setValue] = useState(초깃값) value 에는 초깃값이 할당된다. setValue를 이용하여 값을 변경할 수 있다. 간단한 예제 import React, { useState } from "react"; const App = () => { const [value, setValue] = useState(0); const upNumber = () => setValue(value + 1); const downNumber = () => setValue(value - 1); return ( Count {value} UP DOWN ); }; export default ..

React를 접하기 전에, 바닐라 자바스크립트로 코딩했을때는 그냥 HTML태그를 이용해서 form을 만들고, input을 만들어서 정보를 보낼때도 되게 직관적으로 만들었었는데, React로 Input을 제어할 때는 조금 다른 방식으로 제어한다고한다. 그 이유에 대해서 내가 이해한 내용으로는 리액트에서는 변하는 모든 값들을 state에서 제어를 해야하기떄문에? Input 태그의 value 값을 리액트의 state에서 추적하게끔 코드를 짜야한다는것! 그리고 어딘가에 전송 할 땐 그 추적한 text를 보내주는것이다! class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: '' }; this...

Short-circuit AND operator 란? - 삼항 연산자를 단순화 할 수 있는 특별한 경우가 있다. 어떤 컴포넌트를 렌더링하거나 하지 않을때, && 연산자를 삼항 연산자처럼 사용할 수 있다. &&연산자는 다른 프로그래밍 언어도 그렇겠지만, 자바스크립트에서 왼쪽 식을 먼저 평가하고, 그 다음 오른쪽 식을 평가할지 결정한다. 예를 들면 if(true && false) 이런식으로 있으면, 왼쪽이 true니까 오른쪽으로 가서 false를 확인하고, false를 반환하지만 만약에 if(false && true) 이런 경우에는, 오른쪽 식을 평가하기 전에 왼쪽 식이 false 니까 false를 반환한다. 리액트에선 이 삼항 연산자를 이런식으로 사용할 수 도 있다. return ( { showHeader..

리액트로 코딩할때 디자인 패턴의 한 종류! 컨테이너(Container) : data와 state(상태값)를 가지고, api를 호출하고, 기타 모든 로직들을 처리한다. (데이터를 받아와서 처리하는 것을 담당함) 프리젠터(Presenter) : 컨테이너가 처리한 데이터들을 화면에 뿌려주는 역할을 하는 함수형 컴포넌트 프리젠터는 state(상태값), api, 클래스 등을 다루지 않는다. (데이터를 화면에 뿌려주고 스타일을 담당함) 이런식으로 구성함! HomePresenter.js : 스타일 담당, Container.js 로 export HomeContainer.js : 각종 로직 담당, Presenter로 처리한 데이터(prop 등) 넘겨줌, index.js 로 export index.js : 컴포넌트를 폴더..

npm i styled-components 먼저 설치가 필요한 모듈이기때문에 설치를 하고, import 해서 사용한다! 얘를 사용함으로써 얻는 특징은 style이 안에 있는 컴포넌트를 생성 할 수 있게 한다고한다! 이런식으로!! 컴포넌트 내부에서 CSS를 만들고 입힐수 있는것! VSC를 사용하고있다면, extension에서 vscode-styled-components를 검색하면, 자동완성 기능까지 사용할 수 있다! 코드를 보면 어떤식으로 사용하는지 알 수 있다! const (이름) = styled.태그명 `(css코드)`; * css 코드를 감싸고 있는것은 백틱이다. * 이런식으로 사용한다. * Prop값도 줄수 있다고한다. * 이렇게 styled-components 모듈을 이용하면, 클래스네임을 일일히..