SUIN

항해 기간 동안 다양한 프로젝트를 경험하면서 React를 사용해왔지만 왜 리액트를 사용해야 하는지에 대해 기본기가 부족하다고 생각돼서 오늘을 리액트 기초에 대해서 공부를 했다 React element 랜더링 자세히 알아보기 모든 것은 trade-off 리액트가 랜더링을 최적화하지만 알고리즘이 비효율적이거나 최적화되지 않았다면 오히려 더 안 좋을 수 있다. https://ko.reactjs.org/docs/rendering-elements.html 엘리먼트 렌더링 – Re.. suinchoi.tistory.com [React] React DOM 다루기 (JSX 없이 element 그려보기) VanillaJS로 element 생성 React로 element 생성 두 element를 console로 확인해보..

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

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

기능 설명 사용자가 알림 팝업창에 팝업 허용 시 파이어 베이스 메시지 알림 요청 보내서 푸시 알림 확인하기 푸시 알림을 구현하기 전에 먼저 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..

기존의 백엔드 2분이 개인 사정으로 하차하시면서 1분밖에 남지 않아서 요번 주 내내 팀 분위기가 많이 어수선했다 생각보다 기획일정이 늦어져서 개발 일정도 미뤄진 상황이어서 시작부터 고민과 걱정이 많았던 것 같다 며칠 뒤 백엔드 한분이 합류하시면서 우리조는 한줄기 빛이 내려온 느낌이었다 다시 힘차게 시작해보자며 팀원분들과 웃으며 저녁 팀미팅을 끝내고 왔다 아! 그리고 다른조에서 신조어 사전을 만드시는데 오늘 신조어를 하나 알려주셨다 어쩔 티비 ~ 어쩔 냉장고 ~ 어쩔 코딩 ~