프로그래밍 잡동사니

학교 현장실습(인턴십)을 마무리하며 두 달 간의 경험을 KPT 방법론으로 정리해보자 Keep: 만족했고, 앞으로 지속하고 싶은 부분 Problem: 개선이 필요하거나 아쉬웠던 점 Try: Problem에 대한 해결로 시도해볼 점 다양한 회고 방법론🔽 [주간 인프런 #41] 개발자의 공유 문화 이모저모 (2) 회고 문화 - 인프런 | 스토리 기록도 점검도 셀프! 개발자는 왜 회고를 할까요? #오픈소스 #기술블로그 #회고문화 바쁘게 일하고 공부하다 보면 시간이 훌쩍 지나있기 마련이죠. 그렇지만 모든 일을 다 기억할 수는 없는 www.inflearn.com Keep 현업에서의 협업 방식을 체험했다 코드 통일성을 높여주는 익스텐션이나 커밋 컨벤션, 노션을 통한 업무 공유 등 프로젝트 관리에 있어 새롭게 배워가는..

웹에서 Progress Bar를 구현하는 방식은 아주 다양하다 순수 HTML / HTML5의 progress 태그 / SVG / 외부 라이브러리 등.. 이 중에 커스텀 제약이 없고 React에서 값 조절이 용이한 HTML5의 progress 태그를 사용해보자! 다양한 Progress Bar 예제🔽 progressbar by html, html5, svg ... codepen.io 위 예제에서 볼 수 있듯 태그에 JavaScript 함수로 애니메이션을 구현할 수 있다 [Compose.js] const [progress, setProgress] = useState(0); const Progress = () => { return ( ); }; 레이아웃을 만들고 진행률을 나타낼 progress를 선언해준다 [C..

특정 조건에서 잠깐 나타났다가 사라지는 토스트 메시지를 React로 구현해보자 [ToastMessage.js] import './ToastMessage.css'; export const ToastMessage = (props) => { return ( {props.text} ); }; [ToastMessage.css] .toast_container { position: fixed; z-index: 99; top: 75%; left: 50%; transform: translate(-50%, -50%); width: 24rem; height: 2.625rem; border-radius: 10px; box-shadow: 0 0 15px 0 var(--black-40); background-color: #323..

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