SUIN

모든 것은 trade-off 리액트가 랜더링을 최적화하지만 알고리즘이 비효율적이거나 최적화되지 않았다면 오히려 더 안 좋을 수 있다. https://ko.reactjs.org/docs/rendering-elements.html 엘리먼트 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org React element는 불변 객체(immutable)이다 불변 객체란? - 변하지 않는 객체 - 우리는 그저 React.DOM.render로 전달할 뿐 변경 판단 및 반영은 리액트가 한다. - 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다 https://ko.reactjs.org/docs/reconcili..

바닐라 자바스크립트와 리액트 랜더링에 관련해서 기본 공부를 하며 간략하게 정리를 해보았다 어떻게 리액트에서 리 랜더링이 일어나는지 직접 개발자 도구를 통해서 확인하며 비교하며 확인할 수 있었다 [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에 시간이 많이 걸리는 경우도 있었다 찜하기 기능이 추가 되었는데..