항해 중267 [TIL] 71일차 1. 마케팅 2. 피드백 검토해서 반영 3. 코드 리뷰 4. 코드 리펙토링 5. 다이어리 페이지 로딩 속도 개선(refactor) (기존) 사용자가 다이어리(diary) 페이지에 접속(접근) 할 때 DB에 오늘 날짜에 해당 년월을 DB에 request로 전달하고, DB에서는 해당 년월의 데이터를 response로 넘겨 주면 resposne를 diaryList라는 redux의 initial state에 덮어 쓰는 코드 → 사용자가 다른 월을 불러오거나 다이어리 페이지에 접근 할 때마다 DB에 데이터를 요청하기 때문에 로딩 속도면에서나 API면에서 비효율적이라고 판단 (변경) DB에서 받아온 response를 diaryList에 덮어 쓰는 게 아니라, 객체 형태로 받아온 response를 추가하는 방식으로 .. 2022. 1. 22. [실전 프로젝트] 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. [TIL] 70일차 배포 → 회원가입/ASMR 수정 → 피드백 검토 → DropDown, 소셜 로그인 로딩 보완 → 소셜 로그인 수정 2022. 1. 21. [TIL] 69일차 곧 배포다 2022. 1. 20. [TIL] 68일차 [오늘 한 일] 1. AWS Amplity를 사용하여 CI/CD 적용하기 2. 클린 코드 공부 및 정리 3. CSS - 선택자의 종류 공부 및 정리 4. React 강의(from 코딩애플) → Node + Express 서버와 React 연동하기 (노션에 정리) 2022. 1. 19. [TIL] 67일차 수료에 가까워질수록 하고 싶은 게 너무 많아져서 고민이다.. 영어 공부하기 (개발을 하다 보니 이름 짓는 것부터 검색, 문서 등등이 영어로 된 게 많아서 영어를 배워 두면 도움이 많이 될 것 같다!) 프로그래밍 언어 공부하기 (무조건 새로운 걸 배우겠다!가 아니라 프론트엔드 개발 로드맵?을 참고해서 도장깨기 하듯이 배워 보고 싶다.) 체력 기르기 (항해99 하면서 뼈저리게 느낀 건데.. 체력이 너무 약하다는 생각이 든다. 몸만 아프더니 이제는 악몽까지 꾸고 있으니) 한꺼번에 다 하겠다는 생각 보다는 계획을 세워서 하나하나씩 해보면 좋을 것 같다! 2022. 1. 18. [TIL] 66일차 1. Asmr.js에서 사용자가 선택한 음원 활성화 시 코드 리펙터링 진행 실전 프로젝트 - 플레이 중인 음원 활성화 (setTimeout X) [ 목적 ] 음원 선택(Asmr.js) → 다른 카테고리로 이동(음원 재생 유지) → Asmr.js로 이동 시 사용자가 선택하여 플레이 중인 음원 활성화 시키는 부분에서 useEffect()를 사용하여 블록 안에 document.getE eundol1113.tistory.com 2. Asmr.js > MixList.js에서 믹스된 음원 클릭 시 playBar 나타나면서 음원 재생이 잘 됨. 문제는 정지 후 같은 음원을 클릭 시 음원은 새로 재생이 되지만, play 아이콘으로 바뀌지 않아서 playBar.js 수정 3. Asmr.js > MixList.js가 모달.. 2022. 1. 17. [실전 프로젝트] 플레이 중인 음원 활성화 (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. 이전 1 2 3 4 5 6 ··· 30 다음 728x90
