항해 중267 [실전 프로젝트] :hover 이벤트 발생 시 형제 요소 선택해서 스타일 변경하기 playList 아이콘에 마우스를 올렸을 때 tolltip처럼 옆에 설명 같은 이미지가 나오도록 구현 하기 위해서 :hover를 사용 하였고, playList icon과 playListText icon이 sibling(형제) 관계이기 때문에 형제 선택자를 사용하여 구현하였다. (구글에는 "hover 시 다른 태그 css 적용"이라고 검색했다.) 구현 코드 const HoverImage = styled.img` width: 24px; height: 24px; src: ${(props) => props.src}; position: ${(props) => props.position}; right: ${(props) => props.right}; cursor: pointer; &:hover ~ .playList.. 2022. 1. 12. [TIL] 61일차 CSS는 많이 어렵구나..... 많이 배웠다.... 2022. 1. 11. [실전 프로젝트] 페이지마다 컴포넌트 나누기 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. [TIL] 60일차 조개 껍질 묶어 인생은 누운 듯 앉기 2022. 1. 10. [실전 프로젝트] 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. [WIL] 10주차 중간 발표 때까지 프로젝트를 어느정도 잘 정리해서 발표를 하고 싶어서 무리를 했더니 몸에서 반응을 하기 시작한 것 같다. 병원 다녀오고, 누워 있다가 프로젝트 진행 하면서 CSS가 많이 부족하다는 생각이 들어서 기초 강의 들으면서 다잡고, CSS 강의 어떤 거 들으면 좋을 지 찾아보고,, Service Worker나 PWA, 푸쉬 알림 관련해서 자료조사도 좀 해보고 이제 일주일? 정도 지나면 배포하고 마케팅 시작해야 하는 데 사용자가 많았으면 좋겠다.. 정말 애정을 가지고 열심히 진행한 프로젝트인 만큼 많은 관심 받았으면 좋겠다아아ㅏ 제발 정말 내가 필요로 하고 내가 잘 할 수 있는 회사에 들어가고 싶다는 욕심이 생기는 것 같다. 얼마 안남았다 2022. 1. 9. [TIL] 59일차 이번 발표를 통해 생각 해봐야 하는 부분 (1) 향후 3주간 프로젝트의 어떤 부분을 보강할 수 있을지, (2) 실제 면접/발표회에서는 어떻게 더 좋은 답변을 낼 수 있을지를 스스로 생각해보는 것이 핵심 중간 발표 자료 질문사항 1.PWA를 구성한이유 2.PWA를 적용을 하셨다면 어떤식으로 적용했나요? 3.PWA의 서비스워커도 추가구성으로 주었는지? 4.다이어리에 대해서 오픈소스 검토를 해보셨는지? 5.모바일쪽 구성으로 하신건데 모바일웹으로 구성하실때 테스트할때 환경은 어떻게 구성을 했는지? 6.음원이나 이미지를 public 으로 저장했을수도 있는데 왜 백엔드쪽으로 요청해서 받게 결정했는지? 피드백 1. PWA를 활용하게 된 선정 이유, 어디에 활용 했는 지에 대한 부분이 약했다 , pwa사용점을 좀더 확.. 2022. 1. 8. [TIL] 58일차 1. 푸시 알림 알아보기 - 해결하지 못해서 중간 발표에서는 보여드리지 못할 것 갓다. 2. 반응형 CSS 마무리 3. https로 배포하는 방법 찾아보고 적용 해보기 + 서버 배포하기 (프론트랑 백엔드랑 프로토콜을 맞춰 줘야 한다.) https://app.netlify.com/signup/start/connect Netlify App app.netlify.com 4. 중간 발표 준비 (PPT or Notion, 기술 스택 정리, 코드 리뷰 등) 5. (토요일) 중간 발표에서는 스택 질문 답변 및 서기를 맡아서 진행 할 예정 2022. 1. 7. [실전 프로젝트] 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. 이전 1 2 3 4 5 6 7 8 ··· 30 다음 728x90
