프로그래밍 잡동사니

보호되어 있는 글입니다.

클래스형 컴포넌트에서 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을 줘서 최상단으로 올라간 동그라미가 중앙에 있는 것처럼 보이게 했..

인턴을 하면서 Git 협업에 필요한 커밋 메시지 컨벤션을 정리해보았다 메시지 구조 3가지 파트로 나누고 각 파트는 빈 줄로 구분 type: subject body (옵션) footer (옵션) type : 커밋한 목적 subject 최대 50 글자, 마침표 X 영문으로 표기하는 경우 동사를 가장 앞에 두고 첫글자 = 대문자 body : 긴 설명이 필요한 경우에 작성 어떻게 했는지가 아니라, 무엇을 왜 했는지 작성 최대 75 글자 footer : issue tracker ID를 명시하고 싶은 경우에 작성 "유형: #이슈 번호" 형식 사용 여러 개의 이슈 번호 적을 땐 쉼표 구분 Fixes: 이슈 수정중 (아직 해결되지 않은 경우) Resolves: 이슈를 해결했을 때 사용 Ref: 참고할 이슈가 있을 때 ..

보호되어 있는 글입니다.

지난 12월 17일에 데뷔한 버츄얼 걸그룹, ‘이세계 아이돌’의 데뷔 음반 RE:WIND가 벅스 실시간 차트 1위 및 주요 음원 차트에서 상위권을 차지하며 VR 업계의 이목을 집중시켰다. 이세계 아이돌은 지난 여름, 유튜브 크리에이터 우왁굳의 버츄얼 아이돌 프로젝트에서 높은 경쟁률을 뚫고 합격한 왁 엔터테이먼트 소속 6인조 걸그룹으로, 오디션부터 활동까지 가상에서 진행된다는 점에서 데뷔 전부터 많은 관심을 받았다. 🔽 더보기 메타버스와 만난 걸그룹…’이세계 아이돌’ 인기 - 코딩월드뉴스 지난 12월 17일에 데뷔한 버츄얼 걸그룹, ‘이세계 아이돌’의 데뷔 음반 RE:WIND가 벅스 실시간 차트 1위 및 주요 음원 차트에서 상위권을 차지하며 VR 업계의 이목을 집중시켰다. 이세계 아이돌은 www.codin..

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

장애와 회복 장애란 시스템이 정해진 명세대로 작동하지 않는 상태이며, 장애의 원인으로는 ‘하드웨어 결함 / 소프트웨어의 논리오류 / 사람의 실수’ 등이 있다 트랜잭션 장애: 논리적 오류 입력 데이터의 불량 시스탬 장애: 하드웨어의 오동작 미디어 장애: 디스크 헤드 붕괴 또는 고장 회복(Recovery)이란 DB를 장애 발생 이전의 일관된 상태로 복원시키는 것으로, 일관된 상태(consistent state)란 오류가 없고 DB 내용에 모순이 없는 상태이다. 회복의 기본 원리는 데이터를 중복(redundancy)으로 기록하는 것이며, 다른 저장장치에 그대로 복제는 덤프(dump) 방식이나 데이터 파일의 변경된 부분만 별도의 파일에 기록하는 로그(log, journal) 방식을 사용할 수 있다 회복을 위한 ..