SUIN

바닐라 자바스크립트와 리액트 랜더링에 관련해서 기본 공부를 하며 간략하게 정리를 해보았다 어떻게 리액트에서 리 랜더링이 일어나는지 직접 개발자 도구를 통해서 확인하며 비교하며 확인할 수 있었다 [React] Vanilla JS 와 React의 랜더링, 리액트 리랜더링 장점 알아보기 - Vanilla js - 변경으로 인해서 element를 계속 다시 그린다 - React - 변경된 부분만 다시 그린다. 예를 들어보자 Vanilla js 랜덤 숫자 돌려보기 React 랜덤 숫자 돌려보기 Vanilla.js 랜더링 - 버튼 ele.. suinchoi.tistory.com 오후에는 이력서 멘토링이 있었는데 멘토님께 받은 피드 백중 이력서가 너무 링크를 통해서 보여주는 부분들이 많다 라는 이야기를 듣고 피그마로..

- Vanilla js - 변경으로 인해서 element를 계속 다시 그린다 - React - 변경된 부분만 다시 그린다. 예를 들어보자 Vanilla js 랜덤 숫자 돌려보기 React 랜덤 숫자 돌려보기 Vanilla.js 랜더링 - 버튼 element가 새로그려지기 때문에 포커스를 잃게 된다. React 랜더링 - element가 새로 만들어지는 것이 아니라 글자만 계속 변경되고 있다 React 리 랜더링의 장점을 무엇인가 - 여러 개의 element들이 있을 때는 변경점이 있을 때마다 element가 사라졌다가 바뀌게 된다면 다른 element의 배치에 영향을 주게 된다 프런트의 최적화를 위해 Reflow, RePaint에 있어서 React는 이점을 가질 수 있을 것이다 (부모에게서 전파가 되지 ..

명절이 지나가고 이력서 작성을 시작했다. 깃헙 프로젝트 리드미 수정도 함께 정리하며 블로그 연결도 했다!! 지난 3개월동안 항해를 하며 바쁘다는 핑계로 블로그 포스팅을 많이 못 적은 나를 반성했다... 오늘부터 꾸준히 개인 기록을 다시 적어보려한다. 회사 지원하면서도 아직 부족한 부분이 너무 많아서 강의를 계속 들으며 미니 프로젝트를 만들어볼 계획이다. 계속 계속 공부하는 게 아직 너무 재미있어! 아직 할 수 있어!

실전 프로젝트가 시작한 지 이제 4주가 지나갔다 내일이 드디어 1차 배포 예정일로 잡혀 있지만 아직 푸시 알림 서비스를 마무리하지 못했다 이번 주를 되돌아보며 진행했던 내용을 정리해보려고 한다. 1주간의 일정 및 개발 목표 진행 상황 PWA의 Service Worker는 매우 강력하기 때문에 안전한 콘텍스트(HTTPS를 의미)에서만 실행되며 상용하기 전 테스트를 위해서는 HTTPS를 환경에서 테스트를 진행해야 했고 사전 테스트 배포를 위해 클라우드 프런트를 통해 S3배포를 조금 일찍 시작했다 현재 기술적인 스코프들이 많지 않아서 팀원들과 회의 후 asmr 커스텀 음원의 찜하기 기능이 추가로 들어갔다 이후 볼륨 조절의 문제를 해결하려고 찾던 중 ios는 디테일 볼륨 조절을 지원하지 않는다는 공식문서를 통해..

기능 설명 사용자가 알림 팝업창에 팝업 허용 시 파이어 베이스 메시지 알림 요청 보내서 푸시 알림 확인하기 푸시 알림을 구현하기 전에 먼저 GCM , FCM에 관련해서 알아봤다 GCM (Google Cloud Messaging ) 구글에서 제공하는 Server와 Client app 간에 푸시 메시지를 보낼 수 있는 서비스 Android & iOS를 지원 FCM (Firebase Cloud Messaing) GCM의 새 버전이며 Android & iOS & Mobile Web 등의 다양한 플랫폼을 모두 커버할 수 있다고 한다. 앞으로 구글에서는 새로운 기능들을 모두 FCM 쪽에만 추가하고, GCM 에는 추가하지 않을 것이라고 한다. 따라서, GCM 은 결국 FCM의 일부이며 GCM으로 기 구현된 서비스들도..

설명 다이어리 페이지 찜 리스트 목록 리스트에 토글을 눌렀을 때 MixBox안에 음원 정보의 데이터가 나타나며 각 목록의 타이틀 수정과 삭제를 할 수 있어야 한다. 첫 번째 도전! 목록이 각각 선택되었을 때 토글의 state상태를 true, false로 바꿔주면서 MixBox true일 때 MixBox 가 나타나는 코드를 구현했었다 그러니...😭 1개의 리스트를 선택했는데 모든 리스트의 MixBox가 나타나는 현상이 발생되었는데 아마 state상태를 true, false 로만 설정하다 보니 playlist 가 맵핑 과정에서 모든 리스트가 true로 인지해서 MixBox가 나타나는 것이었다 두 번째 도전! 선택했을 때 각각의 리스트를 따로 제어할 수 있을까 고민을 하다가 map함수의 index를 사용해서 ..

와이어프레임만 가지고 개발을 시작하려다 보니 디자인 패턴에 맞게 컴포넌트를 분리하지 못하고 page로 바로 개발이 들어갔었다 디자인 시안이 나온상태가 아니었기 때문에 중복되는 컴포넌트도 다 각자 따로 만들어서 개발을 하고 있었다.. css 또한 styled-components를 설치함에도 불구하고 css 작업을 inline으로 작업해버려 코드 수정하는 것 이아니라 새롭게 페이지 작업이 들어가는 경우가 발생했었다 각자 기능 페이지에 집중에서 작업하다 보니 코드리뷰를 잘하지 못한 게 큰 원인이었던 것 같다 (이것이 코드리뷰의 중요성인건가... ) 팀원 모두 아직 반응형 작업이나 css 부분에 대해서 많이 경험해보지 못해서 기능개발 보다는 css에 시간이 많이 걸리는 경우도 있었다 찜하기 기능이 추가 되었는데..

어김없이 아직까지 다이어리 팝업 페이지를 끝내지 못했다 다이어리 팝업페이지 하나에 CRUD 전체를 다 해야 했고 이모티콘 미리 보기 기능도 함께 들어가 있어서 생각보다 시간이 오래 걸렸다 트러블 슛팅 첫 기획에는 캐릭터 index 순서와 맞게 score 점수도 동일했는데 과하게 충분 보다는 적당이 점수가 저 높아야 할 것 같다는 의견으로 스코어 점수가 변경이 되었다 처음에는 이미지 넘버와 스코어 넘버를 동일하게 사용해서 개발에 들어갔지만 따로 해당 이미지에 스코어 점수를 별도로 적용해줘야 해서 name이라는 값을 스코어로 넣어주었다. db에는 스코어 점수를 보내줘야 하기 때문에 사용자가 선택했을 때 선택된 이미지의 name을 state에 저장해서 데이터를 담는 방법을 생각했다 오늘 한 작업 CRUD에 C..