프로그래밍 잡동사니

Kakao Developers에서 '내 어플리케이션 > 추가 > 플랫폼' + 요약 정보에서 JavaScript 키를 확인해주자 [index.html] index.html의 head에서 Kakao SDK를 불러온다 [API/Share/initialize.js] const { Kakao } = window; export default function initialize() { Kakao.init('JavaScript 키'); } 초기화는 이렇게 하나의 모듈로 빼서 관리하면 좋다 * JavaScript 키는 보안을 위해 비공개 파일에서 import하도록 변경할 필요가 있다 [App.js] import initialize from './API/Share/initialize'; export default func..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

클래스형 컴포넌트에서 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 파일 생성하고 다..