프로그래밍 잡동사니

보호되어 있는 글입니다.

클래스형 컴포넌트에서 Redux payload reducer에 데이터를 제어하는 액션을 추가해 클래스형 컴포넌트에서 호출해보고 payload도 보내보자! [Footer.js] const mapStateToProps = (state) => { return { reduxValue: { ...state.footer }, }; }; 다른 파일에서 받은 서버 데이터가 Redux를 통해 넘어와 reduxValue에 담긴다 * Footer.js는 React Howler 라이브러리 문제로 클래스형 컴포넌트를 사용하기 때문에 useSelector()와 useDispatch()를 사용하지 못한다 ㅜㅜ 1. Footer 리스트 전체 삭제 (payload X) 현재 Footer 리스트는 song 데이터를 map 함수로 뿌려주..

Redux DevTools Chrom Extension인 Redux DevTools를 사용해보자 1. Chrome 웹 스토어에서 Redux DevTools를 검색해 추가해준다 2. 다음 명령어로 프로젝트에 redux-devtools-extension을 설치해준다 $ yarn add redux-devtools-extension 3. index.js에 다음과 같이 추가해준다 import { composeWithDevTools } from 'redux-devtools-extension'; const store = createStore(rootReducer, composeWithDevTools()); ReactDOM.render( , document.getElementById('root') ); 4. 개발자 도..

데이터 Redux로 관리 Redux를 활용해 App.js에서 Footer의 활성화 상태를 임의로 관리해보자! [modules/footer.js] const initialState = { active: true, }; function footer(state = initialState, action) { switch (action.type) { case 'ACTIVE': return { ...state, active: action.active, }; default: return state; } } export default footer; Footer 관련 reducer를 관리하는 파일이다 초기 state를 정의해주고 action에 맞는 payload를 받아와 반환하는 함수를 짜준다 [modules/index..

React Howler 라이브러리를 사용할 때, hover 상태에서 재생바의 넓이도 넓어지게 해보자 React Howler 예제🔽 audio player ... codepen.io 기존 css 값을 조절해봤을 때, 결과는 다음과 같다 1. seek_controller & seek-slider & audioState 셋의 height 값을 모두 조절하면 초록색 재생바가 넓어짐 (동그라미 중앙) 2. seek-slider::-webkit-slider-runnable-track height 값을 조절하면 배경 재생바가 위로 넓어짐 (동그라미 최상단으로 올라감) 3. seek-slider::-webkit-slider-thumb margin-top을 줘서 최상단으로 올라간 동그라미가 중앙에 있는 것처럼 보이게 했..

보호되어 있는 글입니다.

스터디룸 예약 서비스인 'hoops' 개발을 진행하던 중, 예약 시간 선택을 프론트에서 일부 제어할 수 있겠냐는 요청을 받았다 베타테스트는 우선 당일 예약만 진행하기로 했기에, 나는 '사전에 날짜 선택을 위해 구축했던 React Datepicker 라이브러리를 개조해서 시간 선택 알고리즘을 적용할 수 있지 않을까?' 라고 생각해 바로 작업에 들어갔다 조건은 다음과 같다 - 예약 시간은 9:30-5:30 사이에 결정 (임시) - 사용 시간은 최소 30분에서 최대 2시간 * 즉, 5:00 시작이라면 5:30까지 사용 가능 정리하면, 종료 시간의 최대값은 시작 시간의 2시간 이후로 하되, 5:30을 넘어가면 안된다 React Datepicker crafted by HackerOne reactdatepicker..

해당 글은 hoops 프로젝트 테스팅을 위해 클라이언트를 서버와 연동하는 과정을 기록했습니다. 프론트엔드 React/Apollo GraphQL, 백엔드 Node.js/Express/PostgreSQL을 활용하는 프로젝트로, 변수가 많은 연동 작업인 만큼 해당 글의 방식은 참고만 하되, 항상 옳은 방법이 아님을 미리 알려드립니다. DB 생성 1. pgAdmin4(PostgreSQL)를 실행하고 비밀번호 입력 후, Servers > Databases 우클릭 2. Create > Database > 아무 이름 입력 > Save해서 DB 생성 백엔드 Repository 연동 1. 백엔드 repository를 최신 상태로 git clone 해주고 IDE로 열어준다 2. 가장 상위 폴더에 .env 파일 생성하고 다..

Create React App create-react-app은 React에 개발 서버 접근, 자동 새로고침 및 다양한 사전 설정을 제공 node.js 설치 및 create-react-app 생성 -> src에서 index.js, App.js만 남기고 삭제, 내용 정리 ReactDOM.render( , document.getElementById('root') ); 마찬가지로 index.js에서 index.html의 root에 App 컴포넌트를 렌더링하고 있다 import PropTypes from "prop-types"; import styles from "./Button.module.css"; function Button({ text }) { return {text}; } Button.propTypes ..

State Counter 버튼을 누르면 counter가 하나씩 증가하는 페이지를 구성하는 경우, 첫 렌더링 이후 계속해서 값을 띄우기 위해 render() 함수를 만들어 반복 실행했다 여기저기서 render() 함수를 호출하는 것은 매우 비효율적인데,, useState를 활용하면 데이터와, 데이터의 업데이트 함수를 바로 생성할 수 있다 이전 값을 활용해 State를 변경하려면 setState()함수에 직접 넣어줘도 되지만,, setCounter(counter+1); State가 다른 곳에서 변경될 수도 있기 때문에 current 함수로 처리하는 것이 안전하다! setCounter((current) => current + 1); Super Converter JSX 상에서는 일부 HTML 코드를 변환해 사용..