항해 중/8-13주차 실전 프로젝트28 [실전 프로젝트] history => Context API / useContext [ 피드백 ] history → Context API 전역 음원을 재생 할 때 history에 음원 정보나 audio 객체를 담아서 사용했는 데 history 보다는 Context API를 사용하는 것이 코드도 훨씬 간결 해지고 리펙토링면에서도 좋을 것 같다는 피드백을 받았다. 조건을 바탕으로 history에 담았던 음원 정보들을 Context API와 useContext를 사용하는 것으로 전면 수정했다. 협력사분들께서 말씀 해주신 내용 중에 "사용하시는 도구에 관련된 API가 무엇이 있는 지 살펴보는 게 좋고, React의 버전이 올라가면 새로운 도구가 나왔는 지 살펴보는 것이 좋다."라는 말씀을 남겨 주셨습니다. [ Context API / useContext 사용한 코드 ] Context API를 .. 2022. 1. 28. [실전 프로젝트] lazy, Suspense 페이지가 많다보니 첫 진입 로딩 속도가 느려서 React의 lazy, Suspense를 사용하여 로딩 속도를 개선하기 위해 사용 [ lazy ] React의 lazy는 코드를 분할 하게 해준다. 코드 분할은 앱을 "지연 로딩" 하게 도와주고 앱 사용자들에게 획기적인 성능 향상을 제공합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여 줍니다. React의 lazy는 동적 import()를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환 해야 합니다. lazy 컴포넌트는 반드시 Suspense 컴포넌트 하위에서 렌더링이 되어야 하며, .. 2022. 1. 21. Zzz🌕 항해99 4기를 진행하고 있는 예비 개발자입니다! 저희가 약 두달 동안 열심히 준비한 프로젝트입니다!! 잘 시간인 데 쉽게 잠에 들지 못하시는 분들! 불면증으로 고생하고 계신 분들에게 도움이 될 수 있는 서비스입니다🧚♀ 저희 서비스의 대표 기능 두가지는!! ☝️ 최대 4개의 음원을 선택 하시고, 음원 조절도 해보시면서 내 취향에 꼭 맞는 ASMR 커스텀 할 수 있습니다! ✌ 귀여운 수면 아이콘으로 나의 수면 기분이나 시간을 기록 해보실 수 있습니다😆 설문조사를 통해 피드백, 의견 남겨 주시면 참고하여 더 좋은 서비스로 개선 해나갈 수 있도록 노력하겠습니다! (설문조사 남겨주신 분들 중 총 10분을 추첨해서 기프티콘을 드릴 예정입니다.) 많은 관심 부탁 드립니다🥺 https://zzzapp.co.kr/ 2022. 1. 21. [실전 프로젝트] 플레이 중인 음원 활성화 (setTimeout X) [ 목적 ] 음원 선택(Asmr.js) → 다른 카테고리로 이동(음원 재생 유지) → Asmr.js로 이동 시 사용자가 선택하여 플레이 중인 음원 활성화 시키는 부분에서 useEffect()를 사용하여 블록 안에 document.getElementById() or useRef()를 사용하여 background를 변경 시켜 주려고 함. (예시) React.useEffect(() => { const activeSound = document.getElementById(history.state1); activeSound.style.backgroundColor = "green"; }, []) [ 문제 발생 ] → 해당 태그(요소)를 찾을 수 없다는 오류 발생 [ 해결 ] → setTimeout을 사용하여 DOM .. 2022. 1. 17. [실전 프로젝트] React에서 FCM으로 푸쉬 알림 보내기 2 막 정리 함, 참고 해봤자 도움 X, 멘탈 부셔짐 firebase messaging의 getToken 함수를 사용하여 token 받아오기 → googleApis로 send 요청(axios) 보내기 아래 사이트에서 어떤 HTTP에 요청을 보내야 하는 지, 다운스트링 메세지는 어떤 게 있는 지 참고 할 수 있다. https://firebase.google.com/docs/cloud-messaging/http-server-ref Firebase 클라우드 메시징 HTTP 프로토콜 firebase.ml.naturallanguage.translate firebase.google.com [주의 할 점] JSON 형태로 요청을 보내야 한다. .js 파일에 작성 후 prettier를 이용하다 보니 자동으로 객체 형태가 .. 2022. 1. 15. [실전 프로젝트] React에서 FCM으로 푸쉬 알림 보내기 1 Firebase 시작하기 1. 구글 계정 로그인 후 Firebase 프로젝트 추가하기 2. 웹 프로젝트를 진행 중이기 때문에 버튼을 눌러서 웹 앱에 firebase 추가를 하게 되면 firebaseConfig 값을 확인 할 수 있다. 3. 추가한 앱에서 프로젝트 설정 → 클라우드 메세징 탭에 들어가면 서버 키를 확인 할 수 있다. (만약 백에서 등록 토큰을 준다면 사실 프론트에서는 서버 키를 몰라도 되지만, 나중에 테스트 할 때 쓸 수 있기 때문에 알아두면 좋다. 서버 키의 경우 보안이 중요하기 때문에 사용하게 된다면 환경변수를 통해 git에 올리지 않도록 해야 한다.) React에서 Firebase 설정하기 Firebase 모듈 설치하기 yarn => yarn add firebase npm => npm.. 2022. 1. 15. [실전 프로젝트] 카카오 소셜 로그인 구현 사용자의 접근성을 위해서 (둘러 보기만 하고 싶은 사용자나 굳이 회원가입, 로그인을 번거롭게 하고 싶지 않을 수 있는 사용자들을 고려해 쉽고 간편하게 로그인 할 수 있는 소셜 로그인을 사용했다.) 구글에 react socialLogin react or 리액트 카카오 소셜 로그인 등등의 검색어로 검색을 하였다. [사전 준비] - Kakao Developers(카카오 개발자 도구)에 접속한다. 더보기 더보기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com - 내 애플리케이션 → 애플리케이션 추가하.. 2022. 1. 14. [실전 프로젝트] withRouter(from. react-router-dom) 사용하여 url에 따라 Header 스타일 변경하기 withRouter(from. react-router-dom)이란? 개념 : withRouter 함수는 Higher-order Component로써 라우터(Router)에 의해서 호출된 컴포넌트가 아니어도 match, location, history 객체에 접근 할 수 있도록 해주는 함수입니다! (참고로 history는 match, location과 함께 전달되는 properties 중 하나로 페이지 이탈을 방지 할 때 사용합니다.) 예시 - 라우팅을 하는 컴포넌트가 있고, 그 라우팅된 컴포넌트에서 다른 컴포넌트를 사용 할 때 사용합니다. - 예를 들면 도시의 목록이 있고, 그 도시 목록을 눌렀을 때 아래 다른 컴포넌트가 표시될 필요가 있을 때! - 검색된 결과를 받았을 때 그 결과로 화면에 뿌려야 하는.. 2022. 1. 12. [실전 프로젝트] :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. 이전 1 2 3 4 다음 728x90
