리액트 : 아웃소싱 프로젝트 기획
1. Code convention 2. Github Rules 3. 기획 포인트 4. 와이어프레임 존중하며 버텨보기~!~!
- TIL :: Today I Learned
- · 2023. 12. 5.
import React, {useEffect} from 'react'; import styled from 'styled-components'; import WriteNewFix from './WriteNewFix'; import {useDispatch, useSelector} from 'react-redux'; import {showPublicModal} from '../../redux/modules/publicModalSlice'; import PublicModal from './PublicModal'; function Modal() { const publicModal = useSelector(state => state.publicModal); const dispatch = useDispatch(); ..
새 글을 추가시, 파이어베이스에 데이터는 저장되는데 홈 화면에서 새로고침을 해야 데이터가 보이는 상황 1) WriteNewFix.jsx - dispatch(add(newData)); 새글 작성시 데이터 추가하는 부분에서 dispatch를 사용해서 리덕스로 상태값 변경요청 2) fixList.js import {createSlice} from '@reduxjs/toolkit'; const initialState = []; const listSlice = createSlice({ name: 'fixList', initialState, reducers: { setList: (state, action) => { return action.payload; }, addList: (state, action) => { ..
https://apis.map.kakao.com/web/ 1. 토큰발급 후 : Guide > 지도를 띄우는 코드 작성 > 전체 코드 확인 ( 필요에 맞게 수정해서 사용) 1) sript태그는 index.html 부분에 추가하였음 const {kakao} = window; 2) kakao 객체를 사용하기 위해, window 객체로부터 스크립트에서 로드한 kakao api를 가져와야하기에 상단에 작성 useEffect(() => { const container = document.getElementById('map'); const option = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao...
1. Code convention 2. Github Rules 3. 기획 포인트 4. 와이어프레임 존중하며 버텨보기~!~!
#문제 ▶ 이미지를 첨부하고 [등록하기] 버튼을 누르면 fireStorage에 사진을 저장 & FireStore DB에 url 저장 기능 구현을 하고 싶은데 FireStore DB에 image_url이 저장되기 전에, 동기 부분이 완료되서 image_url 저장이 안됨. #해결 ▶ FireStore에 데이터가 저장되기 전에 이미지 파일 업로드가 우선 실행되도록 위치로 조정 ▶ 이미지 저장이 끝나고 FireStore에 데이터 저장되도록 async + await 코드로 수정 [Inputform.jsx] //이미지 파일 업로드 const handleUpload = async () => { const imageRef = ref(storage, `${auth.currentUser.uid}/${selectedFil..
사용한 component 1) InputformLayout.jsx : 메인페이지 레이아웃 > 모달팝업 실행 2) Modal.jsx : 모달 팝업 3) Inputform.jsx : 모달팝업 내부의 데이터 내용 Div태그 contentEditable : 속성을 true를 사용시 글 + 이미지 작성 가능 1. InputformLayout.jsx : 메인페이지 레이아웃 > 모달팝업 실행 import React, { useState } from 'react'; import Modal from 'components/UI/Modal'; import styled from 'styled-components'; function InputformLayout() { const [modalOpen, setModalOpen] =..