Summary 1. 프로젝트에 Firebase 설치 yarn add firebase 2. Firebase 연동 코드 작성 ( 5단계) import firbase from 'firebase'; // 1. firebase import const firebaseConfig = { // 2. firebase api 키값 선언 apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, }; const firebaseApp = firebase.initializeApp(firebaseConfig)..

다양한 곳에 동일한 정보가 분산되어 있을 때 한 곳의 정보를 업데이트하게 될 경우 props를 통해 전달해주는 방법은 데이터의 위치가 가깝다면 편리하지만 프로젝트 크기가 커진다면 번거로운 작업이 될 수 밖에 없다. 그렇다면 업데이트 사항을 props로 전달해주는 방법 말고 다른 방식은 뭐가 있을까? redux? context? mobx은 또 무엇일까 Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org 리덕스 공식문서에 접속하면 더 다양한 정보를 살펴볼 수 있으며 리덕스를 사용하기 위해선 사전 설치 작업이 필요하다. 1. 터미..

Summary 1. React 마크다운 에디터 설치 yarn add @uiw/react-md-editor 2. Editor 작성 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const Editor = (props) => { return ( ) } export default Editor; 3. 마크다운 뷰 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const NoticeView = (props) => { return ( ) } export default NoticeView; Result - 에디터 작성 화면 - 마크다운 적용된 뷰 화면 📝 기울기, 굵기, 이미지 등 적용 사항 정상 동작 확인 ✔️ CODE 설명 'r..

Summary 1. js 코드 function handleScroll() { const elements = document.querySelectorAll('.on-screen'); elements.forEach(element => { if ( element.getBoundingClientRect().y > window.innerHeight ) { // 각 요소의 위치와 스크린 높이 비교 // css 스타일에 변화 적용 element.style.opacity = "0"; element.style.transform = 'translateY(70px)'; } else { element.style.opacity = "1"; element.style.transform = 'translateY(0px)'; } })..

스크롤을 내렸을 때 내가 원하는 위치로 조정되는 부드러운 사용성을 경험해 봤을 것이다. 이것은 간단히 css을 활용해 구현이 가능하며 이를 snap scroll이라 부른다. ( 스냅 스크롤 ) snap scroll 모듈을 사용하지 않으면 사용자가 직접 스크롤을 내렸을 때 화면 컨텐츠가 개발자가 생각했던 위치에 정확히 오지 않거나, 화면의 위치를 계속 측정하면서 스크롤을 특정 위치로 옮기려할 경우 많은 js 코드가 소모되기 때문에 snap scroll css을 활용하면 스크롤 조작을 편리하게 사용할 수 있으며, 정확한 정보전달 및 유저의 사용성 향상에 도움된다. Summary 1. 부모와 자식 요소의 height을 동일하게 설정 2. 부모 엘리먼트 css 설정 overflow-y : scroll ; scr..

결 론 ::-webkit-scrollbar { height: 0px; width: 5px; } ::-webkit-scrollbar-thumb { background-color: rgb(170, 165, 165); border-radius: 30px; } 👀 Safari / Chrome 환경에서 동작하는 스크롤은 ::-webkit-scrollbar 을 이용해 CSS 조절이 가능하다. 사진은 CSS를 적용하지 않은 기본 스크롤바 화면으로, 간단한 css 적용을 통해 날씬이로 거듭날 수 있다. Result See the Pen by wkddkdud (@angpeng) on CodePen. 1. ::-webkit-scrollbar _ 스크롤바 전체 영역 조절 ::-webkit-scrollbar { height:..