개발 공부/React 3

220609 [React] WebSocket과 socket.io

포트폴리오 프로젝트 내부에서 채팅 기능에 대한 피드백을 많이 받게되었다.원래는 카카오톡 그룹채팅방으로의 연결을 유도했지만, 사이트 내에서 해당 모임에 참여를 한 사람들만의채팅방이 있었으면 좋겠다는 의견이 있어 이력서를 제출하기 전에 socket 적용에 대해 고민을 해보았다. 먼저 socket이란 라이브러리가 그냥 하나로 있는 줄 알았는데 그게 아니라 개념 정리를 먼저 해본다. WebSocket vs socket.io 웹소켓은 양방향 소통을 위한 프로토콜이다. 반면에, socket.io는 양방햔 통신을 하기위해 웹소켓 기술을 활용하는 라이브러리이다. (마치 자바스크립트와 jQuery의 관계) 그렇기 때문에 socket.io가 같은 기능을 구현하더라도 약간 느리지만, 많은 편의성을 제공한다. 또한 Java,..

개발 공부/React 2022.06.09

220606 [React] 리액트 상태관리와 전역관리의 필요성

상태(state)란 무엇인가? 정의를 여러가지로 찾아보았지만 그중 가장 이해가 되는 정의를 인용해본다. 웹 애플리케이션을 렌더(render)하는데 있어 영향을 미칠 수 있는 값 Plain Javascript Object hold information influences the output of render *리액트 공식문서 중 내용에도 위와 같이 설명한다. (참고 링크) 이 말 전부 다 통용 되지는 않겠지만 리액트를 사용함에 있어서 이해가 잘되는 정의였고, 조금 더 쉽게 풀어쓴다면 페이지가 그려질 때 그려지는 일련의 내용물 정도로 말할 수 있다고 생각한다. 전역관리 사용의 이유? 상태관리에 더 관심을 가지게 된 계기는 팀 프로젝트를 진행함에 있어 props drilling을 직접 경험하게 되었기 때문이다..

개발 공부/React 2022.06.06

220605 [React] 이미지 리사이징 업로드 사이즈 축소 압축 / browser-image-compression

프로젝트를 진행함에 있어 최대 3장까지 이미지 업로드가 가능한 다중 업로드 기능이 있었다. 그러다 보니 고화질의 이미지가 다수 올라가는 경우가 있었는데 이 때 이미지 업로드 속도가 느려지는게 느껴질 정도로 등록하기를 누른 후 유저가 느끼기에 꽤 오랜시간이라고 느껴질 만큼의 시간이 걸렸다. 그래서 유저가 업로드 한 이미지를 축소하는 방법을 검색하였고 라이브러리 중 browser-image-compression가 나와 선택하게 되었다. 1. 설치 yarn add browser-image-compression or npm install browser-image-compression --save 사이트 : https://www.npmjs.com/package/browser-image-compression bro..

개발 공부/React 2022.06.05