삐제제의 개발 노트

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

1. 반응형 웹 사이트 - 다양한 기기에 반응하는 웹사이트 - 사용자 접속 기기/환경에 맞춰 화면의 크기가 자동으로 조절 => 최적화된 화면 레이아웃을 보여주는 사이트 반응형 웹 사이트의 장점과 단점 장점 - 기기의 화면 크기나 해상도에 구애받지 않음 - 화면의 변화에 즉시 반응 - 어느 기기에서든 사이트 주소가 같다. - 유지 관리가 편하다 - 최신 웹 표준을 따른다. 단점 - 예전 브라우저 버전과 호환성에 문제가 있을 수 있다. - 사이트 디자인이 단순하다. 반응형 웹을 구현하는 여러 가지 방법 미디어 쿼리 - 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술 - 각 기기마다 서로 다른 레이아웃을 표시할 수 있음 - 미디어 쿼리는 CSS3 표준 규약에 포함된 기능 CSS 프레임..

const getarray = document.querySelectorAll("button"); console.log(getarray); const buttonclass = document.getElementsByClassName("btn"); console.log(buttonclass); Array.from(buttonclass).forEach((buttonclass) => { buttonclass.addEventListener("click", () => console.log("i have been clicked") ); }); 다음과 같은 코드가 있다. getarray 변수에는 querySelectorAll 이라는 메서드를 사용해서, HTML에 있는 button element 들을 모두 가져오고있다...

오늘은 redux-thunk 라는 미들웨어 사용법에 대해 배웠다. 하지만 이해하는데 엄청난 시간이 걸렸다. (지금도 100% 이해한건 아닌듯..) Thunk을 쓰는 이유는 리액트에서 비동기 작업을 수월하게 처리하기 위해 사용한다고 한다. (비 동기 작업을 처리할 때 가장 많이 사용하는 미들웨어래요.) 우리가 원래 액션 생성자 함수를 만들때, 다음과 같이 객체를 반환하게 만들어야했었는데, const actionCreator = (payload) => ({type:"ACTION", payload}) 이 미들웨어를 쓰면 꼭 객체를 리턴하는게 아니라, 함수를 반환하는 액션 생성자를 디스패치 할 수 있다고한다. (아래의 incrementAsync를 디스패치 할 수있다는 뜻!) 형태는 다음과 같이 작성해야하는듯? ..

웹 애플리케이션을 만들다 보면 시간이 걸리는 작업들이 있다. 예를들면 서버 쪽 데이터가 필요할 때는 Ajax 기법을 이용하여 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 그리고 이 과정에서 해당하는 작업들을 비 동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수가 없다. (한 작업 끝나면 그다음 작업, 또 한 작업 끝나면 그다음 작업 이런 식으로 수행) 하지만 비 동기적으로 작업을 처리한다면 중지 상태가 되지 않기 때문에 동시에 ..

자바스크립트의 배열 메서드 중 splice() 메서드는 삭제, 삽입, 대체의 세 가지 기능을 수행 할 수 있다. - 삭제 : splice 메서드를 이용해 배열 데이터를 원하는 만큼 삭제할 수 있다. splice 메서드의 첫번째 매개변수로, 삭제할 데이터의 인덱스를 넣고, 두번째 매개변수에 첫번째 매개변수에 들어간 인덱스부터 삭제할 개수를 넣는다. let colors = ["red", "green", "blue"] let removed = colors.splice(0,1); // 제거한 데이터의 배열이 반환됨 alert(colors); // green, blue alert(removed); // red - 삽입 : 매개변수를 세 개 이상 넘기면 배열에 데이터를 삽입할 수 있다. 첫번째 매개변수에는 삽입할 ..

자바스크립트에서 함수 매개변수는 다른 언어의 매개변수와는 조금 다르게 동작한다. 자바스크립트에서 함수는 매개변수의 숫자를 따지지도않고, 데이터 타입도 체크하지 않는다. 그렇기때문에 매개변수를 두 개 받도록 함수를 만들어도, 꼭 두개를 넘겨야 하는건 아니다. 한개를 전달하거나, 세개를 전달, 그리고 아예 전달하지 않아도, 이를 에러로 간주하지는 않는다. 이렇게 되는 이유는 자바스크립트에서 함수 매개변수는, 내부적으로 배열로 표현되기 때문이다. 이 배열은 "항상" 함수에 전달되지만, 어떤 값이 들어있는지 체크하지않는다. 빈 배열이 들어와도 상관없고, 필요한 매개변수보다 더 많은 값이 들어와도 딱히 상관이 없다. 자바스크립트에서 함수는 기본적으로 arguments라는 객체를 하나 가지고 있는데, 이 객체를 통..

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

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

import React, { useReducer, useState } from "react"; const initialState = { toDos: [], }; const ADD = "add"; const reducer = (state, action) => { switch (action.type) { case ADD: return { toDos: [...state.toDos, { text: action.payload }] }; default: throw new Error(); } }; const App = () => { const [state, dispatch] = useReducer(reducer, initialState); const [newToDo, setNewToDo] = useState("");..