728x90 항해 중/8-13주차 실전 프로젝트28 [실전 프로젝트] 페이지마다 컴포넌트 나누기 1. 첫 로그인 사용자에게 알림 설정 유도하는 팝업(PushNotificationPop.js), 마이페이지에 알림 설정 수정하는 페이지(MyPageNotification) 안에 들어가는 글자나 토글(Toggle), 드롭다운(DropDown)이 공통적인 부분이라서 src/componetns/Notification.js에 새로운 컴포넌트로 만듬 2. AsmrPopUp 컴포넌트 나누기 뒤로가기 (element) 음원 4개 : src/components/SoundTrack.js를 만들었다. 믹스 저장버튼 (element) 믹스 제목 팝업 3. 믹스 제목 팝업 만들면서 src/redux/modules/asmr.js에 믹스명과 선택한 음원 정보들을 DB에 보내줘야 해서 겸사겸사 apis.js URL 바뀐 거 수정하.. 2022. 1. 11. [실전 프로젝트] PWA를 활용한 Push 알림 구현 1. Asmr 페이지, AsmrPopUp 페이지 수정 음원 최대 3개에서 최대 4개까지로 변경 AsmrPopUp 페이지에 예외 처리 추가 (새로고침 시 Asmr 페이지로 이동) 음원 삭제 시 가장 처음에 있는 음원이 적용 안되는 문제 해결 (따로따로 있던 delete 함수를 하나의 함수에 담고, 조건문을 사용하여 조건에 맞으면 삭제 되도록 수정했다.) CSS 수정 - Asmr.js → Inline Style 부분들 styled-component로 변경 - AsmrPopUp.js → Inline Style 부분들 styled-component로 변경 + 기록이 없습니다. 변경 2. service-worker 적용 확인 - 1차 시도 2022.01.09 - [더 알아보기/기능] - PWA를 사용하여 push.. 2022. 1. 10. [실전 프로젝트] animation 사용해서 Spinner 만들기(styled-component 자식 요소 선택하는 방법) 스피너(Spinner)를 구현 했더니 → 로딩 이미지가 필요 해졌고 → 로딩 이미지만 있으면 정적으로 보여서 심심하기 때문에 → 동적으로 바꿔주기 위해서 애니메이션을 추가했다. 구현 과정 스피너 틀을 잡아 주었다. import React from "react"; import styled from "styled-components"; const Test = (props) => { return ( 스피너입니다. ); }; const Outter = styled.div` height: ${(props) => props.height}; background-image: url(${SpinnerImage}); background-repeat: no-repeat; z-index: 1000000; `; export d.. 2022. 1. 7. [실전 프로젝트] CSS 작업 + 폰트 적용 오늘 한 일 1) 첫 로그인 시 알림 설정 팝업창 CSS 구현 2) 로그인 유도 팝업창 CSS 구현 3) 로그인 / 회원가입 CSS 구현 4) 드롭다운 기능 수정 5) 구글 폰트에서 폰트 검색 및 import 해오기 // src/static/styles/GlobarStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap'); @import url('https://fonts.googleapis.com/.. 2022. 1. 3. [실전 프로젝트] Swiper 기능 만들기 아래 사이트를 참고하여 Swiper 기능을 만들었습니다. https://developer0809.tistory.com/94 [#. React] React에서 swiper 사용하기, 배너 슬라이드 사용하기 html에서 swiper 사용하는 것과 조금 다르기 때문에 React에서도 swiper를 사용해 보려고 한다 swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware a.. developer0809.tistory.com 실행 화면 구현 코드 npm install swiper --save --legacy-peer-deps // src/components/Swiper.js .. 2022. 1. 2. [실전 프로젝트] 드롭다운 기능 만들기 아래 사이트를 참고하여 드롭다운 기능을 만들었습니다. https://velog.io/@tunakim/select-%ED%83%9C%EA%B7%B8-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EA%B3%A0-%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4-%EA%B5%AC%ED%98%84-ft.-React select 태그 사용하지 않고 드롭다운 구현 (ft. React) select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다.드롭다운 기본 기능.드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, velog.io 구현 코드 (초기 코드) 더보기.. 2022. 1. 2. [실전 프로젝트] 로그인 전 다이어리 페이지 접근 시 팝업창 띄우기 / 음원 활성화/비활성화 구현 오늘 한 일 1. 로그인 유도 팝업창 어떤 상황에서 띄울 지 아침 회의에서 정함 2. 로그인 전에 다이어리 페이지 접근 하려고 하면 로그인 유도 팝업창 띄우기 3. 음원 활성화 시 play, 비활성화 시 pause 되도록 구현 코드 구현 1) 로그인 전에 다이어리 페이지 접근 하려고 하면 로그인 유도 팝업창 띄우기 → 첫 시도에는 모달창이 켜지는 데 그 뒤에는 켜지지 않음 (Modal이 false가 되어서 안켜지는 것 같음) → RequireLogin.js와 Navigation.js 코드 수정 (미니 프로젝트 할 때 메인 → 로그인 팝업 띄울 때 상황이랑 똑같아서 미니 프로젝트 코드를 참고했다.) 더보기 더보기 // src/components/Navigation.js import React from "r.. 2021. 12. 31. [실전 프로젝트] 음원 재생 시 pause()가 동작 안하는 문제 실전 프로젝트에서 음원이 활성화 되면 음원이 재생 되고(play), 음원이 비활성화 되면 음원이 정지(pause) 되어야 해서 아래와 같이 코드를 작성 했습니다. // 음원 재생 여부 const playBack = (status, asmrUrl) => { const url = document.getElementById(asmrUrl); const audio = new Audio(audioUrl1); // Audio 객체를 생성해서 음악을 재생한다. if (status === "play") { audio.loop = true; // 반복재생 여부 audio.volume = 0.5; // 볼륨 audio.play(); // 음원 재생 } else if (status === "pause") { audio.pa.. 2021. 12. 30. [실전 프로젝트] ASMR 페이지 구현 오늘 한 일 카테고리별로 해당 카테고리에 맞는 음원 출력 각 음원을 눌렀을 때 활성화 되면서 최대 3개까지 선택 가능 활성화된 음원을 다시 누르면 비활성화 시키기 음원 하나라도 활성화 되면 음량 조절 버튼 나오기 음원 하나라도 활성화 되면 음원 play 되도록 기능 구현 1. Asmr.js 페이지에서 각 카테고리를 누를 때마다 활성화/비활성화 설정 2. 음원 선택하면 활성화 / 비활성화 구현 + 3개까지만 선택 가능 const select = (categoryIdx, asmrUrl) => { if (play.includes(asmrUrl)) { // 비활성화 let arr = [...play]; arr = arr.filter((item) => { if (asmrUrl !== item) { return i.. 2021. 12. 30. 이전 1 2 3 4 다음 728x90
